html Buttercake

[SailorEudes 431]

Pour avoir accès à cette image, merci de vous connecter.

 

 

 

Bien le bonjour à toi moussaillon. Avec mes matelots nous avons décidé d'aborder le sujet du fameux "ButterCake" qui est un framework te permettant de créer un navire rapidement tout en respectant l'esthétique des nouvelles technologies web.

J'ai eu cette petite idée en relisant le

Pour avoir accès à ce lien, merci de vous connecter.

 que j'avais rédigé, et qui parlait du fameux "UIKit" .

 

Bon, bien sûr, contrairement à @ Swayn, je n'ai pas pris le temps de créer un CMS entièrement avec ButterCake, mais je dois t'avouer qu'en entreprise, ce framework est un petit plus à ne pas négliger.

 

 

Avant de commencer, faisons un point :

 

Citation

 

En programmation informatique, un framework (appelé aussi infrastructure logicielle1, socle d'applications, infrastructure de développement, ou cadre d'applications au Canada) désigne un ensemble cohérent de composants logiciels structurels, qui sert à créer les fondations ainsi que les grandes lignes de tout ou d’une partie d'un logiciel (architecture). Un framework se distingue d'une simple bibliothèque logicielle principalement par :

 

1. son caractère générique, faiblement spécialisé, contrairement à certaines bibliothèques ; un framework peut à ce titre être constitué de plusieurs bibliothèques, chacune spécialisée dans un domaine. Un framework peut néanmoins être spécialisé, sur un langage particulier, une plateforme spécifique, un domaine particulier : communication de données, data mapping, etc. ;
2. le cadre de travail qu'il impose de par sa construction même, guidant l'architecture logicielle voire conduisant le développeur à respecter certains patrons de conception ; les bibliothèques le constituant sont alors organisées selon le même paradigme.

 

Les frameworks sont donc conçus et utilisés pour modeler l'architecture des logiciels applicatifs, des applications web, des middlewares et des composants logiciels. Les frameworks sont acquis par les informaticiens, puis incorporés dans des logiciels applicatifs mis sur le marché, ils sont par conséquent rarement achetés et installés séparément par un utilisateur final.

 

 

Maintenant que tu connais c'est quoi un framework, nous pouvons commencer ce tutoriel !

 

 

Pour avoir accès à cette image, merci de vous connecter.

 

ButterCake est un framework CSS facile à prendre en main grâce notamment au nom des classes utilisées mais, aussi les helpers (ou utility) proposés pour vous aider à mettre en place votre layout. Je veux dire par là qu’il est presque possible de mettre en place un design sans avoir à ajouter du code CSS custom.

Il est vrai que cela occasionne d’avoir des balises avec beaucoup de classes attribuées, mais au moins cela permet d’harmoniser les méthodes d’intégration entre les développeurs front.

De plus en procédant de cette manière, le code CSS que vous aurez à ajouter sera vraiment q’une légère refonte du thème par défaut cela vous évitera notamment les bugs d’affichage liés à la gestion du responsive par exemple.

 

Contenu du framework :

• des composants : les icônes, les overlays, les badges, alertes, boutons
• un système de grille performant : comprenant la gestion du responsive, les articles et les sections
• les éléments HTML basiques : les liens hypertexte, les tableaux, les formulaires
• les animations css : de simples classes à ajouter à vos éléments pour les animer
• la navigation : barre de navigation, offcanvas, dropdown
• des composants javascript : accordéon, modal, slider, slideshow

 

 

Pour avoir accès à cette image, merci de vous connecter.

 

1. Hautement customisable du fait de la possibilité de combiner les modules.
2. Permet d'ajouter des composants au CSS sans impacter le style général.
3. Possibilité de créer des interfaces utilisateurs poussées.

 

 

Pour avoir accès à cette image, merci de vous connecter.

 

1. Framework récent, très peu de ressources et de documentations.

 

 

Pour avoir accès à cette image, merci de vous connecter.

 

Avant de commencer, il te faudra ton équipement matelot, sinon, tu risques de pas faire long feu face aux têtes-grises.

 

   

Pour avoir accès à ce lien, merci de vous connecter.

 

 

Une cible projet qui t'encourage à continuer   

 

 

    Une peinte d'hydromel de café

 

 

Une boussole montre précise 

 

 

Pour avoir accès à cette image, merci de vous connecter.

 

 

Comment j'inclus la librairie sur une page sans forcément devoir télécharger les fichiers correspondants ?

[hide]

<!-- Entre les balises "<head></head>" -->

<!-- Le CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/butterCake.min.css">

<!-- Le JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/butterCake.min.js"></script>

<!-- Entre les balises "<head></head>" -->

[/hide]

 

 

Comment je crée un accordion ?

[hide]

<!-- Entre les balises "<body></body>" là ou tu veux que ça apparaisse -->
<!-- single accordion - Active -->
<div class="accordion-container mb-1">
    <h4 class="accordion active p-2 bg-primary text-white flex fj-between mb-0">accordion 1 <i
            class="fa fa-info-circle"></i></h4>
    <div class="panel">
        <div class="panel-box p-2">
            <p class="mb-0">Lorem ipsum dolor sit amet.</p>
        </div>
    </div>
