Frameworks | Wordpress Leaks

Bootstrap Toolbox – Tools, Utilities, Generators and Templates

May 1st, 2013 Comments off

Ever since it was initially released, Bootstrap has taken the internet by a storm. It keeps growing in popularity with each passing day — and why shouldn’t it be popular? After all, where else do you find a responsive framework with such an extensive library of prestyled components, and a community that offers many, many extras and addons?

In this collection, we have put together some of the best Bootstrap resources. Nay! We have tried to create the ultimate Bootstrap resource page: utilities, generators, templates… and much more! So go ahead, check ‘em out, and have fun creating miracles with Bootstrap!

You may also like: Twitter Bootstrap GUI & Wireframe Toolbox

Boostrap Tools & Utilities

Bootstrap wysihtml5

Bootstrap-wysihtml5 is a Javascript plugin that makes it easy to create simple, beautiful wysiwyg editors.

Bootstrap wysihtml5 →

Bootpag – Dynamic Pagination

The Bootpag jQuery plugin helps you create dynamic pagination with Bootstrap (or any other HTML page for that matter).

Bootpag →

Bootstrap Modal

Bootstrap Modal extends Bootstrap’s native modals with additional functionality by introducing a ModalManager class that operates behind the scenes to handle multiple modals by listening on their events.

Bootstrap Modal →

Bootbox.js

Bootbox.js is a small JS library that allows you to create programmatic dialog boxes using Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers.

Bootbox.js →

Bootstrap Prompts

Bootstrap-Prompts is an implementation to replace the alert(), prompt(), confirm() notifications on the browser when using Bootstrap with Modal information.

Bootstrap Prompts →

Pines Notify

Pines Notify is a JavaScript notification plugin designed to provide an unparalleled level of flexibility, while still being very easy to implement and use.

Pines Notify →

prettyCheckable

The prettyCheckable jQuery Plugin plugin replaces the default checkboxes and radio inputs of Bootstrap for better and more attractive ones.

prettyCheckable →

Bootstrap Tags

Bootstrap Tags is a lightweight jQuery plugin built to extend the Bootstrap UI to include tagging. It features: Autosuggest, Popovers, Exclusions, Filters and Placeholder Prompts.

Bootstrap Tags →

jQuery File Upload

This is a jQuery File Upload widget that supports multiple file selection, drag & dropt, progress bars and preview images. it also supports cross-domain, chunked and re-sumable file uploads and client-side image resizing.

jQuery File Upload →

jQuery Simple Color Picker

This jQuery Color Picker plugin is lightweight, unobtrusive and easy-to-use. It integrates seamlessly with Bootstrap (it will also works without).

jQuery Simple Color Picker →

Datepicker for Bootstrap

This plugin will add a clean and lightweight datepicker to a field or to any other element.

Datepicker →

Multi-Color Progressbar Component

The Multi-Color Progressbar component creates a progressbar which consists of three colors or zones: Green (bar-success), Orange (bar-warning) and Red (bar-danger).

Multi-Color Progressbar Component →

Bootstrap Video Player

The Bootstrap Video Player is an easy to customize HTML5 video player plugin for jQuery based on Bootstrap’s UI. Its features include: Multiple video support, pause/play button, progress bar, timer, show & set volume (1/10), full-screen, autoplay and auto hide control bar.

Bootstrap Video Player →

Hover Dropdown

This is an unofficial Bootstrap plugin that enables Bootstrap dropdowns to activate on hover.

Hover Dropdown →

jQuery Form Validation with Styles

This jQuery Validation plugin is a fantastic tool for giving users immediate feedback while completing a web form in a Boostrap style.

jQuery Form Validation with Styles →

Bootstrap Image Gallery

Bootstrap Image Gallery is an extension to the Modal dialog of Bootstrap, to ease navigation between a set of gallery images. It features mouse and keyboard navigation, transition effects, fullscreen mode and slideshow functionalities.

Bootstrap Image Gallery →

Bootstrap Lightbox

Based on the modal dialog, Bootstrap Lightbox is a plugin that adds a lightbox with ease to Bootstrap.

Bootstrap Lightbox →

