PostCSS Ant #431
Replies: 21 comments
-
|
Conhece esse @Mendrone? |
Beta Was this translation helpful? Give feedback.
-
|
Estava lendo esse artigo do @neysimoes e ele usa o Rupture e o Lost Grid. Mas o Rupture tambem não é pra trabalhar com ranges, e responsividade? Na teoria não da para fazer todo o responsivo com ele? Eu so trampei em 3 projetos em produção com pre-processadores CSS , e tudo em SASS, queria entender se vale a pena pegar um repositorio que está em css puro e passar pra Stylus.. O PostCSS que usamos aqui, apenas o Css Nano e o Rucksack, vi que tem plugins de preprocessador também... qual a vantagem de integrar um stylus comparado aos plugins que o PostCss tem ? Ex: http://postcss.parts/tag/sass Vamos refatorar o código aqui na Printi, e isso não vai ser uma decisão final minha, Mas queria fazer em Stylus.. Mas isso depende da equipe como um todo.. Pessoal aqui é mais acostumado com LESS,mas não tem problemas em aprender ferramentas novas.. |
Beta Was this translation helpful? Give feedback.
-
|
Pelo que já li sobre a uma grande diferença entre Rupture e Lost Grid. Rupture você cria suas Media Queries e trabalha com elas de uma forma mais simples do que escrever toda a declaração que o CSS CSS ou Pre-processador necessita. Lost Grid é um Grid mesmo e não tem a parte de Media Queries, sem o Rupture você tem que escrever as media queries da forma padrão do CSS ou Pre-processador. Se eu tiver falado algo de errado me corrijam! |
Beta Was this translation helpful? Give feedback.
-
|
Esse video é bem legal. Me explicou bem o que precisava ver sobre o Lost... |
Beta Was this translation helpful? Give feedback.
-
|
E Aqui parece que ensina bem como usar o Ant. Se conseguir implementar aqui na Printi, escrevo um artigo |
Beta Was this translation helpful? Give feedback.
-
|
O @neysimoes, @Mendrone e eu temos o workflow bastante parecido. Descobri o Rupture com o @Mendrone e depois não larguei mais. |
Beta Was this translation helpful? Give feedback.
-
|
@lfeh Mas vocês usam em conjunto com o Grid é isso? No video que linkei em cima, ele usa o Lost com media-queries |
Beta Was this translation helpful? Give feedback.
-
|
Isso! Usavámos com o Jeet e depois migramos para o Lost. Eu sou assim, copio tudo que o @Mendrone faz 😍 |
Beta Was this translation helpful? Give feedback.
-
|
qual melhor forma de organizar um css? Aqui temos um mobile.css pra menos de 768px que só abre em dispositivos mobile o certo seria reconhecer device por device via server-side e renderizar o codigo especifico so praquele device? |
Beta Was this translation helpful? Give feedback.
-
|
Vi um pessoal que coloca as mediaqueries dentro de css tipo: --pages ai nele, só os de desktop, e os responsivos vão em css das media queries e no mobile.css ex: Qual a melhor forma de organização?? Colocar as media queries já dentro do account, e colocar os css de account (vi um plugin de post-css que junta todas mediaqueries que ele acha nos css e coloca no final) responsivos ali, Dessa forma, aqui está funcionando, só não sei se é a melhor. |
Beta Was this translation helpful? Give feedback.
-
|
Uso Media Queries componentizadas já faz alguns anos. Acho que é o que faz mais sentido. Da uma olhada no link 👊 |
Beta Was this translation helpful? Give feedback.
-
|
@lfeh Beleza para organização de código parece uma forma melhor mesmo. Mas e performance? Porque voce tem vai um final.min.css , com todas as mediaqueries e código e etc. Não seria melhor abrir o arquivo tablet.css , mobile.css, só nos respectivos devices? Do que abrir códigos especificos para outros devices, em um device que nem vai ler? |
Beta Was this translation helpful? Give feedback.
-
|
Nesse caso é necessário usar alguma solução no task-runner ou em PostCSS para concatenar os MediaQueries. Olha lá no fim do arquivo, falo justamente sobre isso. |
Beta Was this translation helpful? Give feedback.
-
|
Nesse plugin consigo separar as mediaqueries por device? ex : 768-1024 = tablet.css |
Beta Was this translation helpful? Give feedback.
-
|
Ele simplesmente concatena tudo e joga no final. Se você separar os arquivos dessa forma, estará fazendo requisições extras no servidor. |
Beta Was this translation helpful? Give feedback.
-
|
então pra perfomance tanto faz se um desktop abre css de mobile, que ele nem vai ler, como um mobile abrir css de tablet? |
Beta Was this translation helpful? Give feedback.
-
|
Exatamente. Ele vai carregar o CSS todo, mas vai ler somente o que está fora do Media Querie e dentro dos breakpoints especificos. |
Beta Was this translation helpful? Give feedback.
-
|
Nunca tinha ouvido falar desse PostCSS Ant mas.. Cory Simmons é o cara então deve ser foda. Rupture e Lost são só amor! Mas sim, usamos um como um complemento do outro, Rupture facilita e organiza nossos media queries enquanto o Lost elimina o trabalho de se criar uma grid do zero. Escrevi um artigo sobre o Rupture a um tempo atrás: http://imasters.com.br/front-end/css/rupture-css-breakpoints-simplificados/?trace=1519021197 Passei um tempinho usando SASS aqui na RV mas já adotamos o Stylus/Lost/Rupture/Rucksack em algumas coisas. @lfeh Tu devia se juntar a mim e ao Milsão da massa aqui na RV :p ❤️ |
Beta Was this translation helpful? Give feedback.
-
|
@rubenmarcus Depois os 3 migramos para o Lost-Grid por ser muito mais completo. 👍 Vale MUITO a pena usar Stylus com PostCSS, pois o Stylus tem muitas coisas nativas e úteis que você vai acabar usando. O PostCSS é interessante para adicionar mais features na sua stack CSS, algumas coisas que o Stylus não tem. Vale a pena sim migrar um projeto feito com CSS puro para um pré-processador (recomendo stylus pq é o melhor de todos). Você ganha um poder muito grande e seu código se torna mais fácil de organizar e manter. |
Beta Was this translation helpful? Give feedback.
-
|
Falando nisso acho que o @lfeh não sabe, mas eu uso as mediqueries componentizadas dele. Recomendo muito! |
Beta Was this translation helpful? Give feedback.
-
|
Para quem se interessar, as media queries que o @neysimoes está se referindo, são essas |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Opa ,beleza? Estamos pensando em refatorar o código da Printi aqui, e estudando usar uma grid para o responsivo, entre as opções estamos avaliando o Jeet e o Lost, mas fuçando no repositório do criador do Lost, esse PostCSS Ant, parece muito bom.
Alguém já usou em produção? Tem algum comentário sobre ele, ou algum comparativo com outras grids?
Em termos de dificuldade de implementação e curva de aprendizado?
Obrigado.
Beta Was this translation helpful? Give feedback.
All reactions