-
Notifications
You must be signed in to change notification settings - Fork 28
Home
Skeleton SASS is based off of Dave Gamache's Skeleton CSS. Skeleton CSS a fork of the popular 960 grid system that harness the power of media queries to handle styles at different viewport dimensions.
Media queries "consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color." [1]
The 960 grid system is a time-tested tool that is used by millions of websites. This grid system offers designers and developers the flexibility to structure their web pages without having the write additional CSS to alter the structure.
- It's lightweight. The entire library is 26024 bytes uncompressed and 18716 bytes compressed
- It's easy to use
- Packaged with minimal styling
- Only requirement is importing or linking
skeleton.css- Assuming you're only looking for the responsive part and not the predefined styles part
- Offers both styles of SASS syntax
- Offers the option of using compass
Why not! Skeleton CSS is a widely-used front-end CSS framework so why not make a SASS port that is identical to the original? Why skim through dozens of files when you don't have to? Why only get the structure when you want the base.css styles too? If you've tried other SASS ports and been unsatisfied, then give Skeleton SASS a try! You'll quickly notice that it's almost identical to working with Skeleton CSS.
The goal of Skeleton SASS is to provide the most simple experience during the initial stages of website markup. Using SASS, you are able to easily customize your grid to suit you needs (e.g. 12-column grid, 16-column grid, 20-column grid, etc). With Skeleton SASS, you can spend less time combating mountains of documentation and more time styling your site using SASS or vanilla CSS.
Additionally, Skeleton SASS provides you with flexibility in the smallest, lightest possible package while delivering a high-performing framework that results in a package that is identical to the original Skeleton CSS.
- Few files make editing easy. My main complaint of other Skeleton SASS translations is that they use too few or too many files to accomplish their goal. Skeleton SASS has six files each are logically named. All files are heavily documented, all files contain only the necessary information, and only three css files will be produced; this is the same as the original Skeleton CSS.
- Logical separation. Mixins, variables, and functions all have their own files. These files are non-intrusive and will not tamper with the original architecture of Skeleton.
- Little to no conversion factor. If you know SASS and/or Compass and you have an existing project that uses Skeleton CSS, the conversion factor is minimal.
- Conversion into SASS/SCSS syntax
- Use of
$variables - Use of
@mixins - Use of
@functions
For consider: This little bit of code generates the entire grid without hassle.
// grid generation
@include grid($baseWidth);
Use of nested-style syntax to easily discern parent-child relationships.
.clearfix, .row {
zoom: 1;
&:before, &:after {
content: "\0020";
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
&:after { clear: both; }
}
A single coherent file that houses default settings for the entire translation. Want to edit a value on a global level? Yes, please! Do so without wasting time searching through mountains of unorganized code and ambiguous variable names.
// font vars
$fontSize: 14px;
$fontFamily: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
$fontColor: #444;
The entire grid is a simple algorithm that generates the grid for you. If you want to learn more about how Skeleton SASS generates the grid, check out _functions file and the _mixins file.
Two simple sequences make this happen:
a_n = column_width + ( column_width + gutter_width ( n - 1 ) )a_n = ( ( 100 * n ) / column_count ) - 2
The first sequence requires explanation. Taking a look at 960 fixed-grid we will see the following:
column_width = 40pxcolumn_count = 16gutter_width = 20px
Plugging all values into our equation and we have:
a_1 = column_width + ( column_width + gutter_width ( 1 - 1 ) ) => 40pxa_2 = column_width + ( column_width + gutter_width ( 2 - 1 ) ) => 100pxa_3 = column_width + ( column_width + gutter_width ( 3 - 1 ) ) => 160px
Pretty easy, right? Let's check out the fluid grid next.
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 = 16a_n = ( ( 100 * 1 ) / 16 ) - 2 => 4.25[%]a_n = ( ( 100 * 2 ) / 16 ) - 2 => 10.5[%]a_n = ( ( 100 * 3 ) / 16 ) - 2 => 16.75[%]
Want something different? Just pass in a different column_count value!
Skeleton CSS did not originally offer a fluid grid. Depending on your design, you might want a fluid grid. So, I ask you all, why not offer a fluid grid that is as seamless as the fixed grid?