Front-end framework

With just four Stylus variablesfs(mp(5))

Spin up a front-end frameworkfs(mp(4))

Based on a modular type scalefs(mp(3))

Set with vertical & horizontal rhythmfs(mp(2))

Over a responsive column layoutfs(mp(1))

Front-end framework sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.fs(mp(0))

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.fs(mp(0))

Responsive column layout

Utility classes to build a flexible grid layout with regular margins
.clear-col
.one-col
.two-col
.two-col
.three-col
.three-col
.three-col
.two-three-col
.three-col
.four-col
.four-col
.four-col
.four-col
.two-col
.four-col
.four-col
.three-four-col
.four-col
.six-col
.six-col
.six-col
.six-col
.six-col
.six-col
.three-col
.six-col
.six-col
.six-col
.six-col
.two-col
.six-col
.six-col
.six-col
.two-three-col
.six-col
.six-col
  • Framework

    Opal Coast is a instantly usable, readily extensible framework that starts you off quickly and scales easily. It provides rules for all HTML elements in a responsive grid layout, all interdependently controlled with SCSS variables.

  • Clarity

    Opal Coast is designed to keep unruly masses of information — and your code base — in check. Vertical & horizontal rhythm, colour & iconography are used to organise in an immediately scannable manner. Clarity is King.

  • Guideline

    The framework and this style guide are meant only as initial direction. Its aim is to be built upon, with use customised for each app in which it's implemented. In this way, new modules and styles will be created that go back to improve the core.