eSolutionsG: Bootstrap

Showing posts with label Bootstrap. Show all posts

The following is a list of useful resources when working with Bootstrap. We’ve also included a few tools that will help you create themes & templates.
We will continue to add resources to this page so make sure to bookmark and check back. If you have a suggestion, please tweet us.

Framework

getBootstrap: The official website for the Bootstrap framework.
Bootstrap SASS: Sass-powered version of Bootstrap, ready to drop right into your Sass powered applications.
Less: Extends CSS with dynamic behavior such as variables, mixins, operations and functions.

Themes & Templates

BootstrapBay: Premium Bootstrap themes and templates.
BootstrapZero: Free Bootstrap themes and templates.
BootBundle: Bootstrap themes, snippets & components bundle
StartBootstrap: Free Bootstrap themes and templates.
Creative Tim: Themes and freebies built for bootstrap framework.

Icon Fonts

Bootstrap Icon Fonts: 7 Essential Resources

Code

Bootsnipp: Design elements, playground and code snippets.

JavaScript Extensions

Bootbox.js: JavaScript library which 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.
Bootstrap Color Palette: A basic color palette for Bootstrap.
Bootstrap Context Menu: A context menu extension of Bootstrap made for everyone’s convenience.
Bootstrap Date Range Picker: Date range picker component for Bootstrap.
Bootstrap File Input: This plugin enhances the HTML 5 file input for Bootstrap 3.x into an advanced widget with file preview for images and text, multiple selection, and more.
Bootstrap FileStyle: A quick and simple plugin to help style your form’s file upload inputs.
Bootstrap Form Helpers: A collection of jQuery plugins to help you build better forms. The plugins can be used individually but some of them work together like Countries and States.
Bootstrap Growl: Pretty simple jQuery plugin that turns standard Bootstrap alerts into “Growl-like” notifications.
Bootstrap Link Preview: A facebook-like link preview js library using Twitter Bootstrap styling components.
Bootstrap Markdown: Designed to be easily integrated with your bootstrap project. It exposes useful API that allow you to fully hook-in into the plugin
Bootstrap MaxLength: A visual feedback indicator for the maxlength attribute.
Bootstrap Modal: Responsive, Stackable, AJAX and more.
Bootstrap Multiselect: Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user interface for using select inputs with the multiple attribute present. Instead of a select a bootstrap button will be shown as dropdown menu containing the single options as checkboxes.
Bootstrap Sidebar: A responsive sidebar plugin for bootstrap 3.
Bootstrap Star Rating: A simple yet powerful JQuery star rating plugin for Bootstrap which supports advanced features like fractional star fill and RTL input support.
Bootstrap Switch: Turn checkboxes and radio buttons in toggle switches.
Bootstrap Tag Autocomplete: A bootstrap plugin to autocomplete tags for content editable div elements. It works in the same way tagging people on Facebook, Twitter or Sandglaz works. By default, it triggers autocompletion as you type @.
Bootstrap Timepicker: Easily select a time for a text input using your mouse or keyboards arrow keys.
Bootstrap Tokenfield: Advanced tagging/tokenizing plugin for jQuery and Bootstrap with a focus on keyboard and copy-paste support.
Bootstrap Tree View: A simple and elegant solution to displaying hierarchical tree structures (i.e. a Tree View) while levering the best that Bootstrap has to offer.
Bootstro.js: Show your users a guided tour of what is what on a page. Especially, for first-time users.
Chosen: A jQuery plugin that makes long, unwieldy select boxes much more user-friendly.
Colorpicker for Bootstrap: Add color picker to field or to any other element.
Flippant.js: A mini js+css library for flipping things over.
Fuel UX: Extends Twitter Bootstrap with additional lightweight JavaScript controls.
jQuery Data List: Creates a letter based navigation for your lists.
jQuery File Upload: File Upload widget with multiple file selection, drag&drop support, progress bars, validation and preview images, audio and video for jQuery.
jQuery GridManager: A way of building rows and grids with built in editable regions
jQuery MiniColors: A tiny color picker built on jQuery.
Knockout Bootstrap: Create rich two way interactions with Bootstrap and Knockout bindings.
rpage: Highly responsive pagination for Bootstrap.
Select2: A jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.
Strength Meter: A jQuery plugin that converts a password input into an advanced widget with strength validation meter and toggle mask to show/hide the password. The password strength is validated as you type.
Summernote: Super Simple WYSIWYG Editor on Bootstrap.
Tablecloth.js: A jQuery plugin that helps you easily style HTML tables along with some simple customizations.
Tag Manger: A jQuery plugin to create tag input fields, which works nicely with Typeahead and Bootstrap.
Validate: Form validation for Bootstrap/jQuery/Ajax/PHP.
Velocity.js: Accelerated JavaScript animation.
Yamm Megamenu: This is another megamenu for Bootstrap. It uses the standard navbar markup and the fluid grid system classes from Bootstrap.

