.design .design

ContentBox.js – Réaliser des modèles de pages attractifs mais difficiles à coder

Créer des mises en page flexibles et responsives – sans écrire une ligne de code.

Capture - ContentBox.js – Réaliser des modèles de pages attractifs mais difficiles à coder

ContentBox.js est un plugin jQuery qui facilite la création de structures de page directement dans votre site Web. Vous pouvez exporter le résultat final au format HTML et CSS avec un code compatible avec tous les navigateurs Web récents.

.design
.design

Si vous avez déjà essayé de construire quoi que ce soit avec du CSS, vous savez combien il peut être difficile d'obtenir quelques choses qui tient d'aplomb. Il existe des centaines d'articles de blog abordant des sujets aussi simples que le fait de centrer un élément verticalement. Et des piles de livres écrits sur la façon d'optimiser son code pour obtenir un environnement de développement maintenable sur le long terme.

Heureusement, les personnes qui définissent les normes CSS travaillent sans relâche pour faciliter la prise en main du code avec un support presque universel de tous les navigateurs Web. Cependant, les propriétés CSS sont parfois si compliquées que même les développeurs les plus chevronnés doivent avoir une anti sèche.

Des mises en page attractives en quelques secondes

L'équipe de InnovaStudio à l'origine de ContentBox.js pense que c'est une manière peu adaptée pour les personnes créatives souhaitant utiliser la puissance du CSS. Elle a donc créé une interface utilisateur totalement flexible qui peut être intégrée au sein de tous les types de sites et d'applications Web.

Son approche ressemble beaucoup plus à des options d'alignement et de distribution inspirées de Photoshop ou Sketch que d'une longue liste de propriétés CSS.

CONTENTBOX EN ACTION.GIF
Contentbox en action

Vous n'avez pas besoin d'avoir des connaissances en HTML et en CSS pour l'utiliser. Ce plugin a été conçu spécifiquement pour les personnes n'étant pas expertes en développement front end. Il suffit de sélectionner les zones à éditer et de configurer les paramètres de couleur, d'espace et de typographie pour obtenir des pages Web agréables à parcourir.

Deux autres raisons d'utiliser ce plugin jQuery

  1. Au quotidien, j'entends un tas de gens dire qu'ils font appel à un designer pour des modifications mineures sur une mise en page.
  2. Beaucoup d'organisations ont des responsables de produits / marketing qui ont une idée précise sur l'aspect que devrait avoir une page Web. Mais ils ont besoin des designers et des développeurs front end pour les mettre à jour. ContentBox permet à ces personnes d'être autonomes sur ce processus de design. Cela libère ainsi les designers et les développeurs pour faire des choses plus importantes (et intéressantes) que des micro-mises à jour.

Les itérations de version d'un site ou d'une app Web peuvent être très fréquentes, le plugin ContentBox offre une manière plus simple et moins coûteuse de les réaliser.

Faites la rencontre avec ce page builder

En implémentant quelques lignes de code JS dans son application, ce plugin jQuery permet à quiconque de modifier une composition de page Web via son navigateur.

ContentBox.js s'appuie sur le plugin ContentBuilder.js afin de garantir une expérience d'édition optimale via un système de glisser-déposer. Vous pourrez exporter vos créations directement au format HTML.

Trêve de blabla, testez la démo en ligne pour vous faire une idée du gain de temps permis par ce page builder.

EXEMPLES DE CREATIONS AVEC CONTENTBOX.JPG
Exemples de creations avec contentbox

Si vous avez apprécié cet article, vous pourriez être intéressé(e) par :

Avez-vous des commentaires, des questions, de l'amour ou de la haine ? Envoyer tout ça à : guillaume@magazineduwebdesign.com.

Prenez soin de vous. A bientôt — @guillaumpalayer.

Accédez au meilleur des interfaces directement depuis votre boîte mail

Pixels à explorer

Trouvez et partagez les meilleurs produits et services en design & développement conçus par de talentueux créateurs

15 collections à explorer. Des centaines de ressources pour designers & développeurs à découvrir.