Styliser notre application avec Bulma

Dans ce tutoriel, nous n'allons pas parler de Laravel mais plutôt de framework CSS. Je vais utiliser Bulma qui est une alternative à Bootstrap dont vous avez sans doute déjà entendu parler.

Mettre à jour notre structure

Tout d'abord nous allons modifier notre fichier layout.blade.php afin d'ajouter le lien vers le CDN de Bulma.

<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.css" />
    </head>
    <body>
        <div class="container">
            @yield('contenu')
        </div>
    </body>
</html>

Styliser notre formulaire

Nous allons nous rendre dans la documentation de Bulma pour les formulaires et copier un champ de type texte par défaut puis ajouter notre label, et nos différents attributs sur la balise input

<div class="field">
    <label class="label">Adresse e-mail</label>
    <div class="control">
        <input class="input" type="email" name="email" value="{{ old('email') }}">
    </div>
</div>

Bulma nous fournit également deux classes utiles pour les erreurs : help et is-danger. Le champ final pour notre adresse e-mail ressemble donc à :

<div class="field">
    <label class="label">Adresse e-mail</label>
    <div class="control">
        <input class="input" type="email" name="email" value="{{ old('email') }}">
    </div>
    @if($errors->has('email'))
        <p class="help is-danger">{{ $errors->first('email') }}</p>
    @endif
</div>

Nous pouvons faire la même chose pour les champs password et password_confirmation.

<div class="field">
    <label class="label">Mot de passe</label>
    <div class="control">
        <input class="input" type="password" name="password">
    </div>
    @if($errors->has('password'))
        <p class="help is-danger">{{ $errors->first('password') }}</p>
    @endif
</div>

<div class="field">
    <label class="label">Mot de passe (confirmation)</label>
    <div class="control">
        <input class="input" type="password" name="password_confirmation">
    </div>
    @if($errors->has('password_confirmation'))
        <p class="help is-danger">{{ $errors->first('password_confirmation') }}</p>
    @endif
</div>

Concernant le bouton « M'inscrire », les balises sont presques identiques :

<div class="field">
    <div class="control">
        <button class="button is-link" type="submit">M'inscrire</button>
    </div>
</div>

J'ai également ajouté une classe section à la balise form de mon formulaire.

Notre application est bien plus jolie maintenant, nous pouvons passer au prochain tutoriel afin de traduire les différents messages d'erreur.