Twitter Bootstrap Resources

Over the past few months, I have built quite a few sites using Twitter Bootstrap. I think it is an awesome framework for styling web sites and abstracts away a lot of the differences in CSS between modern browsers.  I say Twitter Bootstrap did for CSS what jquery did for JavaScript. I typical say that if you use both frameworks in the same site, you site will work pretty consistent against all modern browsers.

Anyway, the purpose of this post was to list all of the Twitter Bootstrap resources that use or find helpful.

Content Delivery Networks | Resource Guides | Themes | Layout Helpers | Visual Studio NuGet Packages | UI Components

Content Delivery Networks (CDN)

Bootstrap CDN http://www.bootstrapcdn.com
Microsoft Ajax CDN http://www.asp.net/ajaxlibrary/cdn.ashx#Bootstrap_Releases_on_the_CDN_14

Resource Guides

The Big Bad Ass List of Twitter Bootstrap Resources http://www.bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources

Themes

Bootswatch http://bootswatch.com/
Themes for Bootstrap http://www.themesforbootstrap.com/
jquery-ui for Bootstrap https://github.com/jquery-ui-bootstrap/jquery-ui-bootstrap/
Style Bootstrap http://stylebootstrap.info/
PaintStrap http://paintstrap.com/

Layout Helpers

Bootply http://www.bootply.com
BootUI http://www.bootui.com/
Layoutit http://www.layoutit.com/build

Visual Studio NuGet Packages

As of ASP.NET MVC 5, the File | New templates are already wired for Twitter Bootstrap, just in case, here are a few packages to get you started.

Bootstrap http://www.nuget.org/packages/bootstrap/
AngularJS UI Bootstrap http://www.nuget.org/packages/Angular.UI.Bootstrap/
Bootstrap for MVC 5 http://www.nuget.org/packages/Twitter.Bootstrap.MVC/
Paged List for ASP.NET (Bootstrap) http://www.nuget.org/packages/PagedListExt/
Font Awesome http://www.nuget.org/packages/FontAwesome/

 

UI Widgets

General Libraries | Buttons | Fonts | Input Widgets | Notification Helpers

General Libraries

Bootstrap Components (for ASP.NET MVC) http://bootstrapcomponents.apphb.com/
Fuel UX http://exacttarget.github.io/fuelux/#

Buttons

Button Builder http://bootsnipp.com/buttons

Fonts

Font Awesome http://fontawesome.io/
Font Custom http://fontcustom.com/

Input Widgets

Bootstrap Form Helpers http://bootstrapformhelpers.com/
Bootstrap Acknowledge Inputs http://averagemarcus.github.com/Bootstrap-AcknowledgeInputs/
Bootstrap Wysiwyg Editor http://mindmup.github.io/bootstrap-wysiwyg/
Bootstrap Validation Helpers http://reactiveraven.github.io/jqBootstrapValidation/
Date Picker http://www.eyecon.ro/bootstrap-datepicker/
Time Picker https://github.com/jdewit/bootstrap-timepicker
   

Notification Helpers

PNotify http://sciactive.com/pnotify/

Adding Visual Studio Online to an Windows Azure MSDN Benefit Subscription

In my previous post,  I talk about why you can not add Visual Studio Online to an Existing Windows Azure MSDN benefit subscription.  In this post, I will show you how to add and existing Visual Studio Online (formally know as TFS Online) to your existing Windows Azure account.

Create Your “Pay-As-You-Go” Account

If you already, have a “Pay-As-You-Go” account you can jump to the “Link Your Existing Visual Studio Online Account” section

First you have to sign in to your Windows Azure account. You should see something like this.

Add subscription

Click on the Add Subscription button. This will take you to the Add Subscription page. You should see a few choices, scroll down until you see the “Pay-As-You-Go” selection highlighted below.

Select an Offer

You should then be brought to the purchase section,

purchase

Note, you might have to validate your mobile number and/or put in a credit card number.  Click purchase, and after a minute or so, your “Pay-As-You-Go” account is established.  You can view it by clicking on the Portal button or visiting the Windows Azure Portal.

Linking Your Existing Visual Studio Online Account

Now that you have the “Pay-As-You-Go” account added to Windows Azure, we can click on the Visual Studio Online tab in the Windows Azure portal Visual Studio Online

 

or click the new button.

Link to Existing Account

If you click, the new button you will have to navigate to “App Services”, then “Visual Studio Online”, then “Link to Existing”. For me, since my Windows Azure credentials were the same as my Visual Studio Online credentials, it automatically populated the account name.  Click the button and the Link to Existing Account message will appear.

Link Being Created

 

Once the account has been linked you will see the account ready screen.

Account Ready

 

Now, from the Windows Azure dashboard, you will see your Visual Studio Online account.