</div>

<!-- single accordion -->
<div class="accordion-container mb-1">
    <h4 class="accordion p-2 bg-primary text-white flex fj-between mb-0">accordion 2 <i class="fa fa-info-circle"></i>
    </h4>
    <div class="panel">
        <div class="panel-box p-2">
            <p class="mb-0">Lorem ipsum dolor sit amet.</p>
        </div>
    </div>
</div>

<!-- single accordion -->
<div class="accordion-container mb-1">
    <h4 class="accordion p-2 bg-primary text-white flex fj-between mb-0">accordion 3 <i class="fa fa-info-circle"></i>
    </h4>
    <div class="panel">
        <div class="panel-box p-2">
            <p class="mb-0">Lorem ipsum dolor sit amet.</p>
        </div>
    </div>
</div>

<!-- Entre les balises "<body></body>" là ou tu veux que ça apparaisse -->

[/hide]

 

 

Comment je crée des chips (badges) ?

[hide]

<!-- Entre les balises "<body></body>" là ou tu veux que ça apparaisse -->

<div class="chip with-avatar avatar-zoomed dismissable">
  <img src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?r=pg" class="chip-img">
  Default
  <button class="btn-clear-chip" type="button"><i class="fa fa-close"></i></button>
</div>

<div class="chip primary with-avatar avatar-zoomed dismissable">
  <img src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?r=pg" class="chip-img">
  Primary
  <button class="btn-clear-chip" type="button"><i class="fa fa-close"></i></button>
</div>

<div class="chip secondary with-avatar avatar-zoomed dismissable">
  <span class="chip-img">HR</span>
  Secondary
  <button class="btn-clear-chip" type="button"><i class="fa fa-close"></i></button>
</div>

<div class="chip dark with-avatar avatar-zoomed dismissable">
  <span class="chip-img">HR</span>
  Dark
  <button class="btn-clear-chip" type="button"><i class="fa fa-close"></i></button>
</div>

<div class="chip gray with-avatar avatar-zoomed dismissable">
  <span class="chip-img">HR</span>
  Gray
  <button class="btn-clear-chip" type="button"><i class="fa fa-close"></i></button>
</div>

<div class="chip muted with-avatar avatar-zoomed dismissable">
  <span class="chip-img">HR</span>
  Muted
  <button class="btn-clear-chip" type="button"><i class="fa fa-close"></i></button>
</div>

<div class="chip success with-avatar avatar-zoomed dismissable">
  <span class="chip-img">HR</span>
  Success
  <button class="btn-clear-chip" type="button"><i class="fa fa-close"></i></button>
</div>

<div class="chip info with-avatar avatar-zoomed dismissable">
  <span class="chip-img">HR</span>
  Info
  <button class="btn-clear-chip" type="button"><i class="fa fa-close"></i></button>
</div>

<div class="chip warning with-avatar avatar-zoomed dismissable">
  <span class="chip-img">HR</span>
  Warning
  <button class="btn-clear-chip" type="button"><i class="fa fa-close"></i></button>
</div>

<div class="chip danger with-avatar avatar-zoomed dismissable">
  <span class="chip-img">HR</span>
  Danger
  <button class="btn-clear-chip" type="button"><i class="fa fa-close"></i></button>
</div>

<!-- Entre les balises "<body></body>" là ou tu veux que ça apparaisse -->

[/hide]

 

 

Comment je crée un tableau ?

[hide]

<!-- Entre les balises "<body></body>" là ou tu veux que ça apparaisse -->

<table class="table table-striped">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>[email protected]</td>
        </tr>
    </tbody>
</table>

<!-- Entre les balises "<body></body>" là ou tu veux que ça apparaisse -->

[/hide]

 

 

Comment je peux créer ce que je veux ?

 

En te documentant

Pour avoir accès à ce lien, merci de vous connecter.

.

 

 

Pour avoir accès à cette image, merci de vous connecter.

 

Pour avoir accès à cette image, merci de vous connecter.

 

Pour avoir accès à cette image, merci de vous connecter.

 

Effectivement, nous pouvons dire que ButterCake peut remplacer Bootstrap avec un peu plus de possibilités, qu'en pensez-vous ?

 

 

Pour avoir accès à cette image, merci de vous connecter.

 

Si vous avez envie d'intégrer les fichiers de ButterCake sur votre site, sans passer par les liens directs, voici le lien de téléchargement :

 

[hide]

Pour télécharger, il te suffit de

Pour avoir accès à ce lien, merci de vous connecter.

!

[/hide]

 

En espérant voir très bientôt des rétros, des templates et/ou autres avec ce framework qui te permet facilement de créer de superbes choses !

 

Que la mer soit avec toi, moussaillon !

[Amephotic 2]

Je vais regarder tout ça, merci

[Loterio 0]

yes ,

[Nagamasa 27]

Une nouvelle alternative à Bootstrap ! Intéressant !

 

Merci du partage et des informations !

[Tekaa 0]

woua