Visual Studio MVC Bourbon Web App

Controller and Views

1. Controller

Create HomeController
  1. In Visual Studio > Solution Explorer;
    Right click MvcAppBourbon > Controllers;
    Select: Add > Controller;
    Controller name: HomeController.scss
    Template: Empty MVC controller

2. Views

Create _Layout
  1. In Visual Studio > Solution Explorer;
    Right click MvcAppBourbon > Views;
    Select: Add > New Folder;
    Name: Shared
  2. Right click MvcAppBourbon > Views > Shared;
    Select: Add > New Item (Ctrl + Shift + A);
    Select: MVC 4 Layout Page (Razor);
    Name: _Layout.cshtml
  3. Edit Views/Shared/_Layout.cshtml;
    In the document head, add a stylesheet link to /css/main.css.
_Layout.cshtml – head
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
	<link rel="stylesheet" href="/css/main.css">
</head>
Create _ViewStart
  1. Right click MvcAppBourbon > Views;
    Select: Add > New Item (Ctrl + Shift + A);
    Select: MVC 4 Partial Page (Razor);
    Name: _ViewStart.cshtml
  2. Edit Views/_ViewStart.cshtml
_ViewStart.cshtml
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
Create Home
  1. In Visual Studio > Solution Explorer;
    Right click MvcAppBourbon > Views;
    Select: Add > New Folder;
    Name: Home
  2. Right click MvcAppBourbon > Views > Home;
    Select: Add > New Item (Ctrl + Shift + A);
    Select: MVC 4 Partial Page (Razor);
    Name: Index.cshtml

Step 2

Create Sass Module
  1. In Visual Studio > Solution Explorer;
    Right click MvcAppBourbon > sass;
    Select: Add > New Folder;
    Name: modules
  2. Right click MvcAppBourbon > sass > modules;
    Select: Add > New Item > SASS File;
    Select: MVC 4 Partial Page (Razor);
    Name: _grid.scss
  3. In the CLI, load grunt to watch and compile sass files.
  4. Navigate to refills.bourbon.io/#grid-items;
    Copy the markup code from the left pane into the Home View: /Views/Home/Index.cshtml;
    Copy the Sass code from the right pane into the grid module: /sass/modules/_grid.scss;
  5. Append @import “modules/grid”; to the end of /sass/main.scss
  6. In Visual Studio > Debug > Start Debugging (F5);
    A browser should open with the grid displayed.

Source Code

Published by

Jim Frenette

Web Developer - views here are my own except those taken from people more clever than me.