Skeleton SASS

"A SASS, SCSS, & Compass translation of Dave Gamache's Skeleton responsive CSS grid that has been SASSified to make it even more awesome."— Dennis Thompson (Skeleton SASS Creator)

View Demo Download .zip Download .tar.gz View on GitHub

Skeleton SASS

Skeleton SASS is a SASSification of Dave Gamache's Skeleton CSS responsive front-end framework

Features

  1. SASSified Skeleton CSS Framework
  2. Dependence on three files
  3. Separation of variables, functions, and mixins to keep code DRY
  4. Choose your favorite syntax
    • .sass indented-style syntax
    • Compass optional available, uses compass/css3 library only
    • .scss "sassy css" syntax (with and without Compass)
    • Compass optional available, uses compass/css3` library only

How to Use

Using Skeleton SASS is very easy and consists of you running a few terminal commands or by using a GUI-based application.

Skeleton SASS is separated into four different flavors

Application
Command Line
  1. Create a new directory in your web project called sass
  2. Copy & Paste your desired flavor or Skeleton SASS into the newly created sass directory
  3. Compile files for the first time:
    1. Open Terminal/Command Prompt with Ruby
    2. cd path/to/my/project/sass
    3. sass --update sass:css
    4. Note: if you use the Compass version issue the following:
      sass --update --compass sass:css
  4. Link files in the following order inside your source code:
    1. skeleton.css
    2. base.css
    3. layout.css
  5. Add the following to the head section of your HTML document (see code example):
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Code Sample

Included Files

  • index.html which includes a starter page showcasing the various features of the framework
  • demo.html which outlines the inherited styling that this framework offers. See this file for additional information on its uses.
  • skeleton.scss which contains the responsive styles for the framework. You should never edit this file directly unless you know exactly what you're changing! Note: this file DOES contain an editable function that changes the grid. See file for additional information.
  • layout.scss is an optional file where you can add custom styles and extend the framework.
  • base.scss an optional file which contains all of the default typography styles, page styles, and much more.
  • _mixins.scss is a private file sass file that is meant to be included but not rendered into its own css file. See this file for the uses.
  • _functions.scss is a private file that contains the function that generates the grid for the framework. Feel free to change the grid in skeleton.scss to suit your needs!
  • _vars.scss is a private file the contains all of the global variables that the framework uses. Feel free to change and add your own! See file for additional information.

License

This project is released under the MIT license.

Find a Bug?

Changelog

1.5.0
  • Removed `$colWidth` from `grid` mixin and allowed it to be calculated dynamically.
  • Removed extra trailing whitespaces in all files
1.4.2
  • Added vanilla CSS component to Skeleton SASS. You can now have CSS right out of the box without having to parse any sass code
  • Added additional files and folders to bower ignore
1.4.1
  • Added Skeleton SASS to bower! You can now drop Skeleton SASS into your projects using bower install skeleton-sass
1.4.0
  • Moved contents from _functions to a new partial called _dependencies
  • Moved all of the "private" mixins to _dependencies partial since these are core mixins and functions
  • Finally added offset styles to mobile grids -- sorry! I realize that was a major piece that was missing
  • Added mobileGrid mixin
  • Added the following mixins to the non-compass version:
    • single-transition
    • transition
    • reset-font
    • reset-focus
    • reset-list-style
    • reset-table
    • reset-table-cell
    • reset-quotation
    • reset-image-anchor-border
    • reset-html5
    • global-reset
    • nested-reset
  • Non-compass version gradient support is available but these mixins still need multi-stop support
    • filter-gradient - this is for IE only and works 100%
    • linear-gradient - produces a linear gradient in all directions
    • radial-gradient - produces a radial gradient
  • Removed redundant code for .container .columns margins
  • Fixed offset calculation issue for fluid grid
  • Added support for grouped selectors on mobileGrid
1.3.4
  • Added sample outline of a web page to show a more realistic example of how the page will scale
1.3.3
  • Fixed duplicate <div> in the 12-grid and 20-grid demo files. Sorry about that!
1.3.2
  • Updated README
  • Updated demo to current demo (this time it actually works)
1.3.1
  • Removed unnecessary if statement in numToString function
1.3
  • Greatly improved int to string conversion by using something other than a million if-else statements
1.2.3
  • Cleaned up .sass files by using tabs instead of default 2 spaces
  • Fixed gutter calculation on fixed grid and in the skeleton file
  • Used boolean in _fluidGrid to prevent sass-convert from stripping null value
1.2.2
  • Added support for fluid grid generation based on column number
  • Cleaned up headers
  • Housekeeping in _mixins file
  • Fixed issue in .sass files. null type being stripped when using sass-convert --from scss --to sass
1.2.1
  • Fixed Duplicate .container on offsets
1.2
  • Addition of fluid grid :)
  • Complete restructure of mixins file and grid generation
  • Changed name of makeGrid mixin to grid
  • Changed core variable names. See vars for more information
  • Cleaned up headers across the board
  • Removed unnecessary and unused functions
  • Separated roles in mixins file
  • Cleaned up comments in all files
  • and more...
1.1
  • Update to several functions and mixins.
  • Addition of new variables
  • Several fixes for non-compass version
  • Fixing of .sass files