# compass-html5-boilerplate

**Repository Path**: mirrors_Unitech/compass-html5-boilerplate

## Basic Information

- **Project Name**: compass-html5-boilerplate
- **Description**: Compass version of the Html5 Boilerplate project by Paul Irish
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-19
- **Last Updated**: 2026-02-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

Compass Html5 Boilerplate
=========================

# Overide

- multi js inclusion 
- set ENV['GOOGLE_ACCOUNT_ID'] then in config/google.yml 
- lighter stylesheet
- window token for ajax added

# Fork

HTML5 Boilerplate is a Compass extension based on HTML5 Boilerplate by Paul Irish.
You can use it to kick-start fully compliant HTML5 applications. Setup your Rails
applications with with fully integrated Haml and Sass/Scss templates that implement
Boilerplate's functionality, or generate stand-alone Html5 Compass projects.

Browse [html5boilerplate.com](http://html5boilerplate.com) for the full workup.

Features
=========
(In addition to Html5 Boilerplate itself)

* Html5 Boilerplate stylesheets implemented as a modularized Compass library
* Lets you pick and choose only the Boilerplate mixins and includes you want
* Generates sass/scss partials to keep your stylesheets organized
* Generates modularized haml layouts for Rails apps (header, footer, flashes, etc.)
* Rails helpers to cleanly hide a little of Boilerplate's html complexity
* Loads minified jQuery in production envs, but uncompressed version in development
* Rails jquery-ujs driver installed and loaded along with jQuery and Modernizr
* Setting API Key in google.yml will auto-load jquery from google (async)
* Setting Analytics ID in google.yml will auto-load google analytics (async)
* Uses content_for hooks to keep all your javascript and stylesheets in one place
* Falls back to native Compass for stuff like clearfix and image replacement
* Fully commented source, but the haml/sass output remains comment free
* Not tested on animals

Rails Installation
==================

First, make sure the following gems are in your Gemfile

    gem "compass"
    gem "haml"
    gem "html5-boilerplate"

Then run the following

    bundle install
    compass init rails -r html5-boilerplate -u html5-boilerplate --force

(Using `--force` flag will overwrite any files that may already exist. In most cases this is probably what you want.)

(For a new project, I answer "Yes" to keep my stylesheets in app/stylesheets, but "No" for compiling them into public/stylesheets/compiled.)

Now remove your application.html.erb so that Haml can do its thing

    mv app/views/layouts/application.html.erb app/views/layouts/application.html.old

Start your Rails server, and you're done!


**Here's a list of the files that compass init installed in your Rails project:**

    app/views/layouts/application.html.haml
    app/views/layouts/_flashes.html.haml
    app/views/layouts/_footer.html.haml
    app/views/layouts/_head.html.haml
    app/views/layouts/_header.html.haml
    app/views/layouts/_javascripts.html.haml
    app/views/layouts/_stylesheets.html.haml
    
    app/stylesheets/style.scss
    app/stylesheets/partials/_base.scss
    app/stylesheets/partials/_overrides.scss
    app/stylesheets/partials/_page.scss
    app/stylesheets/partials/_fonts.scss
    app/stylesheets/partials/_media.scss
    
    public/404.html
    public/.htaccess
    public/crossdomain.xml
    public/robots.txt
    public/humans.txt
    public/apple-touch-icon.png
    public/favicon.ico
    
    public/javascripts/jquery.min.js
    public/javascripts/modernizr.min.js
    public/javascripts/plugins.js
    public/javascripts/rails.js
    
    config/compass.rb
    config/initializers/compass.rb
    config/google.yml

The Scss files above will automatically get compiled to your Sass compilation directory:

    public/stylesheets/style.css

**Note:** If you already have a config/compass.rb file in your project, you may need to
manually add the following line to the top:

    require 'html5-boilerplate'

### A few more points...

The haml will compile to the equivalent of html5-boilerplate's index.html,
but with all comments stripped out, and some additional rails stuff
like csrf_meta_tags, flashes and the Rails jquery-ujs driver.

You can set your own Google Analytics Account ID and your Google API Key
either as ENV variables, or inside config/google.yml. (see that file)

This extension has only been tested on Rails3.


Stand Alone Installation
========================

Use this if you're not using Rails, but still want compass and the html5-boilerplate sass libraries,
It will create a simplified index.html (with haml source), but without the nice Rails helpers.

    gem install html5-boilerplate
    compass create my_project -r html5-boilerplate -u html5-boilerplate --javascripts-dir js --css-dir css

The `--javascripts-dir` and `--css-dir` flags are to keep consistent with the original project layout.
If you omit them, be sure to edit your javascript and style tags accordingly in index.html.

**This will create a `my_project` directory containing the following files:**  

    index.html
    index.html.haml
    404.html
    crossdomain.xml
    robots.txt
    humans.txt
    apple-touch-icon.png
    favicon.ico
    
    src/style.scss
    src/partials/_base.scss
    src/partials/_overrides.scss
    src/partials/_page.scss
    src/partials/_fonts.scss
    src/partials/_media.scss
    
    js/jquery.min.js
    js/modernizr.min.js
    js/plugins.js
    
    .htaccess
    config.rb

Run `compass watch my_project` and the SCSS files above will automatically
get compiled to your Sass compilation directory whenever a change is made:

    css/style.css

License
=======

HTML5 Boilerplate by Paul Irish  
(comments left intact in scss files)

Compass Extension Copyright (c) 2010-2011, Peter Gumeson  
[http://creativecommons.org/licenses/by/3.0](http://creativecommons.org/licenses/by/3.0)