La base du projet

(twitter-)Bootstrap :

• une base css solide
• un système de grilles
• une bonne gestion du responsive
• une décli simple pour un site institutionnel

sass/compass :

• les variables, c'est 'achement pratique
• les mixins aussi

gulp:

• ..vous êtes encore là ?

Pré-découpage des créas

Pas de "montage" de page.

On pense composant

Les modules

Des composants réutilisables

mixins jade

grâce aux

aux .. quoi ?

jade

langage de templating HTML

 

en gros, on écrit de l'HTML plus vite

 

mixin

composant dynamisable

et donc réutilisable et adaptable

Exemple

mixin Voiture()

Exemple

mixin Voiture('rouge','cabriolet')

osef, c'est une prez

pas un IDE

mais soudain,

c'est le drâme

on a fait pleins de composants

mais ils ne s'entendent pas bien entre eux

et nous étions rebelles

on a exigé une charte en début de projet !

Les tickets Jira s'acumulaient

les CP s'impatientaient

les Backs chômaient

et pendant ce temps au Front ...

L'idée

est devenue

grâce à la compréhension et la confiance de toute l'équipe

Projet

laposte.bootstrap

"Hell is empty, 

and all the devils are here"

- William S.

• une pléthore de Daily passées à répéter "sur les espacements..."
• ..une crédibilité tombée à zéro
• une fraternité féminine dissoute

 

un chantier

monstrueux

des défis

de haut niveau

• comprendre et respecter la team Créa
• comprendre et respecter la team Back
• ... en même temps

pour aujourd'hui garantir

notre charte graphique

et éviter ça

tout ça pour ça ?

heuu...

OUI.

et en plus, j'en suis fière

Concrètement

une charte graphique

et

des composants réutilisables

c'est

avoir

Combien de temps ?

une matinée

Combien de temps ?

l'après-midi

oui après ça j'ai peut-être traité deux ou trois tickets Jira

heuu dites, le Front..

vous nous arnaquez sur les estim' en fait...

Non.

et j'en suis plutôt fière aussi

laposte.fr

ce n'est pas juste de l'intégration de template

parce que

c'est de l'expertise

• comprendre la demande

si je te demande si t'as fait appel à un UX,

c'est parce qu'en tant qu'utilisateur,

jamais

je ne complèterai ton formulaire

et assurer un rôle de conseil

• maintenir, enrichir, et non pas réinventer la base

Rien ne se

tout se transforme

crée

, rien ne se

perd

• être vigilant pour garantir le meilleur niveau possible en accessibilité

• contraste des couleurs, tailles de texte,...
• tests des versions no-js, no-css, navigation au clavier, ...

Non, franchement, le violet de l'espace business comme couleur de typo.. sur le fond gris sombre de la metanav..

ça passe pas

• et les petit bonus "wahou"

[CP Fonc] oh le scroll est animé, cool

[dev Back] oh mais tu as déjà prévu la récup des données ?! Cool

et puis tout ça m'a donné

une nouvelle

idée

on a des composants,

et une charte graphique

 

ça maintenant, 

vous le savez.

Mais

est-ce que vous les connaissez ?

ça vous dirait

de jouer avec ?

Encore une idée..

.. devenue projet !

Hélas

ce n'est pas un outil qui m'offrira + de vacances

des wireframes

avec nos composants

et notre charte graphique !

responsive inclus

Et pour les p'tits gourmands,

que tu sois tech ou créa

ou curieux

tech curieux ou créa curieux ça marche aussi, bon..

de la documentation

bootstrap like

moi j'adore les gifs animés, et vous ? =]

en 2 versions en plus

on a beacoup de composants

il faut savoir comment ils sont fait

pour pouvoir 

mieux les utiliser

et les faire

évoluer

une aide utile pour la créa

c'est aussi

enfin je l'espère..

un rappel des couleurs des espaces

un rappel du système d'espacements

le fameux

un rappel des typos et de leur tailles

bon

bah y'apuka

• -> lien vers laposte.bootstrap

• -> lien vers laposte.starterkit