Dips.no is build on a system of reusable code instead of specific page by page. This styleguide is ment as a tool to help get a overview of what the system includes, and how to best use it.
It's important that when the system evolves, this styleguide follows along.
The building blocks of the system is inspired by Brad Frost's Pattern lab, but with some modification.
Elements are all standalone elements that works on their own. Examples are:
Components are to or more elements put together. Examples are:
Modules are elements and components put together. Examples are:
Elements, components and modules should nomally not have any specific width applied to them, but they should live in a container and flow naturally inside the container. Some context/container specific styles are however needed some times. Examples containers:
You need git, ruby, bundler, node and npm, gulp and bower installed. It's recomended to have node installed trough homebrew if on a mac.
Compatible with node v6.9.1 LTS
. Tip: You can use nvm with homebrew to get the right node environment.
bundle install && bower install && npm install
gulp modernizr
gulp
gulp deploy-gh
Automaticly creates a new commit of the folder 'public' to gh-pages and pushes to github. Available at http://dips.gh.front.no/.
This is the code that will be available on the drupal repo when pulling from sites/all/themes/dips/static
Most tasks run on build (gulp
), but there are a few manual tasks, and all tasks can run separately like gulp [taskname]
Task name | Description | In default task |
---|---|---|
html |
Runs trough and compiles html templates and includes from source/html/ . In production mode it will output production assets eg. styles.min.css instead of styles.css. |
Yes |
img |
Compress .png, .jpg and .svg from source/images/ (excluding the sprite/export/ folder). |
Yes |
js |
1. Copies js dependencies and project js to public folder 2. Concat and minifies a version of dependencies and project js to one file. |
Yes |
modernizr |
Specify what tests you want modernizer to run, and make a custom modernizr build | No, manual |
sprite |
Generates a .svg sprite from svg's in source/images/sprite/ . It also creates a .png fallback sprite for use on unsuported browsers. |
Yes |
styleguide |
Generates a styleguide based on documentation written in sass files. | Yes |
sass |
Compiles sass files in source/sass/ . It also creates a minified version for use in production mode. |
Yes |
watch |
Watches for changes in sass, images, javascript and html. NOTE: it does not detect new files, and gulp needs a restart to make it watch new files. | Yes |
deploy-gh |
Deploys public/ folder to github pages. |
No, manual |
browser-sync |
Setting up a local server from public/ folder that can be accessed on multiple devices in the same network. |
Yes |
build |
Run all tasks included in gulp default, but without setting up a live server and watching for changes | Yes |
clean |
Swipes public/ folder |
No, manual |
Check the gulpfile.js for more details about the tasks.
Happy coding!