Modèles de tableaux CSS (pour ne pas s’fatiguer)

Vous avez besoin de mettre en forme des tableaux HTML mais vous n’êtes pas un expert des CSS ? J’ai la solution pour vous !

Une galerie de modèles de tableaux CSS téléchargeable !

Comment ça marche ?

C’est ultra simple, vous créez vos tableaux avec l’éditeur HTML de votre choix (en y attachant aucune classe CSS).

Rendez-vous sur ce site et testez différents exemples de tableaux CSS en cliquant sur le nom se trouvant dans la colonne “Design Name”.

Une fois le tableau CSS de vos rêves trouvé, cliquez sur “download” et copiez/collez les éléments CSS dans votre feuille de style

Le tour est joué !

Quelques modèles de tableaux CSS

image

image

image

70 modèles de formulaires HTML et CSS

logo wufoo

Si vous n’êtes pas un grand spécialiste de la création des formulaires, cet article est pour vous ! Voici 70 modèles de formulaires HTML, de quoi vous économiser quelques heures de travail 😉

Si en plus de cela le design de ces derniers vous semble insurmontable, vous pourrez toujours utiliser les modèles de formulaires CSS à appliquer directement aux modèles HTML que vous aurez précédemment téléchargés.

Si le sujet des formulaires vous intéresse, je vous conseille la lecture des articles suivants :

Je me suis d’ailleurs inspiré de ces formulaires, pour créer celui de drone mariage.

Le meilleur FrameWork CSS

Je veux bien entendu parler du FrameWork CSS proposé par Yahoo*. La prise en main est ultra rapide, le code est propre et développé par des experts. La simple lecture de la page d’accueil du FrameWork CSS de Yahoo m’a suffit à en comprendre le fonctionnement. J’avais auparavant testé d’autres framework CSS comme par exemple YAML, mais la prise en main et l’utilisation de ce dernier n’ont pas réussi à me convaincre (trop compliqué). Vous l’aurez compris, Yahoo avec son framework, répond à mes besoins, mon principal critère de choix a été la simplicité d’utilisation.

image

A présent mes rares développements de sites qui exigent de partir de zéro s’effectueront avec le framework CSS Yahoo.

Et vous, utilisez-vous un framework CSS ?

Où trouver de bonnes sources d’inspiration web ?

Vous cherchez de l’inspiration pour le web Design de votre prochain site web ? Rien de tel qu’un tour sur le web pour trouver l’inspiration ! Le problème : vous risquez de passer des heures à tourner en rond sur des sites au design plus que moyen… Pas de panique, je vous ai concocté un pot pourri des meilleures sources d’inspiration en matière de design web, histoire de booster votre créativité 😉

Poursuivre la lecture

Comment bien organiser vos fichiers CSS

Tout webDesigner qui se respecte utilise des feuilles de styles. L’intérêt de ces dernières est indéniable, je ne reviendrai donc pas sur ce point. Intéressons-nous un peu à l’organisation des CSS.

Définition du contenu de la feuille de styles (CSS)

Si vous avez déjà récupéré des feuilles de style depuis un CMS (dotclear, wordpress ou autre), vous avec certainement constaté une section au début du fichier CSS contenant quelques informations sur l’auteur, la date de création, la version etc…
Exemple :

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
* Filename: grid.css
* Version: 1.0.0 (2007-09-21) YYYY-MM-DD
* Website: http://site.com/
* Author: Name
* Description: Handles the site layout.
== STRUCTURE: ==============================
* Page width: 950 px
* Number of columns: 3
============================================
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/

Les commentaires

Les commentaires sont toujours pratiques dans un code source. J’en place un peu partout, toujours utile lorque l’on reprend un fichier de plusieurs centaines de lignes que l’on a pas utilisé depuis longtemps.

Les ancres

Un peu comme en HTML les ancres permettent de faire un lien au sein même d’une page. Sauf que dans un fichier CSS ça marche avec la fonction rechercher (ctrl+F pour les anciens). Ce que je fais en général en début de fichier je place une sorte d’index comme suit :

== INDEX: ===================================
_header : entête _sidebar1 : barre latérale _footer : ...ben le footer.
============================================

Pensez bien à utiliser un identifiant unique ou alors à préfixer vos ancres (avec un « _ » underscore par exemple). Dans le cas contraire vous allez vous rendre fou à chercher un texte déjà utilisé dans le code CSS (fond, texte…).

Ensuite il conviendra d’insérer l’ancre au bon endroit dans votre fichier CSS :

/* _header <- l'ancre précédemment nommé au début du fichier
==========================================*/
#header{
<attributs>
}
#header .logo{
<attributs>
}
[...]

/* _footer <- l'ancre précédemment nommé au début du fichier
==========================================*/
#footer{
<attributs>
}

==========================================*/

Vous l’aurez compris, une recherche dans le fichier vous menera directement à la partie du code qui vous intéresse.

Le nommage des fichiers

Afin de mieux s’en sortir avec les différents éléments CSS, il est préférable de séparer vos CSS en différents fichiers comme ceci par exemple :

  • typography.css : contient les polices, titres, couleurs etc… En fait la typographie.
  • layout.css :contient la mise en page
  • form.css : la mise en forme des formulaires 
  • script.css : les feuilles de styles associées à divers scripts importés (scriptaculous, etc…)
  • print.css : la feuille de styles pour l’impression
  • xxx.css for : tout ce que vous jugerez bon pour vous simplifier la vie

Cette division de vos fichiers CSS permet d’y voir beaucoup plus clair, le code de chaque CSS sera nettement plus court. Ensuite 2 solutions : vous intégrez chaque fichier CSS dans votre HTML. Ou alors vous créez un fichier CSS master incluant tous les autres, ainsi il n’y aura qu’un fichier CSS à appeler depuis votre HTMLeu…

Ce billet m’a été inspiré du site Dezigner Folio.