Créer un site Web avec

(Framework* CSS open source basé sur Flexbox*)

+ TUTO GIT

*Framework CSS : pack d'éléments que l'on trouve couramment dans un site web, déjà codés et prêts à être modifiés ou utilisés tels quels.

*Flexbox (modèle des boites flexibles) : modèle de disposition des éléments dans une page web. Pour aller plus loin...

On peut créer de très jolis sites avec Bulma :

Un système de GRILLE très intuitif :

Bulma est facile à apprendre :

Bulma est facile à personnaliser :

avec SASS (pré-processeur CSS)...

Démarrer avec Bulma

  • Option facile  : Aucune installation, on utilise la feuille de styles de Bulma grâce à un cdn (réseau de diffusion de contenu).

  • Option plus technique  : Installation à l'aide de NPM (Node Package Manager). Il est nécessaire que Node.js soit installé sur votre machine) et quelques connaissances sur l'utilisation de la ligne de commande et le langage JavaScript peuvent être utiles...

Option cdn (facile) :

  • Dans un dossier mon_site, à l'aide de Brackets (ou en ligne sur repl.it), créer un fichier index.html.
  • Copier coller le template (gabarit ou modèle) ci-dessous :
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
  </head>
  <body>
  <section class="section">
    <div class="container">
      <h1 class="title">
        Hello World
      </h1>
      <p class="subtitle">
        My first website with <strong>Bulma</strong>!
      </p>
    </div>
  </section>
  </body>
</html>

Démo : https://hugostatic.github.io/

Tutoriels vidéos:

Code de la Démo : https://github.com/hugostatic/hugostatic.github.io/

Bulma cheatsheet : https://devhints.io/bulma

Votre première page avec Bulma :

Étape 1 : Créer une section HERO 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Hello Bulma!</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
        <link rel="stylesheet" href="main.css">
	<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
        <!-- <link rel="stylesheet" href="styles/debug.css"> -->
    </head>
    <body>
        <!-- .hero -->
        <section class="hero is-fullheight has-background-black">
	    <div class="hero-body">
	        <div class="container">
                    <figure class="image center">
                        <img src="images/bulma-logo-white.png" style="max-width: 512px;">
                    </figure>
                </div>
	    </div>
	</section>
        <!-- /.hero -->
    </body>
</html>

HTML : index.html

/* Centrage horizontale du logo */

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

CSS : main.css

logo-white

logo

Étape 2 : Les colonnes 

<!-- .section -->
<section class="section">
    <div class="container">
	<div class="columns">
	    <div class="column">
	    Bulma is a modern CSS framework from @jgthms, based on Flexbox.
	    Using Bulma, we can describe our website's design using just classes. ᕕ( ᐛ )ᕗ
	    </div>
	    <div class="column">
	    Flexbox is a CSS spec that makes sectioning and aligning more natural.
	    We don't need to know Flexbox but it's how Bulma works behind-the-scenes. ⦤(^ー^)⦥
	    </div>
	    <div class="column">
	    Instead of writing our CSS per-element, we can use predefined classes.
	    With enough classes, we can describe our website design using semantics. ٩(^ᴗ^)۶
	    </div>
        </div>
    </div>
</section>
<!-- /.section -->
<!-- .hero -->
<section class="hero has-background-black">
    <div class="hero-body">
	<div class="container">
            <figure class="image center">
	        <img src="images/bulma-logo-white.png">
            </figure>
        </div>
    </div>
</section>
<!-- /.hero -->

 Modifier la section Hero 

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.hero img {
    max-width: 256px;
}

Étape 3 : La couleur 

