Kickstrap : Framework CSS/HTML/JAVASCRIPT

Par Eric - Le
Css Html Framework
Kickstrap, Framework CSS/HTML/JAVASCRIPT

Kickstrap est un framework Css/Html/Javascript dérivé du "célèbre" Twitter Bootstrap. Il apporte son lot d'améliorations, un système de thèmes et de nouveaux composants.

Il existe de nombreuses raisons de ne pas utiliser de frameworks Css/Html lors de la conception d'un site (poids, classes Css dans le code Html, règles inutilisées...), mais le meilleur moyen de savoir est de tester et d'adapter, voir de s'en inspirer.

Kickstrap, Framework CSS/HTML/JAVASCRIPT

Twitter Bootstrap est l'un de framework Html/Css/Javascript le plus à la mode aujourd'hui. On le voit un peu partout. Kickstrap est basé sur ce dernier, et même si vous n'avez pas de talent de graphiste, vous allez pouvoir modifier facilement le thème du framework.

Une douzaine de thèmes sont fournies de base. Il s'agit de fichiers Less qui surchargeront le thème par défaut. Le système d'installation a été très simplifié par rapport à son grand frère Twitter Bootstrap.

Et si vous désirez un thème plus "professionel", il existe également des sites où vous pouvez télécharger des thèmes gratuits ou payants tel que WrapBootstrap.

Kickstrap, Framework CSS/HTML/JAVASCRIPT

Démarrer avec Kickstrap

Les développeurs aiment les fonctionnalités avancées, mais les novices n'auront pas à s'inquiéter sur la personnalisation d'un thème. Deux exemples de fichiers Html avec tout ce qui est nécessaire à la base sont également fournis.

Les thèmes

Facile à activer et à installer. L'utilisation du compilateur Less remplacera les styles par défaut et vous n'aurez besoin de télécharger que la feuille de style personnalisée pour votre site.

Optimisation

Avec le script de compilation Boilerplate HTML5, vos dossiers contenant Javascripts, Css, et images peuvent être minifiés et optimisés avec deux simples mots ("ant build") dans la ligne de commande (cela est facultatif).

Fichiers Html

Les fichiers Html inclus pour démarrer sont également prêts pour l'implémentation de Google Analytics, les CDN (jQuery), la détection de la version d'Internet Explorer, la détection d'écran (pour le "Responsive Design"), Html5 Polyfilling (avec Modernizr), et plusieurs autres choses...

Animations Css

Simplification de la mise en place des animations CSS avec la feuille de style animate.css.

Plugins Javascript

De nombreux plugins sont également disponibles en fonction de vos besoins afin d'avoir un site plus attractif. Leur utilisation reste évidemment facultative.

  • Listes déroulantes, multi-sélection, groupe de liste
  • Menus déroulant (dropdown menu)
  • Onglets (tabs)
  • Cases d'option, cases à cocher
  • Boites de dialogue
  • Bulles d'information (tooltip)
  • Accordéons
  • Messages d'alerte
  • Bannière défilante (carrousel)
  • ...

Les icônes

La fonte "Glyphicon" a été remplacée avec une fonte identique et étendue par "IcoMoon". Ce sytème d'utilisation d'icônes évite de charger les icônes en tant que des images.

En savoir plus

Lien : téléchargement, documentation et exemples de Kickstrap.