Responsive

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 6, 2013 jQuery no responses # , , ,

Pop Easy – Lightweight Modals For jQuery

Pop Easy is a jQuery plugin for quickly creating completely customizable modals. Regarding the design, the default modal already has a good-looking interface and it can be changed/improved with CSS.

jQuery Modal Box Plugin - Pop Easy

There are options for customizing the animation used when the modal appears, its speed, the opacity, if it’ll be opened onLoad and more. Considering the size, the plugin is very useful. One thing seems to be missing for now is the built-in ability to load remote data (Ajax).

The plugin is lightweight (2kb) and has support for displaying any HTML element, including videos.

Requirements: jQuery
Compatibility: All Major Browsers
Website: http://thomasgrauer.com/popeasy/
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 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
May 16, 2013 HTML5 , JavaScript no responses # , , , , ,

AudioPlayer.js – HTML5 Audio Player With Touch Support

AudioPlayer.js is a jQuery plugin for quickly placing a HTML5-powered audio player to any web page. Users with modern browsers are increasing each day and making use of features like HTML5 audio sounds more and more logical.

jQuery HTML5 Audio Player

The player’s interface is chic (doesn’t use any images for that), has a responsive layout and touch support. It has the major controls (play/pause, volume and duration) and weights only 4kb.

May 16, 2013 PHP no responses # , , , , , ,

phpFreeChat – Open Source PHP Chat Script

phpFreeChat is a free and open source PHP chat application that doesn’t require any database to run but rather uses the filesystem for it. It can be used at the same time by any number of users, has a responsive layout that works in mobile too and has a modular authentication system which can be integrated into any app.

phpFreeChat

The application has 2 parts:

  • server: a PHP-powered engine that accepts REST commands and handles the chat logic
  • client: a jQuery plugin that communicates with the server and displays the chat interface

phpFreeChat is pretty simple in functionality yet support for multiple rooms, smileys and a “new message notification” will be added soon.

Requirements: PHP 5.3+
Compatibility: All Major Browsers

Website: http://www.phpfreechat.net/
Demo: http://www.phpfreechat.net/demo
Download: https://github.com/kerphi/phpfreechat

February 11, 2013 HTML5 , jQuery no responses # , , ,

iLightBox – Impressive jQuery Modal Box Plugin

Modal boxes are so functional in displaying any HTML content with a focused interface and there are many great ones around.

iLightBox is a fresh alternative to other jQuery lightbox plugins and there is a strong chance that, although it is a paid resource, it may become your favorite.

It can present images, videos (YouTube, Vimeo, HTML5 video), other HTML and there is an optional fullscreen mode.

Continue reading

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

December 3, 2012 CSS no responses # , ,

5+ Great Responsive CSS Frameworks

Using responsive CSS frameworks developers can speed up the delivery and improve the quality of responsive CSS code. Since responsive web design is in high demand a lot of frameworks have been created to streamline the delivery of high quality mobile-ready websites. These resources can make it easier for you to create responsive websites and in combination with a framework for HTML, like e.g. HTML5 Boilerplate you will have a really strong foundation.

In this article we present some of the most popular and useful responsive CSS frameworks. This can help you to get started and to keep focus on what is important, such as layout, usability and content. Please tell us your opinion, questions and thoughts in the comments, and help us by sharing this post to your friends.

Continue reading

Pin It on Pinterest