background preloader

Grid-A-Licious

Grid-A-Licious
Back in mid 2008, I created a jQuery plugin. I named it Grid-A-Licious and described it as, "Divs are placed in chronological order with a special grid" because I had no clue how to explain it better. I used this script a lot and designed many sites with it during 2008. In Dec 2008, I decided to wrap the script into a Wordpress theme and release it as a christmas gift to the world. Today this floating grid layout effect is heavily used around the net and there are tons of different variations of the script to download and use. So, why am I continuing developing this? The plugin is totally rewritten and the biggest change since the previous versions of Grid-A-Licious (and other similar plugins) is that the items in the grid aren’t using absolute positioning any more. If this is something you’ve been looking for, go ahead and download the plugin and use it. width Default 225px gutter Default 20px selector Default .item animate Default false animationOption Default options below queue Default true

Delta – A Free jQuery UI Theme | Kiandra IT Blog Kiandra is pleased to announce the open sourcing of a jQuery UI theme we think you’re going to love. We have been using the “Delta” theme for the better part of a year and made the decision to share it with the community. We’re hoping this results in plenty of feedback as well as the continued development of the theme. If anything, we think that this theme can act as a starting point for other smart cookies to create their own visually engaging jQuery UI themes. Features: Open source – Free for commercial and personal use alike under an MIT license.Retina ready – The theme makes use of CSS3 gradients and some @2x images to ensure it’s retina display friendly.Dark and light friendly – The vibrant colour scheme means “Delta” works on both light and dark backgrounds. Support & Testing: IE7, IE8 & IE9But rounded corners and drop shadows will degrade depending on supportChromeFirefoxSafariOpera Did you find an issue? View Demo – Go to Repository

Adaptive Images in HTML Internet Explorer CSS3 PIE: CSS3 decorations for IE How To Use Size, Scale, And Proportion In Web Design Loud and soft, dark and light, big and small. Each is a relative measurement of some quality on some scale. Day doesn’t exist without night and up doesn’t exist without down. Each exists in contrast to the other and contrast occurs on a scale. Size, scale, and proportion are all related concepts. Size: the physical dimensions of an objectScale: the relative size of different objects or of an object to a common standardProportion: harmony of scale Size Web designers make a lot of choices about size. Size is an absolute measurement. We even need to consider the size of the files we create in order to speed up download times. We aren’t limited to using absolute measurements when designing of course, but when your audience is viewing your design everything will appear in absolute measurements. On it’s own size isn’t very interesting. Things get more interesting when we talk about scale. Scale Scale is a relative level or degree. Again scale is about relative measurements. Typographic Scale

HTML5 Image uploader with Jcrop HTML5 Image uploader with Jcrop We have received several inquiries for the last time from our readers with a question – how to upload photos to website. I think that this is an interesting question, and, I decided to lift the veil of this question. But, I think that the basic file upload is a bit boring thing, so, I decided to add an important feature – Cropping. It should be more attractive. Moreover, we are going to use HTML5 FileReader in order to perform cropping with Jcrop (jquery library) at client size. It is the very time to test our demo and download the sources: Live Demo download in package Step 1. Our first step is html markup. first, we have to put styles and scripts in the HEAD section: And now, in the BODY section we can put our form: I hope that all is clear at this step – this is usual upload form, with hidden and visible fields, once we have selected an image, we will see second step (crop). Step 2. Now, I would like to give you CSS styles to stylize our form: css/main.css

slideControl.js jQuery Plugin In Your <head> <link rel="stylesheet" type="text/css" href="slideControl.css" /><script type="text/javascript" src=" type="text/javascript" src="jquery.slideControl.js"></script><script type="text/javascript"> $(document).ready(function() { $('.slideControl').slideControl();});</script> Options speed: Controls the speed of the animation for a slider reszing, defaults to 400 lowerBound: Sets the minimum amount the slider can be set to, defaults to 1 upperBound: Sets the maximum amount the slider can be set to, defaults to 10 <ul><li><label>Responsiveness: </label><input type="text" value="6.0" class="slideControl" /></li><li><label>Safety: </label><input type="text" value="4.0" class="slideControl" /></li><li><label>Information: </label><input type="text" value="9.0" class="slideControl" /></li></ul> The CSS file included should be pretty straight-forward. Usage

Golden Grid System GGS was my next step after Less Framework. Instead of a fixed-width grid, it used a fully fluid-width one, without even a maximum width. The resources it was published with are still available on GitHub. The idea was to take a 18-column grid, use the outermost columns as margins, and use the remaining 16 to lay elements out. On smaller screens the 16 columns could be folded into 8, 4 and 2. This behaviour was inspired by Massimo Vignelli's Unigrid system. While the grid's columns were fluid — proportional to the screen's width — the gutters (spaces between the columns) were proportional to the font-size being used. GGS also contained a set of typographic presets, strictly to a baseline grid. Correctly setting all of these measurements is difficult, of course. When published, GGS gained a lot of attention, as the web design community was searching ways to work with fluid-width grids, which have always been troublesome, running counter to many graphic design principles.

CSS Layout Generator About the CSS Layout Generator The CSS Layout Generator was first released by Tony Aslett in October 2003, since then over 871,000 layouts have been generated. Updated in November 2010, HTML5 doctype can now be selected and a simple HTML5 template with appropriate tags will be created. The generator helps you create the structure of your website template using valid HTML and CSS. You can create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. The generator requires a modern DOM capable browser with JavaScript enabled. Instructions To create your layout select the structural elements your site requires (header, footer, columns). Info popups are available where you see InfoMore info example :) icon, just hover over it for more information. Join the CSS Forum to suggest changes or ask for help where needed. Author: Tony Aslett

How to Design a Landing Page to be Conversion Focused Landing pages get a a bad rap. Designers often rebel against some of the basic principles of landing pages. And clients as well as agencies often misunderstand what a landing page really is and how to make it really sing. If you’re in the landing page business — as I am — you know that landing pages are really much more than they’re given credit for. Debunk 1: A Landing Page is a Page. First, they’re far more than a page. Landing Page The first page of any landing experience is its landing page. Land & Jump A single-page landing experience that’s designed to warm the user up to something before it’s shown to them is of-ten called a land & jump (because they’re landing & jumping off to somewhere else for conversion). Microsite A small, topic-specific website with specific, persistent navigation is usually referred to as a microsite. Conversion Path A series of pages designed to segment visitors into sub-groups and subsequently deliver segment-specific content and offer is a conversion path.

jquery FooTable FooTable is a jQuery plugin that aims to make HTML tables on smaller devices look awesome - No matter how many columns of data you may have in them. What Does It Do? FooTable transforms your HTML tables into expandable responsive tables. This is how it works: It hides certain columns of data at different resolutions (we call these breakpoints). So simple! Demos Download Get the source from Github , or you can download it direct. Config via Data Attributes One of the main goals of FooTable was to make it completely configurable via data attributes inside the table. <table class="footable"><thead><tr><th data-class="expand"> First Name </th><th> Last Name </th><th data-hide="phone,tablet"> Job Title </th><th data-hide="phone,tablet"> DOB </th><th data-hide="phone"> Status </th></tr></thead> So you can immediately see that certain columns will be hidden on phones and tablets. Breakpoints We work with the concepts of “breakpoints”, which are different device widths we care about. Usage Thanks

Related:  G.rid