Our HTML5 template, based on HTML5Boilerplate
Switch branches/tags
Nothing to show
Clone or download
Latest commit 97f31db Oct 25, 2018

README.md

HTML Framework

Our HTML Framework based on H5BP+Grunt+SASS.

How to install and run

Instalation procedure is similar for Win/Mac/Linux.

1. Install Node.js

LTS (Recommended For Most Users), Windows Installer 64-bit (needed for Grunt).

2. Install Grunt

Run cmd as administrator and execute:

npm install grunt-cli -g

3. Get Framework

Git Clone:

4. Install

Once run dev\_install.cmd or execute in shell:

npm install --save-dev

5. Run

Dev

Start Grunt with dev\_dev.cmd or execute in shell:

grunt dev
grunt concurrent:dev

Prod

Start Grunt with dev\_start.cmd or execute in shell:

grunt
grunt concurrent:main

Use CSS-sprites

Put PNG images (e.g. file1.png & file2.png) into dev\src\img\sprites\ & use this example:

.b-icon {
  &.-icon_file1 {
    @include sprite($file1);
  }
  &.-icon_file2 {
    @include sprite($file2);
  }
}

Generated code will look like this:

.b-icon.-icon_file1 {
  background-image: url(../img/spritesheet.png);
  background-position: 0px 0px;
  width: 28px;
  height: 28px;
}

.b-icon.-icon_file2 {
  background-image: url(../img/spritesheet.png);
  background-position: -28px 0px;
  width: 28px;
  height: 28px;
}