background preloader

Hello Erik - User Experience @Erik_UX

Hello Erik - User Experience @Erik_UX
IMPORTANT NOTE: Bootstrap 4 will be out soon, and it will be moving to Sass for its CSS instead of Less. Most of the principles of this article will still apply – but I will do my best to quickly either rewrite the post for Sass, or just update this post for both. I do not expect huge changes to how the grid HTML classes are applied. Read more here: After over 9-months of work, Bootstrap 3 is here. Bootstrap 2’s grid was very straight forward. Bootstrap 3 has been heavily publicized as being mobile first. Update 8/25/13: There’s been some questions around the ‘net about 100% width sites, “liquid” as we called it in the 90’s. Update 9/27/13: If you like this article, be sure to read the Part 2 about a Bootstrap Less workflow here Bootstrap 3 Less Workflow Tutorial and the Subtle Magic Behind Why the Bootstrap 3 Grid Works. Mobile First CSS Great. Here’s an example of this: See, the actual base style is the mobile style. Mixin Related:  TUTORIELS, COURS, Bonnes Pratiques etc

Responsive Tables Demo A quick and dirty look at some techniques for designing responsive table layouts. This was put together in haste (and with the aid of Twitter Bootstrap) for What Do You Know Brisbane hosted by Web Directions. I work for a really great little web design agency in Brisbane, and you should say hello. The Unseen Column This technique, first described by Stuart Curry (@irishstu) involves simply hiding less important columns on smaller screen sizes. Example Code The approach I've presented here assumes you know the index of the columns to be hidden. <table> <thead> <tr> <th>Code</th> <th>Company</th> <th class="numeric">Price</th> <th class="numeric">Change</th> <th class="numeric">Change %</th> <th class="numeric">Open</th> <th class="numeric">High</th> <th class="numeric">Low</th> <th class="numeric">Volume</th> </tr> </thead> <tbody> <tr> <td>AAC</td> <td>AUSTRALIAN AGRICULTURAL COMPANY LIMITED. Flip Scroll This technique was first published by David Bushell (@dbushell). No More Tables

Bootstrap 3 Tutorial Responsive Web Design just got Easier with the Responsive Grid System Utilisation optimisée de Framework CSS comme Bootstrap avec Less J'ai déjà abordé le sujet des Frameworks CSS qui surchargeaient le DOM HTML inutilement et allait à l'encontre de la philosophie du W3C (séparation du fond et de la forme) dans un précédent article où j'expliquais pourquoi, par exemple, Bootstrap est une régression pour un développement Front-end de qualité. J'ai également expliqué comment reproduire l'équivalent de fonctionnalités utiles dans un Framework en respectant l'approche CSS-driven dans Grille CSS Responsive et Sémantique sans Framework. Je vais ici vous démontrer que cette méthode CSS-driven peut non seulement être grandement simplifiée avec l'utilisation des préprocesseurs CSS comme Less, Sass ou Stylus, mais qu'elle permet également d'exploiter les Frameworks tel que Bootstrap de manière propre et conforme à la philosophie de séparation de la sémantique et du design. Les approches HTML-driven et CSS-driven pour habiller une page Web La différence est simple : HTML-driven où l'habillage rapide et désolant Il vous faudra : Sources

Grid Based Web Design Resources As a complement to our prior post "30 Grid-Based Websites", we've made a selection of indispensable resources like layout frameworks, tutorials, books, templates and useful tools that can help you understand and implement grid based design in your projects. Let's start with a little history. Many of you know who Massimo Vignelli is, a known designer with a solid modernist influence who developed his career in numerous areas of design. In 1977, he designed the Unigrid System for the National Park Service. Tools & Online Layouts Generators The 892 unique ways to partition a 3 x 4 grid The 3 × 4 grid poster is a computation-based design. Photoshop Grids and Plugins Frameworks 960grid The 960 grid is a classic among CSS frameworks, a very useful tool based on a width of 960px with a large number of resources to integrate the design in the layout. This is not just another multicolum layout. Books & Geekeries This notebook is designed for digital designers. Wordpress Themes

Premiers pas - Bootstrap bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff bootstrap/ ├── less/ ├── js/ ├── fonts/ ├── dist/ │ ├── css/ │ ├── js/ │ └── fonts/ └── docs/ └── examples/ Respond.js and <script>$(function () { var nua = navigator.userAgent var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1) if (isAndroid) { $('select.form-control').removeClass('form-control').css('width', '100%') }})</script>

