Ressources Magic Makers

 

Site en maintenance

 
Nous sommes actuellement entrain de mettre à jour les ressources de ce site.
Pendant la mise à jour vous pouvez retrouver tous les nouveaux contenus sur le site
 

https://lp-magicmakers.fr/

 
 

Le CSS !

CSS ? Qu’est ce que c’est ?

Le CSS vient de l’anglais « Cascading Style Sheets » et permet la customisation et l’ajout de style à notre page web. Le CSS permet d’ajouter des couleurs aux textes, aux arrières plans, de souligner, surligner, mettre en italique, en gras… Et pleins d’autres choses. 

Ici nous allons utiliser Bulma qui permet de faire du CSS facilement !

Les classes

On veut ajouter du style sur un bouton mais pas un autre, ou sur un paragraphe en particulier, comment fait-on ?

En HTML on peut catégoriser les balises qu’on utilise, pour ce faire on utilise les classes. Une classe est une catégorie, une classe a un nom. Plusieurs balises peuvent avoir les mêmes classes.

<p class="home">J'ai une classe !</p>
<p class="user button">J'ai deux classes !</p>

Les classes sont séparées d’un espace et peuvent permettre d’ajouter du CSS sur un élément en particulier ou d’avoir plusieurs règles qui restent entre les différentes pages. Ici on les utilisera surtout parce que ça nous permettra de mettre les mots clés de Bulma.

Bulma

Bulma ? Qu’est ce que c’est ?

Bulma est un framework CSS qui permet de faciliter la vie des personnes qui font du web. Cela permet d’ajouter très simplement des couleurs, de la mise en forme sans se prendre la tête.

Si tu veux aller voir un peu plus ce que c’est → Bulma

D'accord mais ça marche comment ?

Bulma fonctionne avec une simple page de CSS, donc pour utiliser Bulma il suffit de rajouter une ligne à notre balise head :
<head>
  <title>demo</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
</head>
-Okay, mais ça ne change rien !

Meteor sans Bulma

Meteor avec Bulma

Quoi ? Mais ça a juste enlevé le style déjà existant et changé la police.

Pas de panique c’est normal ! Maintenant il faut qu’on lui dise ce qu’on veut faire maintenant :

C'est quand même déjà mieux ! Mais on peut faire mieux, pour l'instant on a juste ajouter à deux endroits des modifications

Les informations importantes

Pour ajouter du css avec bulma il suffit d’ajouter des mots clés dans les classes des balise HTML.

Il existe plusieurs manières de styliser ses boutons dans Bulma.

<button class="button">Bouton</button>

Ce qui donne :

On peut ajouter d’autre manière de styliser son bouton, notamment en ajoutant de la couleur, des arrondis, ou de changer la taille.

Pour plus d’information : Les boutons dans Bulma !

Ajouter un titre et ajouter du style :

<h1 class="title">Title</h1>
<h2 class="subtitle">Subtitle</h2>

Et ça donne :

Pour plus de taille et de modification je te laisse aller voir sur : Les titres de Bulma !

La modification Bulma Hero est utile pour les hauts de pages notamment. Elle permet de mettre en forme et en couleur le haut de notre page.
<section class="hero is-primary">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        Primary title
      </h1>
      <h2 class="subtitle">
        Primary subtitle
      </h2>
    </div>
  </div>
</section>

Les couleurs sont aussi données par des mots clés :

Pour la couleur « is-primary » :

<button class="button is-primary">is-primary</button>

Un onglet ressemble à ça :

Pour l’ajouter à ton projet tu peux aller voir ici : Les onglets Bulma

Pour ajouter un peu de couleur et de style à tes formulaires :

Si tu veux mettre différents contenu HTML côte à côte pour que ce soit plus facile au niveau de la lecture tu peux utiliser : les colonnes avec Bulma.

Bulma avec des variables ? Sass !

[TODO : Bulma avec Saas]

Liens utiles et notions de Web Design

On veut changer de couleur ? Récupérer des photos ? On va sur The Stocks.

On veut des information sur Bulma on va sur : Documentation Bulma.

Les id

Un ID est là pour identifier une balise, on peut lui donner un nom.

Les id peuvent être utiles dans la création du CSS mais grâce à Bulma on va moins les utiliser. Par contre il sera nécessaire de les utiliser pour du code.

Un id s’écrit de cette manière :

<p id="paraImportant">J'ai un id !</p>

Au contraire des classes, un ID ne peut avoir qu’une seule balise.