Skeleton Sass | Responsive Sass

Skeleton Sass

Skeleton Sass is a sass-based translation of Dave Gamache's Skeleton CSS.

Faster

Skeleton Sass 3 reduced in size by 100% from Skeleton Sass 2 and is faster than ever before!

Customizable

With decoupled modules in Skeleton Sass 3, your hard work is safe from your favorite package managers!

Simpler

Skeleton Sass 3 is still the same, but more flexible than ever!

Free!

Skeleton Sass is completely free to use. Check out the license.

No JavaScript

Skeleton Sass has no dependency on JavaScript. Skeleton Sass is built with Sass which compiles down to CSS. Learn more about sass.

Responsive

Skeleton Sass scales to your device whether it is a desktop, laptop, tablet, or mobile phone

Github

Skeleton Sass is on Github! Fork and contribute! Found a bug? Let us know!

Tested

Skeleton Sass 3 is tested against Sass, Libsass, Wellington, and other Libsass wrappers. We also use gulp-sass for this site!

CSS3

Skeleton Sass 3 adds some necessary CSS3 features such as global border-box and many other mixins that make dealing with CSS easy and fun again.

Requirements

Skeleton Sass 3 has only a single requirement: Sass 3.3 or similar compiler

Technical Details

Skeleton Sass 3 has an intuitive file structure that allows for greater customization and the ability to seamlessly upgrade the Skeleton Sass TPL.

skeleton/ – contains all core code and core themes
- core/ – contains the core code
  - _config.scss – contains the global, default configuration variables and values
  - _dependencies.scss – contains logic that goes into creating core public-facing functions and mixins
  - _functions.scss – contains global public functions
  - _mixins.scss – contains global public mixins
- themes/ – contains all shipped themes of Skleton Sass
  - original/ – the classic Skeleton Sass 1 look
    - components/ – contains sass partials for each component
      - _base.scss – contains all foundation styles for the theme
      - _buttons.scss – contains all button styles
      - _forms.scss – contains form styles (e.g. form, input, etc.)
      - _links.scss – contains anchor styles
      - _lists.scss – contains ul, ol, etc. styles
      - _misc.scss – contains styles for misc elements like <code>
      - _tables.scss – contains table styles
      - _typography.scss – contains typography rules for elements like p, h1-h6, and more...
      - _utils.scss – contains various helper selectors for setting widths, hiding elements, etc.
    - mixins/ – contains mixins used in all themes
      - _private.scss – contains private project-scoped logic
      - _public.scss – contains public-facing project-scoped mixins, functions, etc.
    - _grid.scss – contains all grid styles and mixin calls
    - _include_components.scss – contains all selectively enabled/disabled components for the theme
    - _vars.scss – project-scoped overrides
  - fresh/ – the default look of Skeleton Sass
  - wing/ – a Skeleton Sass port of the Wing theme

Documentation

Skeleton Sass is heavily documented for your convenience. No one likes to use software that has little to no documentation!

Resources

Below are a few resources for you to learn more about Sass, Bower, Sache, Sass compilers, and other Sass libraries:

Learn Sass

You can learn a lot about Sass even if you're brand new to web development! Check out the official Sass website
Another excellent free resource for learn more about Sass is thesassway.com

Compile Sass

Command line via sass command
- macOS – thankfully, most macOS platforms come bundled with Ruby and Ruby Gems so the setup will be minimal! Learn more about how to install Ruby and Sass here
- Windows – it is just as easy for Windows users as macOS users. Simply install ruby via Ruby Installer (be sure to add Ruby to your PATH) and then resume with the installation here
- Linux – If you're using Linux it might be fair to assume that you have experience with terminal. If your Linux installation does not come with ruby, be sure to install it (either from source or from your package manager) and then resume with the installation here
Applications
- Visual Studio Code (free)
- CodeKit (paid)
- Compass.app (paid, open source)
- Hammer (paid)
- Koala (free, open source)
- LiveReload (paid, open source)
- Prepros (paid, open source)
- Brackets (free, open source)
- Atom (needs plugin, free, open source)
- Sublime Text (needs plugin, free, open source)
- Webstorm (paid, free for students)

Extend Sass

There are plenty of ruby gems, libraries, and frameworks that extend Sass. Below are three ways you can easily download/find Skeleton Sass:

NPM – Node Package Manager which allows an easy and intuative way to install and manager backend/frontend dependencies.
Bower.io – Bower is an easy way to gather dependencies for any given frontend software that exists in bower's list. Skeleton Sass is among many softwares in that list including jQuery and Linux Kernal.
Sache.in – Sache is a utility created exclusively for Sass and Compass projects. It's an excellent resource for extending Sass!

Generate a Grid

// Copy and paste these in your global config file to override the grid
$base-col-width: 40px;
$base-gutter-width: 20px;
$base-col-count: 16;

Thanks

As a big proponent of the Open Source Initiative, we would like to thank the following:

Will Scullin for the blueprint stock photo that is used for the Documentation section.
Fontawesome.io for being awesome! These icons played a major role in the design of the site!
NPM for providing a means to manage dependencies easily!
gulp.js for being awesome and saving development time by automating stuff!
Orman for creating the awesome pattern for the grid generation background!

© 2017 AtomicPages LLC