README
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
- DRY
- Customizable
- Themeable
- Bower ready
- 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 executablessetup.rb
a ruby script that aids in setting up Skeleton Sass for first time usetheme_setup.rb
a ruby script that aids in setting up a custom theme for Skeleton Sassupgrade
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 happenscore
_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 livedemo
marrow
stores all project-level functions and mixins_mixins.scss
loads the default theme mixins and functions fromsphenoid
_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 Sassmarrow
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 thesphenoid
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 thesphenoid
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 Sassskeleton_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?
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!
- Although, you can always use
- 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.).
- 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
- New default font: Raleway
- Removal of old reset CSS in favor of normalize.css
- 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
andcolumns
forone-third
,two-third
, andfull-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
andcompass
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 inskeleton_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 absolutepx
unit to anem
unitrem
converts an absolutepx
unit to arem
unitpercent
converts an absolutepx
unit to a%
unitrelative
converts an absolutepx
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
- Note: if more than one relative unit is select then this function will simply spit out the
@font-size
is a mixin that handles everything involvingfont-size
. // TODO complete this
- Added a grid generator helper in atomicpages.github.io/skeleton-sass/
Authors
Contributors
- Jackson Hines
- robertosobachi
- vephinx:
- [thomasvandongen](https://github.com/thomasvandongen