background preloader

Html 5 starter kit

Facebook Twitter

HTML KickStart HTML Elements & Documentation - 99Lime.com. Setup Download HTML KickStart Include jQuery and HTML KickStart <script src=" src="js/kickstart.js"></script><!

HTML KickStart HTML Elements & Documentation - 99Lime.com

-- KICKSTART --><link rel="stylesheet" href="css/kickstart.css" media="all" /><! -- KICKSTART --> Copy Elements into your HTML Browsers HTML KickStart Tested and working in IE 8+, Safari, Chrome, Firefox, Opera, Safari IOS, Browser and Chrome Android. Notes Don't forget to use an HTML5 Doctype <! Buttons A.button With Icons Colors .orange Styles .pop Tooltips Tooltips are awesome. Hover over the examples on the right to preview. Use: class="tooltip" + title="my tooltip content" Tooltip Positions .tooltip (default) .tooltip-top .tooltip-right .tooltip-left .tooltip-bottom Tooltips with HTML Content .tooltip + data-content="#ID" HTML Content This is more HTML content.

Paragraphs Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Blockquote lobortis nisl ut aliquip ex ea commodo consequat. Blockquote Small. Bootstrap, from Twitter. The Grid System.

Float

HTML5Pattern. Quick hits with the Flexible Box Model. Introduction I'd bet that you've done your fair share of styling elements to be arranged horizontally or vertically on a page.

Quick hits with the Flexible Box Model

As of yet, though, CSS has lacked a suitable mechanism for this task. Enter the CSS3 Flexible Box Module, or Flexbox for short. The draft describes Flexbox as: [...] a CSS box model optimized for interface design. Super. Floats? Flexbox gives us a new value for the display property (the box value), and eight new properties: box-orient box-pack box-align box-flex box-flex-group box-ordinal-group box-direction box-lines Eight new properties? Common flexbox style properties Styles used on the box display: box This new value for the display style opts this element and its immediate children into the flexible box model.

Box-orient Values: horizontal | vertical | inherit How should the box's children be aligned? Box-pack Values: start | end | center | justify. Les 20 meilleures extensions Firefox pour développeurs web. Firefox est actuellement un des navigateurs préférés des développeurs, non seulement de par son rendu plus que correct des pages, mais également par la multitude d'extensions qui ont vu le jour pour l'aide quotidienne à la conception web.

Les 20 meilleures extensions Firefox pour développeurs web

Certaines sont bien sûr déjà connues et utilisées couramment par la plupart des lecteurs d'Alsacréations. Firebug S'il fallait n'en posséder qu'une, ce serait Firebug. Manipulation du DOM HTML, des feuilles de style CSS, et du Javascript en direct live, c'est un must. Sans compter l'onglet des requêtes réseau, l'inspection très pratique des éléments par le curseur de la souris, l'affichage en sur-impression des marges, l'exécution de code JavaScript au vol et sa console. Firebug peut être complété par 3 "sous-extensions" : WebDeveloper Toolbar Validateurs Html Validator procède à une validation automatique de chaque page consultée, affichant les résultats dans la barre d'état du navigateur en les détaillant lors de la consultation du code source. Colorzilla. Periodic Table of the Elements - Josh Duck.

Liste des balises HTML5 - Aide mémoire et liens vers le W3C. Squelettor (générateur de squelettes (X)HTML) Initializr - Start your HTML5 project in 15 seconds!