Add tailwind CSS

[whitep4nth3r]

Hello! So I wanted to a) try Tailwind and b) give people an easy way to add styles to the project without actually writing CSS!

I've styled the home page as a starter but left other stuff untouched.

I've added this to the README:

Styling the front end

The project uses tailwind CSS!

System requirements:

Node.js
npm

To install dependencies, run the following commands:

cd /HacktoberfestProject.Web
npm install

Adding styles

The raw css is stored in /HacktoberfestProject.Web/styles/raw.css.

The aim of using tailwind, is this:

Instead of opinionated predesigned components, Tailwind provides low-level utility classes that let you build completely custom designs without ever leaving your HTML.

Ideally, we shouldn't have to add any custom css to raw.css. To follow this pattern, attempt to add and edit styles only in the HTML layout files.

Compiling css

To compile any extra css you add to raw.css, run the following command:

cd /HacktoberfestProject.Web
npm run tailwind

Take a look at package.json to see what the tailwind task is doing. Essentially it takes the styles/raw.css file, processes it and moves the output to wwwroot/css/output.css.

Any questions, let me know!

[whitep4nth3r]

I haven't removed bootstrap completely yet - but this should be the aim.

[CrypticEnigma00]

Absolutly awesome work here @whitep4nth3r !! If any one wishes to see the development of this Pull Request the Vod is on twitch https://www.twitch.tv/videos/769089343

[whitep4nth3r]

I wanted to do this but my logic handling in .NET is limited!

On Tue, 13 Oct 2020 at 17:56, Rick van den Bosch notifications@github.com wrote:

@rickvdbosch approved this pull request.

I only have one comment, but that's also a possible optimization for a future PR 😃

In HacktoberfestProject.Web/Views/Shared/_Login.cshtml https://github.com/Layla-P/HacktoberfestProject/pull/52#discussion_r504092822 :

@@ -1,10 +1,18 @@

-

• @if (!User.Identity.IsAuthenticated)

• {

• Log In with GitHub

• } else

• {

• Logout

• }

+@if (!User.Identity.IsAuthenticated)

If the only difference for this if-statement is the text and location of the link, we could optimize and not have the svg in there twice. Downside: we have (something that looks like) an if-statement twice.

Pseudo-code:

<a ... asp-action="@(User.IsdAuthenticated ? "Logout" : "Login"") ... />

and

@(User.IsAuthenticated ? "Logout" : "Log in with GitHub")

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Layla-P/HacktoberfestProject/pull/52#pullrequestreview-507622589, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMS2HEKGROHQCHYYC5LGQALSKSBDRANCNFSM4SPFXY2A .