Bootstrap Arrows jQuery Plugin

A simple jQuery plugin to include the use of arrows at any angle in your Bootstrap UI designs.

Bootstrap Arrows jQuery Plugin →

Tocify – A Bootstrap jQuery Table of Contents Plugin

Tocify is a jQuery plugin that dynamically generates a table of contents. It can be optionally styled with Bootstrap or jQueryUI Themeroller, and optionally animated with jQuery show/hide effects. It also offers support for smooth scrolling, scroll highlighting, scroll page extending, and forward and back button support.

Tocify →

CSS3 Microsoft Modern Buttons

Designed to work with Bootstrap, these CSS3 Microsoft/Metro buttons are a lightweight and easy-to-use CSS/JS library that uses CSS3 styles for rich button design.

CSS3 Microsoft Modern Buttons →

tablecloth.js

tablecloth.js, built off Bootstrap, is a jQuery plugin that helps you easily style HTML tables.

tablecloth.js →

Fuel UX

Fuel UX extends Bootstrap with additional lightweight JavaScript controls, including: Checkbox, Combobox, Datagrid, Pillbox, Radio Elements, Search, Select, Tree and Wizard.

Fuel UX →

X-Editable

X-Editable allows you to create editable elements on your page. It can be used with either Bootstrap, jQuery UI or jQuery and includes both popup and inline modes.

X-Editable →

Sublime Text 2 Bootstrap Snippets

A useful selection of categorized Bootstrap code snippets for Sublime Text.

Sublime Text 2 Bootstrap Snippets →

Mobile-First Bootstrap Grid

The Bootstrap grid comes with desktop styles by default and uses media queries to change the layout for mobile and large screens. This version starts with mobile styles first and uses media queries up to larger screens.

Mobile-First Bootstrap Grid →

jQuery UI Bootstrap

jQuery UI Bootstrap offers a jQuery UI-compatible theme inspired by Bootstrap’s design. It also provides a version of the Bootstrap CSS with a few sections commented out which allows the theme to work along-side it.

jQuery UI Bootstrap →

MooTools for Bootstrap

The Javascript included in Bootstrap isn’t very useful if you prefer to use MooTools. This library offers all the tools necessary to get the same functionality released by Twitter but using custom plugins that work with MooTools.

MooTools for Bootstrap →

Sass Bootstrap

Bootstrap uses LESS, but if you prefer your CSS flavour to be SASS, here it is.

Sass Bootstrap →

Grid Displayer Bookmarklet for Bootstrap

This bookmarklet makes in-browser web design that little bit easier by displaying Bootstrap’s grid (it will also work with Foundation).

Grid Displayer Bookmarklet for Bootstrap →

Bootstrap-Ready Font Custom

With Font Custom you can generate custom icon webfonts from the comfort of the command line. Font Custom creates styles using Bootstrap’s .icon-your-icon-name} naming convention. Just include fontcustom.css and you’re good to go.

Bootstrap-Ready Font Custom →

WordPress Bootstrap CSS

This WP plugin will link the latest Bootstrap CSS and JS to all pages, regardless of the WordPress theme. It comes with WordPress [SHORTCODES] to allow you to easily add elements to your site.

WordPress Bootstrap CSS →

Bootstrap Generators & Builders

Lavish – Generate your own Bootstrap Color Scheme

Lavish is Rails app that will generate a Bootstrap color scheme from any image.

Lavish →

Bootstrap Templates, Themes & Frameworks

BootMetro

Built on top of Bootstrap and inspired by the Metro UI CSS by Sergey Pimenov, BootMetro is a simple and flexible HTML/CSS/JS for web designers/developers that wants to use the Windows 8 Metro style.

BootMetro →

Flat UI Free

Built on top of Bootstrap and inspired by the Metro UI CSS by Sergey Pimenov, BootMetro is a simple and flexible HTML/CSS/JS for web designers/developers that wants to use the Windows 8 Metro style.

Flat UI Free →

Roots WordPress Theme

Roots is a starting WordPress theme made for developers that’s based on HTML5 Boilerplate and Bootstrap.

Roots WordPress Theme →

