11 must-have plugins for extending Twitter Bootstrap

December 6, 2013 by Michal in Mobile, Outsource, Websites | Leave a comment

Twitter Bootstrap is one of our favourite framework for quick website prototyping. If you don’t know about Twitter Bootstrap, it’s simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions. Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world. This great tool contains base CSS, grid, responsive, general styling, UI components and javascript plugins that can speed up your development process.

Twitter Bootstrap comes with many javascript plugins too but some common javascript plugins are missing.

1. Jasny Bootstrap

Jasny Bootstrap is a direct fork of Twitter Bootstrap with a number of additional components. It features controls like input masks, file upload buttons, icons, additional form styles and more.

2. Bootstrap Select

Bootstrap favors native browser controls, which is the reason it doesn’t expose any customization options for them. However, in some projects it is useful to have customizable controls like select boxes, which is exactly what Bootstrap Select does. This plugin gives you a pretty and customizable select box which looks great in your page.

bootsatrp-select

3. Bootstrap Image Gallery

Bootstrap Image Gallery is an extension to blueimp Gallery, a touch-enabled, responsive and customizable image & video gallery.
It displays images and videos in the modal dialog of the Bootstrap framework, features swipe, mouse and keyboard navigation, transition effects, fullscreen support and on-demand content loading and can be extended to display additional content types.

4. Bootstrap Application Wizard

It is a good practice to split long forms into smaller, contextually similar chunks. This makes them a bit easier to handle. The Bootstrap Application Wizard does that for you and more.

5. Bootstrap Datetime Picker

Datepicker picker to field or to any other element.

6. Colorpicker for Bootstrap

An easy-to-use jQuery color picker for Twitter Bootstrap

7. Bootstrap Tour

Bootstro.js help you to show your users a guided tour of what is what on a page. Especially, for first-time users. Alternative for bootstro.js is Bootstrap Tour

8. Bootstrap Tag Autocomplete

This is a bootstrap plugin to autocomplete tags for contenteditable div elements. It works in the same way tagging people on Facebook, Twitter or Sandglaz works.

9. Bootstarp Calendar

A Full view calendar based on Twitter Bootstrap

10. Bootstarp WysiWig Eidtor

bootstrap-wysihtml5 is a javascript plugin that makes it easy to create simple, beautiful wysiwyg editors with the help of wysihtml5 and Twitter Bootstrap.

11. Font Awesome

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

Pocket

What is Responsive Web Design

November 4, 2013 by Michal in Mobile, Outsource, Websites | Leave a comment

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the client switches from their portable computer to ipad, iphone or any mobile device, the site might as well immediately switch and react to the client’s preferences.

Core Concepts
Three key technical features are the heart of responsive Web design:

Media queries and media query listeners
A flexible grid-based layout that uses relative sizing
Flexible images and media, through dynamic resizing or CSS

Responsive Web Design tools for Developers

1. Web Designer Tools

The Google Web Designer Toos and Webflow allows you to create websites visually – you do also get access to code of course. You can create engaging, interactive HTML5-based designs and motion graphics that can run on any device

2. Frontend frameworks

Foundation / Twitter Bootstrap makes it a simple feat to create a responsive Web design framework.

3. Responsive Design Testing

This tool has been built to help with testing your responsive websites while you design and build them.

4. FitText

FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

5. Responsive Slides

ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slider using elements inside a container.

6. Adaptive Images

Adaptive Images detects your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page’s embeded HTML images.

7. WordPress

When it comes to maintaining a website, nothing is quite as good as having a content management system in place to handle the heavy lifting for you. WordPress allows you to set up a system to add posts and pages to a website without having to go into the code at all. The templating system WordPress uses is easy to work around for developers and designers, and if you’re really lost there are plenty of basic templates to get you started.