Advertisement
HTML/CSS

SASS and Compass for Web Designers: Grids and Sprites

by

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.


Grids and Sprites

Alternatively Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube!


Useful resources

Related Posts
  • Web Design
    HTML/CSS
    Why I Choose Stylus (And You Should Too)Stylus thumb
    The world of front end web development has been steadily increasing its uptake of what we call "CSS Preprocessors", which extend the functionality of regular CSS. Arguably the two most well known, with the greatest user base, are LESS and Sass/SCSS. However there is a third preprocessor that hasn't received quite as much attention, and that's Stylus.Read More…
  • Web Design
    Applications and Tools
    Working With Gumby's Parallax ExtensionGumby parallax retina
    Having covered how to install the Gumby framework and how to work with its semantic grids (plus Sass and Compass), it's now time to dive into some of Gumby's extensions. The first extension we're going to play with is the parallax module.Read More…
  • Web Design
    Applications and Tools
    Building Semantic Grids With GumbyGumby semantic retina
    In this tutorial we're going to build ourselves clean, readable markup with the help of Gumby's semantic grid structure. We'll continue working with the example we started in the previous lesson, getting rid of as much unnecessary mess from our code as possible, plus we'll be using Sass to speed things up.Read More…
  • Web Design
    HTML/CSS
    Foundation's Sassy Styles ExplainedFoundation sass retina1
    In this tutorial we'll cover what can be done with the flexible Sass styles included in the Foundation framework. A lot of these offer a more customisable feature set than that of the CSS version, plus there are shortcuts which can be used to style items such as the top bar quickly and easily.Read More…
  • Web Design
    HTML/CSS
    Introducing Gumby: An Alternative CSS FrameworkGumby intro retina
    Let me introduce you to Gumby; a flexible CSS framework, currently at version 2.5. Gumby is packed with useful features, which we'll examine throughout the course of a few screencast tutorials. We'll begin by exploring its straightforward CSS variant, the UI kit, the grid, a host of other tricks, then in later videos we'll take a look at Gumby's Sass version.Read More…
  • Web Design
    HTML/CSS
    CSS Sprite Sheets: Best Practices, Tools and Helpful ApplicationsPrev
    Using CSS sprites, instead of a collection of smaller individual images, will improve your web pages' performance and keep things more organized. Let's take a look at some best practices and some helpful tools for your sprite-making workflow.Read More…