A less-based CSS Framework for easy and advanced developing HTML5 layouts. It allows you to mix and match any of the following CSS frameworks:
sona_gs
- Sona grid system. Allows you to create grid based layoutsrhythm
- toolbox for perfect vertycally alligned texts and boxestype
- proper web typography modulereset
- collection of CSS resets:.normalize()
,.reset_html5doctor()
,.reset_mayer()
,.reset_yui()
utils
- widely used helper functions like clearfixlessframework
- adaptation of Less Framework to create responcive layouts- in future some popular CSS frameworks
- Great power of less. So you write Less instead of CSS use variables and mixins in your code. Dont need to use aditional classes in your html, just appy mixind according page semantic selectors.
- Instant updates in borwser. Save changes in less files and instantly see changes in browser, even without reloading page.
- Easy and flexible way to create grid based layout.
- Skeleton for creation responsible design
- Integration with PrefixFree. No need to write vendor prefixes in your source less files.
- Grab a copy of this repo:
git clone https://github.com/pokutnik/sona_framework
- or download ZIP archive
- or
wget -qO- https://github.com/pokutnik/sona_framework/tarball/master | tar xzv
-
Include sona less framework in your html
<!-- link jQuery --> <script src="js/libs/jquery-1.6.4.js"></script> <!-- link sona framework's js files --> <script src="js/sona/css.js"></script> <script src="js/libs/less-1.1.4.js"></script> <!-- enable auto styles refresh --> <script src="js/sona/less-watch.js"></script> <!-- include main dev.less file --> <script> css.load('dev.less', 'stylesheet/less', 'dev_css'); </script>
-
Open your html in browser.
-
Code layout in
dev.less
file. Changes will automaticly reloded so you will see them directly in browser without reloading page.
Sona Framework is developed by Pokutnik Alexandr and Jevgenii Likhovidov at Sona studio.
Copyright (c) 2010-2011 Sona studio
All Rights Reserved.
Released under MIT License.