Zurb Foundation 5 Resources for .Net Developers

Share httpJunkie.com on..
Tweet about this on TwitterShare on FacebookShare on Google+Share on TumblrEmail this to someone

What’s this post all about

I wanted to create a list of all of the resources I use with Foundation 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. My personal preference is Foundation because I like the conventions and the overall design of the framework better than Bootstrap. Instead of telling you why I use Foundation, I will tell you why in some cases I don’t use Foundation.

To find out more about why I use Foundation over Bootstrap and why some clients ask specifically for Bootstrap instead of Foundation. Jump to end of article.

Enough talk about Bootstrap let’s get back to the Foundation!

The Resources

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.

Zurb’s own Foundation Resources page

I would be negligent not to first point you to point you at the Zurb Resource page at the Foundation 5 website, it’s a possible we may share some links, but my list is what I believe are the first resources and packages that I believe you should be aware of as someone who programs in ASP.Net, this is my opinion only and my list might not take into consideration of packages that might be usefull from the standpoint of programming in something other than the .Net Framework.

Zurb’s Foundation Resources Page

NuGet Packages

Foundation 5 NuGet Install

jQuery Libraries

Date Range Picker – Uses Moment.js

Font Icons

Foundation Icon Fonts 3
Font Awesome
Glyphicons.com

Angular/Foundation Libraries

Angular Foundation – A set of native AngularJS directives based on Foundation’s markup and CSS.

Neosavvy Angular Seedling – Zurb Foundation based Angular Seed project with dependencies on both of our Core Neosavvy JS Libraries.

Foundation: Out of The Box Resources

#Components

#Themes

#Templates

Open Source Web Templates
epickwebdesign.com
Zurb Templates and Layout ides

#Themes

CMS/Wordpress themes and simple CSS themes
50 Templates & Themes Compatible With: Foundation 5
Themplio.com

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.

Raleway
Lato
Open Sans
Roboto
Ubuntu
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.

Adelle
Adelle Sans
Brandon Grotesque
Clavo
FF Dagny Pro
Effra
FF Tisa Sans Pro
FF Tisa Pro
Iskra
Nimbus Sans
Proxima Nova
Refrigerator Deluxe

Foundation vs Bootstrap in a ASP.NET MVC world

A) A client has requested specifically that we use Bootstrap for the project. This is the most common reason I would use Bootstrap over Foundation. Most of my clients who will have to maintain a project after the initial launch prefer that we leave them with a Bootstrap framework because it may be the Responsive Framework that their developers know or use more often. SOmetimes they have specific add-ons or extensions to the project that they need Bootstrap. WIth Microsoft clearly selecting Bootstrap as their out of the box Responsive Framework, a lot of the ASP.NET developer s I work with and know are most familliar with Bootstrap instead of FOundation for this particular reason. And all of their tutorials on ASP.NET MVC 5 exaplian how to do magical fron end development with Bootstrap. The thing that most of them do not know is that if You understand how to work with Bootstrap, then you should also be able to directly transfer most of that knowledge to Foundation.

B) Along the same lines, not only is most of Microsoft ASP.NET MVC tutorials based around using Bootstrap, but their out of the box default scaffolding uses Bootstrap code. This is a huge problem that I want to point out. When you scaffold out CRUD in ASP.NET MVC 5, and you don’t have Bootstrap installed in your project, well, tough shit. Your getting Bootstrap code. I think this is a huge mistake on their part. They should at the very least have a scaffolding option that is framework agnostic and simply lays out the scaffolded .cshtml in generic divs.

C) When working with Angular, Angular UI is built with Bootstrap. There are Foundation options, but they are not as mature and have less documentation and supporting tutorials on the internet to do so.

For personal projects I have overcome most of these issues and I know FOundation very well so It’s not difficult to get a ASP.NET MVC project started using Foundation, however; if you choose the standard ASP.NET MVC 5 (File > New Project) and select ASP.NET Web Application and choose any combination of MVC and/or Web API, your project layout, Home Views and user account views will be structured using Bootstrap and even if you remove bootstrap from the project you are still left with Bootstrap code in all of your views. The code left behind is not optimal for just converting over to foundation and your best option is to just remove any divs that are setup for the Bootstrap frameworks and replace them with the equivalent FOundation html structure which is in most cases much simpler. If you plan on going the FOundation route I would suggest starting with a blank project unless you are very knowledgeable about the standard MVC application template and where everything is.

Leave a Reply

You must be logged in to post a comment.