background preloader

KNACSS

KNACSS

http://www.knacss.com/

Related:  HTML / CSS / JSGrille & construction HTML

CSS3 Flexbox Layout module Vous connaissez certainement le modèle de boîte classique en CSS et ses dispositions de type “block” ou “inline”, sachez que Flexbox CSS3 a été conçu pour étendre ce périmètre en introduisant un nouveau modèle de boîte distinct, que l’on appellera “le Modèle de boîte flexible”. En février 2016 est sorti mon livre entièrement dédié à Flexbox. Il se nomme "CSS3 Flexbox : plongez dans les CSS modernes" et je vous recommande bien évidemment sa lecture afin de comprendre tous les rouages de ce positionnement révolutionnaire, et d'en maîtriser tous les aspects. Au sein de ce schéma, on ne raisonne plus en “block” ou “inline”, ni même en float ou autres types de boîtes “classiques” CSS, mais en “Modèle de boîte flexible”, dont les quatre possibilités principales sont :

Gratuit, 20 framework responsive webdesign Un framework (littéralement cadre de travail) est un outil de construction de sites internet qui s'adresse aux développeurs web et les webmasters et leur offre la fondation et la structure de base et leurs font gagner des dizaines d'heures de travail. Je vous propose ainsi une liste de 20 framework qui ont fait leurs preuves, tous gratuits et responsive web design. Base : Simple et complet, Base est crée en HTML5 et jQuery et permet de faire des site web compatibles Cross-browser et adaptés aux appareils mobiles. Bootstrap : Le très célébre Framewok produit par twitter, il est assez complet, et sons interface de personnalisation le rend unique selon l'usage qu'on veux faire. Less Framework : Basé sur un système d'une seule grille (Grid), sonlayout de par défaut faut 992 Pixel de largeur contre 320 px pour mode d'affichage pour smartphone. Foundation : Présenté comme l'un des Framework les plus développés du marché, Foundation est orienté mobile-first.

Créer un menu horizontal centré en CSS (sans JavaScript) - CSS / CSS3 Cet article a 3 années. Il commence à dater, lisez-le donc en gardant son âge en tête ! Merci publié le Lu 93 383 fois. C’est une chose qui peut paraître très simple à faire, mais sur laquelle beaucoup de personnes se sont cassés les dents. Empêcher les flottants de dépasser de leur conteneur Par défaut dans les navigateurs, les éléments positionnés grâce à la propriété CSS float (aussi appelés flottants, ou en anglais floats) sortent du flux de leur conteneur. Autrement dit, les flottants «dépassent». C'est ainsi qu'on se retrouve avec des conteneurs qui font zéro pixel de hauteur, des colonnes qui passent à travers un pied de page, et autres résultats peu souhaitables.

Les classes conditionnelles en HTML Les cancres du Web, Internet Explorer 6, 7 et parfois 8, nous mènent souvent la vie dure. Même quand on s’abaisse à leur niveau, il leur arrive de ne pas comprendre, ou d’y mettre de la mauvaise volonté. La solution classique (comprendre: à l’ancienne) est d’utiliser des hacks CSS. Ces derniers sont déconseillés car peu fiables; en effet, on ne sait jamais à l’avance quels seront les navigateurs sur le marché dans deux ou cinq ans, et comment ils comprendront ou pas nos hacks CSS. XMLHttpRequest La deuxième version du XHR ajoute de nombreuses fonctionnalités intéressantes. Pour ceux qui se posent la question, le XHR2 ne fait pas partie de la spécification du HTML5. Cependant, cette deuxième version utilise de nombreuses technologies liées au HTML5, nous allons donc nous limiter à ce qui est utilisable (et intéressant) et nous verrons le reste plus tard, dans la partie consacrée au HTML5. Tout d'abord, faisons une petite clarification : L'objet utilisé pour la deuxième version est le même que celui utilisé pour la première, à savoir XMLHttpRequest.Toutes les fonctionnalités présentes dans la première version sont présentes dans la deuxième.

Framework CSS - Developpeur / integrateur web & referenceur Ils parlent de framework CSS : Liste de framework CSS : speckyboy (Liste de framework css)fuelYourCoding (Liste de framework css)noupe (Liste de framework css)skytechgeek (Liste de framework css) bootstrap twitter (sur eewee) Menu déroulant en CSS3 avec transition et max-height - CSS / CSS3 Menu déroulant en CSS3 avec transition et max-height Cet article a 3 années. Il commence à dater, lisez-le donc en gardant son âge en tête ! Merci publié le Lu 52 989 fois. Il y a quelques temps déjà, Lea Verou proposait d’utiliser la propriété max-height afin d’effectuer des animations sur un élément sans toucher à la propriété height. Holmes – La CSS qui debug sec ! Holmes – La CSS qui debug sec ! Voici le dernier truc qui m'a fait halluciner. Il s'agit d'un debugger HTML5 réalisé entièrement en CSS3. Oui, c'est zarbi, mais ça fonctionne... Pour l'utiliser, il suffit d'appeler la feuille de style holmes.css (Surement en hommage au debugger Dr Watson, à moins que ce ne soit un hommage à Katie... va savoir...) dans vos pages et d'ajouter la class "holmes-debug" aux tags que vous voulez analyser (par exemple la balise <BODY> ou <HTML>).

HTML & CSS Création de site hôtel et restaurant L'hôtellerie est un secteur qui a profondément changé avec l’arrivée d’Internet. Selon les études, en France, entre 70 et 85% des réservations de chambres d'hotel passent par Internet. L'objectif clé de la création d'un site internet d'un hôtel ou d'un restaurant et de son référencement est simple : augmenter le nombre de réservation en direct, sans avoir de commission à donner à un distributeur. Sans site de qualité, ce sont les centrales de réservations qui profite de cette manne avec des commissions allant de 17 à 25 %.

Lassés de Bootstrap ? Découvrez inuit.css ! inuit.css est un framework CSS extensible, construit sur un ensemble de bonnes pratiques CSS et qui n'impose pas de design prédéfini. inuit.css est-il fait pour vous ? Pour faire simple, voici les cas de figure dans lesquels ce framework peut vous intéresser : Vous avez besoin de mettre en place rapidement une architecture CSS décenteVous découvrez/connaissez les avantages du code Orienté Objet et appréciez son adaptabilité et sa réusabilitéVous devez implémenter un certain design qui ne colle pas forcément aux éléments “par défaut” des autres frameworksVous aimez le concept de framework mais, développeur dans l’âme, aimez avoir la main-mise sur le code Et voici clairement le cas de figure où vous pouvez passer votre chemin (sauf si vous êtes curieux) : Vous cherchez un framework CSS qui prenne en charge le design des éléments

Une grille responsive avec CSS3 Flexbox et LESS (ou Sass) Ce tutoriel a pour but de présenter dans les détails une technique de conception de grille de mise en forme responsive à l’aide du positionnement CSS3 Flexbox Layout, actuellement parfaitement adapté à ce genre de fonctions en attendant une meilleure implémentation de Grid Layout. En février 2016 est sorti mon livre entièrement dédié à Flexbox. Il se nomme "CSS3 Flexbox : plongez dans les CSS modernes" et je vous recommande bien évidemment sa lecture afin de comprendre tous les rouages de ce positionnement révolutionnaire, et d'en maîtriser tous les aspects. Le concept de grille produite permettra de gérer les espaces inter-colonnes (gouttières), les décalages (“offsets”), les différentes tailles d’écran et d’être automatisable. Le tout en un minimum de code et un maximum de propreté HTML. Voir le résultat final en ligne

Related:  CSS3CSSCSS Generatorexpansion