Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pixelhandler/simplesassframework
uses Sass for CSS grid layout generation and includes HTML markup
https://github.com/pixelhandler/simplesassframework
Last synced: 8 days ago
JSON representation
uses Sass for CSS grid layout generation and includes HTML markup
- Host: GitHub
- URL: https://github.com/pixelhandler/simplesassframework
- Owner: pixelhandler
- Created: 2010-02-17T10:59:28.000Z (almost 15 years ago)
- Default Branch: master
- Last Pushed: 2010-02-18T09:13:33.000Z (almost 15 years ago)
- Last Synced: 2024-10-30T12:25:28.393Z (about 2 months ago)
- Language: JavaScript
- Homepage: simpleSassFramework
- Size: 266 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
README for simpleSassFramework
================================
Simple tool to create a starting document using CSS reset for elements and a generated grid
---------------------------------------
* Uses Sass for CSS grid layout generation
* Includes HTML 5 layout for supporting Sass generated CSS
---------------------------------------
_Set variables to calclute your grid:_
`
!gTotal = 960px // total page width
!grid = 16 // number of columns
!gGutter = 20px // gutter between columns
!gMargin = !gGutter / 2 // set margin at half of gutter
!gCol = ( !gTotal / !grid ) - !gGutter // single column width
`
Execute the command in your terminal app # `sass style.sass ./style.css`
## This is a basic template tool for generating your own grid system using Sass ##
Basically this builds on best practices of existing CSS grid systems like 960.gs or Blueprint in a bare bones fashion.
The generated CSS includes classes for prototyping or designing in a browser; and also creates variables for assignment to your semantic id’s for cleaner markup.
An HTML 5 layout is included as an example, with a simple layout and CSS drop-down menus (son-of-suckerfish style).