1 Design

Every design rules and assets, colors, icons, etc.

1.1 Colors

Description

Every colors in this Colettes are variables. If an overwrite of the color is needed, checkout the stylus variables on the settings.

Layout and UI generic colors

  • --color-base #4c4d4e

    text color

  • --color-base-foreground #fff

    if text writen on --color-base

  • --color-links #0062D9

    links color

  • --color-highlight #cc190f

    highlighted color

  • --color-highlight-foreground #fff

    if text writen on --color-highlight

  • --color-native #fff7e2

    ads and external contents

  • --color-native-foreground #4c4d4e

    if text writen on --color-native

1.1.1 Social colors

Description

The social color palette is used for share and socials buttons.

  • --color-social-dailymotion #2068D4

    dailymotion

  • --color-social-facebook #4c64a0

    facebook

  • --color-social-flipboard #f52828

    flipboard

  • --color-social-github #791e8f

    github

  • --color-social-googleplus #d14836

    googleplus

  • --color-social-hootsuite #000000

    hootsuite

  • --color-social-instagram #ff0040

    instagram

  • --color-social-linkedin #0177b5

    linkedin

  • --color-social-messenger #3d6bfb

    messenger

  • --color-social-pinterest #bd081c

    pinterest

  • --color-social-pocket #ed4054

    pocket

  • --color-social-sms #48930b

    sms

  • --color-social-snapchat #fdfe00

    snapchat

  • --color-social-twitter #00a7e7

    twitter

  • --color-social-whatsapp #01a85a

    whatsapp

  • --color-social-youtube #eb3223

    youtube

1.1.2 Alerts colors

Description

Colors for alerts messages.

  • --color-info #0b4892

    Info

  • --color-success #3c7a09

    Success

  • --color-warning #b05105

    Warning

  • --color-error #cc190f

    Error

1.1.3 Theme colors

Description

The color palette is based upon 20 Minutes editorial color chart:

  • each editorial section has a related color
  • we use section names as aliases to define color variables and classes names
  • this colors should respect at least a 4.5 ($contrast) ratio relatively to white
  • if ratio is insufficient some modules add a text-shadow or swith to a darker color
  • --color-theme-default #0b4892

    theme default

  • --color-theme-sport #00b9f3

    theme sport

  • --color-theme-entertainment #cc190f

    theme entertainment

  • --color-theme-economy #053042

    theme economy

  • --color-theme-community #930b48

    theme community

  • --color-theme-weird #ef2a82

    theme weird

  • --color-theme-partner #ff5400

    theme partner

  • --color-theme-planet #48930b

    theme planet

  • --color-theme-media #000000

    theme media

  • --color-theme-hightech #686868

    theme hightech

  • --color-theme-summer #cc4c3c

    theme summer

1.2 Fonts

Description

The standard fonts used in 20 Minutes digital projects are Open Sans and Helvetica.

Helvetica is used as the body text font.

Open Sans is included in the project and available in 3 weights: Regular, Semi Bold and Bold. Open Sans must be systematically used for content titles :

  • bold weight, in block teaser or content view,
  • regular in listed teaser view.
Name Demo
Open Sans Regular

The quick brown fox jumps over the lazy dog

Open Sans Regular italic

The quick brown fox jumps over the lazy dog

Open Sans Semi Bold

The quick brown fox jumps over the lazy dog

Open Sans Bold

The quick brown fox jumps over the lazy dog

Open Sans Bold italic

The quick brown fox jumps over the lazy dog

1.3 Rounded corners

Description

Radius for rounded corners of .box

Parameters

$radius ?= _rem(8px): used by .box

1.4 SVG symbols

Description

Colette use a collection of svg symbols built with svgstore.

By default svg fill are colored by current text color.

  • arrow

    • down
    • left
    • right
    • up
  • social

    • dailymotion
    • facebook
    • flipboard
    • github
    • google
    • googleplus
    • hootsuite
    • instagram
    • linkedin
    • messenger
    • pinterest
    • pocket
    • sms
    • snapchat
    • twitter
    • whatsapp
    • youtube
  • bookmars
  • bookmars2
  • calendar
  • clock
  • clock2
  • comments
  • community
  • cooking
  • cross
  • diapo
  • download
  • folder
  • games
  • grid
  • home
  • image
  • images
  • link
  • logo
  • logout
  • magnifier
  • mail
  • menu
  • mobile
  • more
  • newspaper
  • photo
  • pin
  • play
  • podcast
  • print
  • refresh
  • reply
  • settings
  • share
  • sign
  • social
  • survey
  • tag
  • tick
  • tv
  • user
  • video
  • view

