WORKING WITH STYLE

Développer un site web ou une application mobile c’est bien, mais lui donner du style c’est encore mieux. Faites le tour des méthodes et bonnes astuces pour développer efficacement en CSS, SCSS, LESS ou encore en SASS.

PARTONS DE LA BASE : LE CSS 

Un peu d’histoire
Le CSS ou encore Cascading Style Sheets peut se traduire par une feuille de style en cascade. Il est utilisé pour mettre en forme, gérer le design de fichiers HTML ou XML.
Il permet notamment de :

Les propriétés, qu’est-ce que c’est ?

Les propriétés sont regroupées par blocs de règles, entre accolades. Chaque bloc est précédé par un sélecteur désignant un élément de structure : éléments, classes, ID.
Display et positionnement
L’affichage sur CSS est simple :

Display flex : Il offre une capacité à un élément flexible de modifier ses dimensions pour remplir l’espace disponible de son container. Il est particulièrement apprécié sur du React Native.
Il existe plusieurs outils de position :

LES NOUVEAUX LANGAGES 

Le CSS c’est bien mais il n’est pas assez souple. Plusieurs langages ont été créés pour pallier les manques du CSS.
Le SASS (Syntactillay Awesome Style Sheets) : un langage de script interprété en CSS qui intègre de grandes nouveautés :

Son gros point faible est qu’il ne contient pas d’accolades dans son code. Pour répondre à cela, un nouveau langage est apparu : le LESS. Une réelle correction du SASS, il est maintenant possible de coder du CSS dans un fichier LESS.
Alors comment faire son choix ?

BOOTSTRAP

Bootstrap est un framework de style, de CSS, apportant plusieurs points positifs :

Il y a un point important à connaitre sur Bootstrap c’est le container : il doit absolument être placé au début de tout. Un container va contenir des row (lignes) et des col (colonnes). Il est donc important de respecter l’ordre : container – row – col.
Si vous n’êtes pas rigoureux vous allez vous retrouver avec des pixels en trop.
Astuce : Il est aussi possible de faire du display flex avec Bootstrap
Même si Bootstrap est customisable on retrouve souvent des sites qui se ressemblent et il est assez limité pour des écrans compliqués.

L’IMPORTANCE DE L’UI/UX

L’UX représente l’expérience globale ressentie par l’utilisateur lors de l’utilisation de l’interface. L’UI est ce qui fait le lien entre l’humain et la machine. Votre design doit avoir un but, il est donc important de déterminer votre cible et définir son utilisation.
Il y a néanmoins quelques bonnes astuces que vous pouvez déjà appliquer dans vos design :

Pour travailler avec style et être accessible à tout le monde voici une infographie qui peut vous aider.

 


par admin_tcm

Articles similaires TAG