website-templates / Portfolio_one Page Template
Projects that are alternatives of or similar to Portfolio one Page Template
Portfolio one page template - ARCHIVED
Flat and responsive website template, designed and coded by Maxim Orlov.
Demo: http://website-templates.github.io/portfolio_one-page-template
Product mockup created with http://magicmockups.com/
Contents
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
| β
β βββ js/ * source js
| | βββ vendor/ * vendor scripts library
| | βββ lib/ * site scripts library
| β βββ head.js * head scripts
| β βββ body.js * body 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
Requirements
Editorconfig
This project has an .editorconfig file at the root. It describes indent style, trailing whitespaces etc. See more details here
How to start
If you haven't used Gulp before, be sure to check out the Getting Started guide, also check these recips
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 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
- Bundle javascripts
- Compile Sass stylesheets
- Add vendor prefixes in css
- Combine media queries in css files
- Compile Pug templates
- Sync helpers and other assets
- Sync fonts
- 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 javascript files
- Minify stylesheets
- Minify html
- Run BrowserSync static server
Rebuild
Regenerate and build project by running all tasks.
Gulp: gulp rebuild
- Bundle javascripts
- Compile Sass stylesheets
- Add vendor prefixes in css
- Combine media queries in css files
- Compile Pug templates
- Sync helpers and other assets
- Sync fonts
- Sync images
- Minify images
- Minify javascript files
- 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.