With Visual Studio Online

Visual Studio Online with Windows Azure MSDN benefit

I don’t know about you but when I watched the Visual Studio launch earlier this week I was really excited about some of the cool new features added. The first thing I wanted to try out was Visual Studio Online. I figured I have a Windows Azure account setup through my MSDN subscription so I’d be set.  Unfortunately, like most people found out when they tried to add their Visual Studio Online account they could not.  We were all getting this message…

You have no eligible Windows Azure subscriptions. To buy monthly user licenses or shared resources for your Visual Studio Online account, you’ll need another Windows Azure subscription.

I went to the Windows Azure account portal to make sure that I did have an active subscription, in fact I have two, but I still could not add or link my existing Visual Studio Online account.  I posted a message on one of the Windows Azure list and after a few hours some one pointed me to this forum post. This forum post explains why you can not add an Visual Studio Online account to an existing Windows Azure MSDN account.  It essentially boils down to billing.  The Windows Azure MSDN benefit has the ability to “cap” the spending in Windows Azure.  This does not work for Visual Studio Online. If you think about it, it makes sense. Do you not want to lose access to your source code because you hit your spending limit? Probably not.  In order to add your Visual Studio Online account you have to get create a Windows Azure “Pay as you Go” subscription.  Don’t worry, you get a bunch of the benefits free.

Within a Visual Studio Online account, you simply pay for user plans for the users who join your account and for resources that are shared amongst all users on the account. The first five users with the Basic plan and all eligible MSDN subscribers (Visual Studio Professional with MSDN and above) can join your account at no charge. Learn more about Visual Studio with MSDN.

Hopefully this helps.  My next post will talk about Adding Visual Studio Online to an Windows Azure MSDN benefit.

Windows Azure Experience–Part 4: Customizing the Web Site

This Part 4 of a series of posts about my “upgrade” to Windows Azure.

Next up in the series is customizing the Windows Azure Web Site. Note: This blog post is based on the Preview version of Windows Azure Web Sites and might change in the future.

Note: There is an article on the Windows Azure site that will cover some of this content.

Getting Started

When you first come to you web site from the management portal you are presented with a screen similar to this.

image

The start page gives you three options:

Get the tools

WebMatrix is a free, lightweight web development tool that includes everything you need to create web sites and publish applications for Windows Azure. WebMatrix supports the latest web technologies, including ASP.NET, PHP, HTML5, CSS3, Node and more. The Windows Azure SDKs allow you to build applications that take advantage of Windows Azure's scalable cloud computing resources.

Web Matrix

Clicking on this link will redirect you to the latest and greatest version of WebMatrix.

Install a Windows Azure SDK

Clicking on this link will redirect your to the downloads page for all of the Windows Azure SDKs. There are SDKs available for Mobile development, including Andriod, iOS, Windows Phone 8, and Windows Store. Here are some of the others

  • .NET: Visual Studio 2010, Visual Studio 2012
  • Node.js
  • PHP
  • ava
  • Python
  • Ruby
  • Media libraries and player frameworks.

Publish your app

After you set up a web site and dependent resources, such as a database, you can download the generated publish profile, import it into a development tool such as WebMatrix or Visual Web Developer, and deploy your web site to Windows Azure within seconds. You can also publish your web application from FTP directly by setting up deployment credentials in the portal and pushing the application to Windows Azure from your favorite FTP client.

There will be more on this in a future blog post.

Integrate source control

Set up continuous deployment from source control providers like TFS, CodePlex, GitHub, Dropbox, or Bitbucket. You can also deploy from a local Git repository on your machine.

There will be more on this in a future blog post.

Dashboard

Monitor

The dashboard allows you to see some performance metrics of your site. These are CPU Time,  Data In, Data Out, HTTP Server Errors, and Requests.

image

 

Usage Overview

The usage overview shows you where you might be in trouble of hitting the limits of the the type of site you have (free, shared, reserved).

image

 

Quick Glance

This shows you every thing that you will need to connect to your Windows Azure services.

image

Monitor

The monitor displays the some of the web sites performance counters like CPU time, Data In, Data Out, etc.

image

Configure

General

Choose the version of .NET language runtime to use.  The current supported version is v.3.5 and v4.5

Choose the version of PHP to use. The current supported versions are 5.3 and 5.4.

Domain Names

Lists the domain names that are associated with your account.  If you have a Shared or Reserved instance, you can click on Manage domains to add or remove domains or subdomains.

App Diagnostics

You can turn on any of the application diagnostics like application logging to the file system and application logging to a Windows Azure Storage account.

Site Diagnostics

You can turn on any of the three site wide diagnostics settings like Web Server Logging, Detailed Error Messages, and Failed Request Tracing.

Monitoring