1.5 Contrast

Description

Contrast ratio for accessibility from WCAG recommendations.

Parameters

$contrast: 4.5

$contrast-low: 3

$contrast-high: 7

1.6 Typography

Description

See default typographic styles below:

Example

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph / Body text

Example of a small text

Example of a abbr

Example of a link

Example of a blockquote
on multiple lines

Example of a table
Odd row
Even row
We should think about styling tables' footer
  • List, item 1
  • List, item 2
  • List, item 3
    • List, item 1
    • List, item 2
    • List, item 3
      • List, item 1
      • List, item 2
      • List, item 3
  1. Ordered list, item 1
  2. Ordered list, item 2
  3. Ordered list, item 3
    1. Ordered list, item 1
    2. Ordered list, item 2
    3. Ordered list, item 3
      1. Ordered list, item 1
      2. Ordered list, item 2
      3. Ordered list, item 3
Markup
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Paragraph / Body text</p>
<p>Example of a <small>small text</small></p>
<p>Example of a <abbr title="abbreviation">abbr</abbr></p>
<p>Example of a <a href="#">link</a></p>

<blockquote>
    <p>Example of a blockquote<br />on multiple lines</p>
</blockquote>

<table>
    <thead>
        <tr>
            <th>Example of a table</th>
        </tr>
    </thead>
    <toby>
        <tr>
            <td>Odd row</td>
        </tr>
        <tr>
            <td>Even row</td>
        </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>We should think about styling tables' footer</td>
            </tr>
        </tfoot>
</table>

<ul>
    <li>List, item 1</li>
    <li>List, item 2</li>
    <li>List, item 3
        <ul>
            <li>List, item 1</li>
            <li>List, item 2</li>
            <li>List, item 3
                <ul>
                    <li>List, item 1</li>
                    <li>List, item 2</li>
                    <li>List, item 3</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

<ol>
    <li>Ordered list, item 1</li>
    <li>Ordered list, item 2</li>
    <li>Ordered list, item 3
        <ol>
            <li>Ordered list, item 1</li>
            <li>Ordered list, item 2</li>
            <li>Ordered list, item 3
                <ol>
                    <li>Ordered list, item 1</li>
                    <li>Ordered list, item 2</li>
                    <li>Ordered list, item 3</li>
                </ol>
            </li>
        </ol>
    </li>
</ol>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Paragraph / Body text</p>
<p>Example of a <small>small text</small></p>
<p>Example of a <abbr title="abbreviation">abbr</abbr></p>
<p>Example of a <a href="#">link</a></p>

<blockquote>
    <p>Example of a blockquote<br />on multiple lines</p>
</blockquote>

<table>
    <thead>
        <tr>
            <th>Example of a table</th>
        </tr>
    </thead>
    <toby>
        <tr>
            <td>Odd row</td>
        </tr>
        <tr>
            <td>Even row</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>We should think about styling tables' footer</td>
        </tr>
    </tfoot>
</table>

<ul>
    <li>List, item 1</li>
    <li>List, item 2</li>
    <li>List, item 3
        <ul>
            <li>List, item 1</li>
            <li>List, item 2</li>
            <li>List, item 3
                <ul>
                    <li>List, item 1</li>
                    <li>List, item 2</li>
                    <li>List, item 3</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

<ol>
    <li>Ordered list, item 1</li>
    <li>Ordered list, item 2</li>
    <li>Ordered list, item 3
        <ol>
            <li>Ordered list, item 1</li>
            <li>Ordered list, item 2</li>
            <li>Ordered list, item 3
                <ol>
                    <li>Ordered list, item 1</li>
                    <li>Ordered list, item 2</li>
                    <li>Ordered list, item 3</li>
                </ol>
            </li>
        </ol>
    </li>
</ol>

Source: src/styl/_base/_typography.styl, line 1

1.6.1 Default line height

Parameters

$lh ?= _rem(27px): default line-height for default font-size.

$lh-gap ?= _rem(2px): minimal difference between line-height and font-size.

$lh-division ?= .5: minimal division off lines in vertical rythm