<!-- .section -->
<section class="section has-background-light">
    <div class="container">
        <div class="columns">
	    <div class="column">
	        <div class="notification is-info">
		    <h1 class="title is-size-4">Bulma?</h1>
		    <p class="is-size-5">
		    Bulma is a modern CSS framework from @jgthms, based on Flexbox.
		    Using Bulma, we can describe our website's design using just classes. ᕕ( ᐛ )ᕗ
		    </p>
		</div>
	    </div>
	    <div class="column">
		<div class="notification is-primary">
	            <h1 class="title is-size-4">…Flexbox?</h1>
		    <p class="is-size-5">
		    Flexbox is a CSS spec that makes sectioning and aligning more natural.
		    We don't need to know Flexbox but it's how Bulma works behind-the-scenes. ⦤(^ー^)⦥
		    </p>
		</div>
	    </div>
	    <div class="column">
	        <div class="notification is-warning">
		    <h1 class="title is-size-4">…Classes?</h1>
		    <p class="is-size-5">
		    Instead of writing our CSS per-element, we can use predefined classes.
		    With enough classes, we can describe our website design using semantics. ٩(^ᴗ^)۶
		    </p>
		</div>
	    </div>
	</div>
    </div>
</section>
<!-- /.section -->
<!-- .hero -->
<section class="hero">
    <div class="hero-body">
	<div class="container">
            <figure class="image center">
	        <img src="images/bulma-logo.png">
            </figure>
        </div>
    </div>
</section>
<!-- /.hero -->

 Modifier la section Hero 

.hero img {
    max-width: 160px;
}
.emoticon { 
    white-space: pre; 
}

Étape 4 : Les icônes + nouvelle section

Utilisation du Media Object et de Font Awesome 

<!-- .section -->
<section class="section">
    <div class="container">
	<div class="columns is-multiline">
	    <div class="column is-one-third">
		<article class="media notification has-background-white">
		    <figure class="media-left">
			<span class="icon">
			    <i class="fas fa-lg fa-columns has-text-warning"></i>
			</span>
		    </figure>
		    <div class="media-content">
			<div class="content">
			    <h1 class="title is-size-4">Columns</h1>
			    <p class="subtitle is-size-5">
			        The power of <strong>Flexbox</strong> in a simple interface
			    </p>
			</div>
		    </div>
		</article>
	    </div>
	    <div class="column is-one-third">
		<article class="media notification has-background-white">
	            <figure class="media-left">
			<span class="icon has-text-info">
			    <i class="fab fa-lg fa-wpforms"></i>
			</span>
		    </figure>
	            <div class="media-content">
			<div class="content">
			    <h1 class="title is-size-4">Form</h1>
			    <p class="subtitle is-size-5">
			        The indispensable <strong>form controls</strong>, designed for maximum clarity
			    </p>
			</div>
		    </div>
		</article>
	    </div>
	    <div class="column is-one-third">
		<article class="media notification has-background-white">
	            <figure class="media-left">
			<span class="icon has-text-danger">
			    <i class="fas fa-lg fa-cubes"></i>
			</span>
		    </figure>
	            <div class="media-content">
		        <div class="content">
			    <h1 class="title is-size-4">Components</h1>
			    <p class="subtitle is-size-5">
			        Advanced multi-part components with lots of possibilities
			    </p>
			</div>
		    </div>
		</article>
	    </div>
	    <div class="column is-one-third">
		<article class="media notification has-background-white">
	            <figure class="media-left">
			<span class="icon has-text-grey">
		            <i class="fas fa-lg fa-cogs"></i>
		        </span>
	            </figure>
		    <div class="media-content">
		        <div class="content">
			    <h1 class="title is-size-4">Modifiers</h1>
			    <p class="subtitle is-size-5">
				An <strong>easy-to-read</strong> naming system designed for humans
			    </p>
			</div>
		    </div>
		</article>
	    </div>
	    <div class="column is-one-third">
		<article class="media notification has-background-white">
		    <figure class="media-left">
			<span class="icon has-text-primary">
			    <i class="fas fa-lg fa-warehouse"></i>
			</span>
		    </figure>
		    <div class="media-content">
        		<div class="content">
        		   <h1 class="title is-size-4">Layout</h1>
        		   <p class="subtitle is-size-5">
        		       Design the <strong>structure</strong> of your webpage with these CSS classes
        		   </p>
        		</div>
        	    </div>
        	</article>
            </div>
	    <div class="column is-one-third">
	        <article class="media notification has-background-white">
		    <figure class="media-left">
		        <span class="icon has-text-danger">
			    <i class="fas fa-lg fa-cube"></i>
			</span>
		    </figure>
		    <div class="media-content">
			<div class="content">
			    <h1 class="title is-size-4">Elements</h1>
			    <p class="subtitle is-size-5">
				Essential interface elements that only require a <strong>single CSS class</strong>
			    </p>
			</div>
	            </div>
		</article>
            </div>
	</div>
    </div>
