Un outil pour transformer une CSS externe en styles inline.
Quelques exemple de titraille en CSS en suivant les bonnes pratiques.
On s’entend dire depuis un moment que les grilles sur le web, c’est le bien ; qu’elles facilitent la lisibilité et qu’elles apportent harmonie et structure. Tout cela est vrai ! Face à la pléthore de frameworks qui existent sur le marché : Par où commencer ? Comment établir une grille commune qui facilitera le travail des web designers et des intégrateurs ? Comment faire pour que cette grille soit respectée d’un bout à l’autre du projet ? Ne cherchez plus ! Grâce aux compilateurs CSS existants, vous allez pouvoir utiliser et intégrer n’importe quelle grille, facilement et rapidement.
Un document de référence sur le sujet afin de travailler dans les meilleures conditions.
Où l'on apprend à faire un soulignement dans une couleur plus claire pour ne pas gêner la lecture des jambage. Et qu'il faut foncer les textes par rapport aux titres pour avoir la même impression de couleur (gris typographique équivalent selon la graisse)
- Une organisation de travail (via une méthode de rangement),
- Une bonne base de départ, incluant quelques éléments d'accessibilité, comme les liens d'évitements, afin d'être sûr de ne pas les oublier,
-* De petites astuces sympathiques qui améliorent la conception et l'utilisation d'un site.
Le code est commenté, il doit normalement se suffire à lui-même pour le comprendre.
Du 15 au 24 octobre 2012, remixez les sites des grands musées. Pour les rendre modernes, responsives, mobiles !
Responsive Museum Week repense l’expérience des musées, en commençant par leur site web. Le principe est simple : il vous suffit de modifier la feuille de styles CSS du site d'un musée pour le rendre lisible sur mobile, tablette, etc.
Tous les passionnés et professionnels du design web le savent : les feuilles de styles peuvent devenir un casse-tête pour tous ceux qui conçoivent le design de sites web. De l’amateur qui crée un site WordPress à l’intégrateur professionnel, qu’il travaille en agence ou sur un produit unique. Cet ouvrage aborde toutes les bonnes pratiques en matière de CSS pour obtenir des CSS maintenables. Il préconise l’utilisation d’outils fiables, permettant d’éviter bruit et redondance dans le développement des feuilles de style CSS – tout en conservant leur nature en cascade.
Depuis quelques années, @font-face est devenu l’outil indispensable pour agrémenter une interface web de fontes exotiques. Mais comment expliquer les différences de rendu, parfois considérables, d’un navigateur et d’un OS à l’autre ? Penchons-nous sur la question.
KNACSS est ce que l'on appelle un "framework CSS" comme il en existe tant d'autres. Sauf que celui-ci est mieux :) (pourquoi ?)
Il a été concocté avec amour par Raphaël Goetter et l'agence Alsacreations.fr au fur et à mesure de nos expériences en production, et est sous licence libre CC-BY.
Son but est de servir de base commune à tous les projets d'intégration web, grâce à une nomenclature et des conventions constantes. Mais aussi de faciliter les positionnements d'éléments, de gérer les alignements, les gouttières, etc. Le tout de la façon la plus propre et accessible possible
En août 2011, Twitter lançait Bootstrap, une boîte à outils HTML, CSS et JavaScript destinés à simplifier la création d'applications web. Bootstrap inclut un système de grille, des styles par défaut pour les principaux types de contenus, mais aussi le code nécessaire pour faire fonctionner les composants les plus courants qu'on retrouve sur des sites web (popups modales, messages d'alertes, carrousel, etc...). ../.. Si vous choisissez aujourd'hui d'intégrer une administration de site sans Bootstrap, vous avez intérêt à avoir de sérieux arguments.
Début mai, des ingénieurs de Facebook sont venus chez Google faire une présentation intitulée "Timeline timeline", où comment l'outil de profilage en Timeline de Chrome leur a permis d'optimiser les pages Timeline sur Facebook, et vice-versa. Paul Irish, de chez Google, résumait sur son compte Google+ ses principales notes
Un plugin jQuery pour faire suivre une courbe à un texte. Rigolo
Tout ce qu'il faut savoir sur le float des CSS !
Le line-height est une propriété de base très importante mais trop souvent mal utilisée. En fait, elle est très souvent ignorée, ou bien définie approximativement parce qu’elle concerne l’espace qu’occupe le texte. Et visuellement, le texte est difficile à mesurer. Néanmoins, le line-height est essentiel au confort de lecture ainsi qu’à l’équilibre spatial d’une page web.
Des outils de prototypage rapide en CSS pour un design adaptatif
Mieux qu'un Reset CSS, une normalisation des CSS entre tous les navigateurs
Un toolkit CSS/js de Twitter pour développer rapidement des interfaces web.
Ne supprimez pas la bordure pointillée autour des liens ! Au contraire, stylez le focus : il doit attirer l’attention.
<code>
.transparent {
/ Required for IE 5, 6, 7 /
/ ...or something to trigger hasLayout, like zoom: 1; /
width: 100%;
/ Theoretically for IE 8 & 9 (more valid) /
/ ...but not required as filter works too /
/ should come BEFORE filter /
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/ This works in IE 8 & 9 too /
/ ... but also 5, 6, 7 /
filter: alpha(opacity=50);
/ Older than Firefox 0.9 /
-moz-opacity:0.5;
/ Safari 1.x (pre WebKit!) /
-khtml-opacity: 0.5;
/ Modern!
/ Firefox 0.9+, Safari 2?, Chrome any?
/ Opera 9+, IE 9+ /
opacity: 0.5;
}
</code>