Advertisement

SASS and Compass for Web Designers

6 Posts

Sass and Compass provide a huge amount of convenience, speeding up front-end development and doing so whilst offering a relatively gentle learning curve. During the course of this screencast series, we'll take a PSD web design, converting into a set of functional web pages for the browser, all the while using Sass and Compass to speed things along.

Posts in this series
  • Web Design
    HTML/CSS
    SASS and Compass for Web Designers: IntroductionPreview
    Welcome to the first in a series of screencasts about SASS and Compass for web designers. We (designers) favor graphic user interfaces, and are sometimes intimidated by the command line, so let's begin by looking at three friendly applications to get you started with SASS and Compass.Read More…
  • Web Design
    HTML/CSS
    SASS and Compass for Web Designers: Building a ThemePreview
    We're going to continue our look at SASS and Compass, this time preparing ourselves for a complete website template build. During the coming screencasts we'll use a popular Themeforest .psd design, translating it into an HTML/CSS project with our new found SASS and Compass skills. There's lots to do, so let's get going!Read More…
  • Web Design
    HTML/CSS
    SASS and Compass for Web Designers: Grids and SpritesPreview
    Let's dive deeper into building the popular Themeforest .psd design we've been working on. During this screencast we'll be looking at grids in SASS, and we'll also use one of my favorite features in Compass; automatic sprite generation.Read More…
  • Web Design
    HTML/CSS
    SASS and Compass for Web Designers: The HeaderPreview
    We're going to continue building our Creative Portfolio web page with SASS and Compass. On this occasion, we'll turn our attention to the header area, the primary navigation and some featured images.Read More…
  • Web Design
    HTML/CSS
    SASS and Compass for Web Designers: The SliderPreview
    Our Creative Portfolio web page is certainly coming along nicely. Let's now continue using SASS and Compass to build the introduction area and slider.Read More…
  • Web Design
    HTML/CSS
    SASS and Compass for Web Designers: Finishing OffPreview
    The end is in sight! Our Creative Portfolio web page is almost finished. In these final two screencasts we'll look at cleaning up our SCSS file structure, styling the newsletter subscription form and the footer.Read More…