Staddle is a brilliant front-end HTML5 and LESS framework for building small and large scale websites.
- Responsive grid - including breakpoints for tablet and mobile.
- LESS - including base styles, CSS3 mixins and debugging.
- HTML Templates - example templates are included to help get you started quickly.
- Static Site Generator - a static minified version of your site which you can be hosted anywhere.
- IE8+ support - For IE7 support use a grid system that doesn't use box sizing border box and the inline block fix
Get the latest version of Staddle:
git clone firstname.lastname@example.org:mattbegent/staddle.git
bower install staddle
Install node packages:
cd brilliantwebsitedirectory npm install
Run Grunt tasks:
View your website by going to http://localhost:8080/
More Detailed Start
- Get the latest version of Staddle either by cloning it
git clone email@example.com:mattbegent/staddle.git, downloading a zip of the latest release or if you use bower
bower install staddle.
- Set your site variables in assets/less/variables.less.
- Add your custom modules to the assets/less/modules folder and import them in main.less.
- Tell your LESS compiler to compile assets/less/main.less to css/main.css. Or if you use Grunt (which you definitely should do) install the Grunt dependencies
npm installthen use
grunt watchand your LESS files will be compiled on save.
- Use index.html as a template for your html. If you use Grunt you can generate a static site using Assemble - see the content folder. The handlebars files in this folder are compiled along with any assets to _site.
- Build a cool site:-)!
The basic structure and main files are outlined below:
Although Staddle does come with some in built modules and styles, it is all about customisation.
All of the main setup (e.g. base font size) and module variables are set in assets/less/variables.less.
// TYPOGRAPHY // ---------------------------------------------------- @TYPE-FontSize: 16; @TYPE-LineHeight: 24;
Any custom modules (for example a special box) should be placed in the modules folder (assets/less/modules) and imported in main.less (assets/less/main.less).
// MODULES // ---------------------------------------------------- @import "modules/special-box.less";
As all of the built in modules are independent (assets/less/base_modules) you can safely turn them off in assets/less/variables.less.
// BASE MODULES // Change to false if not using // =========================================================================// @MODULE-Alert: true; @MODULE-Box: true; @MODULE-Breadcrumbs: true; @MODULE-Button: true; @MODULE-Form: true; @MODULE-Image: false; @MODULE-Map: true; @MODULE-Media: true; @MODULE-Navigation: true; @MODULE-Pagination: false; @MODULE-Print: true; @MODULE-Typography: true; @MODULE-Well: true;
Staddle has CSS debugging built in to outline any problems with images, links, empty elements and deprecated elements.
To enable debugging simply set the variable @DEBUG to true in less/variables.less.
// DEBUG // ---------------------------------------------------- @DEBUG: true;
Staddle has a standard grid system. For example if you wanted content to span three quarters of the page, you would write:
<div class="grid"> <div class="col-3-4"> <!-- CONTENT HERE --> </div> </div>
If you wanted to change the column widths for tablet, you might write:
<div class="grid"> <div class="col-1-4 col-tablet-1-2"><p>1/4</p></div> <div class="col-1-4 col-tablet-1-2 col-tablet-last"><p>1/4</p></div> <div class="col-1-4 col-tablet-1-2"><p>1/4</p></div> <div class="col-1-4 col-tablet-1-2 col-tablet-last"><p>1/4</p></div> </div>
See _site/examples/grid.html for more examples.
Staddle has a lot of handy less mixins to help speed up development.
.font-size (@FONT-SIZE-IN-PIXELS) // Sets font size in rems with px fallback for older browsers .margin (@MARGIN-IN-PIXELS); // Sets margin in rems with px fallback for older browsers .padding (@PADDING-IN-PIXELS); // Sets padding in rems with px fallback for older browsers .percentage (@FIRST-NUMBER, @SECOND-NUMBER); // Sets width as a percentage .size (@WIDTH, @HEIGHT); // Sets width and height
This includes animations, border radius, transitions and many more. See assets/less/base/css3.less for full list.
LESS 1.3.3 and Grunt 0.4.1 or above.
stad•dle (ˈstæd l)
- the lower part of a stack of hay or the like.
- a platform or supporting frame for a stack.
- any supporting framework or base.
Thanks to @dave_ja for creating Staddle's brilliant logo.