Category Archives: CSS

LESS CSS Framework – Rocks!

LESS FRAMEWORK

I’ve been using Blueprint CSS framework for about 4 years now and wanted to look into some different CSS Frameworks. Alas, I’ve found LESS Framework. It’s currently at version 4 and very solid. The idea is to build a website with multiple layouts efficiently; Desktop (992px), iPads (768px), large mobile phones (480px) and small (320px)


Overview:
Every layout in Less Framework is based on a single grid, composed of 68 px columns with 24 px gutters. The only measures that change from layout to layout are the amount of columns and the width of the outer margins.

992 default wide for desktops 10 columns
768 iPads and other tablets 8 columns
480 large mobiles, iPhone and iPod in landscape 5 columns
320 iPhone, iPod touches and other mobile 3 columns

992 px defined:

680 (68px column x 10)
264 (24px gutter x 11)
—-
944
48 (24px x 2 outer margins)
—-
992px total width

68 160 252 344 436 528 620 712 804 896


toots and talk:
http://mashable.com/2011/03/17/less-framework-guid/
http://www.sitepoint.com/responsive-web-design-with-html5-and-the-less-framework-3/
http://www.wildertweedale.com/blog/design-your-website-with-less-framework/
http://mrhaki.blogspot.com/2011/01/redesign-site-with-less-framework.html

good samples:
http://swabble.me/
http://jonikorpi.com/
http://larsjohnson.net/
http://www.angrycreative.se/tjanster/
http://arnaumarch.com/en/index.html
http://edenspiekermann.com/
http://demo.openconnection.it/lessframework/

javascript grid:
http://arnaumarch.com/en/less-grid.html


CSS Form Frameworks

so here i am making another form from scratch. and seeing how i have a love / hate (mostly love) relationship with blueprint css framework, i thought i’d build my next project using a CSS Form Framework. Here’s some CSS Form Frameworks I’ve found. I’ll let you know which one works best.

css form frameworks

http://sprawsm.com/uni-form/

http://code.google.com/p/formy-css-framework/

http://www.rmsjr.com/blog/web-design/rmsforms-a-flexible-tableless-css-forms-framework/

http://www.emblematiq.com/lab/niceforms/demo/