Skip to content

Easy to use HTML5 layout framework based on Less.js

Notifications You must be signed in to change notification settings

JevgeniiLihovidov/sona_framework-1

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Sona framework

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 layouts
  • rhythm - toolbox for perfect vertycally alligned texts and boxes
  • type - proper web typography module
  • reset - collection of CSS resets: .normalize(), .reset_html5doctor(), .reset_mayer(), .reset_yui()
  • utils - widely used helper functions like clearfix
  • lessframework - adaptation of Less Framework to create responcive layouts
  • in future some popular CSS frameworks

Sona framework Provides

  1. 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.
  2. Instant updates in borwser. Save changes in less files and instantly see changes in browser, even without reloading page.
  3. Easy and flexible way to create grid based layout.
  4. Skeleton for creation responsible design
  5. Integration with PrefixFree. No need to write vendor prefixes in your source less files.

Quick Start

  1. 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
  1. 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>
    
  2. Open your html in browser.

  3. Code layout in dev.less file. Changes will automaticly reloded so you will see them directly in browser without reloading page.

More Information

Authors

Sona Framework is developed by Pokutnik Alexandr and Jevgenii Likhovidov at Sona studio.

License

Copyright (c) 2010-2011 Sona studio

All Rights Reserved.

Released under MIT License.

About

Easy to use HTML5 layout framework based on Less.js

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published