Xhtml & Css

June 25, 2013 Design , Mobile no responses # , , , ,

Cardinal – Small Mobile-First CSS Framework

Cardinal is a small and mobile-first CSS framework that positions itself as a starter-kit, provides the basics and lets the users customize/develop the rest.

Cardinal CSS

Continue reading

June 14, 2013 CSS , CSS3 , Design no responses # , , ,

Magic – CSS Animations With Impressive Effects

We see lots of impressive CSS3 demos regularly: flipping, rotating or sliding items and more. Magic is a stylesheet that includes many of these CSS effects (also mentioned that “more will be added”).

Magic CSS Animations

The effects are collected under few categories (magic, perspective, rotate, bling, static, slide) and all of the effects are pretty attractive. Each of them has their own classes and the easiest way to use them is by adding/removing these classes to the targeted elements via JavaScript.

Requirements: No Requirements
Compatibility: All Modern Browsers

Website: http://www.minimamente.com/magic-css3-animations/
Download: https://github.com/miniMAC/magic

June 11, 2013 Design , JavaScript no responses # , , ,

Hitch – Expressive Power To CSS With JavaScript

Hitch is a lightweight JavaScript library that adds expressive capabilities to CSS files. It has some of the powers of CSS preprocessors like prefixing or variables but also some other stuff.

The library comes with multiple ready-to-use selectors like “anyof, allof, has..” and allows us to define any new ones (called hitches).

Hitch

These hitches are simple JavaScript functions and can be written easily (once the library has more users, there will probably be many hitches around). Hitch is very well-documented, has examples and it works on all modern browsers..

Compatibility: All Modern Browsers
Website: http://hitchjs.com/
May 29, 2013 CSS3 , Design no responses # , , ,

Pure – A CSS Framework By Yahoo!

Pure is a fresh one that is created by Yahoo!. It uses Normalize.CSS and doesn’t use any JavaScript but only HTML-CSS. It is so good to see new and quality frameworks are being introduced regularly by the web design/development community. 

Pure by Yahoo!

The framework is built with responsive layouts in mind and has styles for typography, grids, forms, buttons, tables and navigation.

Markup used is very simple and the whole framework is pretty lightweight (5.7KB minified and gzipped).

Also, it is modular and styles for each module can be used separately.

Requirements: Normalize.CSS
Compatibility: All Major Browsers

Website: http://purecss.io/
Download: https://github.com/yui/pure/

May 21, 2013 CSS , Design no responses # , , ,

Label.css – CSS Rules For Labeling Any Element

Label.css is a simple-yet-useful set of CSS rules that provide a global label usage.

Label.css

Each label can be attached to any element, positioned how we want (right, left, top, bottom, inside, outside) and can be animated with float or fade effects. It works by adding pre-defined classes to the elements and the content of the labels are stored inside the data-label attributes of each element.

Compatibility: All Major Browsers

Website: http://usablica.github.io/label.css/
Download: https://github.com/usablica/label.css

May 20, 2013 Design , JavaScript no responses # , , , ,

Skel.js – A Framework For Building Responsive Layouts

Skel.js is a tiny JavaScript framework (~6kb gzipped and minified) that simplifies building responsive layouts very much. It has a JavaScript-powered and 12-column grid system that can handle any type of complex layouts + has easy-to-understand rules.

Managing breakpoints is just about adding the width ranges in the options of the skel.js‘ main function.

Skel.js

There is a plugin system for extending it further (a UI plugin is mentioned to be released soon).

Also, many helpful options exist like the ability to applying reset.css or normalize.css and defining the box model instantly.

Requirements: No Requirements
Compatibility: All Major Browsers
February 10, 2013 CSS , Design no responses # ,

Roole – A JavaScript-Powered CSS Preprocessor

We all experience how CSS preprocessors like SASS or LESS ease working on projects with complex styles.

Roole is another alternative that is inspired from SASS, LESS + Stylus and only requires JavaScript to work.

Roole

It has vendor-prefixing built-in so there is no need to use them, supports variables + conditional logic and allows us to define the format we want to code CSS.

Roole can work both on the client or server-side (nodejs) and it is documented well.

January 14, 2013 CSS3 , Design no responses # , , , ,

Profound Grid: A Grid System With SCSS

Profound Grid is a fresh grid system for creating responsive fixed and fluid layouts.

The grid system uses semantic markup and renders just the same in all browsers (it is using negative margins to calculate columns).

Profound Grid

It is built with SCSS, has support for nested grids and rules for pulling/pushing columns.

There are various examples provided in Profound Grid’s website and a documentation helps learning it (which is pretty straightforward).

Website: http://www.profoundgrid.com/
Download: https://github.com/artofrawr/profoundgrid/
Compatibility: All Major Browsers

December 24, 2012 CSS3 , Design , HTML5 no responses # , ,

Centurion – A Responsive CSS Framework For Rapid Prototyping

Centurion is a CSS framework, built using SASS and CSS3 media queries, for creating (mostly prototype) layouts that behave good on all devices.

It includes a 960px grid (that scales down to 320px), can handle image scaling and has a navigation with desktop and mobile versions.

There are also styles for CSS-only buttons and tables. The framework is easy to learn and customizable (thanks to SASS).

Centurion

Pin It on Pinterest