Endpoint monitoring lets you monitor the availability of HTTP or HTTPS endpoints from geo-distributed locations. You can test an endpoint from up to three geo-distributed locations. A monitoring test fails if the HTTP response code is greater than or equal to 400 or if the response takes more than 30 seconds. An endpoint is considered available if its monitoring tests succeed from all the specified locations.

App Settings

Specify name/value pairs that will be loaded by your web application when it starts.

Connection Strings

Show any connection strings associated with linked resources.

Default Documents

Use this setting to add, remove, or reorder your web site's default documents.

Handler Mappings

Specify a custom script processor to handle requests for the file extension that you specified. To do this, provide a path for the custom script. The path must be relative to the FTP root directory of the web site. You can use optional arguments.

Scale

General

Windows Azure offers three modes for you to run your web sites: Free, Shared, and Reserved. In the Free and Shared modes, all web sites run in a multi-tenant environment and have quotas for usage of CPU, memory, and network resources. You can decide which sites you want to run in Free mode and which sites you want to run in Shared mode. Shared mode employs less stringent resource usage quotas than Free mode. The maximum number of sites you can run in Free mode may vary with your plan. When you choose Reserved mode, all your web sites run in Reserved mode on dedicated virtual machines that correspond to standard Windows Azure compute resources.

Note: This can affect the cost of running your web site on Windows Azure.

Capacity

This count denotes the number of processes dedicated to a web site. By increasing the value for this setting, you can scale your web site for additional throughput and availability.

Note: This can affect the cost of running your web site on Windows Azure.

Linked Resources

This will show you a list of other Windows Azure Services that you have linked or attached to the web site, like a database.

Windows Azure Experience–Part 3: Creating the Web Site

This Part 3 of a series of posts about my “upgrade” to Windows Azure.

Next up in the series is creating the Windows Azure Web Site. Note: This blog post is based on the Preview version of Windows Azure Web Sites and might change in the future.

To get create a new Web Site from the management portal you simply need to click on the + New button.

Creating the Web Site

image

From here a menu will appear. Hint: if you are in the Web Sites section of the Table of Contents, you will get three new web site selections available, otherwise you will have to navigate “Compute" then “Web Site”

image

You’ll see that I have 3 options

Quick Create

Quickly create your web site by specifying a URL. You can perform tasks like deployment and configuration later.

Custom Create

Create a web site with additional options, such as a new or existing database, or with continuous deployment from source control.

From Gallery

Choose a web application from the gallery. This lets you choose from one of the many preconfigured ASP.NET applications like WordPress.

Quick Create

Click on Quick Create and you will be asked to enter a URL and Region for your website like this.

image

Whether you are choosing a Free, Shared or Reserved web site you must select the subdomain to use with .azurewebsites.net.  The site will do a real time check to see if you have chosen a name that already exists like this.

 

image

 If the subdomain you have chosen is valid and available the text box will look like this.

 

image

If you region is good, you can click on Create Web Site.

Unfortunately, I could not get a screen shot to show the status will it was creating but this is what the page looks like after

image

You’ll notice now that I have a second web site created, in like 10 seconds. with a notification telling me it was complete.

Custom Create

For custom complete you are asked for a little bit more information.

 

image

URL: Must be a subdomain that is valid an available

Region: Chose a region close to where your primary users will be.

Database: Select from the following choices

image

If you have existing databases, you can select one of them.  If you select Create a new SQL Server database or Create a new MySQL database, you will get prompted for more details around that database. Note: If the web site region and database region do not match, you will get an alert similar to this.

image

 

Publish from source control: If you select this option, you have the ability to chose from one of many options including:

  • Team Foundation Service
  • CodePlex
  • GitHub
  • DropBox
  • Bitbucket
  • External repository
  • Local Git Repository

Each one of these will take to a login page for that service where you can authorize access to the service.

From Gallery

For the Gallery, you get to choose from a wide selection of prebuilt sites and templates. These are broken up into categories to make the selection easier.  Here are some (not all) of the out of the cloud templates:

  • .DotNetNuke
  • Acquia Drupal
  • ASP.NET Empty Site
  • BlogEngine.NET (my favorite)
  • DasBlog
  • Joomla
  • Orchard
  • Umbraco
  • WordPress
  • and many more….

Once you choose one, there will be prompts for the specific site you choose to install.

About the author

Joseph Guadagno Name: Joseph Guadagno
Occupation: Software Architect, Vice President of INETA North America, Founder of SEVDNUG, Microsoft Visual C# MVP, speaker.
Location: Chandler, AZ

Joseph Guadagno RSS Joseph Guadagno Twitter Joseph Guadagno Linked In

Recent Tweets

Note: For Customization and Configuration, CheckOut Recent Tweets Documentation