The Arrival of Bootstrap 4 and Tutorials | Experience Design at Hello Erik Bootstrap 4 is coming soon. Over the last few years, I have written 3 articles that have received almost a million views and seem to be the go-to resources for Bootstrap grid questions off of Stack Exchange, as well as Google searches. I plan on maintaining my commitment to these topics for Bootstrap 4. I will either be updating these articles to include both (since i don’t want to break SEO), or including prominent links to new articles that are essential updated copies for version 4. I am very excited for Bootstrap 4, and for having something to force me to master the Sass syntax. Below are the articles for your easy reference. Bootstrap 3 Grid Introduction Bootstrap 3 Less Workflow Tutorial The Subtle Magic Behind Why the Bootstrap 3 Grid Works

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

Bootstrap 4 Tutorial - An Ultimate Guide for Beginners Bootstrap is the most popular and powerful front-end (HTML, CSS, and JavaScript) framework for faster and easier responsive web development. Bootstrap is a powerful front-end framework for faster and easier web development. It includes HTML and CSS based design templates for creating common user interface components like forms, buttons, navigations, dropdowns, alerts, modals, tabs, accordions, carousels, tooltips, and so on. Bootstrap gives you ability to create flexible and responsive web layouts with much less efforts. Bootstrap was originally created by a designer and a developer at Twitter in mid-2010. You can save a lot of time and effort with Bootstrap. Tip: Our Bootstrap tutorials will help you to learn the basic as well as advanced features of the Bootstrap step-by-step through easy-to-understand explanation of every topic. What You Can Do with Bootstrap There are lot more things you can do with Bootstrap. You can easily create responsive websites. Advantages of Using Bootstrap

Bootstrap 4 tutorial - best & free guide of responsive web design What will you learn: Together with Bootstrap, you will also learn many other powerful and useful technologies. Bootstrap 4 Material Design for Bootstrap JavaScript Command line Gulp Git Web Design / UI / UX theory Summary: Let’s summarize. 1. 2. 3. Why use Bootstrap? 1. 2. 3. 4. The “Bootstrap Tutorial” that we have prepared for you, will guide you progressively through Bootstrap elements, step by step. Each lesson is provided with series of practical examples, and each of those examples brings you meaningful web design knowledge. In this tutorial, you will use our Bootstrap overlay, which provides a marvelous appearance consistent with the standards of Material Design by Google. The overlay is called Material Design for Bootstrap, and you can get it for free from our website. If you want to get more excited and see possibilities offered by MDBootstrap, you can read more about it here: About MDBootstrap …or you can jump directly into the tutorial and start to create some amazing things right now!

Speeding Up Development Process with Bootstrap 5 Share Share Tweet Share Pin It Bootstrap is one of the most used frameworks for building web apps. It consists of HTML and CSS components for typography, forms, buttons, navigation, slider and other user interfaces that you can think of which makes the development process easier and faster. You can repeatedly use the same layout pattern across the web app using premade classes and themes right out of the box. Even so, you can be the best developer in the world and at the same time you can have the best tools a developer can have but you won’t have all the time to develop a project. My goal in this tutorial is to guide you on some ways to speed up not only your web development process using the Bootstrap 5 framework but also help you create a fast and efficient website or application without missing the front-end framework’s features and capabilities. In particular, we’re going to discuss the following topics: Online Email Template Builder Try FreeOther Products What is a Task Runner? Gulp JS

Getting Started with Bootstrap 5, React, and Sass Share Share Tweet Share Pin It There are several ways to build modern web applications using JavaScript and CSS. With lots of different tools and frameworks of choice, it’s really hard to choose at times which one is best for a specific project. If you’ve been developing websites and applications for quite a while, it is very likely that you have used React JS and Bootstrap or at least are aware that they exist as coherent tools for modern web app development since they are both used for building fast and scalable user interfaces. React JS is similar to the view in a typical MVC (Model-View-Controller) architecture but it is not an MVC framework in general since it handles mapping from input to state changes and renders components. React JS React also known as React.js or React JS is an open-source front-end JavaScript library developed by Facebook which produces a view for data rendered as HTML. Bootstrap Bootstrap was founded at Twitter in mid-2010 by Mark Otto and Jacob Thornton. Images

Related: