Using PaperCSS with ASP.NET Core MVC 2.1 – Step By Step
Andriy Andruhovski Oct 15 Updated on Nov 04, 2018
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 present 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 to the official site.
UPD: You can find second part of this article here.
You should have installed Visual Studio 2017 v.15.8.7 and .NET Core 2.1 Framework. You also need a fake data generator like Faker.Net.
Steps for creating a Web Application with PaperCSS
Step 1: Creating ASP.NET Core MVC Project
To start with you have to create a Core MVC project. Follow the below to create the project.
- Launch Visual Studio 2017;
- Go to File menu and select New->Project;
- In the left panel of the New Project, expand the Installed -> Templates -> Visual C# -> Web;
- Select ASP.NET Core Web Application from the center pane. Enter the name of the project (PaperCss) and select the location. Then press "OK" button;
- In the New ASP.NET Core Web Application window, make sure ASP.NET Core 2.1 is selected at the top;
- For this demo, I choose Web Application (MVC) with No Authentication and Configure for HTTPS.
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.
- Follow to the
libfolder and remove all content except
- Right-click on the
liband select Add->Client-Side Library;
- Right-click on the
liband select Add->Client-Side Library again;
- Choose provider
- Because we need only
distfolder from PaperCSS, we select
Choose specific folderoption and check then
distfolder in the tree and click
Step 3: Modifying _Layout.cs
Now we can apply PaperCSS to our application. In this step, we will change a navigation bar in
Replace links in line 7 and 11 to PaperCSS:
Replace scripts block at the end of the file with new:
Update the navigation bar with a new design:
- For better appearance, you can also remove
<hr>tag before footer-element.
Step 4: Modifying _CookieConsentPartial.cshtml
- Replace the content of the file with a new one:
To learn more about the modal component, please follow to PaperCSS documentation
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.
- Create an Article model:
- Change the
- Replace Index view layout:
- About and Contact views will have minimal changes. We just wrap content in view with
After running our application will look like following screenshots:
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.