9 Settings

9.1 Breakpoints RWD

Description

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 */

9.2 Colors

Description

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.

9.2.1 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

  • $color-foreground-0 #4c4d4e

    1st shade of foreground

  • $color-foreground-1 #878787

    2nd shade of foreground

  • $color-foreground-2 #b7b7b7

    3rd shade of foreground

  • $color-foreground-3 #c7c7c7

    4th shade of foreground

  • $color-background-0 #4c4d4e

    1st shade of background

  • $color-background-1 #878787

    2nd shade of background

  • $color-background-2 #f1f1f1

    3rd shade of background

  • $color-background-3 #c7c7c7

    4th shade of background

  • $color-background-4 #b7b7b7

    5th shade of background

9.2.1.1 Dark equivalent

Description

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)
  • $color-base-dark #fff
  • $color-base-foreground-dark #4c4d4e
  • $color-links-dark #4DADFF

    $color-theme-default-dark

  • $color-foreground-0-dark #FFFFFF
  • $color-foreground-1-dark #e1e1e1
  • $color-foreground-2-dark #b1b1b1
  • $color-foreground-3-dark #a1a1a1
  • $color-background-0-dark #363636
  • $color-background-1-dark #2f2f2f
  • $color-background-2-dark #282828
  • $color-background-3-dark #1e1e1e
  • $color-background-4-dark #000000

9.2.2 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

9.2.3 Alerts colors

Description

Colors for alerts messages.

  • $color-info #0b4892

    Info

  • $color-success #3c7a09

    Success

  • $color-warning #b05105

    Warning

  • $color-error #cc190f

    Error

9.2.4 Black & White

Description

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

  • $color-black #000

    real black

  • $color-white #fff

    real white

9.2.5 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

9.2.5.1 Dark equivalent

Description

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

  • $color-theme-default-dark #4DADFF

    theme default dark

9.3 Fonts

Description

All fonts in the project are set within variables.

Parameters

$fontstack-base ?= 'Helvetica Neue', Helvetica, Arial, sans-serif: default font / body text

$fontstack-headings ?= 'Open Sans WebFont', 'Arial', 'Helvetica Neue', Helvetica, sans-serif: headings

$fontstack-secondary ?= 'Open Sans WebFont', 'Helvetica Neue', Helvetica, sans-serif: call to action, pagers… etc.

9.3.1 Fontfaces

Description

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

9.3.2 Font loading strategy

Parameters

$fontload ?= optional: value for font-display property.

$fontload-js ?= true: true if you choose js solution integrated to Colette

$fontload-class ?= 'webfont': className added to <html> when fonts are loaded

9.4 Grid

Description

Gutter width is used for vertical rhythm.

Parameters

$grid-columns ?= 12: number of columns

$grid-gutter ?= 12px: gutter width is converted to rem unit

9.5 List

Parameters

$list-columns ?= 4: number max of columns in list

9.6 Media Placeholder

Description

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)
'

9.7 Z-Index

Description

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