Skeleton Sass 2

Skeleton Sass is a "Sassification" of Dave Gamache's Skeleton CSS responsive Sass starting point.

• Ability to seamlessly adjust grids by changing the value of variables
• Install Skeleton Sass with bower via bower install skeleton-sass
• Live demo!
• Extensive documentation

Life after 2.5

• At some point after 2.5 I would like to create a Ruby Gem of Skeleton Sass with Rails/Sinatra support. This will likely be the next major release (i.e. 3.0).

Upgrading From 1.x

Skeleton Sass 2.x is not backwards compatible with Skeleton Sass 1.x due to a major change in the file structure. However, we have a wiki article that explains how to upgrade from Skeleton Sass 1 to Skeleton Sass 2.

Looking for Skeleton Sass 1?

We still have the latest stable release available to download if you wish! Head over to the 1.x-master branch and continue using Skeleton Sass 1. Version 1 docs can be found here.

TL;DR

Skeleton Sass is a Sass port of Skeleton CSS. Skeleton Sass 2 has been trimmed down and a ton of new features have been added.

Note: If you are new to Sass altogether then please read our wiki for a more in-depth look at Skeleton Sass, information regarding installing ruby and Sass, and many other valuable resources!

If you are not new to Sass and you've tried other Skeleton CSS Sass ports and had a feeling is dissatisfaction, then look no more. Skeleton Sass is your last stop.

Features

1. DRY
2. Customizable
3. Themeable
4. Bower ready
5. Upgradeable

Dependencies

The only dependency for Skeleton Sass to run is Sass 3.3+. Any other libraries (e.g. Bourbon) are up to you to include if you wish.

Warning: The current stable release of Compass does not support Sass 3.3.x. Skeleton Sass uses functions that are a part of that version. There are currently alpha builds of Compass 1.x that do support Sass 3.3.x

File Overview

• bin a directory that contains ruby executables
  • setup.rb a ruby script that aids in setting up Skeleton Sass for first time use
  • theme_setup.rb a ruby script that aids in setting up a custom theme for Skeleton Sass
  • upgrade a bash script that aids in upgrading Skeleton Sass (ruby version in the making)
  • update.rb a ruby script that handles updating Skeleton Sass (in progress)
• skeleton where all of the magic happens
  • core
    • _config.scss the default global configuration variables
    • _dependencies.scss the default global logic for Skeleton Sass
    • _functions.scss the default global functions for Skeleton Sass
    • _mixins.scss the default global mixins for Skeleton Sass
  • themes where all of the themes live
    • demo
      • marrow stores all project-level functions and mixins
        • _mixins.scss loads the default theme mixins and functions from sphenoid
      • _base.scss contains all of the base styles for Skeleton Sass with the exception of the reset styles
      • _vars.scss contains project-scoped configuration options and variables
    • 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 base styles for Skeleton Sass (same look as Skeleton CSS created)
      • _vars.scss contains project-scoped configuration options
      • _skeleton.scss contains all the styles to create the grid
    • fresh
• _MYconfig.scss contains all of your global configuration options that won't be overridden by an update to Skeleton Sass
• skeleton_template.scss contains all of the styles accumulated into a single file.

Bower

Bower is a package manager for the web. It offers a generic, unopinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack. There are no system wide dependencies, no dependencies are shared between different apps, and the dependency tree is flat — bower.io

Install Skeleton Sass with bower via command line:

bower install skeleton-sass

You can also install alpha, beta, rc, and previous versions by looking at the releases page and install with the following syntax:

bower install skeleton-sass#[tag]
bower install skeleton-sass#2.0.0-b2

Learn how to set up Skeleton Sass for the first time here.

NPM

npm is a package manager for JavaScript, and is the default for Node.js

Install Skeleton Sass with npm via command line

npm install skeleton-sass --save

RequireJS installation for ReactJS applications

Most of the ReactJS boilerplates built with RequireJS which you need to require the Sass/Scss files within the application.

Install Skeleton Sass with npm via command line

npm install skeleton-sass --save

Require the Skeleton Sass within your React / RequireJS application

require('skeleton-sass');

Demo

You can see Skeleton Sass in action here: http://atomicpages.github.io/skeleton-sass. Be sure to resize your browser window and see the responsive goodness in action!

