Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 7 days ago
JSON representation
Free webstudio responsive website template
- Host: GitHub
- URL: https://github.com/website-templates/webstudio_responsive-template
- Owner: website-templates
- License: mit
- Created: 2014-04-22T21:24:47.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2019-02-25T01:46:18.000Z (over 5 years ago)
- Last Synced: 2024-07-30T18:57:18.769Z (4 months ago)
- Topics: css3, gulp, html5, onepage, pug, responsive, stylus, template, website, webstudio-template
- Language: HTML
- Homepage: http://website-templates.github.io/webstudio_responsive-template
- Size: 1.99 MB
- Stars: 21
- Watchers: 3
- Forks: 34
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
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/)
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)