Skip to content

Commit

Permalink
Final TailwindCSS 2 Updates
Browse files Browse the repository at this point in the history 
Signed-off-by: praveenjuge <[email protected]>
  • Loading branch information
praveenjuge committed Nov 22, 2020
1 parent ce69216 commit db7df5c
Show file tree
Hide file tree
Showing 52 changed files with 3,077 additions and 2,028 deletions.
2 changes: 2 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

Kutty is a tailwind plugin for building web applications. It has a set of accessible and reusable components that are commonly used in web applications.

**Use version 0.4 for Tailwind 2, version 0.3.5 for Tailwind 1**

## Installation

```sh
Expand Down
3 changes: 3 additions & 0 deletions docs/content/articles/_index.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
---
title: Articles
---
57 changes: 57 additions & 0 deletions docs/content/articles/upgrade-guide-to-tailwindcss2.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
---
date: 2020-11-22T11:57:07+0000
title: "Guide to upgrade Kutty to Tailwind 2"
description: "Use this as a guide to update from Kutty version 0.3.5 which supports till Tailwind 1 to Kutty Version 0.4 which supports Tailwind 2."
---

## Upgrade TailwindCSS First

Go to [Tailwind Upgrade Guide](https://tailwindcss.com/docs/upgrading-to-v2) and make sure you upgrade to the latest version.

TailwindCSS has changed the color palette which I used here with one change, I replaced `coolGray` with `blueGray` so that it looks better.

## Upgrade Kutty Version

After updating Tailwind, use the following command to update kutty

```sh
npm install kutty@latest
```

## Typography plugin is not bundled anymore

Bundling [typography plugin](https://github.com/tailwindlabs/tailwindcss-typography) seems like a good idea at first, but it's a size increase for all the people who didn't need it. And people can't update it's version to their needs.

Now you have to install it yourself if you are using it. Make sure you install the latest version that supports TailwindCSS 2.

```sh
npm install @tailwindcss/typography
```

## Alert, Badge, Spinner, Progress has utility classes to change colors

This means we can update these components to have any number of colors which are available in tailwind.

```html
<div class="text-green-800 bg-green-100 alert" role="alert">I'm a alert that informs you of stuff</div>

<span class="text-red-800 bg-red-100 badge">Success</span>

<div class="text-yellow-700 spinner" role="status">
<span class="sr-only">Loading...</span>
</div>

