This articles provides an introduction to grids, responsive design, and CSS frameworks.
Grids are a fundamental part of design that makes your life a lot easier. The second part of the article will talk about responsive design: or, how web sites adapt (or respond) to different sizes of screens. The web designer and developer have to plan and decide how the site responds, and then implement the code to make it happen. And that’s where CSS frameworks come into play, which we will cover in the third part of the video. CSS frameworks are freely available sets of code that other, very experienced developers, have created for us to reuse in order to implement a quality responsive design. In other words, you don’t have to reinvent the wheel. But there’s still a lot of thought that goes into using a CSS framework. In the course, we’ll focus on the most popular CSS framework: Bootstrap. This post you’re now reading provides a context for understanding why we’re using Bootstrap.
Why grids for design layout?
A bit of graphic design history is in order. Utilizing a grid is one of the best steps you can make to improve your layout. That’s common knowledge among designers. But everyone has to learn about grids at some point.
Grids provide a consistent structure for organizing and aligning content. Don’t be misled into thinking that a grid implies everything is just boring rows and columns like a spreadsheet. The grid is a concept for organizing content. A grid actually offers a large variety of layout possibilities, even possibilities that don’t at first even appear to be a grid.
For learning more about grids, particularly in print design, I highly recommend Thinking with Type.
What is a grid?
In some ways, all of us have been learning to compose with a grid since elementary school. Remember that lined paper on which you first learned to write, or perhaps that you even write on today (if you still write by pen and paper). Each of those horizontal lines represent a row that helps you keep the content aligned neatly.
Designers, though, tend to use columns mostly. Think of a newspaper layout. Perhaps some of you have never actually read a print newspaper. But think about how columns divide a page into vertical parts.
Combine rows and columns and you have a true grid where items can occupy multiple blocks either horizontally and/or vertically. You also can have grids within grids.
Grids have been a consistent element of layout since long before even the early days of the printing press, and before the age of illuminated manuscripts. In the early 20th century, advances in printing led to new types of publications.
“Modern man has found in illustrated newspapers and magazines a new source of delight.”
The New Typography (1928), Jan Tschichold
If illustrated newspapers and magazines formed new sources of delight for the early 20th century, then the Web with its colorful, interactive, motion-driven apps has surpassed every expectation and promises to keep evolving into even more delightful (and, perhaps, frightening) experiences.
Jan Tschichold emerged as one of the foremost thinkers to ever impact the design of print publications. He argued that “the enormous importance of magazines today requires us to give them the most careful attention. Since today more magazines are read than books, and much more important matter appears only in magazines, there are many new problems, of which the most important is how to find a contemporary style for their production.”
In describing the thoughtful placement blocks of text and images Tschichold stated an approach:
Constructive, meaningful, and economical (= beautiful)
Jan Tschichold
Nearly 40 years after Tschichold articulation of what constitutes a beautiful layout, Josef Muller-Brockmann produced a series of definitive guides that provided detailed instructions for grids. Out of that came the landmark work Grid Systems, which is essential reading for anyone involved in working with grids.
Responsive design
When the web started gaining popularity back in the 1990s, computer monitors were more or less the same size. But as smart phones, then tablets, came out in the 200s, web design got a lot more difficult. Developers had to account for devices with different size screens. The complexity of design and development for mobile devices required many modifications to the code, which allowed for sites to look good on every device. Honestly, it was a painful period in web development as it required knowledge of many obscure techniques in CSS. Code became clunky and more difficult to maintain.
Fortunately, developers started sharing bits of their code on the Internet. That eventually led to the emergence of CSS frameworks: systematic collections of CSS code that can be freely reused for improving web development.
The landmark article Responsive Web Design by Ethan Marcotte (2010) identified the initial techniques for adapting web sites to different devices. The term “responsive design” became adopted to describe that process. While the technical aspect of Marcotte’s article are now dated, the concept remains the same.
CSS frameworks = responsive design + grids + web design
By this point in the course, students have gained some experience in creating HTML files and working with CSS. They’ve probably noticed that a lot of aspects are repeated over and over again when starting to develop a site. Years ago, before frameworks, us developers would have some base code that we would copy over when starting a new web project. The first framework that I started using a lot was YAML CSS. (You don’t need to bother with that, I am just noting if as a reference for my own historical work.) I also used the 960 grid system. That approach made a lot of sense to me. And, of course, I often would build sites out of WordPress and theming, but that’s a topic for another course.
Have you noticed that a lot of websites look similar or have similar features? That’s likely because they’re using a template or a framework like Bootstrap.
CSS frameworks significantly changed the way I do front-end web development. There was a time when I mostly used Zurb Foundation for most of my own work, but I switched over to Bootstrap since it’s easier for students to learn. Since these students have extremely limited design skills (at this point), Bootstrap enables them to create an attractive site with a the wider range of built-in styles that comes with Bootstrap. (And I switched to Bootstrap because I felt that I should be using the same framework that I taught.)
Of course, part of my former preference for Foundation was that I wanted the built-in styles to get out of my way. I needed the framework to handle some of the heavy lifting of the layout that I prefer not to bother with myself. But, now I’m mostly use Bootstrap but do know that there are other options out there. A very popular CSS framework is TailwindCSS. And, increasingly, many developers are not using a CSS framework at all but using the CSS grid capabilities built into the Web standards. But I feel like that the native CSS grid is a bit complex for students new to web design. So, for this class, don’t worry about anything other than Bootstrap.
Next, we’ll take a close look at actually how to implement Bootstrap in your code. You’re going to be pleasantly surprised at the difference it makes.