Documentation

Skeleton Sass is heavily documented. If you're looking for a detailed description (or just want more info) you can view all the wiki pages here.

Resources

• Installing Sass
• Setting up Skeleton Sass for first time use
• Setting up a Fluid Grid
• Creating a theme

Documentation

• Introduction to Skeleton Sass
• Function Documentation
• Variable Documentation
• Mixin Documentation
• Skeleton Sass version 1 Docs

License

This project is released under the MIT license. Who doesn't like free code?

Find a Bug?

Skeleton Sass is community driven. We will gladly review any issues that you find. If you wish to contribute you'll land a spot in the contributions section of this document!

I Found a Bug/How Can I Help?

• Create an Issue
• Fork & Pull

Changelog

2.5.1

• Fixes issue #16

2.5.0

• Addition of a new default theme called fresh
  • Removal of old reset CSS in favor of normalize.css
    • Although, you can always use reset.css if you wish since it will still be part of the theme mixins!
  • Adjustment of media queries
    • Note: these media queries probably won't be perfect for every project. Let the content dictate the media queries!
  • Fluid grid is now the default with a fixed width set on the body element (you can change this behavior, of course)
    • Note: the fixed grid will still be there! Difference is that the fluid grid will be the new default with the new theme only. You can still use the old sphenoid theme for the pre 2.5 setup (e.g. fixed grid, old skeleton.css theme, reset.css, etc.).
  • New default font: Raleway
• Improvements with scripts and better compatibility with Ruby 2.x and better backward compatibility with Ruby 1.8+

Removals

• $colWidth variable in the @grid mixin
• Removed some sloppy code in the @_offsets mixin

Fixes/Changes

• Plural column and columns for one-third, two-third, and full-width

New Features/Themes

• one-half selector to grid
• $new parameter to @_fluidGrid and @_fixedGrid. This makes some basic changes to the grid for the new Skeleton CSS format
• Default fixed/fluid combo grid for fresh theme
  • Updated offsets for the new fixed/fluid grid combo
• Added new offset-by-one-third, .offset-by-two-thirds, and .offset-by-one-half selectors for new grid

2.0.0

Removals

• Removed $baseWidthMQ
• Removed bourbon and compass to completely flatten the dependency tree so all you need now is Sass 3.3+

Fixes/Changes

• Huge changes to the structure of Skeleton Sass
• No more camelCase variables (based on what we've seen the convention seems to prefer hyphens in variable names).
• Squashed some old, lingering bugs with the gradient mixins
• All of the logic has been moved to the skeleton/core folder
• Completely removed layout.scss (media queries defined in the old layout file now live in skeleton_template.scss)
• Fixed a few linger misspellings in a few selectors
• Cleaned and optimized old mixins/functions
• $base-width is now calculated automatically

New Features

• Introduced global variables, mixins, and functions
• Introduced a new concept to Skeleton Sass called themes. Themes allow you to edit the base styles to create a new launching platform for your projects. When you create a theme, it won't get overridden with an update to Skeleton Sass. Learn more about themes here.
• Ruby scripts that help you setup Skeleton Sass for first time use, create themes, update Skleton Sass, and more
• New functions and mixins:
  • _calcRU is a function meant to be used in other functions. This function calculates the relative unit based on the $base-font-size and the $size passed into the function. These functions depend on _calcRU
    • em
    • rem
    • percent
    • relative
  • em converts an absolute px unit to an em unit
  • rem converts an absolute px unit to a rem unit
  • percent converts an absolute px unit to a % unit
  • relative converts an absolute px unit to the chosen relative unit as defined in _config.scss or your own project configuration.
    • Note: if more than one relative unit is select then this function will simply spit out the px unit. // documentation is needed
  • @font-size is a mixin that handles everything involving font-size. // TODO complete this
• Added a grid generator helper in atomicpages.github.io/skeleton-sass/

Authors

• Dennis Thompson
• AtomicPages LLC

Contributors

• Jackson Hines
• robertosobachi
  • Issue #6
  • Pull #10
• vephinx:
  • Issue #7
  • Issue #9
• [thomasvandongen](https://github.com/thomasvandongen
  • Pull request 0af774f
    • Note: as a result of his work we can finally close issue #16