<progress class="text-gray-900 progress" value="70" max="100">70%</progress>
```

## Removed some unused social buttons

Removed YouTube, Twitch, LinkedIn, Slack button colors as no one was using it and it can be recreated with utility classes.

## Some card classes removed for utility classes

`card-success`, `card-danger`, `card-dark`, `card-title`, `card-subtitle` also removed in favor of utility classes so that any colors and combinations can be used.

## That's it

Hopefully the upgrade for easy for you :) Please [raise an issue](https://github.com/praveenjuge/kutty/issues) if you have any problems or doubts, I'll help you get through it.
111 changes: 89 additions & 22 deletions docs/content/components/404-500.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,37 @@
<section class="container px-4 py-32 mx-auto">
<div class="w-full mx-auto lg:w-1/3">
<a href="#" title="Hellonext Home Page" class="flex items-center">
<svg class="w-auto h-6" width="86" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 335 93">
<svg
class="w-auto h-6"
width="86"
height="24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 335 93"
>
<path
d="M134.71 45.7599c1.32-1.44 2.67-2.94 4.05-4.5 1.44-1.56 2.82-3.09 4.14-4.59 1.32-1.56 2.55-3.03 3.69-4.41 1.2-1.38 2.22-2.58 3.06-3.6h15.93c-3.18 3.66-6.3 7.17-9.36 10.53-3 3.3-6.3 6.72-9.9 10.26 1.8 1.62 3.66 3.57 5.58 5.85 1.92 2.22 3.78 4.53 5.58 6.93 1.8 2.4 3.45 4.8 4.95 7.2 1.5 2.4 2.76 4.59 3.78 6.57h-15.39c-.96-1.56-2.07-3.27-3.33-5.13-1.2-1.92-2.49-3.81-3.87-5.67-1.38-1.92-2.85-3.75-4.41-5.49-1.5-1.74-3-3.21-4.5-4.41v20.7H121.3V8.31991l13.41-2.16V45.7599zM209.35 74.3799c-2.28.66-5.22 1.26-8.82 1.8-3.6.6-7.38.9-11.34.9-4.02 0-7.38-.54-10.08-1.62-2.64-1.08-4.74-2.58-6.3-4.5-1.56-1.98-2.67-4.32-3.33-7.02-.66-2.7-.99-5.67-.99-8.91v-26.37h13.41v24.75c0 4.32.57 7.44 1.71 9.36 1.14 1.92 3.27 2.88 6.39 2.88.96 0 1.98-.03 3.06-.09 1.08-.12 2.04-.24 2.88-.36v-36.54h13.41v45.72zM217.888 16.8699l13.41-2.16v13.95h16.11v11.16h-16.11v16.65c0 2.82.48 5.07 1.44 6.75 1.02 1.68 3.03 2.52 6.03 2.52 1.44 0 2.91-.12 4.41-.36 1.56-.3 2.97-.69 4.23-1.17l1.89 10.44c-1.62.66-3.42 1.23-5.4 1.71-1.98.48-4.41.72-7.29.72-3.66 0-6.69-.48-9.09-1.44-2.4-1.02-4.32-2.4-5.76-4.14-1.44-1.8-2.46-3.96-3.06-6.48-.54-2.52-.81-5.31-.81-8.37v-39.78zM254.279 16.8699l13.409-2.16v13.95h16.11v11.16h-16.11v16.65c0 2.82.48 5.07 1.44 6.75 1.02 1.68 3.03 2.52 6.03 2.52 1.44 0 2.91-.12 4.41-.36 1.56-.3 2.97-.69 4.23-1.17l1.891 10.44c-1.62.66-3.421 1.23-5.401 1.71s-4.409.72-7.289.72c-3.66 0-6.691-.48-9.091-1.44-2.4-1.02-4.32-2.4-5.76-4.14-1.44-1.8-2.459-3.96-3.059-6.48-.54-2.52-.81-5.31-.81-8.37v-39.78zM334.028 28.6599c-2.7 9.12-5.52 17.67-8.46 25.65-2.94 7.98-6.15 15.72-9.63 23.22-1.26 2.7-2.52 4.98-3.78 6.84-1.26 1.92-2.64 3.48-4.14 4.68-1.5 1.26-3.21 2.16-5.13 2.7-1.86.6-4.05.9-6.57.9-2.1 0-4.05-.21-5.85-.63-1.74-.36-3.18-.78-4.32-1.26l2.34-10.71c1.38.48 2.61.81 3.69.99 1.08.18 2.22.27 3.42.27 2.4 0 4.23-.66 5.49-1.98 1.32-1.26 2.43-3.03 3.33-5.31-3.06-6-6.12-12.72-9.18-20.16-3.06-7.5-5.94-15.9-8.64-25.2h14.22c.6 2.34 1.29 4.89 2.07 7.65.84 2.7 1.71 5.46 2.61 8.28.9 2.76 1.8 5.46 2.7 8.1.96 2.64 1.86 5.04 2.7 7.2.78-2.16 1.59-4.56 2.43-7.2.84-2.64 1.65-5.34 2.43-8.1.84-2.82 1.62-5.58 2.34-8.28.78-2.76 1.47-5.31 2.07-7.65h13.86z"
fill="#1A202C"
/>
<path d="M5.61825.4114C24.3953-2.95442 43.4551 21.1695 51.21 34.8757v29.6906c-4.8347 14.2497-12.952 19.1401-20.8473 19.362-12.7347.358-22.758-14.27-17.6881-25.9574 2.926-6.7451 8.905-10.1655 13.0016-11.2189C5.61473 45.9161.32294 23.2628.01461 7.98884-.05756 4.41366 2.09844 1.04233 5.61825.4114z" fill="#9E58E9" />
<path d="M96.8018.4114C78.0247-2.95442 58.9649 21.1695 51.21 34.8757v29.6906c4.8347 14.2497 12.952 19.1401 20.8474 19.362 12.7346.358 22.7579-14.27 17.688-25.9574-2.9259-6.7451-8.905-10.1655-13.0015-11.2189 20.0614-.8359 25.3531-23.4892 25.6611-38.76316.073-3.57518-2.083-6.94651-5.6032-7.57744z" fill="#7629C8" />
<path
d="M5.61825.4114C24.3953-2.95442 43.4551 21.1695 51.21 34.8757v29.6906c-4.8347 14.2497-12.952 19.1401-20.8473 19.362-12.7347.358-22.758-14.27-17.6881-25.9574 2.926-6.7451 8.905-10.1655 13.0016-11.2189C5.61473 45.9161.32294 23.2628.01461 7.98884-.05756 4.41366 2.09844 1.04233 5.61825.4114z"
fill="#9E58E9"
/>
<path
d="M96.8018.4114C78.0247-2.95442 58.9649 21.1695 51.21 34.8757v29.6906c4.8347 14.2497 12.952 19.1401 20.8474 19.362 12.7346.358 22.7579-14.27 17.688-25.9574-2.9259-6.7451-8.905-10.1655-13.0015-11.2189 20.0614-.8359 25.3531-23.4892 25.6611-38.76316.073-3.57518-2.083-6.94651-5.6032-7.57744z"
fill="#7629C8"
/>
</svg>
<span class="sr-only">Kutty Home Page</span>
</a>
<p class="mt-5 mb-3 text-xl font-bold text-black md:text-2xl">Page not found (404)</p>
<p class="mb-3 text-base font-medium text-gray-700">The page you're looking for may have moved or no longer exists. Head back to our <a href="#" class="underline">homepage</a>, or take a look at one of the sections below.</p>
<p class="mt-5 mb-3 text-xl font-bold text-black md:text-2xl">
Page not found (404)
</p>
<p class="mb-3 text-base font-medium text-gray-700">
The page you're looking for may have moved or no longer exists. Head back
to our <a href="#" class="underline">homepage</a>, or take a look at one
of the sections below.
</p>
</div>
</section>
{{< /iframe >}}
Expand All @@ -31,18 +50,36 @@
<section class="container px-4 py-32 mx-auto">
<div class="w-full mx-auto lg:w-1/3">
<a href="#" title="Hellonext Home Page" class="flex items-center">
<svg class="w-auto h-6" width="86" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 335 93">
<svg
class="w-auto h-6"
width="86"
height="24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 335 93"
>
<path
d="M134.71 45.7599c1.32-1.44 2.67-2.94 4.05-4.5 1.44-1.56 2.82-3.09 4.14-4.59 1.32-1.56 2.55-3.03 3.69-4.41 1.2-1.38 2.22-2.58 3.06-3.6h15.93c-3.18 3.66-6.3 7.17-9.36 10.53-3 3.3-6.3 6.72-9.9 10.26 1.8 1.62 3.66 3.57 5.58 5.85 1.92 2.22 3.78 4.53 5.58 6.93 1.8 2.4 3.45 4.8 4.95 7.2 1.5 2.4 2.76 4.59 3.78 6.57h-15.39c-.96-1.56-2.07-3.27-3.33-5.13-1.2-1.92-2.49-3.81-3.87-5.67-1.38-1.92-2.85-3.75-4.41-5.49-1.5-1.74-3-3.21-4.5-4.41v20.7H121.3V8.31991l13.41-2.16V45.7599zM209.35 74.3799c-2.28.66-5.22 1.26-8.82 1.8-3.6.6-7.38.9-11.34.9-4.02 0-7.38-.54-10.08-1.62-2.64-1.08-4.74-2.58-6.3-4.5-1.56-1.98-2.67-4.32-3.33-7.02-.66-2.7-.99-5.67-.99-8.91v-26.37h13.41v24.75c0 4.32.57 7.44 1.71 9.36 1.14 1.92 3.27 2.88 6.39 2.88.96 0 1.98-.03 3.06-.09 1.08-.12 2.04-.24 2.88-.36v-36.54h13.41v45.72zM217.888 16.8699l13.41-2.16v13.95h16.11v11.16h-16.11v16.65c0 2.82.48 5.07 1.44 6.75 1.02 1.68 3.03 2.52 6.03 2.52 1.44 0 2.91-.12 4.41-.36 1.56-.3 2.97-.69 4.23-1.17l1.89 10.44c-1.62.66-3.42 1.23-5.4 1.71-1.98.48-4.41.72-7.29.72-3.66 0-6.69-.48-9.09-1.44-2.4-1.02-4.32-2.4-5.76-4.14-1.44-1.8-2.46-3.96-3.06-6.48-.54-2.52-.81-5.31-.81-8.37v-39.78zM254.279 16.8699l13.409-2.16v13.95h16.11v11.16h-16.11v16.65c0 2.82.48 5.07 1.44 6.75 1.02 1.68 3.03 2.52 6.03 2.52 1.44 0 2.91-.12 4.41-.36 1.56-.3 2.97-.69 4.23-1.17l1.891 10.44c-1.62.66-3.421 1.23-5.401 1.71s-4.409.72-7.289.72c-3.66 0-6.691-.48-9.091-1.44-2.4-1.02-4.32-2.4-5.76-4.14-1.44-1.8-2.459-3.96-3.059-6.48-.54-2.52-.81-5.31-.81-8.37v-39.78zM334.028 28.6599c-2.7 9.12-5.52 17.67-8.46 25.65-2.94 7.98-6.15 15.72-9.63 23.22-1.26 2.7-2.52 4.98-3.78 6.84-1.26 1.92-2.64 3.48-4.14 4.68-1.5 1.26-3.21 2.16-5.13 2.7-1.86.6-4.05.9-6.57.9-2.1 0-4.05-.21-5.85-.63-1.74-.36-3.18-.78-4.32-1.26l2.34-10.71c1.38.48 2.61.81 3.69.99 1.08.18 2.22.27 3.42.27 2.4 0 4.23-.66 5.49-1.98 1.32-1.26 2.43-3.03 3.33-5.31-3.06-6-6.12-12.72-9.18-20.16-3.06-7.5-5.94-15.9-8.64-25.2h14.22c.6 2.34 1.29 4.89 2.07 7.65.84 2.7 1.71 5.46 2.61 8.28.9 2.76 1.8 5.46 2.7 8.1.96 2.64 1.86 5.04 2.7 7.2.78-2.16 1.59-4.56 2.43-7.2.84-2.64 1.65-5.34 2.43-8.1.84-2.82 1.62-5.58 2.34-8.28.78-2.76 1.47-5.31 2.07-7.65h13.86z"
fill="#1A202C"
/>
<path d="M5.61825.4114C24.3953-2.95442 43.4551 21.1695 51.21 34.8757v29.6906c-4.8347 14.2497-12.952 19.1401-20.8473 19.362-12.7347.358-22.758-14.27-17.6881-25.9574 2.926-6.7451 8.905-10.1655 13.0016-11.2189C5.61473 45.9161.32294 23.2628.01461 7.98884-.05756 4.41366 2.09844 1.04233 5.61825.4114z" fill="#9E58E9" />
<path d="M96.8018.4114C78.0247-2.95442 58.9649 21.1695 51.21 34.8757v29.6906c4.8347 14.2497 12.952 19.1401 20.8474 19.362 12.7346.358 22.7579-14.27 17.688-25.9574-2.9259-6.7451-8.905-10.1655-13.0015-11.2189 20.0614-.8359 25.3531-23.4892 25.6611-38.76316.073-3.57518-2.083-6.94651-5.6032-7.57744z" fill="#7629C8" />
<path
d="M5.61825.4114C24.3953-2.95442 43.4551 21.1695 51.21 34.8757v29.6906c-4.8347 14.2497-12.952 19.1401-20.8473 19.362-12.7347.358-22.758-14.27-17.6881-25.9574 2.926-6.7451 8.905-10.1655 13.0016-11.2189C5.61473 45.9161.32294 23.2628.01461 7.98884-.05756 4.41366 2.09844 1.04233 5.61825.4114z"
fill="#9E58E9"
/>
<path
d="M96.8018.4114C78.0247-2.95442 58.9649 21.1695 51.21 34.8757v29.6906c4.8347 14.2497 12.952 19.1401 20.8474 19.362 12.7346.358 22.7579-14.27 17.688-25.9574-2.9259-6.7451-8.905-10.1655-13.0015-11.2189 20.0614-.8359 25.3531-23.4892 25.6611-38.76316.073-3.57518-2.083-6.94651-5.6032-7.57744z"
fill="#7629C8"
/>
</svg>
<span class="sr-only">Kutty Home Page</span>
</a>
<p class="mt-5 mb-3 text-xl font-bold text-black md:text-2xl">Internal Server Error (500)</p>
<p class="mb-3 text-base font-medium text-gray-700">Sorry this is not working properly. We know about this issue and we are working to fix it. Thanks for understanding!</p>
<p class="mt-5 mb-3 text-xl font-bold text-black md:text-2xl">
Internal Server Error (500)
</p>
<p class="mb-3 text-base font-medium text-gray-700">
Sorry this is not working properly. We know about this issue and we are
working to fix it. Thanks for understanding!
</p>
</div>
</section>
{{< /iframe >}}
Expand All @@ -52,9 +89,16 @@
{{< iframe html >}}
<section class="container px-4 py-24 mx-auto">
<div class="w-full mx-auto text-center lg:w-2/3">
<h1 class="mb-1 text-6xl font-thin text-gray-900">404</h1>
<p class="mb-3 text-xl font-bold text-gray-900 md:text-2xl">Oh no! We couldn’t find the page you were looking for.</p>
<p class="mb-3 text-lg font-medium text-gray-700">Have questions? Head over to our <a href="#" class="underline">product documentation</a>, visit our <a href="#" class="underline">Community</a> for tutorials and the latest happenings, or go back to the <a href="#" class="underline">homepage</a>.</p>
<h1 class="mb-4 text-6xl font-thin text-gray-900">404</h1>
<p class="mb-3 text-xl font-bold text-gray-900 md:text-2xl">
Oh no! We couldn’t find the page you were looking for.
</p>
<p class="mb-3 text-lg font-medium text-gray-700">
Have questions? Head over to our
<a href="#" class="underline">product documentation</a>, visit our
<a href="#" class="underline">Community</a> for tutorials and the latest
happenings, or go back to the <a href="#" class="underline">homepage</a>.
</p>
</div>
</section>
{{< /iframe >}}
Expand All @@ -64,9 +108,16 @@ <h1 class="mb-1 text-6xl font-thin text-gray-900">404</h1>
{{< iframe html >}}
<section class="container px-4 py-24 mx-auto">
<div class="w-full mx-auto text-center lg:w-2/3">
<h1 class="mb-1 text-6xl font-thin text-gray-900">500</h1>
<p class="mb-3 text-xl font-bold text-gray-900 md:text-2xl">Sorry, our servers have crashed. We are currently working on fixing it.</p>
<p class="mb-3 text-lg font-medium text-gray-700">Try again to in 30 minutes. Have questions? Head over to our <a href="#" class="underline">product documentation</a>, visit our <a href="#" class="underline">Community</a> for tutorials and the latest happenings, or go back to the <a href="#" class="underline">homepage</a>.</p>
<h1 class="mb-4 text-6xl font-thin text-gray-900">500</h1>
<p class="mb-3 text-xl font-bold text-gray-900 md:text-2xl">
Sorry, our servers have crashed. We are currently working on fixing it.
</p>
<p class="mb-3 text-lg font-medium text-gray-700">
Try again to in 30 minutes. Have questions? Head over to our
<a href="#" class="underline">product documentation</a>, visit our
<a href="#" class="underline">Community</a> for tutorials and the latest
happenings, or go back to the <a href="#" class="underline">homepage</a>.
</p>
</div>
</section>
{{< /iframe >}}
Expand All @@ -75,13 +126,29 @@ <h1 class="mb-1 text-6xl font-thin text-gray-900">500</h1>

{{< iframe html >}}
<section class="container px-4 py-24 mx-auto">
<div class="grid items-center w-full grid-cols-1 gap-10 mx-auto md:w-4/5 lg:grid-cols-2 xl:gap-32">
<div
class="grid items-center w-full grid-cols-1 gap-10 mx-auto md:w-4/5 lg:grid-cols-2 xl:gap-32"
>
<div>
<p class="mb-2 text-xs font-semibold tracking-wide text-gray-500 uppercase">Error 404</p>
<h1 class="mb-4 text-2xl font-extrabold leading-tight tracking-tight text-left text-gray-900 md:text-4xl">Oops! The page you're looking for isn't here.</h1>
<p class="mb-5 text-base text-left text-gray-800 md:text-xl">You might have the wrong address, or the page may have moved.</p>
<a href="#" class="w-full mb-2 btn btn-lg btn-light sm:w-auto sm:mb-0">Back to homepage</a>
<a href="#" class="w-full mb-2 btn btn-lg btn-white sm:w-auto sm:mb-0">Contact us</a>
<p
class="mb-2 text-xs font-semibold tracking-wide text-gray-500 uppercase"
>
Error 404
</p>
<h1
class="mb-4 text-2xl font-extrabold leading-tight tracking-tight text-left text-gray-900 md:text-4xl"
>
Oops! The page you're looking for isn't here.
</h1>
<p class="mb-5 text-base text-left text-gray-800 md:text-xl">
You might have the wrong address, or the page may have moved.
</p>
<a href="#" class="w-full mb-2 btn btn-lg btn-light sm:w-auto sm:mb-0"
>Back to homepage</a
>
<a href="#" class="w-full mb-2 btn btn-lg btn-white sm:w-auto sm:mb-0"
>Contact us</a
>
</div>
<div>
<div class="w-full h-full py-48 bg-gray-200 rounded-lg"></div>
Expand Down
Loading

0 comments on commit db7df5c

Please sign in to comment.