Initializr – An HTML5 Templates Generator

Initializr is an HTML5 template generator (with the option of Bootstrap) to help you get started with a new project based on the HTML5 Boilerplate.

Initializr – An HTML5 Templates Generator →

jQuery Mobile Bootstrap – A jQuery Mobile Theme Based on Bootstrap

jQuery Mobile Bootstrap →

Fbootstrapp – Facebook iframe AppToolkit

Fbootstrapp is a toolkit designed to kickstart development of facebook iframe apps in both relevant sizes. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more, styled in the typical facebook look and feel.

Fbootstrapp →

Bootswatch – A Collection of Free Themes for Bootstrap

Bootswatch is a collection of 12 free themes for Bootstrap. All you have to do is download the bootstrap.min.css file associated with each theme and replace it with Bootstrap’s stylesheet.

Bootswatch →

Bootstrap for Github Pages

This is a Github pages theme based on Bootstrap for your Github projects.

Bootstrap for Github Pages →

Font Awesome 3.0 – The Iconic Font for Bootstrap

Font Awesome →

Elusive Icons – 271 Vector Icons for Bootstrap

Elusive Icons →

…and finally…

Bootsnipp.com

Bootsnipp is a super-useful repository of snippets, resources and tips for the Bootstrap framework.

Bootsnipp.com →

Streamlining The Front-End Development Process With The Gumby Framework

April 9th, 2013 Comments off

Last month Digital Surgeons launched the latest version of their responsive front-end framework, Gumby. Gumby 2 is a complete re-imagination of its version 1 counterpart. It adds a ton of new features and has been rewritten in Sass to allow for easier customization and maintainability. Many of it’s new features are incredibly helpful in streamlining the front-end development process.

The original version of Gumby was born out of the frustrations that it’s developers encountered while attempting to migrate to a responsive web design process. Gumby 2 is no different; it solves quite a few problems in very elegant ways that make building websites with it a joy. In addition to the obvious benefits of being built with Sass & Compass, Gumby 2 also has many other features such as using variables, and an extensive library of useful mixins. Gumby 2 was created to function as a pain reliever, an aspirin of sorts, for front-end developers.

Google WebFonts

Gumby 2 integrates with Google WebFonts which makes embedding custom fonts into your application prototypes and websites a cinch. You don’t have to worry about syntax changes, licensing, converting, hosting, serving, or even much in the way of the cross-browser compatibility of your custom fonts because Google handles all of that.

Using custom web fonts on your web projects is super easy; no more fiddling with Font Squirrel or any other form of font conversion — its as simple as dropping in a link, or using their customize tool to create a custom build. It’s an amazing time-saver.

Customizable UI Kit

Gumby 2 is a complete front-end framework, meaning that it includes a UI Kit with which you can use predefined classes to build out various UI elements rapidly. You can use the UI kit to build out buttons, forms, tabs, and navigation elements very quickly. This means that you can rapidly prototype your application using default UI elements. Gumby’s UI Kit offers a trendy, flat-designed UI as well as a gradated one.

As the developer, you can pick the style which best suits your application, which is something that other frameworks do not currently offer. Other things that you can do quickly with Gumby’s JavaScript library are things like fixed positions with offsets, skip links, drawers, and many other custom elements thanks to something called Toggles & Switches.

Symbol Fonts

One of the newest trends in web performance optimization is the “Symbol Font” or “Icon Font”. What symbol fonts allow you to do is implement all of your iconography in a lightweight, resolution independent (scalable) manner — embedding a font and instantiating them by referencing the private use area of Unicode they are mapped to. Gone are the days of giant sprite-sheets containing all of your application’s iconography. Symbol fonts are faster and more efficient.

Gumby 2 includes the open symbol font, Entypo by Daniel Bruce. Entypo has over 250 beautiful pictograms, suitable for any application. They’re all built into Gumby, which does all of the hard work for you, using any one of them is as simple as adding the appropriate class where you want the icon to appear.

Responsive Images

