Nice fluid website template, designed by cssauthor and coded by Maxim Orlov.
Demo: http://website-templates.github.io/travel_fluid-template/
Product mockup created with http://frame.lab25.co.uk/
./
├── .editorconfig
├── README.md
|
├── grunt_tasks/ * grunt tasks
| ├── config/ * grunt tasks config
│ | ├── paths.js
│ | ├── settings.js
│ | └── aliases.js
│ |
| └── task.js
│
├── Gruntfile.js
├── package.json
|
├── screenshots/ * responsive test screenshots
|
├── dev/ * site source
| ├── coffee/ * coffee scripts
| │
│ ├── images/ * image sources
| │
│ ├── pug/ * templates
| | ├── blocks/ * blocks library
| │ | └── block.pug
| │ ├── helpers/ * helper mixins
| │ ├── vendor/ * third-party code
| │ ├── layouts/ * page layouts
| │ └── pages/ * main pages templates
| │
│ ├── js/ * compiled and source js
| | ├── vendor/ * vendor scripts library
| | ├── lib/ * site scripts library
| │ ├── head.js * head scripts
| │ └── body.js * vendor scripts
| │
| ├── sass/ * sass preprocessor styles
| | ├── blocks/ * blocks library
| │ | └── block.sass
| │ ├── helpers/ * mixins and vars
| │ ├── vendor/ * third-party code
| │ ├── custom.sass
| │ ├── noscript.sass
| │ └── screen.sass
| │
│ ├── helpers/ * helper files
| | ├── favicon.ico
| | └── .htaccess
| │
│ ├── fonts/ * font sources
| │
│ └── data/ * configs and data for templates
│
└── build/ * built source
├── index.html
├── page.html
|
└── static/ * static assets
├── css/ * minified styles
|
├── images/ * minified images
│
├── js/ * minified assembled js
|
└── fonts/ * @font-face-ready webfonts
- Node.js
- Build sytem: Grunt
- Optionally: Editorconfig
This project have .editorconfig file at the root that used by your code editor with editorconfig plugin. It describes codestyle like indent style, trailing whitespaces etc. See more details here
This boilerplate use Pug templates with external data configs.
Main settings can be found in dev/data/config.json
file. And they're available for usage in templates with config.key-name
Here comes groups of grunt tasks with some explanations
Install bower dependencies and place them to dev folders.
Grunt: grunt start
- Install bower components
- Remove gitkeep files
Dev task with static server.
Grunt: grunt dev
- Compile sass stylesheets
- Add vendor prefixes in css
- Combine media queries in css files
- Compile Pug templates
- Sync helpers and other assets
- Sync images
- Run BrowserSync static server with live reload using
- Watch for changes and run dev task
Build task.
Grunt: grunt build
- Minify images
- Minify stylesheets
- Minify html
- Run BrowserSync static server
Regenerate and build project by running all tasks.
Grunt: grunt rebuild
- Compile sass stylesheets
- Add vendor prefixes in css
- Combine media queries in css files
- Compile Pug templates
- Sync helpers and other assets
- Sync images
- Minify images
- Minify stylesheets
- Minify html
Run server without watching for changes.
Grunt: grunt server
- Run BrowserSync static server
This project uses BrowserSync as static server with enabled and configured live reload option.