Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
expert-css
Repositório contendo materiais de estudo de CSS avançado
https://github.com/Allyhere/expert-css
- Understanding Layout Algorithms
- You Don’t Need A UI Framework
- Chasing the Pixel-Perfect Dream
- The State Of Pixel Perfection
- Every Layout - Rudiments
- Mobile-First CSS: Is It Time for a Rethink?
- The Guide To Responsive Design In 2023 and Beyond
- Conditional CSS
- Inside the mind of a frontend developer: Article layout
- Tweaking In The Browser
- Defensive CSS
- The State Of Mobile First and Desktop First
- Critical CSS? Not So Fast!
- CSS: A New Kind Of JavaScript
- A Whole Cascade of Layers (the path to SBRDFLT)
- CUBECSS
- Smashing Podcast Episode 36 With Miriam Suzanne: What Is The Future Of CSS? (transcrição)
- Modern alternatives to BEM
- Why is CSS so Weird? (video)
- Everything You Know About the Web Just Changed (video)
- Advanced Layout Patterns
- Don't use flexbox for overall page layout
- An Interactive Guide to Flexbox
- Full-Bleed Layout Using CSS Grid
- Practical CSS Grid: Adding Grid to an Existing Design
- The Story of CSS Grid, from Its Creators
- Grid for layout, Flexbox for components
- Laying out Forms using Subgrid
- Learn CSS Subgrid
- Using Position Sticky With CSS Grid
- Create a split, faux-container layout with CSS Grid and Flexbox
- The new responsive: Web design in a component-driven world
- min(), max() e clamp(): três funções CSS lógicas para usar hoje
- Modern CSS Solutions
- Style Stage
- Contextual Callouts with CSS Grid
- The Flexbox Holy Albatross
- The Flexbox Holy Albatross: Reincarnated
- Tetris And The Power Of CSS
- Faster Layouts with CSS Grid (video)
- Subgrid for Better Card Layouts (video)
- Designing With Grid (video)
- CSS Grid Basics playlist (video)
- (Layout) Core Concepts
- Designing Intrinsic Layouts (video)
- Modern Layouts: Getting Out of Our Ruts” by Jen Simmons (video)
- Especificidade - has-parent-selector/) e [:where()](https://developer.mozilla.org/en-US/docs/Web/CSS/:where) e tecnologias como [Cascade Layers](https://ishadeed.com/article/cascade-layers/) são grandes avanços no controle da especificidade, principalmente em grande escala, mas o conhecimento do coneito básico de como o navegador calcula a precedência de CSS ainda se faz necessária pra usufruir de todo o poder dessas ferramentas.
- The CSS Cascade
- CSS specificity and the cascade
- Specifishity
- Tailwind - props.style/) é um framework construído inteiramente de variáveis CSS.
- Global and Component Style Settings with CSS Variables
- CSS Custom Properties In The Cascade
- Using Custom Property “Stacks” to Tame the Cascade
- Unlocking the Benefits of CSS Variables
- CSS Variables for React Devs
- The Power of Composition with CSS Variables
- Composing the Uncomposable with CSS Variables
- 10 powerful ways to use CSS variables
- Component Variants with Scoped CSS Variables
- Unlocking the Benefits of CSS Variables
- Live Theming with CSS Variables
- Adam Argyle
- Lights and Shadows
- Unlocking Colors
- Calculating Color: Dynamic Color Theming with Pure CSS
- A color-contrast() strategy for complimentary translucent backgrounds
- Gradient hue interpolation
- LCH Luminance vs HSL Lightness
- Improving Color on the Web
- Fluid typography with CSS clamp
- Pixels vs. Relative Units in CSS: why it’s still a big deal
- Font Hacking
- Customizing Color Fonts on the Web
- evergreen - platform-tests/interop/blob/main/2023/README.md#focus-areas), é uma tecnologia que logo logo poderá ser massivamente adotada, mesmo apenas como melhoria contínua.
- Component-level art direction with CSS Container Queries
- Next Gen CSS: @container
- CSS container queries are finally here
- CSS Style Queries
- A Primer On CSS Container Queries
- preset-env do PostCSS - cascade-layers) pra ser utilizada em projetos pessoais com alguma parcimônia. Sobre o tópico recomendo seguir a [Miriam Suzanne](https://twitter.com/TerribleMia), membra do CSSWG e do SassCSS.
- A Complete Guide to CSS Cascade Layers
- Making Sense of CSS Layers and Scope (video)
- Logical Properties Level 1 - logical-props) e deixará o seu layout extremamente resiliente de forma internacional.
- Digging Into CSS Logical Properties
- CSS Logical Properties
- Core Web Vitals - rendering-path/). Nesse último tópico, a Google tem um [nanodegree gratuito sobre o assunto ministrado por Ilya Grigorik e Cameron Pittman](https://www.udacity.com/course/website-performance-optimization--ud884).
- CSS para Web Vitals
- Extraia CSS crítico
- Defer non-critical CSS
- How to remove unused CSS from a site
- Speedy CSS Tips do Jhey Thompkins
- Cubic Bézier: from math to motion
- What does 100% mean in CSS?
- The master guide to smooth, realistic shadows in CSS
- Relative sizing with EM units
- Dark Mode by Local Sunlight
- Advanced CSS-Only HTML Form Styling
- What’s the Deal with Margin Collapse?
- Better Typography with Font Variants
- CSS Nesting
- Thinking About The Cut-Out Effect: CSS or SVG?
- CSSStats - Audit de CSS que mostra um dashboard com suas regras, seletores e um score de especificidade.
- Yellow Lab Tools - Faz audit de performance da sua página, mas possui informações bem bacanas de performance CSS, dando uma nota pra complexidade e code smells de CSS do seu site.
- Project Wallace - De todas que já vi é a ferramenta de audit mais completa, mostra as at-rules, seletores, nível de complexidade, valores, tudo em um dashboard muito bonito e organizado.
- The CSS Podcast - Jamais pensei que pudesse aprender tanto CSS apenas ouvindo. Disponível também nas principais plataformas de streaming de áudio.
- Life of a Pixel (vídeo) - Documentário importantíssimo sobre o que acontece na engine do navegador pra um píxel renderizar na tela. Ministrado pela [Chrome University](https://www.youtube.com/playlist?list=PLNYkxOF6rcICgS7eFJrGDhMBwWtdTgzpx).
- Aprenda CSS - Um curso de CSS muito completo desenvolvido pela Google.
- Component Patterns - Lista de padrões de desenvolvimento de componentes e temas criada pelo Adam Argyle. Todos os exemplos possuem repositório e vídeo. Você pode também acessar a [playlist com apenas os vídeos](https://www.youtube.com/watch?v=MR7dClW6iBg&list=PLNYkxOF6rcIAaV1wwI9540OC_3XoIzMjQ&ab_channel=GoogleChromeDevelopers).
- DevTools Tips (video) - Chrome é meu navegador favorito e nessa playlist a Jecelyn Yeen ensina tudo o que você precisa saber pra extrair o melhor dele.
- Design in the Browser (video) - Nessa playlist a Una Kravets ensina, entre outras coisas, uma série de ferramentas e práticas de layout com CSS.