28
JUIL

Not just a grid - un framework CSS léger

Publié le 28/07/11 à 10h16 par lepalmier

Not Just a Grid est un framework CSS léger permettant de personnaliser très facilement votre site web. Il est développé pour les grandes résolutions.

not just a grid

Ce framework propose d'appliquer des styles aux éléments les plus communs utilisés dans un site web.

On retrouve donc :

  • les tableaux
  • les formulaires
  • les retours utilisateurs
  • la pagination
  • ...

Chaque section est définie dans une feuille de style séparée, ce qui permet de n'utiliser que celle dont on a besoin. Le framework inclut des images facilement modifiables pour s'adapter à vos besoin.

Pour utiliser not just a grid, comme d'habitude, on inclut les feuilles de styles CSS :









Il faut placer les images fournies dans l'archive dans le répertoire : images/framework/

Tout le contenu doit être placé dans une div globale qui a comme classe "container".

Toute le code de la page

La structure proposée est basée sur un système de colonne. En fonction du CSS inclut, le div container peut avoir comme taille : 960px, 1200px, 1380px ou 1500px de large. La largeur des colonnes est ensuite basée sur un ratio de la largeur totale.

  • .full - s'étend sur la largeur total avec 10px de marge à gauche et à droite.
  • .threequarter - s'étend sur les 3/4 de la largeur du container.
  • .half - s'étend sur la moitié de la largeur du container.
  • ...

Il  existe 12 classes qui permettent de créer à peu près n'importe quelle configuration de mise en page.

Pour utiliser les mises en forme prédéfinies, il suffit d'attribuer la classe appropriée à la div concernée :

   

This is a success box.

   
This should be used to show an action was completed successfully

success box

Le tout est donc très simple d'utilisation et fait gagner pas mal de temps sur l'intégration.

Démo

Site officiel

Personne n'a baraguiné de chtite phrase pour le moment !


Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web