Design

June 12, 2013 Design , Inspiration no responses # , , , ,

Picksum Ipsum – Dummy Text From Hollywood

Picksum Ipsum is another dummy text generator that is pretty original and fun. It has a database of lines from 4 В Hollywood legends: Client Eastwood, Morgan Freeman, Michael Caine and Jim Carrey.

Picksum Ipsum

We can choose the number of paragraphs and if tags are needed or not. Also, a “rumble” option exists for creating a mixed filler text from 2 of the selected artists.

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/
June 11, 2013 Fonts no responses # , , ,

5+ Must-have Fresh Free Fonts

Selecting the correct type for a project is always an important step in the design process. This is why you need to have as many fonts as you can. Here are some free fonts to keep your library filled with great options so you can keep your designs fresh and unique.

Continue reading

June 11, 2013 Design , Icons no responses # ,

Cikonss – Pure CSS & Responsive Icon Set

Cikonss is a one more step further in icon usage as it uses no fonts but the items are created with pure CSS. With icon-fonts, it became clear that, soon, we’ll no longer be using any images for icons.

Currently, there are 40+ items in the set, they are responsive-layouts-friendly and work cross-browser (no CSS3 properties are used).

Cikonss

The set is currently not big enough to be used in web applications but if you need only few of them, than why not.

And, if the set keeps growing, it can become a valuable resource for the web design community.

June 5, 2013 Responsive no responses # , , , , , ,

Converse.js – Open Source – Facebook-Like Chat Client

Converse.js is an open source chat application that can connect to any XMPP/Jabber server (like Google Talk, Skype, etc.).

Converse.js

It sits in the footer of web pages just like Facebook-chat and has support for one-to-one or multi-user conversations. Contact requests can be accepted/declined, statuses can be set (online, away..) and there are “typing” notifications to inform the “listening” users.

With a little custom coding, single-site login can be accomplished (users logged in to the site will automatically be logged in to the chat). Also, Converse.js doesn’t use any server-side code and it is totally built with JavaScript.

Requirements: No Requirements

Website: http://conversejs.org/
Download: https://github.com/jcbrand/converse.js

June 4, 2013 Design , Icons no responses # , ,

Forecast Font – A Web-Font For Weather Icons

Forecast Font is a lovely web-font for using any weather-related icons on our web pages as fonts. The font is pretty awesome as it consists of items that are multi-layered and this provides a huge margin for customization.

It was created to enable you to have more control over the look and feel of the icons, rather than only having a single colour or style. Flat, single-colour icons might be what your after and thats cool but with Forecast font you have all the flexibility to colour, style or even animate various parts of the icons. Create something a little different from the norm. Even better they are fully scalable for use on all devices, no need to create cumbersome image sprites or use multiple images to create your weather icons.

Forecast Font

They can be mono or multi-colored, can be resized completely and very easy-to-use.

Website: http://forecastfont.iconvau.lt/

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 28, 2013 Design no responses # , , ,

Iconvault – Web-Based Icon Font Generator

Iconvault allows adding any number of images by simply drag ‘n’ dropping them to the uploader and creates the necessary files (font and CSS rules) automatically in seconds.

Icon fonts were kinda experimental even few years ago but, today, they are becoming the standard to use icons on websites. There are several tools to generate icon fonts from standard images and here is a new, easy-to-use one.

Iconvault

It takes the filename and adds a “icon-” prefix to it for the CSS file. Also, there is a growing library of custom icons by Iconvault.

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
1 2 3 4 5 7
Stay In Touch