Color Design

7 Color Scheme Generators to Help Pick the Perfect Palette

Colour Lovers: A creative community where people from around the world create and share colors, palettes and patterns, discuss the latest trends and explore colorful articles.

UI Design

BootMetro: Simple and flexible web framework to create elegant and modern web applications with the same look & feel of Windows 8.
Bootstrap Button Builder: Generate your bootstrap buttons quickly with this button generator.
Bootstrap Dropdown Menus Enhancement: Enhancing functionality of dropdown menus.
Bootstrap Select: A custom select for Bootstrap using button dropdown.
Bootswatchr: A visual tool for creating a custom Bootstrap theme from the ground up.

a visual tool for creating a custom Bootstrap theme from the ground up. – See more at: http://bootswatchr.com/#sthash.y0ASfdK7.dpuf

Paintstrap: Generate Bootstrap color schemes using color palettes from Adobe kuler and COLOURlovers.
Social Buttons for Bootstrap: Made in pure CSS based on Bootstrap and Font Awesome.

UI Editors/Builders

Bootply: Bootstrap editor and builder.
BootTheme: Theme generator that enables you to drag and drop UI to create desired
Divshot: Simple and intuitive Bootstrap Builder / Fully featured static web hosting.
Jetstrap: Interface-building tool for Bootstrap 3.
Kickstrap: A boilerplate of Bootstrap, JSPM, Angular.js and Roots that can copy itself into any directory you choose.
Pingendo: Visual desktop application that helps you to prototype responsive web pages based on the Bootstrap framework.

UI Kits

12 Bootstrap UI Kits That Will Improve Your Workflow

Showcases

Built With Bootstrap: A showcase of sites and apps built with Bootstrap.
Love Bootstrap: A hand-picked showcase gallery of the very best Bootstrap sites from around the web.
Bootstrap Expo: Beautiful and inspiring uses of Bootstrap, curated by @mdo.

Web Fonts

Top 20 Google Web Fonts and How to Use Them

Stock Photography

12 Amazing Sites With Breathtaking Free Stock Photos.

Other

BootstrapCDN: The recommended CDN for Bootstrap, Font Awesome, and Bootswatch.

Bootstrap has already made responsive web development a lot easier. But what if you didn’t have to write out all that code by hand? What if you could select the Bootstrap components you want to work with, and drag them onto your canvas?
Well, that’s where a Bootstrap editor comes in.
Bootstrap editors and builders make it easier to prototype, test and build responsive websites. Although each editor is different, they all feature some form of drag and drop functionality using Bootstrap’s huge library of components.
In this post, we’ve compiled a list of some of the best Bootstrap editors and builders currently on the market. Each editor has its own unique feature set and pricing structure (some of which are free) so the best option for you will depend on your own unique situation.

Bootply

Bootply is known as the playground for Bootstrap. It’s not only a Bootstrap editor and builder, but it’s also home to a pretty extensive code repository. The editor enables you to drag and drop Bootstrap components then edit the code as you please.

Bootply is also integrated with other popular Bootstrap plugins, micro-libraries and frameworks. Some of the tools you can leverage are Font Awesome, jQuery + jQuery UI, Bootstrap Select, FuelUX, AngularJS, Google Maps, and much more.
Pricing: Free or $4/month to download source code.

