Using PaperCSS with ASP.NET Core MVC 2.1 – Step By Step
Tags: dotnet, csharp, webdev, css
Published: 2018-10-15 22:38:02

---
title: ﻿﻿﻿﻿Using PaperCSS with ASP.NET Core MVC 2.1 – Step By Step
published: true
description: The goal of PaperCSS is to be as minimal as possible when adding classes. This article shows how we can use PaperCSS in ASP.NET Core MVC 2.1 application.
tags: #dotnet #csharp #webdev #css
---
## Intro 

In this article, I want to share my experience to use PaperCSS framework. I also wanted to see how the new Library Manager works in VS 2017.
PaperCSS is a framework that presents pages like paper pieces. As said authors, the goal of PaperCSS is to be as minimal as possible when adding classes. 
To learn more about PaperCSS, please follow [the official site](https://www.getpapercss.com/).

UPD: You can find the second part of this article [here](https://dev.to/andruhovski/using-papercss-with-aspnet-core-mvc-21--layout-and-components-27ap).


## Prerequisites

You should have installed the Visual Studio 2017 v.15.8.7 and  .NET Core 2.1 Framework. You also need a fake data generator like [Faker.Net](https://www.nuget.org/stats/packages/Faker.Net).


## Steps for creating a Web Application with PaperCSS

### Step 1: Creating the ASP.NET Core MVC Project
To start with you have to create a Core MVC project. Follow the below to create the project.

1. Launch Visual Studio 2017;
1. Go to **File** menu and select **New**->**Project**;
1. In the left panel of the **New Project**, expand the Installed -> Templates -> Visual C# -> Web;
1. Select ASP.NET Core Web Application from the center pane. Enter the name of the project (PaperCss) and select the location. Then press the "OK" button;
1. In the **New ASP.NET Core Web Application** window, make sure **ASP.NET Core  2.1** is selected at the top;
1. For this demo, I choose Web Application (MVC) with **No Authentication** and **Configure for HTTPS**.

![New Project Screen](https://thepracticaldev.s3.amazonaws.com/i/8i0zr8gt4e10dv9c87gh.png)

### Step 2: Replacing CSS framework.

Since the current version of ASP.NET Core Web Application template was not updated to the new version, we need to remove the content of the `lib` folder and create a new one. We should do it for two reasons: old content was tuned with Bower and we need to replace Bootstrap to PaperCSS.

1. Follow to the `lib` folder and remove all content except `favicon.ico`;
1. Right-click on the `lib` and select **Add**->**Client-Side Library**;
1. In `Library` textbox enter `jquery@3.3.1` and click `Install`
1. Right-click on the `lib` and select **Add**->**Client-Side Library** again;
1. Choose provider `unpkg` and file `Library` textbox with `papercss@1.5.4` 
1. Because we need only `dist` folder from PaperCSS, we select `Choose specific folder` option and check then `dist` folder in the tree and click `Install`.


### Step 3: Modifying _Layout.cs
Now we can apply PaperCSS to our application. In this step, we will change a navigation bar in `Views/Shared/_Layout.cs`. 


1. Replace links in line 7 and 11 to **PaperCSS**:
{% gist https://gist.github.com/andruhovski/0a21c0493a78d9f89967b13f46144e1e %}

2. Replace scripts block at the end of the file with new:
{% gist https://gist.github.com/andruhovski/be36e6af76c9d88e751299a936faa437 %}

3. Update the navigation bar with a new design:

{% gist https://gist.github.com/andruhovski/720c85d829458335576b4a76379e77e6 %} 

4. For better appearance, you can also remove `<hr>` tag before footer-element.

### Step 4: Modifying _CookieConsentPartial.cshtml

1. Replace the content of the file with a new one:

{% gist https://gist.github.com/andruhovski/0c6e73ac44dcf316fd28bacfd7ebb450 %}

To learn more about the modal component, please follow to [PaperCSS documentation](https://www.getpapercss.com/docs/components/modals/)


### Step 5: Creating a new design for generated pages.

In this demo, the Index page will be used for news publishing, but About and Contact will be unchanged.

1. Create an Article model:
{% gist https://gist.github.com/andruhovski/578ae77fa9c45ce216e6015f5c4c4ffe %}
2. Change the `Index` action in `HomeController`
{% gist https://gist.github.com/andruhovski/558d2d8604528b8792952bf73762f7aa %}
3. Replace Index view layout:
{% gist https://gist.github.com/andruhovski/e6047571003552ea09d9ef25b71f3135 %}
4. About and Contact views will have minimal changes. We just wrap content in view with `<section class="paper">...</section>` element.

After running our application will look like following screenshots:

![Index View](https://thepracticaldev.s3.amazonaws.com/i/njrry542w098qkd2l9vz.PNG)


![About View](https://thepracticaldev.s3.amazonaws.com/i/skvk39fcl9xbygbjtntt.PNG)

![Contact Vew](https://thepracticaldev.s3.amazonaws.com/i/fo8tnel3rwgpurltjlxz.PNG)

## Conclusion
In this post, we met with basic steps to use PaperCSS. 
In the next posts, we will consider how to use PaperCSS grid layout, tables, and other components.