As more and more users flock to their mobile devices, and as more and more high density displays appear on those mobile devices, the crappier the web looks. Ok, I’m exaggerating there a bit, but if you tell me you’ve never visited a website on your phone and seen a pixelated or blurry image, you’re full of barnacles (yes, that was a Sponge-Bob reference. You’re welcome.).

Responsive frameworks make adjusting your layout to look pretty on mobile devices pretty easy, but what they don’t typically do is care about the rest of your site. The iconography. The photos. The rest is up to you. Gumby changes that by including a really intuitive way of loading retina versions of images on the fly, only when the device-pixel-ratio of the visiting device demands it. All it takes is adding the custom “retina” or standards compliant “data-retina” attribute to an image tag and Gumby’s Javascript will look for, and load the @2x version of that image as long as it lives at the same path as the non-retina version. Pretty cool, huh?

Toggles & Switches

Toggles and switches are so powerful that they really deserve their own blog article. Modern developers often find that most JavaScript that they are implementing or writing is redundant. Most of the time it is a matter of turning an element “on” and “off” when a user clicked or hovered over an element. Basically, most basic interfaces can be constructed by simply adding and removing “active” classes when a user performs an action. Toggles and Switches do just that. Don’t take my use of the word “basic” at face value either; once you grasp the concept, you can create some surprisingly complex interactive elements with them quite easily.

In my opinion, Toggles and Switches are the most valuable, and most compelling reason to use Gumby over any other framework. They are amazing. If you want to talk about streamlining the front-end development process, spend a week exploring the power of toggles and switches and get back to us .

Wrapping it all up

When it comes to choosing a front-end framework, or starting place for your design project, there’s so many things to consider that it can often be overwhelming. Unlike most front-end frameworks that cater to a more “dev” friendly workflow, Gumby was created to make the transition from design to code as effortless as possible. Gumby 2 is packed with features that are big time-savers for front-end developers. It has all of the makings of a great asset whose power becomes apparent once you unleash it into your front-end development workflow.

Grab a copy and start building on the Gumby Framework

Original from: http://feedproxy.google.com/~r/speckboy-design-magazine/~3/RLBCdR2lr9A/

Categories: Web development Tags: frameworks, total, total-cache, web design

Developing WordPress Themes Using Responsive Frameworks

March 16th, 2012 Comments off

Responsive design is slowly but surely becoming an expected standard for web developers. This tutorial will show you how to add a responsive framework to your next WordPress theme.

What Is Responsive Design?

It used to be you only had to worry about website consistency across multiple browsers, but now we have to look at the bigger picture – consistency across multiple devices. The computer used to be our only gateway to the Internet, but now we jump online from our phones, TVs, tablets and who knows what else will come down the pipe. Having your website appropriately render and perform on any device should be a top priority this year.

Responsive design is all about making things fluid and adjusting according to screen size. Although WordPress doesn’t always play nice with responsive design methods, there are ways it can be achieved. How responsive you decide to make your website is really about how much time you want to spend doing it.

Responsive Frameworks

There are several responsive frameworks out there to choose from. You might want to spend some time investigating each one to determine which has the included features your project might require. If you aren’t sure where to start, here are a few to consider:

Bootstrap

Bootstrap from Twitter is built on a responsive 12 column grid. It has included fixed- and fluid-width layouts based on that system. It also comes with support for optional JavaScript plug-ins such as an image carousel, Typeahead, togglable tabs, and many more.

Less Framework

Less Framework is based on 4 layouts and 3 sets of typographic presets. Less Framework uses a default layout as a starting point and then uses CSS3 media queries to code ‘child layouts’.

Foundation

Foundation is a grid system based on 12-columns that do not have a fixed width; they can vary based on the resolution of the screen or size of the window. Foundation comes pre-packaged with buttons and built in form styles, alerts, and more.

YAML

YAML is a multi-column layout based on a grid system with percentage widths. It comes with several built in features and supports several jQuery plugins such as Accessible Tabs and SyncHeight.

This list of frameworks is hardly complete, but for the sake of this tutorial, I’m going to show you how to incorporate Foundation into your next WordPress theme.

Step 1 Downloading and Applying the Framework

To get started, go download Foundation and add the files to your css and js folders in your theme’s directory. The easiest way to add the required files to your theme would be to use wp_enqueue_script and wp_enqueue_style.

