Styleguide

Metamn

Styleguide

Home

Example

Styleguide Intro

Intro

Styleguide

Lines

Numbers

0 1 2 3 4 5 6 7 8 9

a —
b —
c —
d —
e —

Colors

white

blue

green

gray

Description

This is the styleguide accompanying the site Metamn. It serves as a visual documentation for the framework and components building the site.

Any changes made to the site design are automatically reflected in this styleguide.

We use the BEM to name and structure code. BEM is using Framework for basic components like typography, colors, the grid and Project for all other components specific to the site like headers, thumbs, portfolio sections.

Styleguide menu

Framework

Framework
- Behavior
- Design
  - Colors
  - Decorations
  - Typography
    - Elements
      - Link
      - Ol
      - P
      - Ul
      - Uppercase
    - Fonts
    - Reset
    - Scale
    - Text style
- Helpers
- Structure
  - Breakpoints
  - Figure
  - Flexbox
    - Grid
    - Stretch
  - Intrinsic ratio
  - Semantic html5 titles

Project

Project
- Description
- Header
- Menu
- Service
- Services
- Slider
- Templates
- Thumb
- Title
- Work
- Works