From c23115431d4f95300287c9c297886b67a65878cb Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Thu, 21 Nov 2019 13:02:57 +0700 Subject: [PATCH 1/3] Tweak homepage --- client/Footer.jsx | 101 +++++++++++++++ client/Home.jsx | 314 +++++++++++++++++++++++----------------------- client/Layout.jsx | 86 ++----------- 3 files changed, 263 insertions(+), 238 deletions(-) create mode 100644 client/Footer.jsx diff --git a/client/Footer.jsx b/client/Footer.jsx new file mode 100644 index 0000000..a3e1ef1 --- /dev/null +++ b/client/Footer.jsx @@ -0,0 +1,101 @@ +import React from 'react'; + +const Footer = () => { + return ( +
+
+

PRODUCTS

+ + +
+ +
+

ABOUT

+ +
+
© 2019 Nguyen Huu Phuoc and contributors
+ +
+
+
+ ); +}; + +export default Footer; diff --git a/client/Home.jsx b/client/Home.jsx index 2074c02..ee21f91 100644 --- a/client/Home.jsx +++ b/client/Home.jsx @@ -33,172 +33,168 @@ const Home = () => { return ( -
-
- { - 'CSS LAYOUT'.split('').map((c, index) => { - return ( - c === ' ' - ?
- :
{c}
- ); - }) - } -
-

a collection of popular layouts and patterns made with CSS

+
+

+ CSS Layout +

+

a collection of popular layouts and patterns made with CSS

-
-

Layouts

+
+
+

Layouts

-
-
- - -

Holy grail

+
+
+ + +

Holy grail

+ +
+
+ + +

Sidebar

+ +
+
+ + +

Split screen

+ +
+
+ + +

Sticky footer

+ +
+
+ + +

Sticky header

-
-
- - -

Sidebar

- -
-
- - -

Split screen

- -
-
- - -

Sticky footer

- -
-
- - -

Sticky header

- +
-

Patterns

+
+

Patterns

-
-
- - -

Badge

- -
-
- - -

Breadcrumb

- -
-
- - -

Button with icon

- -
-
- - -

Card

- -
-
- - -

Centering

- -
-
- - -

Fixed at corner

- -
-
- - -

Input addon

- -
-
- - -

Media object

- -
-
- - -

Menu

- -
-
- - -

Modal

- -
-
- - -

Notification

- -
-
- - -

Pagination

- -
-
- - -

Previous next buttons

- -
-
- - -

Pricing table

- -
-
- - -

Progress bar

- -
-
- - -

Same height columns

- -
-
- - -

Slider

- -
-
- - -

Stepper input

- -
-
- - -

Switch

- +
+
+ + +

Badge

+ +
+
+ + +

Breadcrumb

+ +
+
+ + +

Button with icon

+ +
+
+ + +

Card

+ +
+
+ + +

Centering

+ +
+
+ + +

Fixed at corner

+ +
+
+ + +

Input addon

+ +
+
+ + +

Media object

+ +
+
+ + +

Menu

+ +
+
+ + +

Modal

+ +
+
+ + +

Notification

+ +
+
+ + +

Pagination

+ +
+
+ + +

Previous next buttons

+ +
+
+ + +

Pricing table

+ +
+
+ + +

Progress bar

+ +
+
+ + +

Same height columns

+ +
+
+ + +

Slider

+ +
+
+ + +

Stepper input

+ +
+
+ + +

Switch

+ +
diff --git a/client/Layout.jsx b/client/Layout.jsx index c7714f8..1efcb53 100644 --- a/client/Layout.jsx +++ b/client/Layout.jsx @@ -1,90 +1,18 @@ import React, { useEffect } from 'react'; +import Footer from './Footer'; + const Layout = ({ children }) => { useEffect(() => { window.scrollTo(0, 0); }, []); return ( - <> -
- {children} -
-
-
-
-
Other cool things
- -
-
-
© 2019 Nguyen Huu Phuoc and contributors
- -
-
-
- +
+ {children} + +
+
); }; From a105818990de4adb59f3e159bcf50b0cdffbd20f Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Thu, 21 Nov 2019 14:29:12 +0700 Subject: [PATCH 2/3] Tweak the details page --- client/DetailsLayout.jsx | 17 +++++++++++------ client/Footer.jsx | 2 +- client/Home.jsx | 14 +++++++------- client/Layout.jsx | 3 +-- client/layouts/badge/Details.jsx | 6 +----- client/layouts/breadcrumb/Details.jsx | 6 +----- client/layouts/button-with-icon/Details.jsx | 6 +----- client/layouts/card/Details.jsx | 6 +----- client/layouts/centering/Details.jsx | 6 +----- client/layouts/fixed-at-corner/Details.jsx | 6 +----- client/layouts/holy-grail/Details.jsx | 6 +----- client/layouts/input-add-on/Details.jsx | 6 +----- client/layouts/media-object/Details.jsx | 6 +----- client/layouts/menu/Details.jsx | 6 +----- client/layouts/modal/Details.jsx | 6 +----- client/layouts/notification/Details.jsx | 6 +----- client/layouts/pagination/Details.jsx | 6 +----- .../layouts/previous-next-buttons/Details.jsx | 6 +----- client/layouts/pricing-table/Details.jsx | 6 +----- client/layouts/progress-bar/Details.jsx | 5 +---- client/layouts/same-height-columns/Details.jsx | 6 +----- client/layouts/sidebar/Details.jsx | 6 +----- client/layouts/slider/Details.jsx | 6 +----- client/layouts/split-screen/Details.jsx | 6 +----- client/layouts/stepper-input/Details.jsx | 5 +---- client/layouts/sticky-footer/Details.jsx | 6 +----- client/layouts/sticky-header/Details.jsx | 6 +----- client/layouts/switch/Details.jsx | 5 +---- client/placeholders/BrowserFrame.jsx | 3 ++- 29 files changed, 46 insertions(+), 134 deletions(-) diff --git a/client/DetailsLayout.jsx b/client/DetailsLayout.jsx index f59d31a..73e8cde 100644 --- a/client/DetailsLayout.jsx +++ b/client/DetailsLayout.jsx @@ -1,16 +1,21 @@ import React from 'react'; import { Link } from 'react-router-dom'; +import useDocumentTitle from './hooks/useDocumentTitle'; import Layout from './Layout'; -const DetailsLayout = ({ children }) => { +const DetailsLayout = ({ title, children }) => { + useDocumentTitle(`CSS Layout ∙ ${title}`); + return ( -
-
- CSS Layout -
-
+
+ CSS Layout +
+
+

{title}

+ +
{children}
diff --git a/client/Footer.jsx b/client/Footer.jsx index a3e1ef1..f298009 100644 --- a/client/Footer.jsx +++ b/client/Footer.jsx @@ -2,7 +2,7 @@ import React from 'react'; const Footer = () => { return ( -
+

PRODUCTS

diff --git a/client/Home.jsx b/client/Home.jsx index ee21f91..d0521b6 100644 --- a/client/Home.jsx +++ b/client/Home.jsx @@ -33,13 +33,13 @@ const Home = () => { return ( -
-

- CSS Layout -

-

a collection of popular layouts and patterns made with CSS

-
-
+
+
+

CSS Layout

+ +

a collection of popular layouts and patterns made with CSS

+
+

Layouts

diff --git a/client/Layout.jsx b/client/Layout.jsx index 1efcb53..fe0274f 100644 --- a/client/Layout.jsx +++ b/client/Layout.jsx @@ -8,9 +8,8 @@ const Layout = ({ children }) => { }, []); return ( -
+
{children} -
); diff --git a/client/layouts/badge/Details.jsx b/client/layouts/badge/Details.jsx index 5a5895e..028b16c 100644 --- a/client/layouts/badge/Details.jsx +++ b/client/layouts/badge/Details.jsx @@ -3,14 +3,10 @@ import React from 'react'; import DetailsLayout from '../../DetailsLayout'; import BrowserFrame from '../../placeholders/BrowserFrame'; import SampleCode from '../../SampleCode'; -import useDocumentTitle from '../../hooks/useDocumentTitle'; const Details = () => { - useDocumentTitle('CSS Layout ∙ Badge'); - return ( - -

Badge

+ diff --git a/client/layouts/breadcrumb/Details.jsx b/client/layouts/breadcrumb/Details.jsx index abdff4b..3e4d1e0 100644 --- a/client/layouts/breadcrumb/Details.jsx +++ b/client/layouts/breadcrumb/Details.jsx @@ -4,14 +4,10 @@ import DetailsLayout from '../../DetailsLayout'; import BrowserFrame from '../../placeholders/BrowserFrame'; import Rectangle from '../../placeholders/Rectangle'; import SampleCode from '../../SampleCode'; -import useDocumentTitle from '../../hooks/useDocumentTitle'; const Details = () => { - useDocumentTitle('CSS Layout ∙ Breadcrumb'); - return ( - -

Breadcrumb

+ diff --git a/client/layouts/button-with-icon/Details.jsx b/client/layouts/button-with-icon/Details.jsx index 142831f..e0bdf3e 100644 --- a/client/layouts/button-with-icon/Details.jsx +++ b/client/layouts/button-with-icon/Details.jsx @@ -5,14 +5,10 @@ import BrowserFrame from '../../placeholders/BrowserFrame'; import Circle from '../../placeholders/Circle'; import Rectangle from '../../placeholders/Rectangle'; import SampleCode from '../../SampleCode'; -import useDocumentTitle from '../../hooks/useDocumentTitle'; const Details = () => { - useDocumentTitle('CSS Layout ∙ Button with icon'); - return ( - -

Button with icon

+ diff --git a/client/layouts/card/Details.jsx b/client/layouts/card/Details.jsx index 84287a4..ea5a7a4 100644 --- a/client/layouts/card/Details.jsx +++ b/client/layouts/card/Details.jsx @@ -5,14 +5,10 @@ import Block from '../../placeholders/Block'; import BrowserFrame from '../../placeholders/BrowserFrame'; import Rectangle from '../../placeholders/Rectangle'; import SampleCode from '../../SampleCode'; -import useDocumentTitle from '../../hooks/useDocumentTitle'; const Details = () => { - useDocumentTitle('CSS Layout ∙ Card'); - return ( - -

Card

+ diff --git a/client/layouts/centering/Details.jsx b/client/layouts/centering/Details.jsx index 64faacd..0a594f5 100644 --- a/client/layouts/centering/Details.jsx +++ b/client/layouts/centering/Details.jsx @@ -5,14 +5,10 @@ import BrowserFrame from '../../placeholders/BrowserFrame'; import Circle from '../../placeholders/Circle'; import Rectangle from '../../placeholders/Rectangle'; import SampleCode from '../../SampleCode'; -import useDocumentTitle from '../../hooks/useDocumentTitle'; const Details = () => { - useDocumentTitle('CSS Layout ∙ Centering'); - return ( - -

Centering

+ diff --git a/client/layouts/fixed-at-corner/Details.jsx b/client/layouts/fixed-at-corner/Details.jsx index 8a37913..adc8d9b 100644 --- a/client/layouts/fixed-at-corner/Details.jsx +++ b/client/layouts/fixed-at-corner/Details.jsx @@ -4,14 +4,10 @@ import DetailsLayout from '../../DetailsLayout'; import BrowserFrame from '../../placeholders/BrowserFrame'; import Triangle from '../../placeholders/Triangle'; import SampleCode from '../../SampleCode'; -import useDocumentTitle from '../../hooks/useDocumentTitle'; const Details = () => { - useDocumentTitle('CSS Layout ∙ Fixed at corner'); - return ( - -

Fixed at corner

+ diff --git a/client/layouts/holy-grail/Details.jsx b/client/layouts/holy-grail/Details.jsx index dba00b9..f57e8de 100644 --- a/client/layouts/holy-grail/Details.jsx +++ b/client/layouts/holy-grail/Details.jsx @@ -5,14 +5,10 @@ import Block from '../../placeholders/Block'; import BrowserFrame from '../../placeholders/BrowserFrame'; import Rectangle from '../../placeholders/Rectangle'; import SampleCode from '../../SampleCode'; -import useDocumentTitle from '../../hooks/useDocumentTitle'; const Details = () => { - useDocumentTitle('CSS Layout ∙ Holy grail'); - return ( - -

Holy grail

+ diff --git a/client/layouts/input-add-on/Details.jsx b/client/layouts/input-add-on/Details.jsx index 55b4a4a..67cedf7 100644 --- a/client/layouts/input-add-on/Details.jsx +++ b/client/layouts/input-add-on/Details.jsx @@ -4,14 +4,10 @@ import DetailsLayout from '../../DetailsLayout'; import BrowserFrame from '../../placeholders/BrowserFrame'; import Rectangle from '../../placeholders/Rectangle'; import SampleCode from '../../SampleCode'; -import useDocumentTitle from '../../hooks/useDocumentTitle'; const Details = () => { - useDocumentTitle('CSS Layout ∙ Input add-on'); - return ( - -

Input add-on

+ diff --git a/client/layouts/media-object/Details.jsx b/client/layouts/media-object/Details.jsx index b7a4bbe..38aa459 100644 --- a/client/layouts/media-object/Details.jsx +++ b/client/layouts/media-object/Details.jsx @@ -6,14 +6,10 @@ import BrowserFrame from '../../placeholders/BrowserFrame'; import Rectangle from '../../placeholders/Rectangle'; import Square from '../../placeholders/Square'; import SampleCode from '../../SampleCode'; -import useDocumentTitle from '../../hooks/useDocumentTitle'; const Details = () => { - useDocumentTitle('CSS Layout ∙ Media object'); - return ( - -

Media object

+ diff --git a/client/layouts/menu/Details.jsx b/client/layouts/menu/Details.jsx index fe48eb9..91f75b9 100644 --- a/client/layouts/menu/Details.jsx +++ b/client/layouts/menu/Details.jsx @@ -5,14 +5,10 @@ import BrowserFrame from '../../placeholders/BrowserFrame'; import Circle from '../../placeholders/Circle'; import Rectangle from '../../placeholders/Rectangle'; import SampleCode from '../../SampleCode'; -import useDocumentTitle from '../../hooks/useDocumentTitle'; const Details = () => { - useDocumentTitle('CSS Layout ∙ Menu'); - return ( - -

Menu

+ diff --git a/client/layouts/modal/Details.jsx b/client/layouts/modal/Details.jsx index 45688f0..b1270a0 100644 --- a/client/layouts/modal/Details.jsx +++ b/client/layouts/modal/Details.jsx @@ -6,14 +6,10 @@ import BrowserFrame from '../../placeholders/BrowserFrame'; import Circle from '../../placeholders/Circle'; import Rectangle from '../../placeholders/Rectangle'; import SampleCode from '../../SampleCode'; -import useDocumentTitle from '../../hooks/useDocumentTitle'; const Details = () => { - useDocumentTitle('CSS Layout ∙ Modal'); - return ( - -

Modal

+ diff --git a/client/layouts/notification/Details.jsx b/client/layouts/notification/Details.jsx index 9dea535..524de7d 100644 --- a/client/layouts/notification/Details.jsx +++ b/client/layouts/notification/Details.jsx @@ -5,14 +5,10 @@ import Block from '../../placeholders/Block'; import BrowserFrame from '../../placeholders/BrowserFrame'; import Circle from '../../placeholders/Circle'; import SampleCode from '../../SampleCode'; -import useDocumentTitle from '../../hooks/useDocumentTitle'; const Details = () => { - useDocumentTitle('CSS Layout ∙ Notification'); - return ( - -

Notification

+ diff --git a/client/layouts/pagination/Details.jsx b/client/layouts/pagination/Details.jsx index e87158b..c933ae3 100644 --- a/client/layouts/pagination/Details.jsx +++ b/client/layouts/pagination/Details.jsx @@ -5,14 +5,10 @@ import BrowserFrame from '../../placeholders/BrowserFrame'; import Circle from '../../placeholders/Circle'; import Rectangle from '../../placeholders/Rectangle'; import SampleCode from '../../SampleCode'; -import useDocumentTitle from '../../hooks/useDocumentTitle'; const Details = () => { - useDocumentTitle('CSS Layout ∙ Pagination'); - return ( - -

Pagination

+ diff --git a/client/layouts/previous-next-buttons/Details.jsx b/client/layouts/previous-next-buttons/Details.jsx index 2d75a97..95f3324 100644 --- a/client/layouts/previous-next-buttons/Details.jsx +++ b/client/layouts/previous-next-buttons/Details.jsx @@ -4,14 +4,10 @@ import DetailsLayout from '../../DetailsLayout'; import BrowserFrame from '../../placeholders/BrowserFrame'; import Rectangle from '../../placeholders/Rectangle'; import SampleCode from '../../SampleCode'; -import useDocumentTitle from '../../hooks/useDocumentTitle'; const Details = () => { - useDocumentTitle('CSS Layout ∙ Previous and next buttons'); - return ( - -

Previous and next buttons

+ diff --git a/client/layouts/pricing-table/Details.jsx b/client/layouts/pricing-table/Details.jsx index bbdae9a..4e120a6 100644 --- a/client/layouts/pricing-table/Details.jsx +++ b/client/layouts/pricing-table/Details.jsx @@ -6,14 +6,10 @@ import Block from '../../placeholders/Block'; import BrowserFrame from '../../placeholders/BrowserFrame'; import Rectangle from '../../placeholders/Rectangle'; import SampleCode from '../../SampleCode'; -import useDocumentTitle from '../../hooks/useDocumentTitle'; const Details = () => { - useDocumentTitle('CSS Layout ∙ Pricing table'); - return ( - -

Pricing table

+ diff --git a/client/layouts/progress-bar/Details.jsx b/client/layouts/progress-bar/Details.jsx index 97ea89b..4d9b39a 100644 --- a/client/layouts/progress-bar/Details.jsx +++ b/client/layouts/progress-bar/Details.jsx @@ -3,19 +3,16 @@ import React, { useState } from 'react'; import DetailsLayout from '../../DetailsLayout'; import BrowserFrame from '../../placeholders/BrowserFrame'; import SampleCode from '../../SampleCode'; -import useDocumentTitle from '../../hooks/useDocumentTitle'; import useInterval from '../../hooks/useInterval'; const Details = () => { - useDocumentTitle('CSS Layout ∙ Progress bar'); const [progress, setProgress] = useState(0); useInterval(() => { setProgress(v => v === 100 ? 0 : v + 1); }, 1 * 100); return ( - -

Progress bar

+ diff --git a/client/layouts/same-height-columns/Details.jsx b/client/layouts/same-height-columns/Details.jsx index 1001dea..c32daf1 100644 --- a/client/layouts/same-height-columns/Details.jsx +++ b/client/layouts/same-height-columns/Details.jsx @@ -5,14 +5,10 @@ import Block from '../../placeholders/Block'; import BrowserFrame from '../../placeholders/BrowserFrame'; import Rectangle from '../../placeholders/Rectangle'; import SampleCode from '../../SampleCode'; -import useDocumentTitle from '../../hooks/useDocumentTitle'; const Details = () => { - useDocumentTitle('CSS Layout ∙ Same height columns'); - return ( - -

Same height columns

+ diff --git a/client/layouts/sidebar/Details.jsx b/client/layouts/sidebar/Details.jsx index d2dbced..8af5544 100644 --- a/client/layouts/sidebar/Details.jsx +++ b/client/layouts/sidebar/Details.jsx @@ -4,14 +4,10 @@ import DetailsLayout from '../../DetailsLayout'; import BrowserFrame from '../../placeholders/BrowserFrame'; import Block from '../../placeholders/Block'; import SampleCode from '../../SampleCode'; -import useDocumentTitle from '../../hooks/useDocumentTitle'; const Details = () => { - useDocumentTitle('CSS Layout ∙ Sidebar'); - return ( - -

Sidebar

+
Try to scroll the main content!
{ - useDocumentTitle('CSS Layout ∙ Slider'); - return ( - -

Slider

+ diff --git a/client/layouts/split-screen/Details.jsx b/client/layouts/split-screen/Details.jsx index a43740a..b1ca8a4 100644 --- a/client/layouts/split-screen/Details.jsx +++ b/client/layouts/split-screen/Details.jsx @@ -6,14 +6,10 @@ import Block from '../../placeholders/Block'; import Circle from '../../placeholders/Circle'; import Rectangle from '../../placeholders/Rectangle'; import SampleCode from '../../SampleCode'; -import useDocumentTitle from '../../hooks/useDocumentTitle'; const Details = () => { - useDocumentTitle('CSS Layout ∙ Split screen'); - return ( - -

Split screen

+ diff --git a/client/layouts/stepper-input/Details.jsx b/client/layouts/stepper-input/Details.jsx index 27f4302..f641635 100644 --- a/client/layouts/stepper-input/Details.jsx +++ b/client/layouts/stepper-input/Details.jsx @@ -4,18 +4,15 @@ import { Link } from 'react-router-dom'; import DetailsLayout from '../../DetailsLayout'; import BrowserFrame from '../../placeholders/BrowserFrame'; import SampleCode from '../../SampleCode'; -import useDocumentTitle from '../../hooks/useDocumentTitle'; const Details = () => { - useDocumentTitle('CSS Layout ∙ Stepper input'); const [value, setValue] = useState(0); const decrease = () => setValue(value - 1); const increase = () => setValue(value + 1); const change = (e) => setValue(parseInt(e.target.value, 10)); return ( - -

Stepper input

+
The content of minus and plus buttons are centered by using the technique in the Centering page.
diff --git a/client/layouts/sticky-footer/Details.jsx b/client/layouts/sticky-footer/Details.jsx index e656869..9d59794 100644 --- a/client/layouts/sticky-footer/Details.jsx +++ b/client/layouts/sticky-footer/Details.jsx @@ -5,14 +5,10 @@ import Block from '../../placeholders/Block'; import BrowserFrame from '../../placeholders/BrowserFrame'; import Rectangle from '../../placeholders/Rectangle'; import SampleCode from '../../SampleCode'; -import useDocumentTitle from '../../hooks/useDocumentTitle'; const Details = () => { - useDocumentTitle('CSS Layout ∙ Sticky footer'); - return ( - -

Sticky footer

+
The footer always sticks to the bottom if the main content is short.
diff --git a/client/layouts/sticky-header/Details.jsx b/client/layouts/sticky-header/Details.jsx index e1440bc..5770ffe 100644 --- a/client/layouts/sticky-header/Details.jsx +++ b/client/layouts/sticky-header/Details.jsx @@ -5,14 +5,10 @@ import Block from '../../placeholders/Block'; import BrowserFrame from '../../placeholders/BrowserFrame'; import Rectangle from '../../placeholders/Rectangle'; import SampleCode from '../../SampleCode'; -import useDocumentTitle from '../../hooks/useDocumentTitle'; const Details = () => { - useDocumentTitle('CSS Layout ∙ Sticky header'); - return ( - -

Sticky header

+
Try to scroll the main content to see the header sticks to the top of page.
{ - useDocumentTitle('CSS Layout ∙ Switch'); const [checked, setChecked] = useState(false); const toggle = () => setChecked(c => !c); return ( - -

Switch

+
The checkbox is placed inside a label. So when clicking on the label, the checkbox will be checked even though it's hidden.
{ const flip = () => setContentActive(isActive => !isActive); return ( -
+ +
From c25a65de72401bf009c27c2a18f1c8b9b24d9f1e Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Thu, 21 Nov 2019 20:51:33 +0700 Subject: [PATCH 3/3] Add highlights --- client/Home.jsx | 27 ++++++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/client/Home.jsx b/client/Home.jsx index d0521b6..1b8da48 100644 --- a/client/Home.jsx +++ b/client/Home.jsx @@ -37,7 +37,32 @@ const Home = () => {

CSS Layout

-

a collection of popular layouts and patterns made with CSS

+

a collection of popular layouts and patterns made with CSS

+ +
+
    +
  • +
    Zero dependencies
    +
    🎉
    +
    • +
  • +
    No frameworks
    +
    🎉
    +
    • +
  • +
    No CSS hacks
    +
    🎉
    +
    • +
  • +
    Good practices
    +
    soon
    +
    • +
  • +
    Accessibility
    +
    soon
    +
    • +
+