20minutes / colette Goto Github PK

• Use auto-prefixer to replace vendor prefixes mixins
• Check other nib usages in Colette and find alternatives

In order to:

• make mixins() and @block available everywhere by loading them before all stylus files
• make helpers override other styles, by loading them after other stylus files

• to hide an element but keep it readable with screen reader
  • and unhide

Make them consistent with recommended default styles
(see http://www.w3schools.com/tags/tag_hn.asp)

As we aim at removing all bower dependecies, use headroom.js npm package:

npm install headroom.js --save

px width on .socialbar li: https://github.com/20minutes/colette/blob/master/assets/styl/_modules/_socialbar.styl#L7

rem width on .btn-icon:
https://github.com/20minutes/colette/blob/master/assets/styl/_layout/_buttons.styl#L24

Use em values for sizes, widths and heights.

=> Use variables only

For each color within settings, define a contrast color to handle background / foreground colors association.
The idea, if we use a color as a background, is to have a predefined associated color for the text. In the following example, the contrast color for default is white:

See the screenshot below, we should have a background on the inscrivez-vous button:

.list-pos-outside
.list-pos-outside li
    list-style-position inside
    padding-left 1em
    text-indent -1em

Code is here

• what it does ?
• is it correctly named ?

Add:

• standards to follow
• custom coding conventions
• border-width should be set in px and shouldn't depend on the font-size (avoid unwanted rounded border)

Retrieve .breadcreumb styles from heakl, to make them available via colette.

• connect project to travis
• create travis.yml file

Corriger l'alignement des guillemets avec le texte quand il y a des paragraphes dans la balise blockquote.
https://files.slack.com/files-pri/T0J95DTSQ-F24U6U7J8/capture_d_____cran_2016-08-25____16.35.46.png

Retrieve .block styles and js from hekla to make them available via colette.

• Remove it from assets/styl source files
• Use it as an npm dependency (needs package.json and gulpfile.js files' update)

A newspaper can be more specific than 20minutes and by exemple a sport newspaper:

• soccer
• tennis
• baseball

It's why categories should be configurable.

Currently we have a set or margin and padding classes, based on a 1.2rem guetter width:

<p class="pa1">Paragraph with a 1.2rem padding</p>

Create, in addition to these classes, mixins so that we can define gutter-based paddings and margins within css declaration. The mixins would look like:

_pa(n)
    padding: n * $gutter * 0.1rem

_pl(n)
    padding-left: n * $gutter * 0.1rem

... etc

To be more consistent with smacss methodoly.
Keep in layout/:

• footer
• grid
  -spaces

Move to theme/:

• border
• box
• buttons
• icons
• loading

https://github.com/20minutes/colette/blob/master/assets/styl/_base/_normalize.styl#L78 => needs to investigate if it's still necessary to display img as block.

Use vertical-align: middle on textarea to have same behaviour than text input

If we use alerts on colored background the color will change by the opacity

For a better a11y we need to improve contrast http://contrast-finder.tanaguru.com/
Contrast ratio 4.5 minimum.

https://20minutes.github.io/colette/section-components.html#kssref-components-alerts

Not yet supported by kss: kss-node/kss-node#52

It's for use aria state attributes (aria-diabled, aria-busy, …).

To avoid $gutter * .1rem

Border and underline is too much.

Split _settings.styl into _settings and helpers/text + helpers/block files.

• Contrast check should only return true or false. (Only optionally throw a warn).
• Create a new mixin to choose the first color of a list who validate the contrast.
  And throw a warn if no valid color for text

At this time, spiner use this html.

<div class="spinner">
    <span class="bounce1"></span>
    <span class="bounce2"></span>
    <span class="bounce3"></span>
</div>

I think to be able to do same effect with this markup :

<div class="spinner">
    <span>Loading…</span>
</div>

It could be better for a11y.

Warning message can be useful to show something wrong but softer than a error.

• Create a specific folder for settings
• Split settings.styl into multiple files (group variables/classes/mixins/etc. by concern)

Dans colette gérer les critical / non critical avec des tableaux dans le fichier _settings.styl, pour indiquer les fichiers de styles qui doivent être inclus en ligne dans le html ou dans la css finale

In the same time, fix the error: invalid-meta The "main" field cannot contain minified files (when running bower install command)

Adapter le rendu des font de fallback (interlignage, interlettrage entre autre) pour être au plus proche d’Open Sans

Rework socialbar
assets/styl/_modules/socialbar.twig
assets/styl/_modules/_socialbar.styl

Rework buttons
assets/styl/_modules/_buttons.styl
assets/styl/_modules/buttons-icon-default.twig
assets/styl/_modules/buttons-icon-social.twig

https://github.com/20minutes/hekla/issues/2290

https://github.com/20minutes/colette/blob/master/assets/styl/_settings.styl#L67-L70

• write skin label in the DOM ?
• make skin labels customizable through variables