background preloader

CSS

Facebook Twitter

A Hand-Coded Designer CSS UI Kit. Web UI sets have been around for ages, but this takes things a step further. This free UI Kit is coded by hand using HTML5 and CSS3 so you can easily drop these elements into any project you're working on. This code is made to take advantage of modern browsers and to degrade gracefully in older versions of internet explorer, so no matter what your client or visitor is using they will be see an excellent design. Most major web elements are included -- buttons, tables, headings, etc -- and each of these is done in six color variations. Just pick the element you need, insert a few lines of CSS, and copy the HTML elements into your document. Full preview and instructions are below. Preview A screenshot of UI set is below, but to really see what this looks like you should take a look at the live preview.

How to Use This HTML5 UI kit uses very few tweaks to work in all browsers and you can get started in just three steps. Internet Explorer Compatibility Include the CSS Insert the HTML That’s it! LESS « The Dynamic Stylesheet language. Less Framework 4. I called Less Framework "a CSS grid system for designing adaptive websites". It was basically a fixed-width grid that adapted to a couple of then popular screen widths by shedding some of its columns.

It also had matching typographic presets to go with it, built with a modular scale based on the golden ratio. The resources it was originally published with are still available on GitHub. Contrary to how most CSS frameworks work, Less Framework simply provided a set of code comments and visual templates, instead of having predefined classes to control the layout with. /* Default Layout: 992px. Less Framework was popular in the early days of responsive design. Eventually, I moved on from fixed-width grid systems and worked on a fully fluid-width one, in the form of Golden Grid System. Less Framework's popularity was helped by the following contributions and the lovely people behind them (dead links crossed off): Sprite Cow - Generate CSS for sprite sheets. Formalize CSS - Teach your forms some manners!

CSS-Tricks.