Category

Graphics

Twitter’s Bootstrap ported to jQuery UI widgets

By | Graphics | No Comments

A Bootstrap-themed kickstart for jQuery UI widgets.

This is an awesome resource for jQuery and Twitter Bootstrap users that combines the power of both.

It is a jQuery UI theme that not only brings Bootstrap-themed widgets but also enables us to use (most) of Twitter Bootstrap side-by-wide without any components being broken visually.

With this theme, not only do you get the ability to use Bootstrap-themed widgets, but you can now also use (most) of Twitter Bootstrap side-by-wide with it without components breaking visually.

jQuery UI Bootstrap

 

 

Top Responsive Layout and CSS Frameworks

By | Graphics | No Comments

Less Framework 4

The Less Framework contains 4 adaptive layouts and 3 sets of typography presets, all based on a single grid, composed of 68 px columns with 24 px gutters. The idea is to first code the Default Layout (992 px), and then use CSS3 media queries to code seve­ral child layouts: 768, 480, and 320 px. The Default Layout will be served to any browsers that do not support media queries, whereas the child layouts will be served, as appropriate, to browsers that do.
Less Framework 4 HomeGitHub

Foundation

Foundation is a a 12-column, future-friendly responsive grid framework that includes dozens of styles and elements to help you quickly put together clickable prototypes, that can then be adapted and styled into polished production code.
Foundation lets you quickly put together page layouts for mobile devices and the desktop. You don’t need two different sites – the Grid is built to create a rock-solid experience on all kinds of devices with the exact same markup.
Foundation HomeGitHubDocs

MQFramework

The responsive MQFramework, based on a 12 column grid, has been structured to suit different needs, be it from a new project to fitting into an existing project with very little changes to the code. One CSS file imports the framework files and a custom stylesheet for the design of your site. It utilises the @media property to allow you to design your sites for browsers of all sizes.
MQFramework Home

Golden Grid System

The Golden Grid System is a folding grid system for responsive design. It splits the screen into 18 even columns. The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design. The 16 columns can be combined, or folded, into 8 columns for tablet-sized screens, and into 4 columns for mobile-sized ones. This way GGS can easily cover any screen sizes from 240 up to 2560 pixels.
It comes with folding columns, elastic gutters, a zoomable baseline grid, and the Golden Gridlet a little script that adds a button into the upper right corner of the page. When clicked or tapped, it overlays the GGS grid and a baseline grid of 1.5em onto the page, making it easy to visually check that design elements align up.
Golden Grid System HomeGitHub

Fluid Baseline Grid

The Fluid Baseline Grid system was built with typographic standards in mind and combines the key principals of fluid-column layouts, baseline grids and mobile-first responsive design into a resolution independent and device agnostic framework.
It is packed with CSS normalization, beautiful typographic standards, corrected bugs and common browser inconsistencies.
Fluid Baseline Grid HomeGitHub

Columnal

Columnal, a 1140px wide grid system, has been inspired by the cssgrid.net and 960.gs. It makes web design easier by making your grids fluid, dynamically changing based on the browser size and switching to a mobile-style layout if the width is small enough. The grid is divided horizontally into a series of 12 columns, and vertically into rows. 12 columns divide nicely into equal columns of two, three, four, or six columns.
Columnal Home

The Semantic Grid System

The Semantic Grid System is a responsive grid system that lets you set column and gutter widths, choose the number of columns, and switch between pixels and percentages without any ugly .grid_x classes in your markup.
The Semantic Grid System Home

The 1140px CSS Grid System

The 1140px CSS Grid has been designed to fit perfectly with a 1280px screen, becoming fluid for smaller screens, beyond a certain point it uses media queries to serve up a mobile version.
The actual grid consists of twelve columns, evenly divided by either two, three, four or six. It works with all major browsers, with the exception of IE6, which does not support max-width (it will span the full width of the browser).
The 1140px CSS Grid System Home

Skeleton

Skeleton is a small collection of CSS & JS files that has a lightweight 960 grid as its base that seemlessly scales down to downsized browser windows, tablets, mobile phones (in both landscape and portrait).
Skeleton HomeGitHub

320 and Up

320 and Up prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point. It starts with a tiny screen stylesheet that contains only reset, colour and typography styles. Media Queries then load assets and layout styles progressively and only as they’re needed.
320 and Up HomeGitHub

The Goldilocks Approach

The Goldilocks Approach uses a combination of Ems, Max-Width, Media Queries and Pattern Translations to consider just three states that allow your designs to be resolution independent.
It is a minimal framework that includes well commented CSS files that consider 3 CSS Media Query increments (multi column, narrow column and single column) and an HTML boilerplate file to get you started.
The Goldilocks Approach HomeGitHub

inuit.css

inuit.css is a lightweight, responsive and constantly updated CSS framework which gives you a pragmatic and feature-rich starting point for all your projects. It is crammed full of useful snippets and has additional plugins to extend its usefulness further.
inuit.css HomeGitHub

BluCSS

BluCSS is a lightweight CSS framework designed with ease of use and simplicity in mind. It is also extremely responsive with four distinct stages: Desktop screen, laptop, tablet, and mobile.
There are 10 columns in BluCSS, and each has a width specified in percentages. Because of this, they resize automatically to fit into their parent container. In this way, you aren’t restricted to just using the built-in “container” div. You can create smaller containers, and use BluCSS inside them with no changes whatsoever.
BluCSS Home

Frameless

Frameless HomeGitHub

Gridless

Gridless is an HTML5 and CSS3 boilerplate for making future-proof responsive websites. You can easily create responsive, cross-browser websites with beautiful typography. It is simple and straightforward and doesn’t come with any predefined grid systems or non-semantic classes.
Gridless HomeGitHub

HTML5 and CSS3 feature-detection with Modernizr library

By | Coding, Graphics | No Comments

Ten years ago, only the most cutting-edge web designers used CSS for layouts and styling. Browser support for CSS layouts was slim and buggy, so these people advocated for web standards adherence, while creating hacks that made CSS layouts work in all browsers. One hack that became widely used was browser sniffing: Detecting which browser and version the user had by looking at the navigator.userAgent property in JavaScript. Browser sniffing allowed for quick and easy code forking, allowing developers to target different browsers with different instructions.

Read more

CSS Frameworks, cut down on your development time.

By | Graphics, Mobile | No Comments

A CSS framework, also known as a web design framework is a pre-prepared library that is meant to allow for easier, more standards-compliant styling of a webpage using the Cascading Style Sheets language. Just like programming and scripting language libraries, CSS frameworks (usually packaged as external .css sheets inserted into the header) package a number of ready-made options for designing and outlaying a webpage.