Jump to content

Cloudfordream -  Digisell

Bienvenue sur Habbo-Dev !

  • Veuillez ne pas poster de message pour but d'insulter, incitation à la haine, propos sexuels et tout autre qui ne respecte pas nos conditions d'utilisation !
Eudes

 html Buttercake

Recommended Posts

68747470733a2f2f67657462757474657263616b652e636f6d2f524541444d452f6865616465722d312e737667.png.e1b349cbbe548cd2fc9266ad4f30adfc.png

 

 

 

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 Please login or register to see this link.  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 !

 

 

Quoi.png.3c6aaa847b2a68cc53b443ce8983dd85.png

 

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

 

 

Avantages.png.34f9b9a3142d9d62051d74ae0498539c.png

 

  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.

 

 

1947346569_Inconvenients.png.d83d3e37656258836c9ed8d1139a9f80.png

 

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

 

 

1013076512_Prerequis.png.4963155eaecf3401deaf70370345cf27.png

 

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

 

spacer.png   Please login or register to see this link.

 

 

Une cible projet qui t'encourage à continuer    spacer.png

 

 

spacer.png    Une peinte d'hydromel de café

 

 

Une boussole montre précise spacer.png

 

 

FAQ.png.19b0002f8573117767f8e59b0b4ef0e4.png

 

 

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

Hidden Content

    Please login or register to see this code.

 

 

Comment je crée un accordion ?

Hidden Content

    Please login or register to see this code.

 

 

Comment je crée des chips (badges) ?

Hidden Content

    Please login or register to see this code.

 

 

Comment je crée un tableau ?

Hidden Content

    Please login or register to see this code.

 

 

Comment je peux créer ce que je veux ?

 

En te documentant Please login or register to see this link. .

 

 

Screens.png.be6b710f58774f322f11643eceb26e57.png

 

1647311552_Capturedecran2019-09-30a09_39_45.thumb.png.1238f18c41f3e01d605aecddf15a224e.png

 

1421977703_Capturedecran2019-09-30a09_40_25.thumb.png.1c3d6f34b29359d94731f826b2232c1c.png

 

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

 

 

1247515496_Telechargements.png.5c690fbb6833d653945c6edb116eb4b0.png

 

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 :

 

Hidden Content

    Pour télécharger, il te suffit de Please login or register to see this link. !

 

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 !

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...