Brix.io

Brix is a powerful and sleek looking online Bootstrap builder that enables you to create responsive interfaces & websites faster than ever. Brix produces easily readable, smooth and well-formatted HTML, CSS & JS for use with any hosting service or other editor.
Brix also enables you to create projects simultaneously with team members no matter where they are. Concurrent editing and commenting makes collaboration easy, convenient and efficient.
Pricing: $14.90 – $49.90 per month.

Jetstrap

Jetstrap is a premium web-based interface building tool for Bootstrap 3 that helps developers and designers get websites up and running fast. Develop for all devices and access your work from anywhere.
Jetstrap allows you to drag and drop Bootstrap components into the builder then edit the code further. Instead of digging through docs, grab snippets of clean markup and quickly use complicated components.

Pricing: $16 – $99 per month.

Divshot

Divshot is not only a visual Bootstrap editor, but also an application-grade hosting environment built for developers.
The Bootstrap builder (known as Architect) enables you to create production quality code that’s properly nested with every new component. It also supports all other popular CSS frameworks like Foundation and Racthet, with new ones being added regularly.
Pricing: Free – $100/month (with hosting).

Pinegrow

Pinegrow is a desktop app for Mac, Windows & Linux that lets you mockup & design webpages faster with multi-page editing, CSS & LESS styling and smart components for Bootstrap, Foundation and other frameworks. The stylesheet editor lets you attach, detach, duplicate and reorder stylesheets.
Pinegrow doesn’t try to take over your workflow. Rather, it is a tool that can be used to save effort and time, where it makes sense.
Pricing: $49.95 for a one-time personal license.

LayouIt

Layoutit - Interface Builder for Bootstrap

LayoutIt is a simple but effective Bootstrap interface builder to make your front-end coding easier. You can start from scratch or use one of the base templates.
Simply drag and drop the Bootstrap elements onto the canvas and download the HTML. From there, you can add your own styling and integrate it with any programming language.
Pricing: Free

Pingendo

Pingendo is a visual desktop application that helps you to prototype responsive web pages based on Bootstrap.
Like most Bootstrap builders, you can add content from a rich collection of ready to use Bootstrap elements. You can start with a blank canvas or start your pages from a collection of ready to use layouts. From there you can drag, re-size, and customize your contents.
Pricing: Free

Update!

Bootstrap Starter Kit

Bootstrap Starter Kit is more than just another Bootstrap template, it’s a collection of unique, professional Content Blocks, that can be pieced together by you to create unlimited layouts to suit any business.

Use the drag-and-drop HTML Builder to quickly and visually create your perfect site, or copy-and-paste your chosen blocks for greater control.

Whatever your level of knowledge using Bootstrap and HTML, anyone can build a great responsive Bootstrap website.

Pricing: $28 for a one time basic license.

Conclusion

You’re now equipped with 8 Bootstrap editors for quickly developing responsive websites built off Bootstrap.
If you’re currently using one of these editors, or if we left one off the list, let us know in the comments below.

Almost every application or dynamic website requires a backend to manage it.

These admin screens come bundled with ready-to-use apps (like WordPress, Magento, etc.) but custom apps need custom backends.

It is usually considered as a simple process to create an admin template but, most of the time, this requires a lot of effort as there are lots of things (usually related to usability) to think of.

Designers/developers out there have created various free admin templates and here they are so you don't need to search:

Charisma Admin Template (demo)

Charisma is a responsive admin template that is built with Twitter Bootstrap.

It has 9 skins and includes almost everything we may need like forms, charts, buttons, tables, file manager, image gallery and much more.

Here is also the GitHub link for the template in case you want to fork it.

INADMIN – jQuery Admin Template (demo)

INADMIN is a jQuery-powered admin template with header + top navigation and styles for tables, forms, messages and more.

It also includes a nice sign-in page.

Blue Nile Admin Template (demo)

A Twitter Bootstrap-powered and responsive admin template which features many necessary stuff like the navigation, tables, forms, sign-in/sign-up, error pages and more.

The free license requires a link back to the developer's website.