</section>
<!-- /.section -->
<!-- .section -->
<section class="section has-background-light">
    <div class="container">
        <div class="columns">
	    <div class="column">
	        <article class="media notification is-info">
		    <figure class="media-left">
			<span class="icon is-medium">
			    <i class="fab fa-2x fa-css3-alt"></i>
			</span>
		    </figure>
		    <div class="media-content">
			<div class="content">
			    <h1 class="title is-size-4">Bulma?</h1>
			    <p class="is-size-5">
				Bulma is a modern CSS framework from @jgthms, based on Flexbox.
			        Using Bulma, we can describe our website's design using just classes. <span class="emoticon">ᕕ( ᐛ )ᕗ</span>
			    </p>
			</div>
		    </div>
		</article>
	    </div>
	    <div class="column">
		<article class="media notification is-primary">
	            <figure class="media-left">
			<span class="icon is-medium">
			    <i class="fas fa-2x fa-align-justify"></i>
			</span>
		    </figure>
		    <div class="media-content">
			<div class="content">
			    <h1 class="title is-size-4">…Flexbox?</h1>
			    <p class="is-size-5">
			        Flexbox is a CSS spec that makes sectioning and aligning more natural.
			        We don't need to know Flexbox but it's how Bulma works behind-the-scenes. <span class="emoticon">⦤(^ー^)⦥</span>
			    </p>
			</div>
		    </div>
		</article>
	    </div>
	    <div class="column">
		<article class="media notification is-warning">
	            <figure class="media-left">
			<span class="icon is-medium">
			    <i class="fas fa-2x fa-shield-alt"></i>
			</span>
		    </figure>
		    <div class="media-content">
			<div class="content">
			    <h1 class="title is-size-4">…Classes?</h1>
			    <p class="is-size-5">
			        Instead of writing our CSS per-element, we can use predefined classes.
			        With enough classes, we can describe our website design using semantics. <span class="emoticon">٩(^ᴗ^)۶</span>
			    </p>
			</div>
		    </div>
		</article>
	    </div>
	</div>
    </div>
</section>
<!-- /.section -->

Votre deuxième page avec Bulma :

Créer un Blog : 

<!DOCTYPE html>
<html>
    <head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Hello Bulma!</title>
	<link rel="stylesheet" 
        href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
        <link rel="stylesheet" href="main.css">
	<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
        <!-- <link rel="stylesheet" href="styles/debug.css"> -->
    </head>
    <body>
        <!-- .section -->
	<section class="section is-paddingless-horizontal">
	    <div class="container grid">
		<nav class="breadcrumb grid-xl" aria-label="breadcrumbs">
	            <ul>
			<li><a href="#">Home</a></li>
			<li class="is-active"><a href="#" aria-current="page">How to build a beautiful blog</a></li>
		    </ul>
		</nav>
	    </div>
	</section>
        <!-- /.section -->
    </body>
</html>

Étape 1 : Création d'un fil d'ariane (breadcrumb) + Intégration de CSS GRID à Bulma...

.is-paddingless-horizontal { 
    padding-left: 0; padding-right: 0;
 }

.grid {
    display: grid;
    grid-template-columns:
	[xl-start] 1fr 1.5rem [md-start] minmax(0, 624px) [md-end] 1.5rem 1fr [xl-end];
}

.grid *  {
     grid-column: md;
 }
.grid-xl {
     grid-column: xl; 
}

Option NPM (plus "technique") :

  • Dossier de travail : mes-sites sur le bureau (ou ailleurs)
  • Lancer Node.js command prompt

Astuce : sur Windows 10, taper node dans le champ de recherches. 

Avantages  :

La puissance du pré-processeur SASS, un meilleur contrôle sur les performances de votre site...

C:\Users\Utilisateur\Desktop\mes-sites> mkdir mon-site

