- Place toi avec ton terminal dans un dossier qui va bien.
git clone git@github.com:lifeae/THP_S7_J1.gitcd THP_S7_J1- ouvre le fichier index.html pour voir mon kit !
Projet : Faire son propre kit UI
- Introduction
Dans ce projet, nous allons te faire réviser le CSS et le design en te demandant de créer toi-même ton propre kit UI ! Tu vas pouvoir appliquer tes compétences en design, marketing, ou bon sens à un fichier index.html qui affichera de manière bien présentée ton kit (un peu comme cette présentation d'un kit UI sur uibundle).
Tu vas devoir trouver les couleurs de ton site, la typographie, designer des éléments comme les boutons et d'autres. Grâce à ce kit UI, tu pourras concevoir facilement des molécules, des organismes, et tu auras un super thème pour ton futur site internet. 2. Le projet
Pour ce projet, il est interdit d'utiliser un framework existant tel que Bootstrap. Cela permettra deux choses : la première est (aussi) de te faire travailler le CSS, et partir de rien est la meilleure des façons. La seconde est qu'il n'est pas très aisé de changer un fichier Bootstrap déjà existant sans bien connaître les règles CSS. 2.1. The Agency Project
Dans ce projet, nous allons te donner trois pitch de startups révolutionnaires. Tu devras en choisir une parmis les trois et imaginer un le kit UI qui va avec :
Facile : une marketplace où les gens pourraient proposer des cours de cuisine (le airbnb de la cuisine)
Moyen : Une école dématérialisée proposant des cours 100% en ligne à la finance de marché
Difficile : Un réseau social où les férus d'escalade pourraient noter les voies qu'ils grimpent, et sociabiliser grâce à ceci
Prends-en une, puis imagine l'univers que tu vas faire avec. Commence à imaginer les quelques pages web importantes, essaie de comparer avec les sites du même genre, et tu devrais avoir un univers qui s'en dégage. 2.2. Les éléments à designer et concevoir
Pour ce projet, nous allons te demander de créer un répo d'une application web statique, avec un fichier index.html qui contiendra tout ton kit UI. Un peu comme cette page qui contient une liste d'atomes et molécules désignés pour l'occasion.
Voici la liste des atomes que tu devras concevoir :
Les couleurs
La typographie
Les boutons
L'iconographie
Des inputs de formulaires
Des cartes
Des listes
Avec ceci, tu commenceras à avoir une identité visuelle bien définie. Tu seras prêt pour l'exercice de demain qui sera de : reprendre les atomes puis faire des molécules et organismes que l'on retrouvera partout dans ton application. Avec ceci, tu auras un front qui fracasse, et tu seras prêt à partir à l'aventure du front dynamique de JavaScript. 2.2.1. Les couleurs
Commence par choisir 5 couleurs :
La couleur principale (primary)
La couleur secondaire (secondary)
Trois nuances de gris :
Un gris très foncé (dark)
Un gris plus clair (medium-light)
Un gris très léger (light)
Il te faudra aussi trouver des couleurs pour les boutons, les alertes :
warning dans les tons oranges
danger dans les tons rouges
success dans les tons vertes
info dans les tons bleues
Garde-les dans un coin de papier, on les affichera au moment des boutons.
Comment appliquer ces couleurs ? C'est plutôt simple, on va faire comme bootstrap et dire "quand quelque chose est de la classe couleur on va lui donner la couleur couleur". Ainsi, tu devras assigner dans ton fichier style.css le code suivant :
/************************/
/* COULEURS */
/************************/
.primary {
background-color: #000000;
}
.text-primary {
color: #000000;
}
2.2.2. La typographie
Tu devras choisir deux polices pour ton kit :
Une police pour les headings (police de titre)
Une police pour le texte normal
Puis tu devras designer la typographie des éléments suivants :
de <h1> à <h6>
les <p>
le tag <lead>, qui correspond à un paragraphe à qui tu veux donner plus d'importance
les <blockquote>, pour les citations
les <ul>, <ol>, et <li> pour les listes
2.2.3. Les boutons
Tu devras designer les boutons, et afficher les 5 types de boutons :
primary
warning
danger
info
success
Voici les types de boutons que tu devras faire :
Les normaux (btn)
Les outline
Les petits (sm) et grand lg
2.2.4. L'iconographie
Simple, prends un univers d'iconographie qui correspond bien à la marque et mets-y deux rangées pour montrer les icônes. 2.2.5. Les inputs de formulaires
Tu devras designer les éléments d'un formulaire :
Les <input> classiques
Les <select>, et les <option> à l'intérieur (le dropdown d'un formulaire)
Les <textarea>
Les radio buttons
Les checkboxes
2.2.6. Les listes
Tu vas commencer à faire ta première molécules, yay ! La group-list est un élément ressemblant à une carte qui permet d'afficher une liste d'informations utiles.
Une liste est assez simple : tu mets des éléments de texte ensemble, tu ajoutes une image ou une incone ou rien, et puis c'est tout ! Je te laisse designer la liste qui te convient bien. Voici quelques exemples : celui de Bootstrap, celui de Material design, ou encore ceux de BootFlat.
Comme tu peux le voir, Bootstrap range les listes non pas dans les ul ou li, mais dans un div avec la classe list-group. En effet, cette liste n'est pas vraiment une liste dans le sens html, mais une liste dans le sens molécule. En gros, la liste-group que l'on a est plus une proto-carte que l'atome ul. Elle te servira à réaliser des cartes pour plus tard. 2.2.7. Les cartes
Une des molécules les plus importantes d'une application : les cartes. Il existe plein de types de cartes (tu peux en voir ici par exemple) :
La carte simple, avec photo, titre, paragraphe, bouton
La même carte sans photo
Une carte avec photo et paragraphe
Une carte avec un icone / avatar à gauche et titre + paragraphe à droite
Une carte avec une photo qui prend tout et un titre par dessus
Va sur la doc de Bootstrap, choisis 5 cartes qui iront bien avec ton site, puis designe-les en fonction de ton futur site. 3. Rendu attendu
Un dossier qui contient un kit UI qui est magnifique.