Bootstrap, lisibilité, propreté, performance, optimisation ; c'est possible ! On me dit souvent que je n'aime pas Bootstrap, et pour cause, je pense que c'est une regression pour un travail Front-end de qualité. En réalité, ce n'est pas le Framework le fautif, mais la façon dont il est utilisé. Les exemples de mauvaises utilisations sont légions sur le net et les mauvaises intégrations HTML cour les rues. Suis-je donc entrain de dire qu'il y a une bonne et une mauvaise façon d'utiliser Bootstrap ? C'est exactement ce que je suis entrain de dire, et je vais vous expliquer à travers ce billet le cheminement qui va vous conduire à : Séparer le fond et la forme, pour un gain de lisibilité et de propreté,Inclure et générer le stricte minimum pour un gain de performance, avec un exemple d'optimisation de CSS 30 fois plus légère. Non, je suis sérieux, ce billet n'est pas une blague, c'est cadeau, et c'est pour vous. À ne vraiment pas faire, ou l'utilisation Standard de Bootstrap Pour commencer notre réflexion, partons de l'utilisation « standard » de Bootstrap. <! Résultat
CSS · Bootstrap (deutsch) Hol dir die harten Fakten über die wichtigsten Teile von Bootstraps Infrastruktur, inklusive unserem Ansatz für bessere, schnellere, stabilere Web-Entwicklung. HTML5-Doctype Bootstrap benutzt bestimmte HTML-Elemente und CSS-Eigenschaften, die die Verwendung des HTML5-Doctypes erforderlich machen. Füge diesen am Anfang von all deinen Projekten ein. <! Mobile-First-Ansatz Mit Bootstrap 2 haben wir optionale Stile für die wichtigsten Aspekte des Frameworks hinzugefügt, die Projekte für mobile Geräte bereit machten. Damit deine Seite auf mobilen Geräten vernünftig angezeigt wird und gezoomt werden kann, ergänze das Viewport-Meta-Tag in deinem <head>. Du kannst Zooming auf mobilen Geräten deaktivieren, indem du user-scalable=no zu diesem Viewport-Meta-Tag hinzufügst. Bootstrap legt globale Grundregeln für die Anzeige von Elementen, Typografie und Links fest. Wir setzen background-color: #fff; beim body und machen so den Seitenhintergrund weiß. Diese Stile findest du in der Datei scaffolding.less.
FancyBox 1.3.4 | Demonstration Une démonstation de Fancybox. C'est la traduction française de la documentation issue du site officiel Des animations différentes ('fade', 'elastic' and 'none') La position des titres ('outside', 'inside' and 'over') Les galeries d'images (utilisez la molette de la souris) Quelques exemples Le texte est d'abord écrit dans le code mais non-affiché (display:none). Inline un document dans le code html Ajax Un document interne (texte.txt) Iframe Le site Wikipedia dans une fenêtre (affichage à 95%) Swf Une animation vidéo Autres exemples (bidouillages personnels) 1. À déclarer dans l'en-tête : Puis à afficher dans la page html : <a class="site" href="l_url_du_site? On peut définir la taille de la fenêtre en pixel ou en pourcentage, la transition, la couleur et l'opacité de la trame (overlay) et la vitesse d'apparition et de disparition de la fenêtre fancybox. 2. Il faut d'abord définir l'objet sans l'afficher : Puis, le lancer : Un autre exemple : Le parti d'en rire (Pierre Dac et Francis blanche). 3.
A Full Screen Bootstrap Carousel with Random Initial Image A few months ago, I wrote an article that covered Bootstrap’s Affix and ScrollSpy components. This time though, I’ll be focused on a different Bootstrap component: I’ll go through the process of building two simple extensions for the Bootstrap carousel. First, I’ll create a full-screen slideshow and then I’ll show you how to randomize the first slide on page load. But before digging into those extensions, let’s start by creating a carousel based on the default styles. Building the Carousel To create the carousel, we’ll take advantage of the basic code for the carousel component that Bootstrap provides: <div id="mycarousel" class="carousel slide" data-ride="carousel"><! Notice that each of our images contains the custom data-color attribute. The next step is to initialize the carousel via JavaScript and modify the predefined values of the interval and pause configuration properties. Creating Full-screen Slides …and some CSS: In the code above, we do the following: So instead of this: We do this:
Outils en direct - Bouton Builder Global Settings Button Label Padding Font Size Corner Roundness Border Thickness Highlights <a href='#' class='button'>Button</a> Now UI Kit by Creative Tim Now UI Kit is a responsive Bootstrap 4 kit provided for free by Invision and Creative Tim. It is a beautiful cross-platform UI kit featuring over 50 elements and 3 templates. Now UI Kit is one of the most popular UI Kits online, provided in PSD and Sketch formats by Invision. Now UI Kit will help you create a clean and simple website that is a perfect fit for today's flat design. Create awesome, lifelike prototypes with InVision and Now so your users can experience and give feedback on your vision! To get the PSD and Sketch files, please visit Invision. Bootstrap 4 Support Now UI Kit is built on top of the much awaited Bootstrap 4. Example Pages We wanted to fully display the power of this kit, so the kit comes packed with examples showing you how to use the components. Tutorial & Documentation In order for you to easily be able to use the Now UI kit, we have created a tutorial page. Current version 1.2.0 See updates and changelog
Les meilleurs outils pour réaliser vos maquettes de pages web Dans mon boulot de conception d’interfaces, je suis régulièrement amené à réaliser des maquettes. Maquettes, prototypes, ergolayouts, mockups, wireframes,… de nombreux vocables existent pour désigner ce qu’on peut considérer comme du design fonctionnel (qui s’intéresse au découpage des contenus, à la taille et à la position des fonctionnalités,…) par opposition au design graphique (qui s’intéresse aux couleurs, aux effets graphiques, aux formes,…). Microsoft Visio reste un des classiques pour réaliser ce genre de tâches. Personnellement, il me déçoit. Je le trouve faible dans son rendu graphique, fermé dans son approche et incomplet en termes d’éléments d’interface. Jusqu’ici, je trouvais sympathique des outils tels que Gliffy ou Mockingbird. Mais là, j’ai testé Mockflow, et je l’ai tout de suite adopté ! Tout y est ! Suite à vos commentaires, chers lecteurs, je rajoute Balsamiq, dont j’aime l’allure « brouillon manuscrit ». Vous pouvez tester Mockflow gratuitement.
Alsacréations : Tutoriels XHTML, CSS, actualités et articles sur les standards web Web 1.0, 2.0 ou 3.0 - De quel type êtes-vous ? Le Web a parcouru beaucoup de chemin depuis 1990. En peu de temps, nous sommes passés de pages textuelles sur fond gris reliées entre elles à l'aide d'hyperliens vers des applications riches et intelligentes. Si l'Internet peut être considéré comme la révolution des deux dernières décennies, les changements eux se sont faits dans un cadre évolutif. L'un des composants les plus populaires d'Internet est évidemment le Web. Le Web 1.0 - Diffusion Les producteurs Web diffusent des contenus vers les usagers. Le Web 2.0 - Collaboration La mise en place de nouvelles plateformes permet aux usagers de créer et de partager des contenus Web riches. Le Web 3.0 - Sémantique Dans les dix prochaines années, nous connaîtrons le Web en temps réel, l'interopérationnalité des systèmes, l'intégration accrue des jeux en ligne, des mondes virtuels et des portails 3D dans l'éducation, les entreprises et nos vies. Conclusion En 2010, nous sommes encore dans l'ère du Web 2.0.
Comprendre le web sémantique Le Web sémantique, ou « langage naturel » est le Saint Graal sur lequel planchent les chercheurs depuis quelques années. Pour un de ses théoriciens, Tim Berners-Lee, l'idée est de parvenir à un Web intelligent, où les informations ne seraient plus stockées mais comprises par les ordinateurs, pour apporter à l'utilisateur ce qu'il cherche vraiment. Le Web sémantique permettra donc de rendre le contenu sémantique du Web interprétable non seulement par l'homme, mais aussi par la machine. L'idée est donc de permettre une recherche intelligente sur le Web, faite par des ordinateurs et basée sur des définitions qu'ils puissent « comprendre », des définitions données pour le monde entier. En faisant une requête sur un moteur proposant de la recherche en langage naturel, vous l'interrogerez comme vous parlez, et il transformera cette demande en langage compréhensible et cohérent pour la machine. Le principe du Web sémantique Premiers développements et usages Trulia À savoir Le moteur de Evi Powerset
5 outils pour créer à partir de son smartphone ou de sa tablette partages sur les réseaux sociaux Une idée en tête ? Munissez vous vite d'une feuille de papier et d'un crayon avant qu'elle ne vous échappe. Paper En pénurie d'encre ? Wires Avec le développement du mobile, difficile pour un designer aujourd'hui d'ignorer le design d'interface. IFontMaker iFontMaker s'adresse aux créateurs de caractères. Adobe Shape Une forme dans la rue à capturer, un motif sur un livre ou une jolie lettre, Adobe Shape utilise la caméra de votre iPhone pour capturer toutes ces petites choses qui interpellent. The Everything Machine Cette application est avant tout pour les enfants, pour les familiariser avec la création d'applications.