For this tutorial I’m going to show you what you place in your functions.php file to make Foundation work right off the bat, but for more details on adding files this way, check out the tutorial on how to include JavaScript and CSS in your theme.

To add the needed JavaScript for Foundation to work properly in your theme, you need to create a function that calls the wp_enqueue_script to serve them up.

function responsive_scripts_basic()

	//register scripts for our theme
	wp_register_script('foundation-mod', get_template_directory_uri() . '/js/modernizr.foundation.js', array( 'jquery' ), true );
	wp_register_script('foundation-main', get_template_directory_uri() . '/js/foundation.js', true );
	wp_register_script('foundation-app', get_template_directory_uri() . '/js/app.js', true );
	wp_enqueue_script( 'foundation-mod' );
	wp_enqueue_script( 'foundation-main' );
	wp_enqueue_script( 'foundation-app' );

add_action( 'wp_enqueue_scripts', 'responsive_scripts_basic', 5 );

Next, add the Foundation stylesheets to make the grid flexible. Paste this function after the one you just created.

function responsive_styles()

	//register styles for our theme
	wp_register_style( 'foundation-style', get_template_directory_uri() . '/css/foundation.css', array(), 'all' );
	wp_register_style( 'foundation-appstyle', get_template_directory_uri() . '/css/app.css', array(), 'all');
	wp_enqueue_style( 'foundation-style' );
	wp_enqueue_style( 'foundation-appstyle' );

add_action( 'wp_enqueue_scripts', 'responsive_styles' );

Once saved, go back and check your source code to make sure your files were added correctly. It should look something like this:

Step 2 Add IE Only Conditions

Everyone loves to go that extra mile to make things work in Internet Explorer right? To make sure your Foundation framework stays responsive in Internet Explorer, you need to add a few conditional statements. These should go in your header.php file before the closing head tag.

Step 3 Working With the Framework

Now that your theme has Foundation setup, to make use of all its responsive features you need to design using the Foundation grid system. Like other responsive frameworks, it’s a system made up of 12 columns. Other included features are pre-set button styles, tabs, tables and much more. Check out the Foundation documentation to view all bells and whistles and instructions on how to work with the grid.

Going With a Pre-Packaged Theme

There are plenty of free and premium WordPress themes available that make use of responsive design. If you would rather start with something out of the box, you can try out these themes:

WordPress Bootstrap, By 320Press

WordPress Bootstrap is a theme developed on Twitter’s Bootstrap v.2.0.1. It’s fully responsive with four different page templates to choose from, shortcodes, and multiple sidebar options. Once installed, you can check out bootswatch.com to download different color versions of the theme.

iTheme2

Based on the Themify framework, iTheme2 uses media queries to target different displays, comes with a customizable feature slider, a social media widget, two different theme skins and you can have up to four footer widgets.

Responsive Twenty Ten

The Responsive Twenty Ten theme supports flexible images, margins, and mobile images. It was created as a child theme for the included Twenty Ten theme.

Good Minimal (Premium)

Good Minimal is a clean, minimalist responsive layout that adapts to a multitude of displays and devices. Good Minimal comes with two different styles, supports unlimited custom sidebars, shortcodes, multiple drop down menus, and several other features.

Modulo (Premium)

Modulo is a responsive, fluid layout, supporting google fonts, shortcodes, multiple sliders, portfolio page templates and color customization. Modulo also comes with 5 custom widgets, including one for recent posts with thumbnail support.

Conclusion

Responsive design is continuing to grow in popularity and knowing how to utilize it within your future theme construction will be crucial for success. Whether you are adding a framework to your theme or using a pre-built theme supporting responsive design, your clients are going to expect multiple device support as a basic service.

Are themes you create responsive? Do you use a responsive framework we haven’t mentioned? Tell us all about it in the comments below!

Original from: http://wp.tutsplus.com/tutorials/theme-development/developing-wordpress-themes-using-responsive-frameworks/

Categories: Web development, Wordpress Tags: designer, facebook, frameworks, internet, news, security, tutorial, tutorials

Archive