5 reasons I love SASS – The Future of CSS and Stylesheets

My introduction to SASS (Syntactically Awesome Stylesheets) started with the Mobify platform, where I was introduced to SASS, Kaffeine, Dust JS and Git in mass amounts. At first, I was reluctant to use SASS – it just seemed like more work and a heck of a lot of setup. I was also confused about the whole pre-processor and how that would work with a webserver, etc. For the mobify projects, SASS is built right into the workflow – as you code your files, Compass watches those folders and compiles the SASS files down into CSS files, its Magical!
Read more

CSS Grid Frameworks – The What/When/Why/How

CSS Grid Frameworks such as Blueprint and 960 Grid System have been getting more popular. I recently download a wordpress theme that was built with 960gs and I was delighted with how easy it was to use. I’ve always been a huge fan of building my own css, but being organized and separating the stylesheets by text, layout, forms, etc. I have looked at some other frameworks, but these two seem like the only ones I would use because of their simplicity and the community around them.

Why should I use a framework?
Do you feel like you spend a good amount of time designing, then an equal amount of time coding those designs? With frameworks, you can cut your coding time down by half. Why half? With a framework, you can knock out the basic layout using a grid system which is cross-browser compatible (ie6, ie7, FF, Safari, Chrome) and then focus on your custom style sheet.

How to use a framework?
The first time I used Blueprint, I started using it after I had designed my page – I was essentially retro-fitting Blueprint to my design. I would not recommend using Blueprint in this way, I felt restricted and was annoyed with Blueprint. I ended up making it work, but wasn’t ultimately happy. The best way to use a framework is from the beginning, before you start designing setup your grid – it makes a world of difference! Blueprint has some great resources for setting up grids for use in Photoshop and Illustrator.

When to use a framework?
Anytime! I have been using the 960gs framework for landing pages because of its small footprint (3.6kb) and quick ability to get up and running. I love the confidence of knowing the layout will work cross-browser, so it allows me to get my designs up and running fast (very important! in web).

Stay tuned for a more in-depth look at both of these frameworks and a redesign of this blog using Blueprint!

Beautiful Cascading Stylesheets

One issue, that Im sure everyone encounters is how to correctly layout your website with CSS. Should I call the top part of my site, #header or #header-top, or #top-of-the-page-header. There are so many choices, but the real aim here is to keep your naming structure semantic by creating structure with re-usable names. For example, CSS Zen Garden is a great example of how to structure your XHTML so it can be re-used with many different designs.

Instead of creating ids or classes like, lefttop-red-text – its much better to create one that actually describes to function and structure of that element like #related-news or #top-stories. More descriptive classes could be named #important-text or #error-text. Its always for good measure to use the common h1,h2,h3, etc. tags to describe level heading and just change the style of them.

  • Never use layout descriptives in class names. Rather, use functional names for your classes, avoid words that describe how they look or where they are located on the page. “mainnavigation” is better than “leftnavigation”. Use “.copyright” and “.pullquote” instead of “smallgrey” or “indentitalic”. Name classes/IDs based on function, not appearance. If you create a .smallblue class, and later get a request to change the text to large and red, the class stops making any form of sense.
  • Reuse the same class name in different places, this is the beauty of stylesheets. One stylesheet for all!
  • Put your classname on the outer-most element. The child elements can be targeted with the parent elements classname or ID.

    Some other online resources:What\’s in a name?
    Good Class NamesCSS Naming Standards

CSS Naming Standards

One issue, that Im sure everyone encounters is how to correctly layout your website with CSS. Should I call the top part of my site, #header or #header-top, or #top-of-the-page-header. There are so many choices, but the real aim here is to keep your naming structure semantic by creating structure with re-usable names. For example, CSS Zen Garden is a great example of how to structure your XHTML so it can be re-used with many different designs. Instead of creating ids or classes like, lefttop-red-text – its much better to create one that actually describes to function and structure of that element like #related-news or #top-stories. More descriptive classes could be named #important-text or #error-text. Its always for good measure to use the common h1,h2,h3, etc. tags to describe level heading and just change the style of them.

  • Never use layout descriptives in class names. Rather, use functional names for your classes, avoid words that describe how they look or where they are located on the page. #mainnavigation is better than #leftnavigation. Use #.copyright and #.pullquote instead of #smallgrey or #indentitalic. Name classes/IDs based on function, not appearance. If you create a .smallblue class, and later get a request to change the text to large and red, the class stops making any form of sense.
  • Reuse the same class name in different places, this is the beauty of stylesheets. One stylesheet for all!
  • Put your classname on the outer-most element. The child elements can be targeted with the parent elements classname or ID. Some other online resources:
    What\’s in a name?
    Good Class Names