Only logo graphic

Style guide

Type

Typeface

Only Framework uses a font stack based on system fonts across all common desktop and mobile platforms, in the following order:

  • -apple-system
  • BlinkMacSystemFont
  • Segoe UI
  • Roboto
  • Oxygen
  • Ubuntu
  • Cantarell
  • Fira Sans
  • Droid Sans
  • Helvetica Neue
  • sans-serif

Additionally, for the <code> font Only uses:

  • Inconsolata (loaded through Google Fonts CDN)
  • monospace

If you don't use <code> fonts, just remove the CDN call from the <head> to save a bit of performance.

Headings

Headings (H1-H6) uses sizes set in variables found in _fonts.scss.

Heading 1 (H1)

$font__size--xxl

Heading 2 (H2)

$font__size--xl

Heading 3 (H3)

$font__size--l

Heading 4 (H4)

$font__size--m
Heading 5 (H5)
$font__size--s
Heading 6 (H6)
$font__size--s

Font sizes

Font sizes relate directly to heading sizes to get consistent scale.

Size XXL 4em on 1.8 line-height Size XL 2.8em on 1.8 Size L 2.1em on 1.8 Size M 1.35em on 1.6 Size S 1em on 1.6 Size XS 0.8em on 1.45 Size XXS 0.65em on 1.3

The following classes set the sizes above:

  • .size-xxl
  • .size-xl
  • .size-l
  • .size-m
  • .size-s
  • .size-xs
  • .size-xxs

Font weight

Three different weights are provided. Names in parenthesis are the class names you should use.

  • .light: set weight to weight 100
  • .regular: set weight to weight 300
  • .bold: set weight to weight 500
Code example
<span class="light">

Font scaling

Fonts scale globally in size and line-height at set intervals. You can tweak these values in $global-font-size in _fonts.scss.

  • 1.0x size and 1.0x line-height @ 1024px
  • 0.85x and 0.95x line-height @ 768px
  • 0.75x and 0.95x line-height @ 320px

Typographic control

Standard HTML elements for bold or strong and emphasized text should normally be used.

  • Bold text using <b>
  • Strong text using <strong>
  • Emphasized text using <em>

If you somehow don't want, or can't, use the more semantically correct <b> or <strong> elements you can use span classes to make bold text. You can also use those classes to make text with italics or why not an underline when you don't want an <em>.

Code example
<span class="italic bold underline">

Paragraph text

One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.

Blockquote and cite

I am not one who was born in the possession of knowledge; I am one who is fond of antiquity, and earnest in seeking it there.

Confucius, The Confucian Analects

(551 BC - 479 BC)

Style

Colors

These colors are specified in _colors.scss. There are also CSS classes with their identical color name in _utilities.scss which change the color attribute. Suffix these with --bg to get the background-color version.

Code example
<div class="blue blue--bg">
Blue
#00acf0
Purple
#7e54d1
Green
#14d26e
Yellow
#ffd200
Red
#d82a4e
Black
#000
Dark gray
#606060
Gray
#c1c1c1
Light gray
#f0f0f0
White
#fff
Off-white
#f8f8f8
Off-black
#1e1e1e

Animations

Animations and transitions are handled in separate mixins stored in _animations.scss.

Fast
Normal

Links

Nothing strange—just a regular link here.

Code example
<a href="#">

Links should have some kind of differing indication for their normal, hover, active and visited states.

Normal
Hover
Active
Visited

Layout

Grid

A simple, barebones grid based on flexbox is available to modify based on your needs.

1
1/2
1/2
1/2
1/4
1/4
1/3
1/3
1/3
1/5
1/5
1/5
1/5
1/5
40%
60%
75%
25%

There are a range of predefined sizes:

  • .grid__block--full
  • .grid__block--half
  • .grid__block--third
  • .grid__block--fourth
  • .grid__block--fifth
  • .grid__block--25
  • .grid__block--40
  • .grid__block--60
  • .grid__block--75
Code example
<div class="grid__block grid__block--fourth">

Alignment

Typical text alignment to the left (align-left), center (align-center) or right (align-right). Also gets display: block which may interrupt your layout so consider using flexbox or something else instead.

Left Center Right

Code example
<span class="align-left">

Unordered list

A list with bullets.

  • List item
  • List item
  • List item
  • List item
  • List item

Ordered list

A list with numbers.

  1. List item
  2. List item
  3. List item
  4. List item
  5. List item

Components

Form

Text
Text
Text

Button

Patterns

Image

Loading images is no big deal. However, Only encourages the use of responsive lazy-loading instead of just plopping in your pix. Make sure that the libraries lazysizes and respimage are loaded for this pattern to work.

Code example
<picture>
	<source media="(min-width: 1024px)" srcset="media/img/1024@1x.jpg, media/img/1024@2x.jpg 2x">
	<source media="(min-width: 768px)" srcset="media/img/768@1x.jpg, media/img/768@2x.jpg 2x">
	<source srcset="media/img/320.jpg, media/img/320@2x.jpg 2x">
	<img src="media/img/768@1x.jpg" alt="alt title">
</picture>
alt title

A range of test images are provided in the media/img folder for mocking up layouts or testing responsive loading.

Meta

Utility classes

There are a bunch of utility classes available.

  • .display-block: force display as block element
  • .display-inlineblock: force display as inline-block element
  • .display-flex: force display as flex element
  • .display-flex-center: set content to flex and then center it inside the element

  • .hide: don't display
  • .hide__mobile: don't display on screens up to tablet size
  • .hide__print: don't display in print

  • .float-left
  • .float-right
  • .clear-left
  • .clear-right
  • .clear-both

  • .padding-zero
  • .margin-zero
  • .margin-bottom-1em
  • .margin-bottom-2em
  • .margin-bottom-3em
  • .margin-top-1em
  • .margin-top-2em
  • .margin-top-3em

  • .line-height-1em
  • .line-height-1pointem

Breakpoints

These are the breakpoints used throughout the code.

  • Desktop (wide): 1180px
  • Desktop: 1024px
  • Tablet: 768px
  • Mobile (XL): 736px
  • Mobile: 320px

Distances

Distances are set according to variables rather than individually placed in order to get maximum consistency in spacing. You can of course also of CSS calc() together with Sass to compute fractions of these values according to some logic, like halves or quarters.

  • $padding-small: 1em
  • $padding: 3em
  • $padding--tablet: 2em
  • $padding--mobile: 1em
  • $margin-small: 1em
  • $margin: 2em
  • $margin--tablet: 2em
  • $margin--mobile: 2em

External libraries

These are the libraries used within the site. Normalize is included in _reset.scss. The rest are minified into two files at the very end of the HTML document, one of which is critical, and the other which is asynchronously loaded.

  • Normalize 4.2.0: in _reset.scss
  • LoadCSS 1.2.0: in critical.min.js
  • Font Face Observer 2.0.1: in critical.min.js
  • HTML5Shiv 3.7.3: in scripts.min.js
  • Respimage 1.4.2: in scripts.min.js
  • Lazysizes 2.0.0: in scripts.min.js
  • Fastclick 1.0.6: in scripts.min.js
  • Fragment.js: in scripts.min.js