Home

Table of Contents

Welcome
Sketch Library

Welcome

Welcome to the Open Colleges Style Guide Wiki!

This Wiki is intended to serve as a technical reference when developing new products and features so that they adhere to the Open Colleges Style Guide.

Sketch Library

Our components are also available as a Sketch library. The Sketch library has been designed to be as intuitive as possible, while offering fully customisable symbols so that you can be up and running fast.

Symbols

The library's symbols are organised into a simple structure. If you were designing for @media(s) (small) contexts and needed a button component that was .compact and .s (small) in size, you would find it in the following location:

⚙️component/button/@media(s)/.compact/.s

This would result in the following symbol:

Parts of the structure are omitted if they are not applicable to a particular symbol. If you were designing for @media(m) (medium) contexts and needed an avatar component that was .l (large) in size, you would find it in the following location:

⚙️component/avatar/.l/default

This would result in the following symbol:

Notice that the @media(m) argument has been omitted as the avatar component is context agnostic and only takes a size argument.

Overrides

If you then wanted to modify the button component so that it had .primary, .error and :focus overrides applied to it, you would do so using the Overrides panel.

With the symbol selected, you'd update the override labelled {.class...} + {:pseudo-selector} to:

⚙️component/button/🕹️override/{.class...} + {:pseudo-selector}/.primary/.error/:focus

This would override the original symbol and result in the following symbol:

Notice that the symbol has only been modified using overrides that pertain to the button component:

⚙️component/button/🕹️override

Don't use a button component symbol and then modify it using avatar component overrides, as this would only end in tears.

Depending on what symbol you are working with, there will be a varying number of overrides. The number of overrides available to a symbol is determined by the component's complexity.

It's also important to note the syntax used in the overrides. Both {.class...} and {:pseudo-selector} are wrapped in curly brackets, indicating that they are variable. Additionally, the ellipses used in the {.class...} variable indicate that it can be passed any number of class arguments, including zero.

The original symbol inherited classes of .primary and .default, as well as a :pseudo-selector of :static. The modified symbol was assigned classes of .primary and .error, as well as a :pseudo-selector of :focus.

This syntax is used consistently throughout the library.

Content

If you wanted to have the button component read "Cancel", you would also handle this in the Overrides panel. With the symbol selected, you'd change the override labelled {value} to:

Cancel

This would override the symbol placeholder content and result in the following symbol:

---

Armed with this knowledge surrounding symbols, overrides and content, you should be ready to start desiging using the Open Colleges Style Guide. Good luck!