Connect With WRD
feed via e-mail
feed via e-mail

Archive for the ‘Xhtml & Css’ Category

Sometimes, using breakpoints in @mediaqueries are not enough and we also declare them (for further customizations) in JavaScript as well.

Unison.js is a tiny script (<1kb minified, gzipped) that enables us to declare breakpoints only once and use them both in JavaScript and markup.

Unison.js

It requires a preprocessor like SASS, LESS or Stylus to function. And, behind the scenes, it uses the font-family property on the page’s head and title tags to store information.

There is also a debug feature which prints the breakpoints to see them easier.

There are great and popular CSS preprocessors like SASS and LESS.

Myth is an other one which allows us to write pure CSS without having to worry about browser support, or even slow spec approval.

Myth CSS

It simply functions like a CSS polyfill but we can still use variables and math functions.

The tool auto-adds browser-prefixes, runs on Nodejs and has a nice JavaScript API.

The loading indicators that are mostly used in Ajaxed interfaces are shifting from images to HTML-elements for max. flexibility.

SpinKit is a free pack of these loaders that are built with HTML and CSS.

There are currently 8 of them, all are good-looking and, although their CSS styles are presented in a link, the HTML structure can be found in the source.

CSS Loaders

Dynatable is a jQuery plugin which is capable of improving the usability of standard HTML tables very much.

Once initiated, the plugin goes through the rows and columns of the table, converted to an array of JSON objects and becomes ready to manipulate.

jQuery Dynatable

It can than be sorted, filtered, paginated or searched with the powerful API provided.

The plugin has functions to handle all the operations in a simple manner and it can also be used in other structured HTML elements like lists.

We probably all experience the easy-to-use style-guides of front-end frameworks like Bootstrap or Foundation.

Such guides help a lot when it comes to reaching the “how-to” quickly and they are a common source of information to make sure that every designer consumes the code in a similar way.

Kalei Styleguide

Kalei Styleguide is a project that can auto-generate such (Bootstrap-like) style-guides from the “live” CSS files so it is always up-to-date.

It works on the client-side and uses the comments in stylesheets for creating the titles + navigation.

Simply, it is a less-effort, almost instant generator that enables us to get organized with our stylesheets.

Loader/spinner icons are a part of almost any web project that involves ajax requests.

Lea Verou, an inspiring web designer has recently shared a simplistic solution to create a spinner with pure CSS.

CSS Spinner

There are already other solutions but this one is the cleanest of them all, uses only 2 elements and not much of CSS.

Everything is sized with ems, so it can be resized however preferred, it works on all modern browsers and has a fallback text for others.

There are always new ideas and approaches for anything related to web development and the same goes for responsive layouts.

ResponsiveComments is a client-side solution for conditional loading in responsive web design.

ResponsiveComments

It uses the data attributes for defining the breakpoints and the HTML comments for hiding the content to be displayed on a defined screen-size.

The approach comes with pros and cons where the biggest advantage is “being a quick solution, easier JavaScript manipulation” and the major disadvantage is the HTML-bloat.

There are popular CSS preprocessors like Less or Sass which are written with a custom syntax (and compiled to CSS with JavaScript or scripting languages).

AbsurdJS is another preprocessor which supports both HTML + CSS and written in JavaScript.

AbsurdJS

It is available for Nodejs + the browser and has the advantage of providing an already-popular syntax: JavaScript.

Just like other pre-processors, it can be only used to generate the CSS file or as JavaScript to make use of variables and any other dynamic features.

There are impressive frontend frameworks around like Bootstrap, Foundation or Maxmertkit.

Pattern Lab, although having similar features, is not one of them.

It is more a framework for front-end frameworks, a PHP-powered static site generator or your project’s pattern library and frontend style guide.

Pattern Lab

The tool comes with all the base styles for common scenarios like forms, lists, tables, responsive grid and more. But it doesn’t interfere the design at all and leaves it all to you.

Mustache is used as the template language for patterns and new patterns can be created with ease.

Layers CSS is a lightweight CSS framework that doesn’t emphasize any designs but handles the main structure.

It has support for responsive layouts with fluid grids and simple classes are used for dealing with them.

Layers CSS

There are styles for forms, tables, lists and more but no colors or rounded-corners, customization is totally up to you.

Layers also comes with handy “everyday-use-styles” for clear, floats or hiding.

Uptime Robot
feed-holder
FeedBurner
PSD2HTML.com