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.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
--color-theme-tempo #cc0f53
theme summetempor

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
20mintv
bookmars
bookmars2
calendar
clock
clock2
comments
community
cooking
cross
diapo
download
flash
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

Ordered list, item 1
Ordered list, item 2
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

Compiled HTML
Template

<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