Loading

Workbench

Frontend boilerplate.

Workbench is a frontend boilerplate build for faster development. Out of the box it includes responsive typography, some basic styling and a paragraph system.

Workbench is not a frontend framework, it is a starting point for new projects to be customized to the need of your project.

Automation with gulp

Run gulp watch to compile your sass, run it through autoprefixer and rucksack, base64 small images in your css and minimize the whole package.

Gulp watch also checks for changes in your js files and automaticly concats and minimizes all your files.

You can optimize the images in the images folder by running gulp optimize-images.

Styles

Workbench provides some basic styling on elements but feel free to adapt them to your needs.
You can find all the styles in the assets/sass folder.

Typography

Header 1 3.375rem / 54px

Header 2 2.25rem / 36px

Header 3 1.5rem / 24px

Header 4 1rem / 16px

Paragraphs look like this, they can contain bold words, italique words and underlined words.
You can uppercast words with the uppercase class and lowercase with the .lowercase class.

Links & buttons

Add a .button or .button-filled class to a link to make it look like a button

basic link

Lists

Unordered list

Ordered list

  1. lijst
  2. lijst
  3. lijst

Form elements

Input

Select needs the select.js library

Textarea

Radiobuttons

Tags

kobeaerts tag 2
tag 3

Paragraphs section

Use the classes to make a mix of text, quotes, titles, images, image grids and image carousels. Fully responsive!

This is a title paragraph

An body paragraph filled with lorem ipsum

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

An image paragraph without caption

gradients

Image paragraph with caption down under here

gradients
This is an caption

Images are wrapped in figure tags with a optional figcaption tag

Gallery in grid mode

Gallery in carousel mode

How quotes work

This is a quote pulled to the left

Author of the quote

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

This quote is pulled to the right

Author of the quote

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Hey, you can also center me!

Author of the quote

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.