Bootstrap 3 responsive grid psd templates · Minimit Five psd templates for designing with the responsive grid of Bootstrap 3 Updated 21/05/2015 - Added the template bootstrap3-1560px.psd with container-fluid of 1560px With the new Bootstrap 3 grid you have gutter width and column width different from the ones in Bootstrap 2, and the container width includes two half gutter padding on the sides. Also, in each breakpoint, the columns have uneven width since they are set by percentages, and the width of the container doesn't match perfectly with even width. In the download above you can find the grid templates for the three main breakpoints of bootstrap 3 (1170px, 970px, 750px), plus two grids for mobile (480px, 320px), all with the default 30px gutter. On the mobile grids (480px, 320px) the minimum column size is col-xs-2, because col-xs-1 breaks the grid in the browser with a viewport of 320px.
3 Column Layout - any order, fixed-width or liquid flanking columns, liquid header, full-width footer, absolutely positioned It has come to my attention that people are flagging up this page. Here's what I posted to the css-discuss list almost immediately after my initial all-too-soon-pride-comes-before-a-fall announcement back in February. >PRODUCT RECALL - 3COL_ORDEREDABSOLUTE.MHTML > >< > >WARNING - THIS LAYOUT MAY BURST IN TO FLAMES IN IE6 > > >In short, if padding is set on the columns, in some column orderings, the >lefthand column gets shunted to the right by the amount of padding. > >I could have sworn this didn't happen in my version of IE6 but I've packed >away the box in order to do some work on my flat so I can't check. And >won't be able to for a couple of days. (How foolish was that releasing it >just now?). No doubt I just overlooked a particular test case. And of course, a few days has turned into almost a few months. There - you have been warned.
45 New jQuery Plugins for Web Developers inShare2 We always work hard to get the best and freshest information for our readers and now it’s a good time to share with you some new and cool jQuery plugins. For those, who use these plugins in everyday work or some projects this showcase might be very handy! RefineSlide RefineSlide is a simple jQuery plugin for displaying responsive, image-based content (with shiny animations). Complexify Complexify aims to provide a good measure of password complexity for websites to use both for giving hints to users in the form of strength bars, and for casually enforcing a minimum complexity for security reasons. Tablecloth.js This is a jQuery plugin that helps you easily style HTML tables along with some simple customizations. jQuery Picture jQuery Picture is a tiny (2kb) plugin to add support for responsive images to your layouts. ddSlick A free light weight jQuery plugin that allows you to create a custom drop down with images and description. JQVMap Quake Slider jQuery RWD Image Maps Real Shadow noty
diamond Brushed | Responsive One Page Template CTO/Founder John Doe Lorem ipsum dolor sit amet, consectetur adipiscing elit. Creative Director Jane Helf Lead Designer Joshua Insanus 325+ Best Free Responsive HTML5 CSS3 Website Templates So we’re pretty bored with the current limits of the best “HTML CSS” and it’s clear that the “HTML5 CSS3” is the cure to let the creativity flow. We’re also going to implement a jQuery slider, so the lead image will be part of a rotation rather than just a static image. And Even if you don’t use these templates, you can get a doze of inspiration by having a look at these CSS/XHTML Web Templates. They are free to download and free to use for any purpose without any limitations or obligations. There are a lot of websites offering Free HTML5 CSS3 Templates. So, you have to do is choose a web design you like best. Here are 325+ best free premium HTML5 CSS3 website templates to help you get inspired and started. Trendy UI KIt Flat Responsive Free HTML5 Template Trendy UI Kit is a Plain and bold UI kit that includes lots of user interface elements. Art a Portfolio Singlepage Flat Responsive Free HTML5 Website Template Spike Shoes a Flat ECommerce Responsive Free HTML5 Website Template
Porto - Responsive HTML5 Template Versions HTML5 Version Main Features Overview Porto is a professional multipurpose template for any business or portfolio website, it’s fully responsive design ready to look stunning on any device. Customize your website as much as you want, you have tons of layout possibilities with unlimited variations and colors. The template comes with 35+ HTML pages built using Bootstrap 3. HTML5 and CSS3 Bootstrap 3 Grid System and Responsive Design Touch Swipe Support 55+ HTML Files Blog Pages (Not Functional) Shop Pages (Not Functional) Login/Register Pages and Headers (Not Functional) Wide & Boxed Layouts 6 Header Versions 4 Footer Versions Parallax One Page Template SEO Optimized Over 350 Icons Google Fonts Support Owl Carousel Nivo Slider Premium resources Slider Revolution Responsive jQuery Plugin (12$ Value – Included!) Support Most of the questions are already answered in the FAQ’s – View FAQ’s – Post a New Topic Updates Version 2.9 – 10 April 14 Version 2.8 – 20 March 14 - Shop Pages. Credits
Flippant Heading Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Modal » Card » Donec sed odio dui. Whys and hows: Flippant is tiny. Flippant is easily customized. Flippant exports a single function: flip. var front = document.getElementByID('flipthis') , back_content = "<h1>I'm the back! Two modes: card (the default), and modal. back = flippant.flip(front, back_content, 'modal') The back gets the default class of flippant-modal-dark for modal flips and flippant-modal-light for cards. back = flippant.flip(front, back_content, 'modal', 'my-modal-classname') The full API: flip(element_to_flip, content_for_back, type(modal/card), classname_for_back) -> back_element 74.3% of the magic is in the css file.
KNACSS Customize checkboxes and radio buttons with iCheck (jQuery and Zepto) plugin - Iceweasel iCheck plugin works with checkboxes and radio buttons like a constructor. It wraps each input with a div, which may be customized by you or using one of the available skins. You may also place inside that div some HTML code or text using insert option. For this HTML: <label><input type="checkbox" name="quux[1]" disabled> Foo </label><label for="baz[1]">Bar</label><input type="radio" name="quux[2]" id="baz[1]" checked><label for="baz[2]">Bar</label><input type="radio" name="quux[2]" id="baz[2]"> With default options you'll get nearly this: <label><div class="icheckbox disabled"><input type="checkbox" name="quux[1]" disabled></div> Foo </label><label for="baz[1]">Bar</label><div class="iradio checked"><input type="radio" name="quux[2]" id="baz[1]" checked></div><label for="baz[2]">Bar</label><div class="iradio"><input type="radio" name="quux[2]" id="baz[2]"></div> By default, iCheck doesn't provide any CSS styles for wrapper divs (if you don't use skins). Options These options are default:
Select2 3.3.2 - Iceweasel Gets or sets the selection. If the value parameter is not specified, the id attribute of the currently selected element is returned. If the value parameter is specified it will become the current selection. val method invoked on a single-select with an unset value will return "", while a val method invoked on an empty multi-select will return []. Example: alert("Selected value is: "+$("#e8").select2("val")); $("#e8").select2("val", "CA"); Notice that in order to use this method you must define the initSelection function in the options so Select2 knows how to transform the id of the object you pass in val() to the full object it needs to render selection. Gets or sets the selection. data method invoked on a single-select with an unset value will return null, while a data method invoked on an empty multi-select will return []. Reverts changes to DOM done by Select2. Opens the dropdown. Closes the dropdown. Notifies Select2 that a drag and drop sorting operation has started. change val added object
Creating Different CSS3 Box Shadows Effects - Iceweasel In this tutorial we are going to be creating box shadow effects with just CSS. Below is an image created in photoshop of different box shadows effects. These used to be the only way of creating this effect but thanks to CSS3 we can now do all this with just CSS. View Demo page to see what we are going to create CSS Box Shadow Effects Demo CSS Box Shadow We are going to be using the CSS box shadow property which is one my favourite CSS properties which you will see in this tutorial how easy you can use it. The box-shadow property allows you to easily create multiple drop shadows on box elements by specifying values for colour, size, blur and offset. The box-shadow property accepts 2-6 options, the required options are horizontal offset and vertical offset, the two optional options are spread distance and colour. box-shadow: inset horizontal vertical blur spread colour; Examples Browser Support All of the major newest browsers support box-shadow property. The box-shadow property is no different.