Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/website-templates/webstudio_responsive-template

Free webstudio responsive website template
https://github.com/website-templates/webstudio_responsive-template

css3 gulp html5 onepage pug responsive stylus template website webstudio-template

Last synced: about 2 months ago
JSON representation

Free webstudio responsive website template

Awesome Lists containing this project

README

        

# Webstudio responsive website template - ARCHIVED

Nice website template coded by [Maxim Orlov](https://github.com/orlovmax).

Demo: [http://website-templates.github.io/webstudio_responsive-template](http://website-templates.github.io/webstudio_responsive-template/)

![Mockup demo](screenshots/pic.jpg)
Product mockup created with [http://frame.lab25.co.uk/](http://frame.lab25.co.uk/)

## Contents

- [Folder and file structure](#folder-and-file-structure)
- [Requirements:](#requirements)
- [Editorconfig](#editorconfig)
- [How to start](#how-to-start)
- [Site configuration](#site-configuration)
- [Tasks](#tasks)
- [Cleanup](#cleanup)
- [Dev](#dev)
- [Build](#build)
- [Rebuild](#rebuild)
- [Server](#server)
- [Sprite](#sprite)
- [Live reload](#live-reload)
- [License](#license)

## Folder and file structure
```
./
├── .editorconfig
├── gulpfile.js
├── package.json
├── README.md
|
├── gulp_tasks/ * gulp tasks
| ├── config/ * gulp tasks config
│ | ├── paths.js
│ | └── aliases.js
│ |
| └── task.js
|
├── screenshots/ * responsive test screenshots
|
├── dev/ * site source
│ ├── images/ * image sources
| │
│ ├── pug/ * templates
| | ├── blocks/ * blocks library
| │ | └── block.pug
| │ ├── helpers/ * helper mixins
| │ ├── vendor/ * third-party code
| │ ├── layouts/ * page layouts
| │ └── pages/ * main pages templates
| │
| ├── stylus/ * stylus preprocessor styles
| | ├── blocks/ * blocks library
| │ | └── block.styl
| │ ├── helpers/ * mixins and vars
| │ ├── vendor/ * third-party code
| │ ├── custom.styl
| │ ├── noscript.styl
| │ └── screen.styl
| │
│ ├── 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
|
└── fonts/ * @font-face-ready webfonts

```

## Requirements

- [Node.js](http://nodejs.org/)
- Build sytem: [Grunt](http://gruntjs.com/) or [Gulp](http://gulpjs.com/)
- Optionally:
* [Editorconfig](http://editorconfig.org/)

#### Editorconfig

This project has an .editorconfig file at the root. It describes indent style, trailing whitespaces etc. See more details [here](http://editorconfig.org/)

## How to start

If you haven't used [Gulp](http://gulpjs.com/) before, be sure to check out the [Getting Started]([https://github.com/gulpjs/gulp/blob/master/docs/README.md](https://gulpjs.com/docs/en/getting-started/quick-start)) guide, also check these [recips](https://github.com/gulpjs/gulp/tree/master/docs/recipes#recipes)

Before start you need to have installed _npm_ , as well as _gulp_ globally.

**A few simple steps to start:**
* Install dependencies from `package.json` by running: `npm install`.
* Run tasks from the list below and start devevelopment!
* Edit general settings in `dev/data/config.json` See [Site configuration](#site-configuration) section

## Site configuration

This boilerplate uses 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`

## Tasks

Here comes groups ofgulp tasks with some explanations

#### Cleanup

Remove placeholders from work directories.
Gulp: `gulp cleanup`

* Remove gitkeep files

#### Dev

Dev task with static server.
Gulp: `gulp dev`

* Compile Stylus 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

Build task.
Gulp: `gulp build`

* Minify images
* Minify stylesheets
* Minify html
* Run BrowserSync static server

#### Rebuild

Regenerate and build project by running all tasks.
Gulp: `gulp rebuild`

* Compile Stylus 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

#### Server

Run server without watching for changes.
Gulp: `gulp server`

* Run BrowserSync static server

## Live reload

This project uses BrowserSync as static server with enabled and configured live reload option.

## License

[MIT](https://github.com/website-templates/webstudio_responsive-template/blob/master/LICENSE.md)