DEV Community

Andriy Andruhovski
Andriy Andruhovski

Posted on • Edited on

2

Using PaperCSS with ASP.NET Core MVC 2.1 – Step By Step

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.

UPD: You can find the second part of this article here.

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.

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;
  2. Go to File menu and select New->Project;
  3. In the left panel of the New Project, expand the Installed -> Templates -> Visual C# -> Web;
  4. 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;
  5. In the New ASP.NET Core Web Application window, make sure ASP.NET Core 2.1 is selected at the top;
  6. For this demo, I choose Web Application (MVC) with No Authentication and Configure for HTTPS.

New Project Screen

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;
  2. Right-click on the lib and select Add->Client-Side Library;
  3. In Library textbox enter jquery@3.3.1 and click Install
  4. Right-click on the lib and select Add->Client-Side Library again;
  5. Choose provider unpkg and file Library textbox with papercss@1.5.4
  6. 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:

    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - PaperCssDemo</title>
    <environment include="Development">
    <link rel="stylesheet" href="~/lib/papercss/dist/paper.css" />
    <link rel="stylesheet" href="~/css/site.css" />
    </environment>
    <environment exclude="Development">
    <link rel="stylesheet" href="https://unpkg.com/papercss@1.5.4/dist/paper.min.css"
    asp-fallback-href="~/lib/papercss/dist/paper.css"
    asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
    </environment>
    </head>
    view raw _Layout.cshtml hosted with ❤ by GitHub
  2. Replace scripts block at the end of the file with new:

    <environment include="Development">
    <script src="~/lib/jquery/jquery.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    </environment>
    <environment exclude="Development">
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"
    asp-fallback-src="~/lib/jquery/jquery.min.js"
    asp-fallback-test="window.jQuery"
    crossorigin="anonymous"
    integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT">
    </script>
    <script src="~/js/site.min.js" asp-append-version="true"></script>
    </environment>
    view raw _Layout.cshtml hosted with ❤ by GitHub
  3. Update the navigation bar with a new design:

<nav class="border fixed">
<div class="nav-brand">
<h4><a asp-area="" asp-controller="Home" asp-action="Index">PaperCssDemo</a></h4>
</div>
<div class="collapsible">
<input id="collapsible2" type="checkbox" name="collapsible1">
<button>
<label for="collapsible1">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</label>
</button>
<div class="collapsible-body">
<ul class="inline">
<li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
view raw _Layout.cshtml hosted with ❤ by GitHub
  1. 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:
@using Microsoft.AspNetCore.Http.Features
@{
var consentFeature = Context.Features.Get<ITrackingConsentFeature>();
var showBanner = !consentFeature?.CanTrack ?? false;
var cookieString = consentFeature?.CreateConsentCookie();
}
@if (showBanner)
{
<div>
<input class="modal-state" id="modal-1" type="checkbox" checked>
<div id="cookieConsent" class="modal" role="alert">
<label class="modal-bg" for="modal-1"></label>
<div class="modal-body">
<label class="btn-close" for="modal-1">X</label>
<h4 class="modal-title">Warning</h4>
<p class="modal-text">
Use this space to summarize your privacy and cookie use policy.
<a asp-controller="Home" asp-action="Privacy">Learn More</a>
</p>
<label for="modal-1" class="paper-btn" data-cookie-string="@cookieString">Accept</label>
</div>
</div>
</div>
<script>
(function () {
document.querySelector("#cookieConsent label[data-cookie-string]").addEventListener("click", function (el) {
document.cookie = el.target.dataset.cookieString;
//document.querySelector("#cookieConsent").classList.add("hidden");
}, false);
})();
</script>
}

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.

  1. Create an Article model:
    using System;
    namespace PaperCssDemo.Models
    {
    public class Article
    {
    public int Id { get; set; }
    public string Author { get; set; }
    public string Title { get; set; }
    public string Content { get; set; }
    public DateTime CreationDate { get; set; }
    }
    }
    view raw Article.cs hosted with ❤ by GitHub
  2. Change the Index action in HomeController
    using System;
    using System.Collections.Generic;
    using System.Diagnostics;
    using Faker;
    using Microsoft.AspNetCore.Mvc;
    using PaperCssDemo.Models;
    namespace PaperCssDemo.Controllers
    {
    public class HomeController : Controller
    {
    public IActionResult Index()
    {
    var articles = new List<Article>();
    for (var i = 1; i < 9; i++)
    {
    articles.Add(new Article
    {
    Id = i,
    Title = $"News Post #{i}",
    Author = Name.FullName(NameFormats.Standard),
    Content = Lorem.Paragraph(15),
    CreationDate = new DateTime(2018, 10, i)
    });
    }
    return View(articles);
    }
    public IActionResult About()
    {
    ViewData["Message"] = "Your application description page.";
    return View();
    }
    public IActionResult Contact()
    {
    ViewData["Message"] = "Your contact page.";
    return View();
    }
    public IActionResult Privacy()
    {
    return View();
    }
    [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
    public IActionResult Error()
    {
    return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
    }
    }
    }
  3. Replace Index view layout:
    @model IEnumerable<Article>
    @{
    ViewData["Title"] = "Home Page";
    }
    <section>
    @foreach (var item in Model)
    {
    <article class="paper">
    <h1 class="article-title">@item.Title</h1>
    <p class="article-meta">@item.CreationDate.ToLongDateString()</p>
    <p class="text-lead">Written by @item.Author</p>
    <p>@item.Content</p>
    </article>
    }
    </section>
    view raw Index.cshtml hosted with ❤ by GitHub
  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

About View

Contact Vew

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.

Top comments (2)

Collapse
 
catriname profile image
catrina

Love your breakdown! I'm currently heavily using Bulma, but look forward to your venture into this framwork and other posts!

Collapse
 
andruhovski profile image
Andriy Andruhovski

Thank you for your attention to this matter. I am interested in various frameworks, so I will try to explore Bulma in the nearest future.