Figure — Styleguide

Metamn

Styleguide Figure

Figure

Description

Displaying images in a responsive and retina friendly way using the Picturefill library.

Example

Mobile (338px × 200px)

Mobile (338px × 200px)

Mobile for retina displays (676px × 400px)

Mobile for retina displays (676px × 400px)

Tablet (591px × 350px)

Tablet (591px × 350px)

Tablet for retina displays (1.183px × 700px)

Tablet for retina displays (1.183px × 700px)

Laptop (688px × 407px)

Laptop (688px × 407px)

Laptop for retina displays (1.375px × 814px)

Laptop for retina displays (1.375px × 814px)

Desktop (992px × 587px)

Desktop (992px × 587px)

Desktop for retina displays (1.926px × 1.140px)

Desktop for retina displays (1.926px × 1.140px)

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

Menu