본문 바로가기
Programming

Amazing Twitter Bootstrap Extensions and Forks (2013 version)

by Mizix 2013. 7. 11.
반응형

I recently discussed how wide-spread Bootstrap has become to the point that any framework, code, UI, or whatever that comes out gets a Bootstrap version. Well, I’ve been looking around for some Bootstrap extensions and forks that could help me out. Now, before, I get into everything, I’d like to mention that many of these are compatible with Bootstrap themes which makes them THAT much more powerful. Here are my finds:

Jasny’s Bootstrap

jasny boot 1024x702 Amazing Twitter Bootstrap Extensions and Forks (2013 version)

This is pretty much the king of all bootstrap forks. It updates often and has some awesome features that Bootstrap doesn’t (for a good reason!).

So what does it have? Basically a lot of new abilities activated via data-* html5 tag

  • Input Mask” – an ability to make a user conform while inputting data into an input field such as forcing a user to provide a phone number like so _ _ _ – _ _ _ – _ _ _ _ so that the input is 555-555-5555. Pretty awesome feature, right?
  • Rowlink” – ability to make a table row “clickable” and thus giving it a specific action. Very neat feature if you use a lot of tabular data.
  • File Upload” – my favorite! This little widget allows full bootstrap file upload UI and more. This is how I found this framework in the first place! If you need bootstrap with an ability to upload files (such as for custom cms creation) this is it!
  • Icons” – built-in icon font called “Iconic icons” featuring 171 different scalable icons! Glyphioons are still available
  • Alerts” – new alerts that stick to the top of your page. Nice tweak
    icon smile Amazing Twitter Bootstrap Extensions and Forks (2013 version)
  • Semi fluid Layouts” – laytous that have a fixed layout for large screens but works fluidly on smaller screens
  • Action links” – don’t like buttons? Well, you will now be able to create links with the usual “primary”, “info” and such. This is great when you need actionable links that don’t stand out too much

The additions may be small but make great additions to what Bootstrap provides. As always, you can customize this and take out any extras you’re not happy with. For example, if you don’t want the “rowlink” ability, you can easily take it out.

icon smile Amazing Twitter Bootstrap Extensions and Forks (2013 version)

Bootsnipp

bootsnipp 1024x785 Amazing Twitter Bootstrap Extensions and Forks (2013 version)

Bootsnipp is a repository of code snippets that is supposed to take advantage of Bootstrap’s versatility. The repo features things like pricing tables, beautiful contact forms, carousel extensions, and all sorts of things. Here are some of my favorites:

Workless

workless 1024x756 Amazing Twitter Bootstrap Extensions and Forks (2013 version)
Workless is a fork of Bootstrap and HTML5Boilerplate. From the words of the creator, “it’s now pretty much turned into a framework in it’s own right”. Workless has a different feel to it, more than just another theme but keeps all the advantages of Bootstrap. Here are the extra specialties and differences of this “fork”:
  • styled checkbox, radios, and select form fields as well as file uploads
  • completely different buttons. Two options of: default and flat, as well as 8 different button colors. Also includes round cornered and regular. This provides you with a ton of different options to play with.
  • prettify backed in with styling. Not just a “code” tag, but also automatically formatted “pre” tags with prettify.
  • Includes Elusive icons
  • variable backgrounds. There are four built-in backgrounds that can be applied to any div, body, or block element with just a class (includes, “blueish”, “noise”, “noisedark”, and “classydark”
  • highlights for words.
  • tooltip plugin

 Elusive Webicons

webicons 1024x652 Amazing Twitter Bootstrap Extensions and Forks (2013 version)

A great alternative to built-in glyphicons and Font Awesome icons, Elusive Webicons is an open source webfont with 271 icons! The creator includes all the icons in .svg format to work with, in case you need to rebuild an icon to suit you. What does it hold over the original icons?

  • vector format and an icon font allows for easy scaling, and using text-based CSS modifiers
  • easy integration. Just replace sprites.less with elusive-webfont.less file provided!
  • includes social icons for wordpress, github, tumblr, youtube, even reddit and friendfeed!
  • includes bootstrap’s default icons

Bootstrap 3.0

bootstrap 3 1024x565 Amazing Twitter Bootstrap Extensions and Forks (2013 version)

Bootstrap is right about ready to launch its 3.0 version. Its preview was available for a short time but it looks like it was pulled down. So what are the significant changes?

  • gradient look was replaced with a flat look. A new migration in the industry trends has hit Bootstrap as well. From buttons to navbars, all gradients seemed to have been pulled out
  • mobile-first approach
  • new customize screen. Current screen often criticized by me, especially in my Customize Bootstrap article, this one better pack a punch!
  • new font icons! Using Glyphicons v1.7!
  • removed reset.less in lieu of normalize (what Foundation uses)
  • grid consolidated to be fluid out of the box and also work on input and table. Again, similar to how Foundation works.
  • dropped support for IE7 and FF3.6. Honestly, their “support” in the past sucked and made things look TERRIBLE on IE7 so I’m glad they’re official about it!
  • overall major design changes to just about everything

TODC Bootstrap

todc bootstrap 1024x393 Amazing Twitter Bootstrap Extensions and Forks (2013 version)

A google-styled theme for Bootstrap. Yet, it’s not JUST a theme. Honestly, I’d love to write a review on this fork alone. Here are the additions:

  • Google (Google Plus) styled buttons, forms, tables, dropdowns, button groups etc.
  • Google bar and Google Navbar. Just like from Google Plus, Gmail, or Google Reader! This part really got me, it looks amazing.

Sorry for the brief review. Most of the additions are related to Google UI so you have your good-old bootstrap that looks like Google Plus. I think this is a great example of how to correctly use Bootstrap as a framework or starter point rather than a complete solution

 Honorable Mentions


Source : antjanus[dot]com

출처 : http://www.innerhtml.com/amazing-twitter-bootstrap-extensions-and-forks-2013-version.html


반응형