Navigation
HomeSearch
Submit A Resource
Contact Us
About Functionn
Subscription Options
Subscribe By Email (265+)
Lists
Archives
Nov 26, 2012
Author:
Hirvesh
Posted At: 11/26/2012
Tags:
ARIA,
CSS,
CSS3,
fluid,
Github,
grid,
html,
IE,
Responsive,
Sass,
UI,
Unlicense
SSGS - Super Simple Responsive Grid System Using SASS
SSGS is a very basic grid system for the web. It allows you to quickly set up a responsive grid system using SASS. It's a fully fluid six-column grid with fixed-width gutters. It takes only one variable (the width of the gutters) so it's refreshingly easy to set up and use.
There's no need to clutter your HTML with lots and lots of classes as you can easily use Sass's @extend function. It's only about 60 lines of code.
The only drawback there is right now is the dependency on box-sizing: border-box; to work properly. That is only an issue if you work with IE prior to version 8. There's even a neat polyfill available on GitHub.
Since you're already working with Sass, just pop in Compass and import "compass/css3/box-sizing" to make it even easier.
There is even a plain old CSS version available if you're really resistant to awesome technology like Sass.
Requirements: SASS
Demo: http://codepen.io/RadLikeWhoa/full/mLIkK
License: Unlicense
There's no need to clutter your HTML with lots and lots of classes as you can easily use Sass's @extend function. It's only about 60 lines of code.
The only drawback there is right now is the dependency on box-sizing: border-box; to work properly. That is only an issue if you work with IE prior to version 8. There's even a neat polyfill available on GitHub.
Since you're already working with Sass, just pop in Compass and import "compass/css3/box-sizing" to make it even easier.
There is even a plain old CSS version available if you're really resistant to awesome technology like Sass.
Requirements: SASS
Demo: http://codepen.io/RadLikeWhoa/full/mLIkK
License: Unlicense
Trending Posts On Functionn This Week
Other Interesting Resources:
Subscribe to:
Post Comments (Atom)
Trending Posts
Popular Posts
- 20 Fresh, High-Quality Free WordPress Themes 2012
- 50 Fresh, High-Quality Free WordPress Themes 2012 - Edition #2
- The Most Comprehensive Index Of Free Icon Fonts/Iconic Web Fonts
- Timeline - A JavaScript Library For Beautifully Crafted Timelines That Are Easy, And Intuitive To Use
- BLUR.JS - A JQUERY PLUGIN PRODUCING PSUEDO-TRANSPARENT BLURRED ELEMENTS
- Selene - A Stunning & Sleek jQuery UI Theme
- jQuery UI Bootstrap Theme - Bootstrap v2.X's Theme For jQuery UI
Recent Posts
Popular Categories
- JavaScript (535)
- JQuery (275)
- Libraries (132)
- CSS (115)
- frameworks (113)
- Tools (112)
- html (86)
- Github (79)
- html5 (71)
- Node.js (58)
- mobile (52)
- Responsive (49)
- CSS3 (47)
- page effects (45)
- Web Design (41)
- Bootstrap (35)
- twitter (31)
- image effets (22)
- MVC (18)
- generators (18)
- CoffeeScript (16)
- graphics (10)
Popular Components
- icons (42)
- Graphs (22)
- popups (19)
- notifications (17)
- web fonts (17)
- visualizations (14)
- sliders (11)
- polyfills (10)
- localstorage (8)
- social media buttons (8)
Popular Licenses
- MIT License (493)
- free (144)
- GPL (64)
- Apache License v2.0 (48)
- CC Attribution 3.0 License (46)
- GPLv2 (20)
- GPLv3 (11)
- Custom License (7)
0 comments:
Post a Comment