Skip to content

Commit

Permalink
tweak typos
Browse files Browse the repository at this point in the history
  • Loading branch information
Bruce Lawson committed Nov 23, 2023
1 parent 9fc93e0 commit aabe09f
Showing 1 changed file with 6 additions and 7 deletions.
13 changes: 6 additions & 7 deletions standards/CSS.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,28 +20,28 @@ Our Headless CMS architecture uses CSS rather than any framework-dependant flavo
- Tutorials and code fragments from the web will Just Work.
- It means our knowledge is portable.
- When new CSS comes to [evergreen browsers](https://css-tricks.com/evergreen-does-not-mean-immediately-available/), we can use it (rather than waiting for a framework to implement it/ allow it).
- We don't add to a build step by requiring some transpilation step
- We don't add to 11ty's fast build process by requiring some transpilation step
- We don't do "CSS-in-JS" which has to be parsed and executed by users' browsers. Therefore we achieve [better performance](/standards/web-performance/).


## Responsive Design

When responsive design first became popular, CSS Media Queries were the only tool we had and it became popular to code to certain breakpoints: desktop, tablet (generally 'latest iPad') and mobile. However, different viewport sizes proliferate.

Andy Bell ran a 48 hour test and found over 120,000 datapoints with over 2,300 unique viewport sizes, concluding that [the ideal viewport doesn't exist](https://viewports.fyi) and therefore that a catch-all set of 'breakpoints' can't exist.
Andy Bell ran a 48 hour test and found over 120,000 datapoints with over 2,300 unique viewport sizes, concluding that [the ideal viewport doesn't exist](https://viewports.fyi) and therefore that a catch-all set of breakpoints can't exist.

Luckily, new CSS layout methods are universally supported by evergreen browsers, the most useful of which is CSS Grid, so now we can (largely) dispense with hardcoded media queries and allow Grid to fluidly resize according to the content.
Luckily, new CSS layout methods are universally supported by evergreen browsers, the most useful of which is CSS Grid, so now we can (largely) dispense with hardcoded 'magic numbers' and allow Grid to fluidly resize according to the content.

Some useful links:

- [Create a responsive grid layout](https://piccalil.li/tutorial/create-a-responsive-grid-layout-with-no-media-queries-using-css-grid/) - "Even with no media-queries, we can create a flexible and powerful responsive layout". Andy Bell, with stealable code.

- [Responsive CSS Layout Grids without Media Queries](https://www.sitepoint.com/responsive-css-layout-grids-without-media-queries/) - tutorial by Stephanie Eckles with lots of examples.

- [An Interactive Guide to CSS Grid](https://www.joshwcomeau.com/css/interactive-guide-to-grid/) - by Josh Comeau.
- [An Interactive Guide to CSS Grid](https://www.joshwcomeau.com/css/interactive-guide-to-grid/) - by Josh Comeau.

- [Grid by Example](https://gridbyexample.com) -
Everything you need to learn CSS Grid Layout, by Rachel Andrew who helped write the spec. With Copy and paste code for numerous different layouts.
- [Grid by Example](https://gridbyexample.com) -
Everything you need to learn CSS Grid Layout, by Rachel Andrew who helped write the spec. With copy and paste code for numerous popular layouts.

- [SmolCSS](https://smolcss.dev) - "borrowable" minimal snippets for modern CSS layouts and components, by Stephanie Eckles.

Expand All @@ -52,4 +52,3 @@ Everything you need to learn CSS Grid Layout, by Rachel Andrew who helped write

- [CSS Master](https://www.sitepoint.com/premium/books/css-master-3rd-edition/) by Tiffany Brown. A real PDF book (as in Printed on Dead Foliage, that you can hold in your hand, or an ebook).
- [Every Layout](https://every-layout.dev) - an online course by Andy Bell and Heydon Pickering. "Through a series of simple, composable layouts, Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS… Employing algorithmic layout design means doing away with @media breakpoints, “magic numbers”, and other hacks, to create context-independent layout components."

0 comments on commit aabe09f

Please sign in to comment.