Getting Started

A guide to getting setup using our pattern library for the first time.

Prototyping

I made 5,127 prototypes of my vaccum before I got it right. There were 5,126 failures. But I learned from each one. That's how I came up with a solution. So I don't mind failure.

James Dyson

To start prototyping new pages, simply clone the prototyping enviroment we have created https://github.com/carloan4u/create-prototype.

This will give you access to everything in our pattern library. You will be able to use any Atoms, Molecules, Organisms or core patterns such as typography and icons. All of which are documented in the relevant sections in the navigation on the left.

Now you can you knock up lighting fast prototypes in React/Redux (or whatever you want), to show off to stakeholders.

We would recommend first taking a look at our Grid documentation to get a basic page structure working before adding any Atoms, Molecules or Organisms.

Heres one we made earlier...

Also, we have a prototype for you to use as a reference should you need one; https://github.com/surf66/gamification-prototype

SASS Base

If you'd like to write your own SASS and generate your own CSS using some of the underlying features in Zuto's UI, then you'll need SASS Base.

SASS Base is a node module contianing all our SASS variables, functions and mixins. For example, we have variables for all our brand colours, mixins for styling form inputs and functions for converting pixels to rems. Our grid breakpoints are defined here too and you'll need these variables in order to write media queries.

Follow the link below for instructions on how to start using SASS Base.