https://github.com/gilbox/bootless-template
My LESS-based HTML5 template with some optional bootstrap stuff included.
https://github.com/gilbox/bootless-template
Last synced: over 1 year ago
JSON representation
My LESS-based HTML5 template with some optional bootstrap stuff included.
- Host: GitHub
- URL: https://github.com/gilbox/bootless-template
- Owner: gilbox
- Created: 2013-10-12T15:55:49.000Z (almost 13 years ago)
- Default Branch: master
- Last Pushed: 2013-10-13T06:58:03.000Z (almost 13 years ago)
- Last Synced: 2025-01-29T11:30:42.071Z (over 1 year ago)
- Language: CSS
- Size: 609 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
bootless-template
=================
My LESS-based HTML5 template with some optional bootstrap stuff included.
This template is optimized for web development with PHP files or plain HTML.
The idea is that you really only need to use the build script for distribution.
During development, you can use
`grunt dev`
to compile the Less files, but I prefer to use my IDE's built-in Less compiler.
Build
=====
Development:
- grunt dev
Distribution:
- grunt dist
Compiling JavaScript Files Automatically
========================================
During development, add as many javascript files as you'd like as script references from your html.
Don't worry about concatenation nor minification. But, surround them with build/endbuild comments like so:
```
```
When you build for distribution all of the js files will be compressed into one, and the script tags
will be replaced with a single script tag.
styles.less
===========
All site styles get imported in styles.less. This section describes the files imported into styles.less by default...
Bootstrap
---------
Only a very minimal amount of Bootstrap gets imported to start with:
```
@import "bootstrap/variables";
@import "bootstrap/mixins";
// Reset
@import "bootstrap/normalize";
//@import "bootstrap/print.less";
// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
//@import "bootstrap/code.less";
//@import "bootstrap/grid.less";
//@import "bootstrap/tables.less";
//@import "bootstrap/forms.less";
//@import "bootstrap/buttons.less";
@import "semantic.gs/grid";
@import "semantic.gs/grid-fluid";
@import "lesshat/lesshat";
```
To use additional Bootstrap features, multiple files usually have to be imported because of all the dependencies.
The import code above is copy-and-pasted
from the first half of bootstrap.less and then some lines are commented out.
If you end up importing most of the bootstrap less files, it's probably better to load
pre-compiled bootstrap.css from a CDN and then in styles.less just overwrite variables
from bootstrap/variables.less. Then, just use boostrap/mixins.less as needed.
semantic.gs
-----------
```
@import "semantic.gs/grid";
@import "semantic.gs/grid-fluid";
```
guid-fluid is the same as grid with variables renamed by appending -fluid to the originals, and @total-width-fluid is set
to 100% by default. This way you can use fluid and responsive grids on the same page if you need to.
lesshat
-------
```
@import "lesshat/lesshat";
```
index
=====