What’s this post all about
I wanted to create a list of all of the resources I use with bootstrap in my ASP.NET MVC applications, I do a lot of switching back and forth between Bootstrap & Foundation. I feel there is a good reason to use one over the other. If I have a personal site or a very customized site where I will be doing a lot of the CSS styling I tend to go the Foundation route for a responsive framework, there have been sometimes that I have only used the Foundation Grid, and a few other selected pieces of Foundation and used a lot of my own design and styles for buttons etc.. And although at one time Foundation had less templates and was more of a FOUNDATION to start with than it was a turn key solution for a responsive framework, it is now much more mature and a lot more developers are creating templates and add-ons for it. I still like using Bootstrap for projects that I plan to start from a well thought out template and use add-ons to create a starting point that has a lot of UI features. Below are those resources that I tap into at the beginning of a project and get working so that when I need them in the project they are just there:
I’m going to break these resources into categories, keeping some separation between them will make looking at them at a glance much easier and this resource more helpful.
Bootstrap UI Component Libraries
Jasny Bootstrap – An extension to vanilla (Plain ‘ol) Bootstrap, adding a number of features and components.
Bootstrap Theme and Template Sites
I have found that coming up with a good color scheme can be difficult and although I don’t rely on any one tool to magically do the job for me I have used color matchers and similar tools to get insight into what may match a certain primary color I have been given for a website and sometimes those tools give me more ideas on what other colors I can use. The following tool takes an image (any image) and generates a color scheme for custom theming. As someone who also uses Foundation 5 by Zurb, it’s nice to know that this tool is compatible with FOundation also.
Google Web Fonts
The following fonts are the only ones I use on a consistent basis from Google Fonts. I fell there is a limited selection of great fonts here, Raleway and Lato are great for Headings and the rest are great for body copy and paragraph text. Just because Google fonts are free doesn’t mean you can’t find quality fonts there. Again, these are some of the really good ones.
Source Sans Pro
Typekit Web Fonts
Typekit has a much wider selection of premium fonts that look great on responsive websites particularly on mobile phones. I put them in alphabetical order, I tend to use Typekit fonts when I want my text to be a little more unique and to stand out or give a very particular vibe on the site I’m developing. Typekit fonts have some costs associated to them, but you get what you pay for and since you have to pay, well, they have some overall better fonts than Google.
FF Dagny Pro
FF Tisa Sans Pro
FF Tisa Pro