what's on our mind.

CSS Grids

Posted @ 12:44 pm by Grady Kuhnline | Category: Technology, Web Development Process | 0 Comments

Grids are a useful design tool that divide the page up into equally spaced vertical columns. The consistent horizontal spacing and vertical alignment creates a visually organized looking design that is easier to understand. There are some great resources about designing with grids and using CSS to create grids all over the web.

Because of the structured nature of a grid-based design, it becomes possible to use a CSS grid to easily style the HTML. Using a CSS grid can greatly increase productivity however, column widths are commonly applied by adding specialized class names to the HTML markup to specify the number of grid columns that should be spanned. To combat these types of problems, SolutionSet has started using tools like Sass and Compass to aid in CSS development. Sass is a  meta-language on top of CSS that allows for better stylesheet organization and reuse, and Compass is a collection of useful extensions to Sass. Using the concepts of variables and mixins it becomes easy to implement a grid system using only CSS and avoiding the column widths directly in the markup as special class names.

To read more about using a simple CSS grid system and integrating it with tools like Sass and Compass to make them easier to implement with less markup, read the full article: 1KB Grid System and Sass.

Leave a reply