diff --git a/.babelrc b/.babelrc index e070296..f9a34ac 100644 --- a/.babelrc +++ b/.babelrc @@ -3,7 +3,7 @@ "@loadable/babel-plugin", ["prismjs", { "languages": ["css", "html", "javascript", "jsx", "tsx"], - "theme": "twilight", + // "theme": "okaidia", "css": true }] ], diff --git a/README.md b/README.md index 55f6414..7b18808 100644 --- a/README.md +++ b/README.md @@ -7,9 +7,9 @@ A collection of popular layouts and patterns made with CSS: * ๐ŸŽ‰No CSS hacks * ๐ŸŽ‰Real use cases * Good practices (coming soon) -* Accessibility (coming soon) +* Accessibility Support (coming soon) -[![CSS Layout](/public/assets/screenshot.png)](https://csslayout.io/) +[![CSS Layout](/public/assets/screenshot.png)](https://csslayout.io) ## Why @@ -23,44 +23,26 @@ They are powered by modern CSS features such as flexbox and grid. They are great starting points to be picked and customized easily for each specific need. By composing them, you can have any possible layout that exists in the real life. -The entire website is powered by - -~~~ javascript -this - .madeWith([react,typescript]) - .then(r => lint(tslint)) - .then(r => lazyLoad(@loadable/component)) - .then(r => optimizeAndBundle(webpack)) - .then(r => exportHtml(react-snap)) - .then(r => deploy(Netlify)) - .then(r => { - expect(r).is(scalableCode); - expect(r).is(superFastWebsite); - expect(r).is(seoFriendly); - }) - .finally(() => {/* Give me 1 star */}) ๐ŸŽ‰ -~~~ - ## Running it on local - Clone the project: -~~~ console +```console $ git clone https://github.com/phuoc-ng/csslayout -~~~ +``` - Install the dependencies: -~~~ console +```console $ cd csslayout $ npm install -~~~ +``` - Run it on the local: -~~~ console +```console $ npm run dev-server -~~~ +``` Visit http://localhost:1234 to see it in action. @@ -70,9 +52,9 @@ PRs are welcomed. If you thing there are any missing useful layouts or patterns, It's important to note that you should run the following command to lint the code: -~~~ console +```console $ npm run lint -~~~ +``` If there is any issue, it will be logged in the `tslint.log` file. @@ -89,52 +71,17 @@ Be my friend on You might be interested in my products: - - - - - - - - - - - - - - - - - - - - - -
-

1 LOC (3.3kโ˜…)

- Favorite JavaScript utilities in single line of code - 		-

Blur Page

- A browser extension to hide sensitive information on a web page - 		-

Check Browsers Support

- A browser extension to check browser compatibility without leaving your tab - 		-

CSS Layout (2.7kโ˜…)

- A collection of popular layouts and patterns made with CSS -
-

Fake Numbers

- Generate fake and valid numbers - 		-

Form Validation

- The best validation library for JavaScript - 		-

HTML DOM (3.1kโ˜…)

- How to manage HTML DOM with vanilla JavaScript - 		-

React PDF Viewer

- A React component to view a PDF document -
-

this VS that

- The differences between ___ and ___ in the front-end development -
+_Products_ +* [Blur Page - A browser extension to hide sensitive information on a web page](https://blur.page) +* [Check Browsers Support - A browser extension to check browser compatibility without leaving your tab](https://checkbrowsers.support") +* [Fake Numbers - Generate fake and valid numbers](https://fakenumbers.io) +* [Form Validation - The best validation library for JavaScript](https://formvalidation.io) +* [React PDF Viewer - A React component to view a PDF document](https://react-pdf-viewer.dev) + +_Resources_ +* [1LOC - Favorite JavaScript utilities in single line of code](https://1loc.dev) +* [CSS Layout - A collection of popular layouts and patterns made with CSS](https://csslayout.io) +* [HTML DOM - How to manage HTML DOM with vanilla JavaScript](https://htmldom.dev) +* [Responsive Design Patterns - A collection of patterns to create a responsive web page](https://responsive.page) +* [Super tiny, quick tips, tricks and best practices of front-end development](https://getfrontend.tips) +* [this VS that - The differences between ___ and ___ in the front-end development](https://thisthat.dev) diff --git a/client/App.tsx b/client/App.tsx index ac222c5..11765c4 100644 --- a/client/App.tsx +++ b/client/App.tsx @@ -1,9 +1,9 @@ /** * A collection of popular layouts and patterns made with CSS (https://csslayout.io) - * (c) 2019 - 2020 Nguyen Huu Phuoc + * (c) 2019 - 2021 Nguyen Huu Phuoc */ -import React from 'react'; +import * as React from 'react'; import { BrowserRouter as Router, Route, Switch as RouteSwitch } from 'react-router-dom'; import './index.css'; diff --git a/client/components/Ad.tsx b/client/components/Ad.tsx index e955ffa..0ba2a5b 100644 --- a/client/components/Ad.tsx +++ b/client/components/Ad.tsx @@ -1,17 +1,17 @@ /** * A collection of popular layouts and patterns made with CSS (https://csslayout.io) - * (c) 2019 - 2020 Nguyen Huu Phuoc + * (c) 2019 - 2021 Nguyen Huu Phuoc */ -import React, { useEffect, useRef } from 'react'; +import * as React from 'react'; import './ad.css'; const Ad: React.FC<{}> = () => { - const containerRef = useRef(null); + const containerRef = React.useRef(null); const source = 'https://cdn.carbonads.com/carbon.js?serve=CE7I6KQL&placement=csslayoutio'; - useEffect(() => { + React.useEffect(() => { // Ignore if the code is reached in snapping mode if (navigator.userAgent === 'ReactSnap') { return; diff --git a/client/components/CoverCard.tsx b/client/components/CoverCard.tsx index 8ff1bbd..350e12d 100644 --- a/client/components/CoverCard.tsx +++ b/client/components/CoverCard.tsx @@ -1,6 +1,6 @@ /** * A collection of popular layouts and patterns made with CSS (https://csslayout.io) - * (c) 2019 - 2020 Nguyen Huu Phuoc + * (c) 2019 - 2021 Nguyen Huu Phuoc */ import * as React from 'react'; diff --git a/client/components/Heading.tsx b/client/components/Heading.tsx index 7df36a5..f402640 100644 --- a/client/components/Heading.tsx +++ b/client/components/Heading.tsx @@ -1,6 +1,6 @@ /** * A collection of popular layouts and patterns made with CSS (https://csslayout.io) - * (c) 2019 - 2020 Nguyen Huu Phuoc + * (c) 2019 - 2021 Nguyen Huu Phuoc */ import * as React from 'react'; diff --git a/client/components/Product.tsx b/client/components/Product.tsx index b20e53d..b430499 100644 --- a/client/components/Product.tsx +++ b/client/components/Product.tsx @@ -1,6 +1,6 @@ /** * A collection of popular layouts and patterns made with CSS (https://csslayout.io) - * (c) 2019 - 2020 Nguyen Huu Phuoc + * (c) 2019 - 2021 Nguyen Huu Phuoc */ import * as React from 'react'; diff --git a/client/components/RelatedPatterns.tsx b/client/components/RelatedPatterns.tsx index 3c441a6..c403b3f 100644 --- a/client/components/RelatedPatterns.tsx +++ b/client/components/RelatedPatterns.tsx @@ -1,9 +1,9 @@ /** * A collection of popular layouts and patterns made with CSS (https://csslayout.io) - * (c) 2019 - 2020 Nguyen Huu Phuoc + * (c) 2019 - 2021 Nguyen Huu Phuoc */ -import React from 'react'; +import * as React from 'react'; import Pattern from '../constants/Pattern'; import CoverCard from './CoverCard'; diff --git a/client/components/SampleCode.tsx b/client/components/SampleCode.tsx index 48a2f83..cafb366 100644 --- a/client/components/SampleCode.tsx +++ b/client/components/SampleCode.tsx @@ -1,6 +1,6 @@ /** * A collection of popular layouts and patterns made with CSS (https://csslayout.io) - * (c) 2019 - 2020 Nguyen Huu Phuoc + * (c) 2019 - 2021 Nguyen Huu Phuoc */ import * as React from 'react'; @@ -19,15 +19,6 @@ const SampleCode: React.FC = ({ code, fullHeight = false, lang : ( 
             );
diff --git a/client/components/ad.css b/client/components/ad.css
index 56bd52c..89b7ee0 100644
--- a/client/components/ad.css
+++ b/client/components/ad.css
@@ -1,6 +1,6 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
 #carbonads {
diff --git a/client/components/coverCard.css b/client/components/coverCard.css
index bdf6c0f..2247ed7 100644
--- a/client/components/coverCard.css
+++ b/client/components/coverCard.css
@@ -1,17 +1,17 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
 .cover {
     align-items: center;
-    color: var(--text-color);
+    color: var(--color-gray-9);
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     padding: 1rem;
     text-decoration: none;
-    width: 50%;
+    width: 7rem;
 }
 .cover__name {
     font-weight: normal;
@@ -20,18 +20,8 @@
     text-align: center;
 }
 
-@media (min-width: 640px) {
-    .cover {
-        width: 25%;
-    }
-}
 @media (min-width: 768px) {
     .cover {
-        width: 20%;
+        width: 8rem;
     }
 }
-@media (min-width: 1024px) {
-    .cover {
-        width: 16.666666666666668%;
-    }
-}
\ No newline at end of file
diff --git a/client/components/heading.css b/client/components/heading.css
index 0cd9a45..11077a6 100644
--- a/client/components/heading.css
+++ b/client/components/heading.css
@@ -1,9 +1,10 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
 .heading {
+    color: var(--color-gray-9);
     display: grid;
     font-size: 2rem;
     grid-template-columns: 1fr auto 1fr;
@@ -13,6 +14,6 @@
 .heading::before,
 .heading::after {
     align-self: center;
-    border-top: 0.25rem double var(--text-color);
+    border-top: 0.25rem double var(--color-gray-9);
     content: '';
 }
diff --git a/client/components/product.css b/client/components/product.css
index cfa8ca5..04bac91 100644
--- a/client/components/product.css
+++ b/client/components/product.css
@@ -1,6 +1,6 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
 .product {
diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index 24e1d8f..4a8484b 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -1,6 +1,6 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
 enum Pattern {
diff --git a/client/constants/ProductList.ts b/client/constants/ProductList.ts
index 351ae48..ef4006a 100644
--- a/client/constants/ProductList.ts
+++ b/client/constants/ProductList.ts
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
+ */
+
 import ProductModel from './ProductModel';
 
 const ProductList: ProductModel[] = [
diff --git a/client/constants/ProductModel.ts b/client/constants/ProductModel.ts
index 1087385..fbb1b99 100644
--- a/client/constants/ProductModel.ts
+++ b/client/constants/ProductModel.ts
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
+ */
+
 export default interface ProductModel {
     name: string;
     url: string;
diff --git a/client/helpers/chunk.ts b/client/helpers/chunk.ts
index a9fcf68..e90cfd5 100644
--- a/client/helpers/chunk.ts
+++ b/client/helpers/chunk.ts
@@ -1,6 +1,6 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
 function chunk(arr: T[], size: number): T[][] {
diff --git a/client/helpers/highlight.ts b/client/helpers/highlight.ts
index 6378ef0..abd0271 100755
--- a/client/helpers/highlight.ts
+++ b/client/helpers/highlight.ts
@@ -1,6 +1,6 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
 import Prism from 'prismjs';
diff --git a/client/helpers/random.ts b/client/helpers/random.ts
index 218a852..d1ca7fe 100644
--- a/client/helpers/random.ts
+++ b/client/helpers/random.ts
@@ -1,6 +1,6 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
 const random = (min: number, max: number) => min + Math.round(Math.random() * (max - min));
diff --git a/client/helpers/randomFromArray.ts b/client/helpers/randomFromArray.ts
index 97a484e..af9da8c 100644
--- a/client/helpers/randomFromArray.ts
+++ b/client/helpers/randomFromArray.ts
@@ -1,6 +1,6 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
 function randomFromArray(array: T[]): T {
diff --git a/client/helpers/randomIterms.ts b/client/helpers/randomIterms.ts
index 72d814a..c0a4813 100644
--- a/client/helpers/randomIterms.ts
+++ b/client/helpers/randomIterms.ts
@@ -1,6 +1,6 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
 type Tuple = [number, T[]];
diff --git a/client/helpers/shuffe.ts b/client/helpers/shuffe.ts
index 5fcafe3..eb53299 100644
--- a/client/helpers/shuffe.ts
+++ b/client/helpers/shuffe.ts
@@ -1,6 +1,6 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
 const shuffe = (array: number[]) => {
diff --git a/client/helpers/slug.ts b/client/helpers/slug.ts
index 5b71b1e..41fb445 100644
--- a/client/helpers/slug.ts
+++ b/client/helpers/slug.ts
@@ -1,6 +1,6 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
 const slug = (item: string) => item.toLowerCase().split(' ').join('-');
diff --git a/client/hooks/useDocumentTitle.ts b/client/hooks/useDocumentTitle.ts
index 6d85055..aa373d6 100644
--- a/client/hooks/useDocumentTitle.ts
+++ b/client/hooks/useDocumentTitle.ts
@@ -1,12 +1,12 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
-import { useEffect } from 'react';
+import * as React from 'react';
 
 const useDocumentTitle = (title: string) => {
-    useEffect(() => {
+    React.useEffect(() => {
         document.title = title;
     }, [title]);
 };
diff --git a/client/hooks/useInterval.ts b/client/hooks/useInterval.ts
index 3232a5e..7848f28 100644
--- a/client/hooks/useInterval.ts
+++ b/client/hooks/useInterval.ts
@@ -1,6 +1,6 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
 import { useEffect } from 'react';
diff --git a/client/index.css b/client/index.css
index aa22d62..99e0e27 100644
--- a/client/index.css
+++ b/client/index.css
@@ -1,11 +1,15 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
 :root {
     --background-color: #e7d900;
-    --text-color: #1e1d6e;
+    --color-blue-6: #2563EB;
+    --color-gray-2: #E5E7EB;
+    --color-gray-5: #6B7280;
+    --color-gray-8: #27272A;
+    --color-gray-9: #111827;
 } 
 body {
     font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -22,6 +26,7 @@ a {
 .container {
     margin: 0 auto;
     max-width: 64rem;
+    padding: 0 1rem;
 }
 .content {
     display: flex;
@@ -43,34 +48,102 @@ a {
 
 /* Hero */
 .hero {
+    --current-background-color: var(--background-color);
     background: var(--background-color);
     display: flex;
     justify-content: center;
-    padding-bottom: 2rem;
+    padding-bottom: 1rem;
 }
 .hero__logo {
     display: flex;
     justify-content: center;
 }
 .hero__logo img {
-    height: 16rem;
+    height: 12rem;
     object-fit: cover;
-    width: 24rem;
+    width: 20rem;
 }
 .hero__heading {
-    color: var(--text-color);
-    font-size: 3rem;
-    margin: 2rem 0;
+    color: var(--color-gray-9);
+    font-size: 2rem;
+    line-height: 1.5;
     text-align: center;
     text-transform: capitalize;
 }
 .hero__subheading {
-    color: var(--text-color);
-    font-size: 2rem;
-    margin: 2rem 0;
+    color: var(--color-gray-9);
+    font-size: 1.5rem;
+    line-height: 1.5;
     text-align: center;
 }
 
+/*
+Prism theme
+Credit to https://github.com/tailwindlabs/tailwindcss.com/blob/master/src/css/prism.css
+*/
+pre {
+    background: var(--color-gray-8);
+    border: none;
+    border-radius: 0px;
+    box-shadow: none;
+    color: #FFF;
+    font-family: "Source Code Pro", monospace;
+    font-size: 1.25rem;
+    height: 100%;
+    line-height: 1.5;
+    margin: 0px;
+    overflow: auto;
+    padding: 1rem;
+}
+
+.token.tag,
+.token.class-name,
+.token.selector,
+.token.selector .class,
+.token.function {
+    color: #E879F9;
+}
+
+.token.attr-name,
+.token.keyword,
+.token.rule,
+.token.operator,
+.token.pseudo-class,
+.token.important {
+    color: #22D3EE;
+}
+
+.token.attr-value,
+.token.class,
+.token.string,
+.token.number,
+.token.unit,
+.token.color {
+    color: #BEF264;
+}
+
+.token.punctuation,
+.token.module,
+.token.property {
+    color: #BAE6FD;
+}
+
+.token.atapply .token:not(.rule):not(.important) {
+    color: inherit;
+}
+
+.language-shell .token:not(.comment) {
+    color: inherit;
+}
+
+.language-css .token.function {
+    color: inherit;
+}
+
+.token.comment {
+    color: #A1A1AA;
+}
+
 /* Responsive */
 @media (min-width: 640px) {
     .sidebar {
diff --git a/client/index.html b/client/index.html
index 7bc0488..f1ed7da 100644
--- a/client/index.html
+++ b/client/index.html
@@ -4,6 +4,19 @@
     CSS layout
     
     
+    
+
+    
+    
+    
+    
+    
+
+    
+    
+    
+    
+    
 
     
     
diff --git a/client/index.tsx b/client/index.tsx
index 8dc57f6..003af80 100644
--- a/client/index.tsx
+++ b/client/index.tsx
@@ -1,9 +1,9 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
-import React from 'react';
+import * as React from 'react';
 import { hydrate, render } from 'react-dom';
 
 import App from './App';
diff --git a/client/layouts/DetailsLayout.tsx b/client/layouts/DetailsLayout.tsx
index d7aa50d..78a1e69 100644
--- a/client/layouts/DetailsLayout.tsx
+++ b/client/layouts/DetailsLayout.tsx
@@ -1,6 +1,6 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
 import * as React from 'react';
diff --git a/client/layouts/Footer.tsx b/client/layouts/Footer.tsx
index 7994613..caabde2 100644
--- a/client/layouts/Footer.tsx
+++ b/client/layouts/Footer.tsx
@@ -1,6 +1,6 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
 import * as React from 'react';
diff --git a/client/layouts/Header.tsx b/client/layouts/Header.tsx
index 49f9379..aa1317c 100644
--- a/client/layouts/Header.tsx
+++ b/client/layouts/Header.tsx
@@ -1,6 +1,6 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
 import * as React from 'react';
diff --git a/client/layouts/Layout.tsx b/client/layouts/Layout.tsx
index e028996..0633eb8 100644
--- a/client/layouts/Layout.tsx
+++ b/client/layouts/Layout.tsx
@@ -1,6 +1,6 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
 import * as React from 'react';
diff --git a/client/layouts/footer.css b/client/layouts/footer.css
index 279d937..2457bdf 100644
--- a/client/layouts/footer.css
+++ b/client/layouts/footer.css
@@ -1,8 +1,14 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
+ */
+
 .footer {
-    padding: 2rem 0 4rem 0;
+    padding: 2rem 0;
 }
 .footer__about {
-    border-bottom: 1px solid var(--text-color);
+    border-bottom: 1px solid var(--color-gray-2);
+    color: var(--color-gray-9);
     display: flex;
     margin-bottom: 1rem;
     padding-bottom: 1rem;
@@ -12,10 +18,9 @@
 }
 .footer__social {
     margin-left: 0.5rem;
-    color: var(--text-color);
+    color: var(--color-gray-5);
 }
 .footer__grid {
-    display: flex;
     margin-left: -1rem;
     margin-right: -1rem;
 }
@@ -33,5 +38,10 @@
     margin: 0.25rem 0;
 }
 .footer__product a {
-    color: var(--text-color);
+    color: var(--color-gray-5);
+}
+@media (min-width: 640px) {
+    .footer__grid {
+        display: flex;
+    }
 }
\ No newline at end of file
diff --git a/client/layouts/header.css b/client/layouts/header.css
index d72aa4a..68b06d6 100644
--- a/client/layouts/header.css
+++ b/client/layouts/header.css
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
+ */
+
 .header {
     background-color: var(--background-color);
 }
@@ -11,6 +16,6 @@
     margin-right: auto;
 }
 .header__nav a {
-    color: var(--text-color);
+    color: var(--color-gray-9);
     margin-left: 1rem;
 }
\ No newline at end of file
diff --git a/client/loaders/CoverLoader.tsx b/client/loaders/CoverLoader.tsx
index b8949e4..af6ee25 100644
--- a/client/loaders/CoverLoader.tsx
+++ b/client/loaders/CoverLoader.tsx
@@ -1,6 +1,6 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
 import loadable, { LoadableComponent } from '@loadable/component';
diff --git a/client/loaders/DetailsLoader.tsx b/client/loaders/DetailsLoader.tsx
index 2c281f5..1657d98 100644
--- a/client/loaders/DetailsLoader.tsx
+++ b/client/loaders/DetailsLoader.tsx
@@ -1,10 +1,10 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
 import loadable, { LoadableComponent } from '@loadable/component';
-import React from 'react';
+import * as React from 'react';
 
 import './spinner.css';
 
diff --git a/client/loaders/spinner.css b/client/loaders/spinner.css
index bf22435..bc6cea3 100644
--- a/client/loaders/spinner.css
+++ b/client/loaders/spinner.css
@@ -1,6 +1,6 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
 .spinner {
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index 318b0c8..22063a4 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -1,9 +1,9 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
-import React from 'react';
+import * as React from 'react';
 import { Helmet } from 'react-helmet';
 
 import Ad from '../components/Ad';
diff --git a/client/pages/HomePage.tsx b/client/pages/HomePage.tsx
index 7fd1bff..0eac96b 100644
--- a/client/pages/HomePage.tsx
+++ b/client/pages/HomePage.tsx
@@ -1,6 +1,6 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
 import * as React from 'react';
@@ -40,22 +40,44 @@ const HomePage = () => {
             

                 

                     

-                        
Zero Dependencies

+                        

+                            
+                        

+                        

+                            Zero Dependencies
+                        

                     

                     

+                        

+                            
+                        

                         
No Frameworks

                     

                     

-                        
No CSS Hacks

+                        

+                            
+                        

+                        

+                            No CSS Hacks
+                        

                     

                     

+                        

+                            
+                        

                         
Real Use Cases

                     

                     

-                        
Good Practices

+                        

+                            
+                        

+                        
Good Practices 
soon

                     

                     

-                        
Accessibility

+                        

+                            
+                        

+                        
Accessibility Support 
soon

                     

                 

 
diff --git a/client/pages/PatternPage.tsx b/client/pages/PatternPage.tsx
index 1e25b86..5b6bcb8 100644
--- a/client/pages/PatternPage.tsx
+++ b/client/pages/PatternPage.tsx
@@ -1,9 +1,9 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
-import React from 'react';
+import * as React from 'react';
 
 import Pattern from '../constants/Pattern';
 import DetailsLoader from '../loaders/DetailsLoader';
diff --git a/client/pages/explorePage.css b/client/pages/explorePage.css
index 1f9901c..5f4b5a8 100644
--- a/client/pages/explorePage.css
+++ b/client/pages/explorePage.css
@@ -1,6 +1,6 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
 .explore__collection {
diff --git a/client/pages/homePage.css b/client/pages/homePage.css
index edc4381..50504da 100644
--- a/client/pages/homePage.css
+++ b/client/pages/homePage.css
@@ -1,6 +1,6 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
  
 .home__features {
@@ -10,19 +10,18 @@
     max-width: 48rem;
 }
 .home__feature {
-    padding: 2rem;
+    padding: 1rem;
     text-align: center;
-    width: 33.333%;
+    width: 50%;
 }
-.home__feature:not(:nth-child(3n)) {
-    border-right: 1px solid var(--text-color);
-}
-.home__feature:nth-child(-n+3) {
-    border-bottom: 1px solid var(--text-color);
+.home__icon {
+    color: var(--color-blue-6);
+    margin-bottom: 1rem;
 }
 .home__title {
-    font-size: 2rem;
-    font-weight: 500;
+    color: var(--color-gray-5);
+    font-size: 1.5rem;
+    font-weight: 600;
 }
 
 .home__patterns {
@@ -44,6 +43,7 @@
     z-index: 10;
 }
 .home__heading {
+    color: var(--color-gray-9);
     font-size: 4rem;
     font-weight: 600;
     margin-bottom: 1rem;
@@ -51,17 +51,19 @@
 .home__explore {
     background-color: var(--background-color);
     border-radius: 0.4rem;
-    color: var(--text-color);
-    font-size: 2rem;
+    color: var(--color-gray-9);
+    font-size: 1.5rem;
+    font-weight: 600;
     padding: 1rem 2rem;
 }
 
 .home__sliders {
     align-items: center;
     display: flex;
+    flex-direction: column;
     flex-wrap: nowrap;
+    height: 180rem;
     opacity: 0.4;
-    width: 192rem;
 }
 .home__slide {
     animation: slide 20s linear infinite;
@@ -69,15 +71,23 @@
     flex-wrap: wrap;
     height: 60rem;
     justify-content: center;
-    width: 64rem;
+    width: 60rem;
     will-change: transform;
 }
 
+.home__soon {
+    background: #1e1d6e;
+    border-radius: 9999px;
+    color: #fff;
+    display: inline-block;
+    padding: 0.125rem 1rem;
+}
+
 @keyframes slide {
     from {
-        transform: translateX(0);
+        transform: translateY(0);
     }
     to {
-        transform: translateX(-100%);
+        transform: translateY(-100%);
     }
 }
diff --git a/client/patterns/accordion/Cover.tsx b/client/patterns/accordion/Cover.tsx
index 301108a..695a2ab 100644
--- a/client/patterns/accordion/Cover.tsx
+++ b/client/patterns/accordion/Cover.tsx
@@ -1,9 +1,9 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
-import React from 'react';
+import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
 import Line from '../../placeholders/Line';
diff --git a/client/patterns/accordion/Details.tsx b/client/patterns/accordion/Details.tsx
index 0903b21..ca70dc2 100644
--- a/client/patterns/accordion/Details.tsx
+++ b/client/patterns/accordion/Details.tsx
@@ -1,9 +1,9 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
-import React, { useState } from 'react';
+import * as React from 'react';
 import { Helmet } from 'react-helmet';
 
 import RelatedPatterns from '../../components/RelatedPatterns';
@@ -20,7 +20,7 @@ interface ItemProps {
 }
 
 const Details: React.FC<{}> = () => {
-    const [activeItem, setActiveItem] = useState(1);
+    const [activeItem, setActiveItem] = React.useState(1);
 
     const Item: React.FC = ({ index, title, children }) => {
         const isOpened = (index === activeItem);
@@ -66,22 +66,22 @@ const Details: React.FC<{}> = () => {
                 
-

+

     
-    

+    

         
-        

+        

             
-            
...

+            
...

 
             
-            

+            

                 ...
             

         

 
         
-        

+        

             ...
         

     

@@ -91,18 +91,18 @@ html={`
 

 `}
 css={`
-.container {
+.accordion {
     /* Border */
     border: 1px solid rgba(0, 0, 0, 0.3);
     border-bottom-color: transparent;
     border-radius: 4px;
 }
 
-.item {
+.accordion__item {
     border-bottom: 1px solid rgba(0, 0, 0, 0.3);
 }
 
-.header {
+.accordion__header {
     /* Center the content horizontally */
     align-items: center;
     display: flex;
@@ -110,22 +110,25 @@ css={`
     cursor: pointer;
     padding: 16px;
 }
-.toggle {
+
+.accordion__toggle {
     margin-right: 12px;
 }
-.title {
+
+.accordion__title {
     /* Take remaining width */
     flex: 1;
 }
 
-.content {
+.accordion__content {
     /* For not selected item */
     display: none;
 
     border-top: 1px solid rgba(0, 0, 0, 0.3);
     padding: 16px;
 }
-.content.selected {
+
+.accordion__content--selected {
     /* For selected item */
     display: block;
 }
diff --git a/client/patterns/arrow-buttons/Cover.tsx b/client/patterns/arrow-buttons/Cover.tsx
index 8635c58..ab61a6e 100644
--- a/client/patterns/arrow-buttons/Cover.tsx
+++ b/client/patterns/arrow-buttons/Cover.tsx
@@ -1,9 +1,9 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
-import React from 'react';
+import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
 
@@ -23,7 +23,6 @@ const Cover: React.FC<{}> = () => {
                 

                     
 = () => {
                     />
                     
 = () => {
                     />
                     
 = () => {
                     />
                     

+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
-import React from 'react';
+import * as React from 'react';
 import { Helmet } from 'react-helmet';
 
 import RelatedPatterns from '../../components/RelatedPatterns';
@@ -22,43 +22,43 @@ const Details: React.FC<{}> = () => {
                 
-
 
 
-
 
 
-
 
 
-
 `}
 css={`
-.container {
+.button {
     /* Center the content */
     align-items: center;
     display: flex;
@@ -68,7 +68,7 @@ css={`
     padding: 8px;
 }
 
-.container__arrow {
+.button__arrow {
     /* Transparent background */
     background-color: transparent;
 
@@ -77,28 +77,28 @@ css={`
     width: 12px;
 }
 
-.container__arrow--up {
+.button__arrow--up {
     /* Edges */
     border-left: 1px solid rgba(0, 0, 0, 0.3);
     border-top: 1px solid rgba(0, 0, 0, 0.3);
     transform: translateY(25%) rotate(45deg);
 }
 
-.container__arrow--right {
+.button__arrow--right {
     /* Edges */
     border-right: 1px solid rgba(0, 0, 0, 0.3);
     border-top: 1px solid rgba(0, 0, 0, 0.3);
     transform: translateX(-25%) rotate(45deg);
 }
 
-.container__arrow--down {
+.button__arrow--down {
     /* Edges */
     border-bottom: 1px solid rgba(0, 0, 0, 0.3);
     border-right: 1px solid rgba(0, 0, 0, 0.3);
     transform: translateY(-25%) rotate(45deg);
 }
 
-.container__arrow--left {
+.button__arrow--left {
     /* Edges */
     border-bottom: 1px solid rgba(0, 0, 0, 0.3);
     border-left: 1px solid rgba(0, 0, 0, 0.3);
diff --git a/client/patterns/avatar-list/Cover.tsx b/client/patterns/avatar-list/Cover.tsx
index d5df4fd..787b8b7 100644
--- a/client/patterns/avatar-list/Cover.tsx
+++ b/client/patterns/avatar-list/Cover.tsx
@@ -1,9 +1,9 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
-import React from 'react';
+import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
 
diff --git a/client/patterns/avatar-list/Details.tsx b/client/patterns/avatar-list/Details.tsx
index 4d13158..c6be124 100644
--- a/client/patterns/avatar-list/Details.tsx
+++ b/client/patterns/avatar-list/Details.tsx
@@ -1,9 +1,9 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
-import React from 'react';
+import * as React from 'react';
 import { Helmet } from 'react-helmet';
 
 import RelatedPatterns from '../../components/RelatedPatterns';
@@ -41,10 +41,10 @@ const Details: React.FC<{}> = () => {
             

                 
+

     
-    

-        

+    

+        

             
             ...
         

@@ -55,16 +55,16 @@ html={`
 

 `}
 css={`
-.container {
+.avatars {
     display: flex;
 }
 
-.container__item {
+.avatars__item {
     /* Nagative margin make avatar overlap to previous one */
     margin-left: -4px;
 }
 
-.container__avatar {
+.avatars__image {
     /* Add a white curve between avatars */
     box-shadow: 0 0 0 4px #FFF;
 
diff --git a/client/patterns/avatar/Cover.tsx b/client/patterns/avatar/Cover.tsx
index a8d72f7..ae747f5 100644
--- a/client/patterns/avatar/Cover.tsx
+++ b/client/patterns/avatar/Cover.tsx
@@ -1,9 +1,9 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
-import React from 'react';
+import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
 
diff --git a/client/patterns/avatar/Details.tsx b/client/patterns/avatar/Details.tsx
index 3a67f0d..82b8c55 100644
--- a/client/patterns/avatar/Details.tsx
+++ b/client/patterns/avatar/Details.tsx
@@ -1,9 +1,9 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
-import React from 'react';
+import * as React from 'react';
 import { Helmet } from 'react-helmet';
 
 import RelatedPatterns from '../../components/RelatedPatterns';
@@ -21,20 +21,20 @@ const Details: React.FC<{}> = () => {
             

                 
+

     
-    
+    
 

 `}
 css={`
-.container {
+.avatar {
     /* Rounded border */
     border-radius: 50%;
     height: 64px;
     width: 64px;
 }
 
-.container__avatar {
+.avatar__image {
     /* Rounded border */
     border-radius: 50%;
 
diff --git a/client/patterns/badge/Cover.tsx b/client/patterns/badge/Cover.tsx
index ae42b08..12ba360 100644
--- a/client/patterns/badge/Cover.tsx
+++ b/client/patterns/badge/Cover.tsx
@@ -1,9 +1,9 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
-import React from 'react';
+import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
 
diff --git a/client/patterns/badge/Details.tsx b/client/patterns/badge/Details.tsx
index bff571e..68717bb 100644
--- a/client/patterns/badge/Details.tsx
+++ b/client/patterns/badge/Details.tsx
@@ -1,9 +1,9 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
-import React from 'react';
+import * as React from 'react';
 import { Helmet } from 'react-helmet';
 
 import RelatedPatterns from '../../components/RelatedPatterns';
@@ -21,12 +21,12 @@ const Details: React.FC<{}> = () => {
             

                 
+

     ...
 

 `}
 css={`
-.container {
+.badge {
     /* Center the content */
     align-items: center;
     display: flex;
diff --git a/client/patterns/breadcrumb/Cover.tsx b/client/patterns/breadcrumb/Cover.tsx
index 8cd0fe4..e739b09 100644
--- a/client/patterns/breadcrumb/Cover.tsx
+++ b/client/patterns/breadcrumb/Cover.tsx
@@ -1,9 +1,9 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
-import React from 'react';
+import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
 import Rectangle from '../../placeholders/Rectangle';
diff --git a/client/patterns/breadcrumb/Details.tsx b/client/patterns/breadcrumb/Details.tsx
index 909f2df..d3936c1 100644
--- a/client/patterns/breadcrumb/Details.tsx
+++ b/client/patterns/breadcrumb/Details.tsx
@@ -1,9 +1,9 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
-import React from 'react';
+import * as React from 'react';
 import { Helmet } from 'react-helmet';
 import Pattern from '../../constants/Pattern';
 
@@ -21,24 +21,25 @@ const Details: React.FC<{}> = () => {
             

                 
+

     
     ...
 
     
-    
/

+    
/

 
     
     ...
 

 `}
 css={`
-.container {
+.breadcrumb {
     /* Content is centered vertically */
     align-items: center;
     display: flex;
 }
-.separator {
+
+.breadcrumb__separator {
     margin: 0 8px;
 }
 `}
diff --git a/client/patterns/button-with-icon/Cover.tsx b/client/patterns/button-with-icon/Cover.tsx
index 49f9308..b37d4b0 100644
--- a/client/patterns/button-with-icon/Cover.tsx
+++ b/client/patterns/button-with-icon/Cover.tsx
@@ -1,9 +1,9 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
-import React from 'react';
+import * as React from 'react';
 
 import Circle from '../../placeholders/Circle';
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/button-with-icon/Details.tsx b/client/patterns/button-with-icon/Details.tsx
index a5f7f13..40ae1da 100644
--- a/client/patterns/button-with-icon/Details.tsx
+++ b/client/patterns/button-with-icon/Details.tsx
@@ -1,9 +1,9 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
-import React from 'react';
+import * as React from 'react';
 import { Helmet } from 'react-helmet';
 import Pattern from '../../constants/Pattern';
 
diff --git a/client/patterns/card-layout/Cover.tsx b/client/patterns/card-layout/Cover.tsx
index d677878..53147b4 100644
--- a/client/patterns/card-layout/Cover.tsx
+++ b/client/patterns/card-layout/Cover.tsx
@@ -1,9 +1,9 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
-import React from 'react';
+import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
 import Rectangle from '../../placeholders/Rectangle';
diff --git a/client/patterns/card-layout/Details.tsx b/client/patterns/card-layout/Details.tsx
index b902871..cc9941c 100644
--- a/client/patterns/card-layout/Details.tsx
+++ b/client/patterns/card-layout/Details.tsx
@@ -1,9 +1,9 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
-import React from 'react';
+import * as React from 'react';
 import { Helmet } from 'react-helmet';
 
 import RelatedPatterns from '../../components/RelatedPatterns';
@@ -22,9 +22,9 @@ const Details: React.FC<{}> = () => {
             

                 
+

     
-    

+    

         ...
     

 
@@ -33,7 +33,7 @@ html={`
 

 `}
 css={`
-.container {
+.cards {
     display: flex;
 
     /* Put a card in the next row when previous cards take all width */
@@ -42,7 +42,8 @@ css={`
     margin-left: -8px;
     margin-right: -8px;
 }
-.card {
+
+.cards__item {
     /* There will be 4 cards per row */
     flex-basis: 25%;
 
diff --git a/client/patterns/card/Cover.tsx b/client/patterns/card/Cover.tsx
index 5b7ac49..57b798d 100644
--- a/client/patterns/card/Cover.tsx
+++ b/client/patterns/card/Cover.tsx
@@ -1,9 +1,9 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
-import React from 'react';
+import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
 import Line from '../../placeholders/Line';
diff --git a/client/patterns/card/Details.tsx b/client/patterns/card/Details.tsx
index 5a059a3..a404daa 100644
--- a/client/patterns/card/Details.tsx
+++ b/client/patterns/card/Details.tsx
@@ -1,9 +1,9 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
-import React from 'react';
+import * as React from 'react';
 import { Helmet } from 'react-helmet';
 
 import RelatedPatterns from '../../components/RelatedPatterns';
@@ -23,31 +23,31 @@ const Details: React.FC<{}> = () => {
             

                 
+

     
-    

+    

         ...
     

 
     
-    

+    

         ...
     

     ...
 

 `}
 css={`
-.container {
+.card {
     display: flex;
     flex-direction: column;
 }
 
-.container__cover {
+.card__cover {
     height: 150px;
     width: 100%;
 }
 
-.container__content {
+.card__content {
     /* Take available height */
     flex: 1;
 }
diff --git a/client/patterns/centering/Cover.tsx b/client/patterns/centering/Cover.tsx
index b72fb6b..220f727 100644
--- a/client/patterns/centering/Cover.tsx
+++ b/client/patterns/centering/Cover.tsx
@@ -1,9 +1,9 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
-import React from 'react';
+import * as React from 'react';
 
 import Circle from '../../placeholders/Circle';
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/centering/Details.tsx b/client/patterns/centering/Details.tsx
index 8b6b7b3..1a32c80 100644
--- a/client/patterns/centering/Details.tsx
+++ b/client/patterns/centering/Details.tsx
@@ -1,9 +1,9 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
-import React from 'react';
+import * as React from 'react';
 import { Helmet } from 'react-helmet';
 import Pattern from '../../constants/Pattern';
 
diff --git a/client/patterns/chip/Cover.tsx b/client/patterns/chip/Cover.tsx
index 5893dc5..6bea894 100644
--- a/client/patterns/chip/Cover.tsx
+++ b/client/patterns/chip/Cover.tsx
@@ -1,9 +1,9 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
-import React from 'react';
+import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
 import Rectangle from '../../placeholders/Rectangle';
diff --git a/client/patterns/chip/Details.tsx b/client/patterns/chip/Details.tsx
index dcbfa90..7d5fb20 100644
--- a/client/patterns/chip/Details.tsx
+++ b/client/patterns/chip/Details.tsx
@@ -1,9 +1,9 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
-import React from 'react';
+import * as React from 'react';
 import { Helmet } from 'react-helmet';
 import { Link } from 'react-router-dom';
 
diff --git a/client/patterns/chip/InputChip.tsx b/client/patterns/chip/InputChip.tsx
index 9e1568b..ea8748d 100644
--- a/client/patterns/chip/InputChip.tsx
+++ b/client/patterns/chip/InputChip.tsx
@@ -1,9 +1,9 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
-import React from 'react';
+import * as React from 'react';
 
 const InputChip: React.FC<{}> = ({ children }) => {
     return (
diff --git a/client/patterns/circular-navigation/Cover.tsx b/client/patterns/circular-navigation/Cover.tsx
index a51b9cd..cbca4a2 100644
--- a/client/patterns/circular-navigation/Cover.tsx
+++ b/client/patterns/circular-navigation/Cover.tsx
@@ -1,9 +1,9 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
-import React from 'react';
+import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
 
diff --git a/client/patterns/circular-navigation/Details.tsx b/client/patterns/circular-navigation/Details.tsx
index 4249049..1122c9c 100644
--- a/client/patterns/circular-navigation/Details.tsx
+++ b/client/patterns/circular-navigation/Details.tsx
@@ -1,9 +1,9 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
-import React from 'react';
+import * as React from 'react';
 import { Helmet } from 'react-helmet';
 import Pattern from '../../constants/Pattern';
 
@@ -57,15 +57,14 @@ const Details: React.FC<{}> = () => {
             

                 
+

     
     ...
 
     
-    

-        
-        

-            
+    

+        
+        
            
             ...
         

     

@@ -75,10 +74,11 @@ html={`
 

 `}
 css={`
-.container {
+.navigation {
     position: relative;
 }
-.item {
+
+.navigation__circle {
     /* Position */
     position: absolute;
     top: 0;
@@ -95,7 +95,8 @@ css={`
     height: 32px;
     width: 32px;
 }
-.inner {
+
+.navigation__content {
     /*
     Rotate it to make it displayed vertically
     Replace -0deg with -60deg, -180deg, -240deg, -300deg for another item
diff --git a/client/patterns/close-button/Cover.tsx b/client/patterns/close-button/Cover.tsx
index 8ee2851..04d173a 100644
--- a/client/patterns/close-button/Cover.tsx
+++ b/client/patterns/close-button/Cover.tsx
@@ -1,9 +1,9 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
-import React from 'react';
+import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
 
diff --git a/client/patterns/close-button/Details.tsx b/client/patterns/close-button/Details.tsx
index 6365d41..4468587 100644
--- a/client/patterns/close-button/Details.tsx
+++ b/client/patterns/close-button/Details.tsx
@@ -1,9 +1,9 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
-import React from 'react';
+import * as React from 'react';
 import { Helmet } from 'react-helmet';
 
 import RelatedPatterns from '../../components/RelatedPatterns';
@@ -21,14 +21,14 @@ const Details: React.FC<{}> = () => {
             

                 
-    

+
 `}
 css={`
-.container {
+.button {
     /* Reset */
     background-color: transparent;
     border-color: transparent;
@@ -44,7 +44,7 @@ css={`
     position: relative;
 }
 
-.container__line {
+.button__line {
     /* Background color */
     background-color: rgba(0, 0, 0, 0.3);
 
@@ -56,7 +56,7 @@ css={`
     width: 100%;
 }
 
-.container__line--first {
+.button__line--first {
     /* Position */
     left: 0px;
     top: 50%;
@@ -67,7 +67,7 @@ css={`
     width: 100%;
 }
 
-.container__line--second {
+.button__line--second {
     /* Position */
     left: 50%;
     top: 0px;
diff --git a/client/patterns/cookie-banner/Cover.tsx b/client/patterns/cookie-banner/Cover.tsx
index df51b4f..f8a9841 100644
--- a/client/patterns/cookie-banner/Cover.tsx
+++ b/client/patterns/cookie-banner/Cover.tsx
@@ -1,9 +1,9 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
-import React from 'react';
+import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
 import Line from '../../placeholders/Line';
diff --git a/client/patterns/cookie-banner/Details.tsx b/client/patterns/cookie-banner/Details.tsx
index db557ff..59d2f29 100644
--- a/client/patterns/cookie-banner/Details.tsx
+++ b/client/patterns/cookie-banner/Details.tsx
@@ -1,9 +1,9 @@
 /**
  * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc 
+ * (c) 2019 - 2021 Nguyen Huu Phuoc 
  */
 
-import React from 'react';
+import * as React from 'react';
 import { Helmet } from 'react-helmet';
 
 import RelatedPatterns from '../../components/RelatedPatterns';
@@ -23,9 +23,9 @@ const Details: React.FC<{}> = () => {
             

                 
+