Création du dossier mon-site avec mkdir 

C:\Users\Utilisateur\Desktop\mes-sites> cd mon-site

Changement de répertoire avec cd 

C:\Users\Utilisateur\Desktop\mes-sites\mon-site> npm init

Création d'un fichier package.json avec npm init

(accepter les valeurs par défaut puis taper yes)

Le fichier package.json permet de décrire le projet, gérer les mises à jour de ses dépendances ainsi que sa portabilité.

...\mon-site> npm install bulma --save

Installation de Bulma avec npm install 

...\mon-site> npm install gulp@3.9.1 --save --save-exact

Intégration de Gulp avec npm install

Pour compiler nos fichiers SASS et produire du CSS nous allons utiliser Gulp et son task runner (automatiseur de tâches) :

  • gulp-sass va compiler les fichiers
  • browser-sync va rafraîchir le navigateur en temps réel après chaque modification des fichiers surveillés avec watch.
...\mon-site> npm install gulp-sass browser-sync --save-dev

Ouvrir son projet dans un éditeur de textes  (ici Visual Studio Code) afin de créer et d'éditer un fichier gulpfile.js pour gérer vos tâches

// import des packages
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();

// tâche : sass ; src : source ; dest : destination ; 
gulp.task('sass', function() {
    return gulp.src('./sass/main.sass')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./css'))
        .pipe(browserSync.stream())
})

// tâche : serve ; demarre le serveur  
gulp.task('serve', ['sass'], function() {

    browserSync.init({
        server: "./"
    });

    /* serveille les modifications sur main.sass et 
    les fichiers html et rafraîchit le navigateur */
    gulp.watch("./sass/main.sass", ['sass']);
    gulp.watch("./*.html").on('change', browserSync.reload);

});

gulp.task('default', ['serve']);

Le fichier gulpfile.js :

Créer un dossier sass à la racine du projet et à l'intérieur de ce dossier, créer un fichier main.sass 

@import "node_modules/bulma/sass/utilities/initial-variables"

// Customisation
$primary:  $red

@import "node_modules/bulma/bulma"

html
    background: $primary

Le fichier main.sass :

Toutes les modifications de style se font sur ce fichier.

Créer un fichier index.html à la racine du projet.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link media="all" type="text/css" rel="stylesheet" href="/css/main.css">
    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
  </head>
  <body>
  <section class="section">
    <div class="container">
      <h1 class="title">
        Hello Le Monde
      </h1>
      <p class="subtitle">
        Mon premier site avec <strong>Bulma</strong> !
      </p>
    </div>
  </section>
  </body>
</html>

Le fichier index.html :

Il est temps de démarrer notre serveur =)

...\mon-site> gulp

Le site est accessible à l'adresse localhost:3000

Il est temps de sauvegarder notre code sur Github. Avantage : la gestion de versions.

En ligne :

Créer un compte (gratuit) si ce n'est pas déjà fait puis créer un nouveau dépôt (repository) au nom de votre site (ici bulma-tuto).

 

Adresse de votre dépôt

En local : il est nécessaire que Git (logiciel de gestion de versions) soit installé.

  • Ouvrir Git Bash dans le dossier mon-site :

.../mon-site/mon-site
$ git init

Initialiser Git :

.../mon-site/mon-site (master)
$ git add .

  • Ajouter tous les fichiers à l'index de Git :

.../mon-site/mon-site (master)
$ git commit -m "Bulma avec gulp-sass et Browsersync"

  • Enregistrer les modifications :

.../mon-site/mon-site (master)
$ git remote add origin https://github.com/hugostatic/bulma-tuto.git

  • Ajouter l'adresse du dépôt distant :

Il est temps de faire un push =)

.../mon-site/mon-site (master)
$ git push -u origin master

Les  fichiers sont maintenant stockés sur Github :

Bulma & Git

By snt

Made with Slides.com

Bulma & Git

Créer un site Web avec Bulma

  • 2,606

More from snt

  • Réseaux sociaux 2023
    snt
    382
  • Photographie numérique 2023
    snt
    529
  • Géolocalisation 2022
    snt
    493