CategoryLayouts

April 9, 2018 — (This article is kindly sponsored by CoffeeCup Software.) If you’re at all serious about web design or development, you need to be serious about learning and using CSS Grid, too. Andrew Clarke explains how. Read more…

March 29, 2018 — CSS Logical Properties and Values aren’t quite ready to be used yet, however learning about them can help you to understand CSS Layout, and the interaction with Writing Modes. Read more…

February 22, 2018 — Ever wondered how achieve styling of empty grid cells without adding redundant empty elements? Well, CSS Generated Content can help you do just that. Read more…

February 5, 2018 — This article will take a look at the use of media queries for responsive design today, how they work alongside Flexbox and Grid Layout, and also have a look at what is coming in the future. Read more…

January 16, 2018 — When starting to use Flexbox and Grid, it can be frustrating to find that we sometimes don’t get the layout we expect. Often this is due to the way sizing is calculated in these new layout methods. In this article, I try to explain exactly how big that box is, and how it got to be that size! Read more…

December 11, 2017 — You might never have heard the phrase ‘Block Formatting Context’, but if you have used CSS for layout you probably already know what it does. In this article I’ll explain the existing ways to create a Block Formatting Context, why it is important in CSS layout, and show you a new method of creating one. Read more…

November 16, 2017 — When using any new CSS, the question of browser support has to be addressed. This is even more of a consideration when new CSS is used for layout as with Flexbox and CSS Grid, rather than things we might consider an enhancement. Read more…

June 16, 2017 — Industries often experience evolution less as slow and steady progress than as revolutionary shifts in modality that change best practices and methodologies seemingly overnight. This is most definitely true for front-end web development. Our industry thrives on constant, aggressive development, and new technologies emerge on a regular basis that change the way we do things in fundamental ways. Read more…

March 23, 2017 — In the world of web design, we tend to become preoccupied with the here and now. In “Resilient Web Design”, Jeremy Keith emphasizes the importance of learning from the past in order to better prepare ourselves for the future. So, perhaps we should stop and think more beyond our present moment? The following is an excerpt from Jeremy’s web book. Read more…

December 14, 2015 — Flexbox has become one of the most popular tools for creating website layouts. Susy is another layout tool that has gained popularity with the Sass community over the last few years. Many developers I’ve spoken with are unsure which tool is best for creating layouts for their websites. Some feel that flexbox is powerful enough to handle all of their layout problems. However, they are unsure whether to learn it because of its confusing syntax. Others feel that Susy is much simpler and prefer its simplicity to flexbox. Read more…