metro-bootstrap: Twitter Bootstrap with Metro style Examples <div class="col-sm-6 col-md-3"><div class="thumbnail tile tile-medium tile-teal"><a href="#" ><h1>Hello</h1></a></div></div><div class="col-sm-6 col-md-3"><div class="thumbnail tile tile-medium"><a href="#" ><img src="images/twittertile.png"><h2>Tweet </h2></a></div></div><div class="col-sm-6 col-md-6"><div class="thumbnail tile tile-wide tile-orange"><a href="#" ><h1 class="tile-text"> I'm the 2!</h1></a></div></div> Colors Using Font Awesome in tiles You could use images in your tiles or use the conveniently included FontAwesome icons. Now include the icon of you choice (Link to Cheatsheet) as a <i></i>. <div class="col-sm-6 col-md-3"><div class="thumbnail tile tile-medium tile-green"><a href="#" class="fa-links"><h1>Home</h1><i class="fa fa-3x fa-home"></i></a></div></div><div class="col-sm-6 col-md-3"><div class="thumbnail tile tile-medium tile-orange"><a href="#" class="fa-links"><h1>RSS</h1><i class="fa fa-3x fa-rss-square"></i></a></div></div> Example <div class="dropdown"><!
Infobulle avec effet de transparence en CSS - Utilisez les transformations et les transitions CSS Voici un exemple de réalisation de popup avec l’utilisation de CSS. Suivez le tutoriel pour recréer cet effet. Le balisage Voici le code HTML utilisé : un simple paragraphe, composé d’un lien, lui même contenant un span. <p><a href="#">Hover Me! Mettre en forme les liens Ajoutez d’abord les styles CSS sur les liens (couleur, ombre sur texte), puis sur les liens hover et focus. J’utilise rgba pour gagner du temps, mais attention, ce n’est pas reconnu dans tous les anciens navigateurs. Mettre en forme la popup Par défaut, une popup doit apparaitre en superposition par rapport au texte, donc un positionnement absolu s’impose. On positionne : j’utilise margin pour un positionnement par rapport à sa position normale dans le flux (c’est à dire sans le position:absolute). Puis, je mets en forme... Utilisation des transformations et des transitions J’ajoute en premier lieu la transformation au span. Lors du hover (et du focus) sur le lien, je modifie la transformation du span. Effet de transparence
15 Great Twitter Bootstrap Resources Twitter Bootstrap is a great front-end framework that lets you quickly prototype new web projects. Here is a list of great resources that gives even more power to the Bootstrap framework. Fuel UX extends Twitter Bootstrap with additional lightweight JavaScript controls. Other benefits include easy installation into web projects, integrated scripts for customizing Bootstrap and Fuel UX, simple updates, and solid optimization for deployment. All functionality is covered by live documentation and unit tests. This library allows you to create editable elements on your page. Extends Bootstrap’s native modals to provide additional functionality. Bootswatch is a collection of free themes for Twitter Bootstrap. Prototype Bootstrap-based apps using your favorite presentation tool. This date range picker component for Twitter Bootstrap creates a dropdown menu from which a user can select a range of dates. The iconic font designed for use with Twitter Bootstrap.
Icon Font & SVG Icon Sets ❍ IcoMoon The Elegant Ruby Web Framework - Padrino Ruby Web Framework Le Hollandais Volant Your Guide to Choosing a Website Builder Material Icons Guide - Google Design An overview of material icons—where to get them and how to integrate them with your projects. Material design system icons are simple, modern, friendly, and sometimes quirky. Each icon is created using our design guidelines to depict in simple and minimal forms the universal concepts used commonly throughout a UI. Ensuring readability and clarity at both large and small sizes, these icons have been optimized for beautiful display on all common platforms and display resolutions. See the full set of material design icons in the Material Icons Library. The icons are available in several formats and are suitable for different types of projects and platforms, for developers in their apps, and for designers in their mockups or prototypes. Licensing We have made these icons available for you to incorporate them into your products under the Apache License Version 2.0. Browsing and downloading individual icons The complete set of material icons are available on the material icon library. face Sizing