Styleguide home

Dips styleguide

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.

Building blocks

The building blocks of the system is inspired by Brad Frost's Pattern lab, but with some modification.

Element

Elements are all standalone elements that works on their own. Examples are:

  • button
  • header
  • form element
  • quote

Component

Components are to or more elements put together. Examples are:

  • search form
  • header with subheading
  • quote with citation

Module

Modules are elements and components put together. Examples are:

  • Hero banner with image, tilel, subtitle and button
  • Teaser article with image, title, link, button
  • Tile with icon, title, subtitle and hidden content

Container

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:

  • Section
  • Grid, predefined columns that changes gets modified based on screen size.
  • Gallery, similar to grid but works better when there is more than one row.

Developer guidelines

Dependencies

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.

Getting started

  1. Install every gem, bower components and node plugin

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
  1. Copies and prefixes (.min) custom modernizr file from source to public folder
  gulp modernizr
  1. Compile source code and setup a local server that updates on file changes
  gulp

Deployment

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

Task overveiw

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!