318 useful twitter bootstrap resources #1 Web Design and Web Development Agency based in Palma de Mallorca, Baleares, Spain - MA-NO Web Design and Development Display BOOTSTRAP-MAXLENGTH Uses badges to display the maximum length of the field where the user is inserting text. This plugin uses the HTML5 attribute "maxlength" to work. WATABLE a pretty decent jQuery table plugin BOOTSTRAP-TIMEPICKER A simple timepicker component for Twitter Bootstrap. BOOTSTRO.JS Guide users through your application via a series of Bootstrap popovers NOD! MESSENGER Replacement for alert() messages and other user interaction notifications. JQUERY.TOCIFY.JS A jQuery Table of Contents plugin that can be themed with Twitter Bootstrap or jQueryUI. BOOTSTRAP-PROMPTS An implementation to replace the alert(), prompt(),confirm() notifications on the browser when using Twitter Bootstrap with Modal information SUBNAV FOR BOOTSTRAP 2 Example of how to implement SubNavs in Bootstrap navigation menus. JQUERY-BOOTSTRAP-SCRIPTING Uses the modal dialog provided by bootstrap and provides a controlable dialog functionality for web pages as a jQuery plugin. Form
La navigation Web, c’est aller de l’avant ! | CRO Consultant Expert Web Analytics et Optimisation Taux Conversion Il faut l’avouer sur le web, en général on est assez impatient. On n’aime pas attendre qu’une page se charge, chercher l’accès à un contenu, comprendre pourquoi la validation d’un formulaire ne se fait pas. La décision de cliquer sur tel ou tel lien est prise très rapidement. C’est pourquoi nous avons besoin de simplicité dans la conception d’un site Web, car la complexité est source de confusion et de mauvaises décisions. Nous pourrions schématiser l’expérience utilisateur à un réservoir de « bonne volonté » qui se viderait proportionnellement aux efforts cognitifs fournis jusqu’à une certaine limite de l’acceptable et du « clickout ». « La réserve de bonne volonté » de Steve Krug :1 – Les visiteurs arrivent sur le site avec un réservoir plus ou moins plein de bonne volonté. 2 – Chaque effort cognitif fourni fait baisser le niveau du réservoir.La capacité du réservoir est propre à chaque utilisateur. Imaginons que vous êtes en train de conduire.
WebPlatform.org — Your Web, documented Height equals width with pure CSS Description If you have an image with a certain aspect ratio you can easily keep the proportion with the "auto" value. Like: The problem is that you can't use the "auto" value for the height property of a block element like a DIV or alike. The trick I found a solution which was already posted four years ago on A List Apart. <div class='box'><div class='content'>Aspect ratio of 1:1</div></div> We need two block elements to achieve the desired behaviour. So, what's this? So our box is already as high as wide. The content And here is the trick: We just position the content element as absolute with all four orientations set to 0. That's it. Other aspect ratios If you want to create other ratios just change the padding-top value of the pseudo element (see example): IE7 and below Since IE is IE and especially IE7 is everything but a browser, you have to create the pseudo element yourself in your markup if you like to support that shit.
Transitions & Animations - An Advanced Guide to HTML One evolution with CSS3 was the ability to write behaviors for transitions and animations. Front end developers have been asking for the ability to design these interactions within HTML and CSS, without the use of JavaScript or Flash, for years. Now their wish has come true. With CSS3 transitions you have the potential to alter the appearance and behavior of an element whenever a state change occurs, such as when it is hovered over, focused on, active, or targeted. Animations within CSS3 allow the appearance and behavior of an element to be altered in multiple keyframes. Transitions provide a change from one state to another, while animations can set multiple points of transition upon different keyframes. Transitions As mentioned, for a transition to take place, an element must have a change in state, and different styles must be identified for each state. In the example below the box will change its background color over the course of 1 second in a linear fashion. Vendor Prefixes Box
PNG that works Once you sprite your images, the next step is to compress them as much as possible. PNG is a great format for this, but… Yes, it does! PNG supports various combinations of color depth, transparency and color correction. GIF-like PNG images with simple transparency are supported in all browsers (even as old as IE4) without any hacks, so whenever you can use GIF — don’t. You’ll get the same quality and compatibility as GIF, but a smaller file size. 24-bit PNG files have perfect quality, but perfection costs a lot of bandwidth. When you need full color, but don’t need transparency, use JPEG instead. This type is often mistaken for one and only true PNG, and infamously fails in IE6. Aside from the IE6 problem, this type creates pretty large files. If you’ve only ever used Photoshop, you may believe that this type of PNG cannot exist. With this type of PNG you get file sizes smaller than GIF, but retain ability to use several levels of transparency. How red is #FF0000? I’m serious. PNG tools
Loading Effects for Grid Items with CSS Animations Some inspiration for loading effects of grid items using CSS animations. View demo Download source Today we’d like to share some loading effects for grid items with you. The idea is to show items in a grid with an animation once they are in the viewport. The possibilities are infinite and we’d like to give you some inspiration. Since Masonry is a popular library for laying out grids, we thought it might be a good idea to use it in this demo. Please note: this only works as intended in browsers that support the respective CSS properties. The beautiful illustrations featured in the demos are by Erika Mackley. So, we’ll use an unordered list for the grid and we’ll simply add the respective effect class: The idea is to add a class to the items already shown in the viewport when we load the page. There are a couple of things that we can set. Note that we had to remove the transitions for Masonry so that there’s no conflict with the animations.
Nifty Modal Window Effects A set of experimental modal window appearance effects with CSS transitions and animations. View demo Download source Today we want to share some ideas for modal window effects with you. There are infinite possibilities for transitioning the appearance of a dialog box and we wanted to provide some ideas of how to show dialog boxes and provide some inspiration. The idea is to have a trigger button (or any element) which will make a modal window appear on click using a simple transition (or animation). Please note: this only works as intended in browsers that support the respective CSS properties. There are some knows issue with using visibility/opacity for iOS < 6 Mobile Safari, so this probably won't work on older devices. The structure of the modal window consists of a main wrapper and a content division: <div class="md-modal md-effect-1" id="modal-1"><div class="md-content"><h3>Modal Dialog</h3><div><p>This is a modal window. For some effects we will also add a class to the html element.