9 Settings

Colette provide a collection of breakpoints and media queries, available in a $breakpoints hash.

We handle 3 default primary breakpoints and related media queries:

$breakpoints-main ?= {
    'sm': "screen and (min-width: 420px)"
    'md': "screen and (min-width: 768px)"
    'lg': "screen and (min-width: 960px)"
}

We can also define secondary breakpoints within the $breakpoints-tweak collection (which is empty by default).

Colette allows you to:

• change primary breakpoints by updating the $breakpoints-main within your stylesheet,
• and/or define additional breakpoints by filling the $breakpoints-tweak.

Both collections are merged within $breakpoints.

Usage example

/* stylus file */
@media $breakpoints.lg
    // styles

will compile to

/* CSS file */
@media screen and (min-width: 960px)
    /* styles */

Every colors in this Colettes are variables. Each of these stylus variables are then associated with a css variable. Prefer using a css variable and overwrite the stylus variable if necessary.

The values $color-foreground-*-dark are in fact generated. The original value is inverted and lightened at 41%:

$color-foreground-*-dark ?= lighten(invert($color-foreground-*), 41)

The values $color-background-*-dark are also generated. The original value is darkened at 79%:

$color-background-*-dark ?= darken($color-background-*, 79)

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

Colors for alerts messages.

Universal real black and white, use for shade and lights.

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

All these colors are set with the same color as $color-theme-default-dark. It's however possible to set a color fo each theme by adding the suffix -dark on it.

For exemple, $color-theme-sport will have it's equivalent value $color-theme-sport-dark

All fonts in the project are set within variables.

$fontface is an hash import from $fontface-file path of a json.

Gutter width is used for vertical rhythm.

SVG basic settings

Default svg value for the logo:

$mediaPlaceholder: '../../svg/logo.svg'

Default svg style for the logo:

$mediaPlaceholder-style: '
    path
        fill rgba(255, 255, 255, .5)
'

Colette provides 3 default z-index

$zIndex ?= {
    base: 1
    overlay: 10
    layout: 20
    modals: 30
}

Usage example

/* stylus file */
.foo
    z-index: zIndex.layout + 4

will compile to:

/* CSS file */
.foo
    z-index: 24