Skip to content

Home

Jump to bottom
Dennis edited this page Jul 28, 2014 · 15 revisions

Skeleton Sass is based off of Dave Gamache's Skeleton CSS. Like Skeleton CSS, Skeleton Sass is a boilerplate for responsive frontend development.

What Is It?

Skeleton Sass is a Sass translation of Skeleton CSS with some extra goodies like fluid grids and themes. Skeleton Sass is here to help you rapidly develop websites that look awesome on any device.

Goals of Skeleton Sass

The goal of Skeleton Sass is to provide a simple experience during the initial stages of website development. Using Skeleton Sass, you are able to easily customize your grid to suit you needs (e.g. 12-column grid, 16-column grid, 20-column grid, grid with overall width of 1040px, 12-col fluid grid, etc). With Skeleton Sass 2 this process became even easier. With just a few variable changes and a quick compile, Skeleton Sass is ready to use. Read more about Setting up Skeleton Sass 2.x for the first time

The Structure

  • bin a directory that contains various executables
    • setup.rb a simple ruby script that aids in setting up Skeleton Sass for first time use
    • theme_setup.rb a simple ruby script that aids in setting up a custom theme for Skeleton Sass
    • update.rb a simple ruby script aiding in updating Skeleton Sass
    • upgrade a simple shell script that aids in upgrading Skeleton Sass from version 1 to version 2
  • skeleton containing folder that houses themes and the core of Skeleton Sass
    • core where the real magic happens
      • _config.scss the default global configuration variables
      • _dependencies.scss the default global logic for Skeleton Sass
      • _functions.scss the default global public-facing functions for Skeleton Sass
      • _mixins.scss the default global public-facing mixins for Skeleton Sass
    • themes houses all of your themes and built-in themes
      • demo a theme
        • _base.scss contains all of the base styles for Skeleton Sass with the exception of the reset styles
        • _bourbon.scss contains information to import bourbon if it's used
        • _vars.scss contains project-scoped configuration options
      • sphenoid the main theme bundled with Skeleton Sass
        • marrow the directory that contains all of the project-scoped logic (e.g. functions and mixins) for your theme to work
          • _private.scss a file that contains all of the private logic for the public mixins/functions to work correctly for the sphenoid project. Feel free to name this file whatever you want in your own theme.
          • _public.scss a file that contains all of the public mixins/functions for the sphenoid theme. Feel free to name this file whatever you want in your own theme.
        • _base.scss contains all of the origion base styles for Skeleton Sass (nothing has changed visually)
        • _vars.scss contains project-scoped configuration options
        • _skeleton.scss contains all the styles to create the grid like we've used before – nothing has changed
      • _loader.scss loads all the files for the active theme
  • _MYconfig.scss contains all of your global configuration options that won't be overridden by an update to Skeleton Sass. Just be sure to rename the file before using and adding it as an import to core/_config.scss! // WIKI entry needed
  • skeleton_template.scss contains all of the styles accumulated into a single file. Be sure to rename this file to skeleton.scss (or something else) before compiling!

Skeleton Sass 2.x differs greatly from Skeleton Sass 1.x. The changes include many features that a lot of Sass scripts lack. First, Skeleton Sass 2.x can be upgraded without fear of losing your local changes. Second, Skeleton Sass 2.x adds theme support so you can easily skin Skeleton Sass to whatever project you need as a simple drop-in.

The Story Behind the Grid

The entire grid is a simple algorithm that that does the dirty work for you. If you want to learn more about how Skeleton Sass generates the grid at the code level, check out skeleton/core/_dependencies and skeleton/core/_mixins.scss.

Two simple equations enable this to happen:

  • a_n = column_width + ( column_width + gutter_width ( n - 1 ) ) – fixed grid
  • a_n = ( ( 100 * n ) / column_count ) - 2 – fluid grid

The first sequence requires explanation. Take a look at 960 fixed-grid for reference and follow along:

  • column_width = 40px
  • column_count = 16
  • gutter_width = 20px

Plugging all values into our equation and we have:

  • a_1 = 40px + ( 40px + 20px ( 1 - 1 ) ) => 40px
  • a_2 = 40px + ( 40px + 20px ( 2 - 1 ) ) => 100px
  • a_3 = 40px + ( 40px + 20px ( 3 - 1 ) ) => 160px

The Fluid Grid

The second equation you saw is the 960 fluid-grid equation for creating fluid grids.

The only variable we need for fluid grid creation is the number of columns we wish to have. In our case, we want 16.

  • column_count = 16
  • a_n = ( ( 100 * 1 ) / 16 ) - 2 => 4.25[%]
  • a_n = ( ( 100 * 2 ) / 16 ) - 2 => 10.5[%]
  • a_n = ( ( 100 * 3 ) / 16 ) - 2 => 16.75[%]

Examples

Changing the behavior of Skeleton Sass is as easy as overriding variables in your global configuration file in the root directory of Skeleton Sass. By default this file is called _MYconfig.scss. Just rename the file to something else, add your shiny new global configuration file as an import to skeleton/core/_config.scss on the last line, and start overriding those values!

Clone this wiki locally