CSS Grid Gotchas And Stumbling Blocks
In March this year, CSS Grid shipped into production versions of Chrome, Firefox and Safari within weeks of each other. It has been great to see how excited people are about finally being able to use it to solve real problems.
CSS Grid is such a different way of approaching layout that there are a number of common questions I am asked as people start to use the specification. This article aims to answer some of those, and will be one in a series of articles on Smashing Magazine about layouts.
When Tim Berners-Lee announced HTML in 1991 there was no method of styling pages. How a given HTML tag was rendered was determined by the browser, often with significant input from the user’s preferences. To many, it seemed like a good idea to create a standard way for pages to ‘suggest’ how they might prefer to be rendered stylistically.
- Carl Alexander – The Man in the Middle: Designing a class to generate HTML content in WordPress
- WordPress – locate_template
- Pure – A set of small, responsive CSS modules that you can use in every web project.
- Maybe a good enough reason to switch to SASS “Fluid Responsive Typography With CSS Poly Fluid Sizing“
- Anything from Lea Verou is worth looking at: Mavo – A new, approachable way to create Web applications
- The 29 Most Common Social Media Rules: Which Ones Are Real? Which Ones Are Breakable?
- Otto on WordPress (February 28, 2012): Internationalization: You’re probably doing it wrong
- Email on Acid (March 6, 2017): The Basics of Email Design
- Remove unused styles from CSS
I’m big on modular design. I’ve long been sold on dividing websites into components, not pages, and amalgamating those components dynamically into interfaces. Flexibility, efficiency and maintainability abound.
But I don’t want my design to look like it’s made out of unrelated things. I’m making an interface, not a surrealist photomontage.
As luck would have it, there is already a technology, called CSS, which is designed specifically to solve this problem. Using CSS, I can propagate styles that cross the borders of my HTML components, ensuring a consistent design with minimal effort. This is largely thanks to two key CSS features:
inheritance, the cascade (the “C” in CSS).
The BBC Sport article also talks about BEM which I’ve never really embraced but this might help me along.
Update: 06/21/16 Also found this book titled “Scalable and Modular Architecture for CSS” which serves as a good intro with some examples.