diff --git a/client/App.jsx b/client/App.jsx index 4d506d6..5403ca4 100644 --- a/client/App.jsx +++ b/client/App.jsx @@ -16,6 +16,7 @@ const App = () => { + diff --git a/client/CoverCard.jsx b/client/CoverCard.jsx index f304d33..365dc4b 100644 --- a/client/CoverCard.jsx +++ b/client/CoverCard.jsx @@ -12,7 +12,7 @@ const CoverCard = ({ pattern }) => { className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3" > -

{pattern}

+

{pattern}

); diff --git a/client/Home.jsx b/client/Home.jsx index 716ee20..f9cd4a3 100644 --- a/client/Home.jsx +++ b/client/Home.jsx @@ -29,6 +29,10 @@ const Home = () => {
No CSS hacks
🎉
+
  • +
    Real use cases
    +
    🎉
    +
  • Good practices
    soon
    @@ -62,6 +66,7 @@ const Home = () => { + diff --git a/client/layouts/DetailsLayout.jsx b/client/layouts/DetailsLayout.jsx index ac4347d..aecedb6 100644 --- a/client/layouts/DetailsLayout.jsx +++ b/client/layouts/DetailsLayout.jsx @@ -15,9 +15,7 @@ const DetailsLayout = ({ title, children }) => {

    {title}

    -
    - {children} -
    + {children}
    ); diff --git a/client/patterns/badge/Details.jsx b/client/patterns/badge/Details.jsx index 0ecf4ab..6ee8a80 100644 --- a/client/patterns/badge/Details.jsx +++ b/client/patterns/badge/Details.jsx @@ -7,15 +7,16 @@ import SampleCode from '../../SampleCode'; const Details = () => { return ( - -
    - 1 +
    + +
    + 1 +
    -
    - } - source={ + } + source={ `} /> - } - /> + } + /> +     ); }; diff --git a/client/patterns/breadcrumb/Details.jsx b/client/patterns/breadcrumb/Details.jsx index b1d0fe1..dffbf53 100644 --- a/client/patterns/breadcrumb/Details.jsx +++ b/client/patterns/breadcrumb/Details.jsx @@ -8,21 +8,22 @@ import SampleCode from '../../SampleCode'; const Details = () => { return ( - -
    -
    -
    /
    -
    -
    /
    -
    -
    /
    -
    +
    + +
    +
    +
    /
    +
    +
    /
    +
    +
    /
    +
    +
    -
    - } - source={ + } + source={ `} /> - } - /> + } + /> +     ); }; diff --git a/client/patterns/button-with-icon/Details.jsx b/client/patterns/button-with-icon/Details.jsx index 5881de6..3f8a3eb 100644 --- a/client/patterns/button-with-icon/Details.jsx +++ b/client/patterns/button-with-icon/Details.jsx @@ -9,18 +9,19 @@ import SampleCode from '../../SampleCode'; const Details = () => { return ( - -
    - +
    + +
    + +
    -
    - } - source={ + } + source={ `} /> - } - /> + } + /> +     ); }; diff --git a/client/patterns/card/Details.jsx b/client/patterns/card/Details.jsx index dd3b8e2..c98d1af 100644 --- a/client/patterns/card/Details.jsx +++ b/client/patterns/card/Details.jsx @@ -9,21 +9,22 @@ import SampleCode from '../../SampleCode'; const Details = () => { return ( - -
    - -
    -
    -
    - +
    + +
    + +
    +
    +
    + +
    -
    - } - source={ + } + source={ `} /> - } - /> + } + /> +
    ); }; diff --git a/client/patterns/centering/Details.jsx b/client/patterns/centering/Details.jsx index 28e2fbd..15a6d27 100644 --- a/client/patterns/centering/Details.jsx +++ b/client/patterns/centering/Details.jsx @@ -9,16 +9,17 @@ import SampleCode from '../../SampleCode'; const Details = () => { return ( - - -
    -
    -
    -
    - } - source={ +
    + + +
    +
    +
    +
    + } + source={ `} /> - } - /> + } + /> +     ); }; diff --git a/client/patterns/docked-at-corner/Cover.jsx b/client/patterns/docked-at-corner/Cover.jsx new file mode 100644 index 0000000..201832f --- /dev/null +++ b/client/patterns/docked-at-corner/Cover.jsx @@ -0,0 +1,20 @@ +import React from 'react'; + +import Frame from '../../placeholders/Frame'; + +const Cover = () => { + return ( + +
    +
    +
    +
    +
    + + ); +}; + +export default Cover; diff --git a/client/patterns/docked-at-corner/Details.jsx b/client/patterns/docked-at-corner/Details.jsx new file mode 100644 index 0000000..0597a30 --- /dev/null +++ b/client/patterns/docked-at-corner/Details.jsx @@ -0,0 +1,81 @@ +import React from 'react'; + +import DetailsLayout from '../../layouts/DetailsLayout'; +import BrowserFrame from '../../placeholders/BrowserFrame'; +import Rectangle from '../../placeholders/Rectangle'; +import SampleCode from '../../SampleCode'; + +const Details = () => { + return ( + +
    + +
    + +
    +
    +
    + } + source={ + + +
    + ... +
    + + ... +
    +`} +/> + } + /> +
    +
    +

    Use cases

    + +
    +
    + Inbox +
    + 5 +
    +
    +
    + Modal +
    + × +
    +
    +
    +
    + + ); +}; + +export default Details; diff --git a/client/patterns/dot-navigation/Details.jsx b/client/patterns/dot-navigation/Details.jsx index 2245a59..d43906f 100644 --- a/client/patterns/dot-navigation/Details.jsx +++ b/client/patterns/dot-navigation/Details.jsx @@ -24,18 +24,19 @@ const Details = () => { return ( - -
      - - - - -
    - - } - source={ +
    + +
      + + + + +
    +
    + } + source={ `} /> - } - /> + } + /> +     ); }; diff --git a/client/patterns/feature-list/Details.jsx b/client/patterns/feature-list/Details.jsx index 2de7e95..45d0e0c 100644 --- a/client/patterns/feature-list/Details.jsx +++ b/client/patterns/feature-list/Details.jsx @@ -11,28 +11,29 @@ import SampleCode from '../../SampleCode'; const Details = () => { return ( - -
    -
    -
    -
    -
    - +
    + +
    +
    +
    +
    +
    + +
    -
    -
    -
    -
    -
    - +
    +
    +
    +
    + +
    -
    - } - source={ + } + source={ - } - /> + } + /> +
    ); }; diff --git a/client/patterns/fixed-at-corner/Details.jsx b/client/patterns/fixed-at-corner/Details.jsx index c142127..063f279 100644 --- a/client/patterns/fixed-at-corner/Details.jsx +++ b/client/patterns/fixed-at-corner/Details.jsx @@ -8,24 +8,25 @@ import SampleCode from '../../SampleCode'; const Details = () => { return ( - -
    - +
    + +
    + +
    +
    + +
    +
    + +
    +
    + +
    -
    - -
    -
    - -
    -
    - -
    -
    - } - source={ + } + source={ `} /> - } - /> + } + /> +
    ); }; diff --git a/client/patterns/holy-grail/Details.jsx b/client/patterns/holy-grail/Details.jsx index 6e3b424..15f7751 100644 --- a/client/patterns/holy-grail/Details.jsx +++ b/client/patterns/holy-grail/Details.jsx @@ -9,29 +9,30 @@ import SampleCode from '../../SampleCode'; const Details = () => { return ( - -
    -
    -
    -
    -
    - +
    + +
    +
    -
    - +
    +
    + +
    +
    + +
    +
    + +
    -
    - +
    +
    -
    -
    -
    -
    - } - source={ + } + source={ `} /> - } - /> + } + /> +
    ); }; diff --git a/client/patterns/input-add-on/Details.jsx b/client/patterns/input-add-on/Details.jsx index 43eda09..8cc6792 100644 --- a/client/patterns/input-add-on/Details.jsx +++ b/client/patterns/input-add-on/Details.jsx @@ -8,35 +8,36 @@ import SampleCode from '../../SampleCode'; const Details = () => { return ( - -
    -
    -
    - +
    + +
    +
    +
    + +
    +
    - -
    -
    - -
    - +
    + +
    + +
    -
    -
    -
    - -
    - -
    - +
    +
    + +
    + +
    + +
    -
    - } - source={ + } + source={ `} /> - } - /> + } + /> +
    ); }; diff --git a/client/patterns/media-object/Details.jsx b/client/patterns/media-object/Details.jsx index 416ceef..c94b8f0 100644 --- a/client/patterns/media-object/Details.jsx +++ b/client/patterns/media-object/Details.jsx @@ -10,22 +10,23 @@ import SampleCode from '../../SampleCode'; const Details = () => { return ( - -
    - -
    -
    -
    - +
    + +
    + +
    +
    +
    + +
    +
    +
    -
    -
    -
    - } - source={ + } + source={ `} /> - } - /> + } + /> +
    ); }; diff --git a/client/patterns/menu/Details.jsx b/client/patterns/menu/Details.jsx index 4e28212..a720614 100644 --- a/client/patterns/menu/Details.jsx +++ b/client/patterns/menu/Details.jsx @@ -9,45 +9,46 @@ import SampleCode from '../../SampleCode'; const Details = () => { return ( - -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    Ctrl + X
    -
    -
    -
    -
    Ctrl + C
    -
    -
    -
    - -
    -
    -
    +
    + +
    +
    +
    +
    +
    - -
    -
    -
    -
    -
    Ctrl + V
    +
    +
    +
    Ctrl + X
    +
    +
    +
    +
    Ctrl + C
    +
    +
    +
    + +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    Ctrl + V
    +
    -
    - } - source={ + } + source={ `} /> - } - /> + } + /> +
    ); }; diff --git a/client/patterns/modal/Details.jsx b/client/patterns/modal/Details.jsx index 180eb73..0b253f0 100644 --- a/client/patterns/modal/Details.jsx +++ b/client/patterns/modal/Details.jsx @@ -10,28 +10,29 @@ import SampleCode from '../../SampleCode'; const Details = () => { return ( - -
    -
    -
    -
    - +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    -
    -
    - -
    -
    -
    -
    -
    -
    - } - source={ + } + source={ `} /> - } - /> + } + /> +
    ); }; diff --git a/client/patterns/notification/Details.jsx b/client/patterns/notification/Details.jsx index 50019c4..6b0cca7 100644 --- a/client/patterns/notification/Details.jsx +++ b/client/patterns/notification/Details.jsx @@ -9,18 +9,19 @@ import SampleCode from '../../SampleCode'; const Details = () => { return ( - -
    -
    - +
    + +
    +
    + +
    -
    - } - source={ + } + source={ `} /> - } - /> + } + /> +
    ); }; diff --git a/client/patterns/pagination/Details.jsx b/client/patterns/pagination/Details.jsx index db32b8f..2aeb0bd 100644 --- a/client/patterns/pagination/Details.jsx +++ b/client/patterns/pagination/Details.jsx @@ -9,32 +9,33 @@ import SampleCode from '../../SampleCode'; const Details = () => { return ( - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    -
    - } - source={ + } + source={ `} /> - } - /> + } + /> +
    ); }; diff --git a/client/patterns/previous-next-buttons/Details.jsx b/client/patterns/previous-next-buttons/Details.jsx index 136c497..5d9976f 100644 --- a/client/patterns/previous-next-buttons/Details.jsx +++ b/client/patterns/previous-next-buttons/Details.jsx @@ -8,24 +8,25 @@ import SampleCode from '../../SampleCode'; const Details = () => { return ( - -
    - - } - source={ + } + source={ `} /> - } - /> + } + /> +
    ); }; diff --git a/client/patterns/pricing-table/Details.jsx b/client/patterns/pricing-table/Details.jsx index 7b304a6..6a637e3 100644 --- a/client/patterns/pricing-table/Details.jsx +++ b/client/patterns/pricing-table/Details.jsx @@ -10,38 +10,39 @@ import SampleCode from '../../SampleCode'; const Details = () => { return ( - -
    -
    +
    + +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    -
    -
    - +
    +
    + +
    +
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    - } - source={ + } + source={ `} /> - } - /> + } + /> +
    ); }; diff --git a/client/patterns/progress-bar/Details.jsx b/client/patterns/progress-bar/Details.jsx index 31de825..cdaf399 100644 --- a/client/patterns/progress-bar/Details.jsx +++ b/client/patterns/progress-bar/Details.jsx @@ -13,17 +13,18 @@ const Details = () => { return ( - -
    -
    - {progress}% +
    + +
    +
    + {progress}% +
    -
    - } - source={ + } + source={ `} /> - } - /> + } + /> +
    ); }; diff --git a/client/patterns/questions-and-answers/Details.jsx b/client/patterns/questions-and-answers/Details.jsx index e4fc8ec..712a2dc 100644 --- a/client/patterns/questions-and-answers/Details.jsx +++ b/client/patterns/questions-and-answers/Details.jsx @@ -29,38 +29,39 @@ const Details = () => { return ( - -
    -
    -
    } - > -
    - -
    -
    -
    } - > -
    - -
    -
    -
    } - > -
    - +
    + +
    +
    +
    } + > +
    + +
    +
    +
    } + > +
    + +
    +
    +
    } + > +
    + +
    -
    - } - source={ + } + source={ `} /> - } - /> + } + /> +
    ); }; diff --git a/client/patterns/same-height-columns/Details.jsx b/client/patterns/same-height-columns/Details.jsx index 58e4ebd..747a539 100644 --- a/client/patterns/same-height-columns/Details.jsx +++ b/client/patterns/same-height-columns/Details.jsx @@ -9,43 +9,44 @@ import SampleCode from '../../SampleCode'; const Details = () => { return ( - -
    -
    - -
    - +
    + +
    +
    + +
    + +
    +
    + +
    -
    - +
    + +
    +
    + +
    +
    + +
    -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    - -
    -
    - -
    -
    - +
    + +
    +
    + +
    +
    + +
    -
    - } - source={ + } + source={ `} /> - } - /> + } + /> +
    ); }; diff --git a/client/patterns/search-box/Details.jsx b/client/patterns/search-box/Details.jsx index 96d5ac2..fbacd9c 100644 --- a/client/patterns/search-box/Details.jsx +++ b/client/patterns/search-box/Details.jsx @@ -8,27 +8,28 @@ import SampleCode from '../../SampleCode'; const Details = () => { return ( - -
    -
    - -
    - +
    + +
    +
    + +
    + +
    -
    -
    - -
    - +
    + +
    + +
    -
    - } - source={ + } + source={ `} /> - } - /> + } + /> +
    ); }; diff --git a/client/patterns/separator/Details.jsx b/client/patterns/separator/Details.jsx index e57369c..f5b35d9 100644 --- a/client/patterns/separator/Details.jsx +++ b/client/patterns/separator/Details.jsx @@ -8,18 +8,19 @@ import SampleCode from '../../SampleCode'; const Details = () => { return ( - -
    -
    -
    +
    + +
    +
    +
    +
    +
    -
    -
    - } - source={ + } + source={ `} /> - } - /> + } + /> +
    ); }; diff --git a/client/patterns/sidebar/Details.jsx b/client/patterns/sidebar/Details.jsx index 80708e5..124caba 100644 --- a/client/patterns/sidebar/Details.jsx +++ b/client/patterns/sidebar/Details.jsx @@ -8,24 +8,25 @@ import SampleCode from '../../SampleCode'; const Details = () => { return ( -
    Try to scroll the main content!
    - -
    -
    -
    +
    +
    Try to scroll the main content!
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    -
    -
    -
    -
    -
    -
    -
    -
    - } - source={ + } + source={ `} /> - } - /> + } + /> +
    ); }; diff --git a/client/patterns/simple-grid/Details.jsx b/client/patterns/simple-grid/Details.jsx index dbd5e3a..60a4bac 100644 --- a/client/patterns/simple-grid/Details.jsx +++ b/client/patterns/simple-grid/Details.jsx @@ -8,82 +8,83 @@ import SampleCode from '../../SampleCode'; const Details = () => { return ( - -
    -
    -
    - +
    + +
    +
    +
    + +
    +
    + +
    -
    - -
    -
    -
    -
    - +
    +
    + +
    +
    + +
    +
    + +
    -
    - -
    -
    - -
    -
    -
    -
    - +
    +
    + +
    +
    + +
    +
    + +
    -
    - -
    -
    - -
    -
    -
    -
    - +
    +
    + +
    +
    + +
    -
    - -
    -
    -
    -
    - +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    - -
    -
    - -
    -
    - +
    +
    + +
    +
    + +
    +
    + +
    -
    - } - source={ + } + source={ `} /> - } - /> + } + /> +
    ); }; diff --git a/client/patterns/slider/Details.jsx b/client/patterns/slider/Details.jsx index d4e4891..e0da545 100644 --- a/client/patterns/slider/Details.jsx +++ b/client/patterns/slider/Details.jsx @@ -9,17 +9,18 @@ import SampleCode from '../../SampleCode'; const Details = () => { return ( - -
    -
    - -
    +
    + +
    +
    + +
    +
    -
    - } - source={ + } + source={ `} /> - } - /> + } + /> +
    ); }; diff --git a/client/patterns/split-navigation/Details.jsx b/client/patterns/split-navigation/Details.jsx index 2eca8e8..1fba211 100644 --- a/client/patterns/split-navigation/Details.jsx +++ b/client/patterns/split-navigation/Details.jsx @@ -8,18 +8,19 @@ import SampleCode from '../../SampleCode'; const Details = () => { return ( - -
      -
      • -
      • -
      • -
      • -
    -
    - } - source={ +
    + +
      +
      • +
      • +
      • +
      • +
    +
    + } + source={ `} /> - } - /> + } + /> +
    ); }; diff --git a/client/patterns/split-screen/Details.jsx b/client/patterns/split-screen/Details.jsx index bf72881..fe7b0a0 100644 --- a/client/patterns/split-screen/Details.jsx +++ b/client/patterns/split-screen/Details.jsx @@ -10,23 +10,24 @@ import SampleCode from '../../SampleCode'; const Details = () => { return ( - -
    -
    -
    -
    -
    -
    -
    -
    - +
    + +
    +
    +
    +
    +
    +
    +
    +
    + +
    -
    - } - source={ + } + source={ `} /> - } - /> + } + /> +
    ); }; diff --git a/client/patterns/stepper-input/Details.jsx b/client/patterns/stepper-input/Details.jsx index 6ff706d..5ca3e36 100644 --- a/client/patterns/stepper-input/Details.jsx +++ b/client/patterns/stepper-input/Details.jsx @@ -13,22 +13,23 @@ const Details = () => { return ( -
    - The content of minus and plus buttons are centered by using the technique in the Centering page. -
    - -
    - -
    - +
    +
    + The content of minus and plus buttons are centered by using the technique in the Centering page. +
    + +
    + +
    + +
    +
    -
    -
    - } - source={ + } + source={ `} /> - } - /> + } + /> +
    ); }; diff --git a/client/patterns/sticky-footer/Details.jsx b/client/patterns/sticky-footer/Details.jsx index 51c262c..efb9fd9 100644 --- a/client/patterns/sticky-footer/Details.jsx +++ b/client/patterns/sticky-footer/Details.jsx @@ -9,24 +9,25 @@ import SampleCode from '../../SampleCode'; const Details = () => { return ( -
    - The footer always sticks to the bottom if the main content is short. -
    - -
    -
    +
    +
    + The footer always sticks to the bottom if the main content is short. +
    + +
    +
    +
    +
    + +
    +
    +
    +
    -
    - -
    -
    -
    -
    -
    - } - source={ + } + source={ `} /> - } - /> + } + /> +
    ); }; diff --git a/client/patterns/sticky-header/Details.jsx b/client/patterns/sticky-header/Details.jsx index ef03969..fb104d7 100644 --- a/client/patterns/sticky-header/Details.jsx +++ b/client/patterns/sticky-header/Details.jsx @@ -9,21 +9,22 @@ import SampleCode from '../../SampleCode'; const Details = () => { return ( -
    Try to scroll the main content to see the header sticks to the top of page.
    - -
    -
    +
    +
    Try to scroll the main content to see the header sticks to the top of page.
    + +
    +
    +
    +
    +
    +
    +
    +
    -
    -
    -
    -
    -
    -
    - } - source={ + } + source={ `} /> - } - /> + } + /> +
    ); }; diff --git a/client/patterns/switch/Details.jsx b/client/patterns/switch/Details.jsx index a6b9542..55bb127 100644 --- a/client/patterns/switch/Details.jsx +++ b/client/patterns/switch/Details.jsx @@ -10,17 +10,18 @@ const Details = () => { return ( -
    The checkbox is placed inside a label. So when clicking on the label, the checkbox will be checked even though it's hidden.
    - -     ); }; diff --git a/client/patterns/tab/Details.jsx b/client/patterns/tab/Details.jsx index 1227b93..ed91ac8 100644 --- a/client/patterns/tab/Details.jsx +++ b/client/patterns/tab/Details.jsx @@ -26,29 +26,30 @@ const Details = () => { return ( - -
    - -
    - -
    -     - -
    - -
    -     - -
    - -
    -     +
    + +
    + +
    + +
    +     + +
    + +
    +     + +
    + +
    +     +
    -
    - } - source={ + } + source={ `} /> - } - /> + } + /> +
    ); }; diff --git a/client/patterns/toggle-password-visibility/Details.jsx b/client/patterns/toggle-password-visibility/Details.jsx index edec9e8..8a770f1 100644 --- a/client/patterns/toggle-password-visibility/Details.jsx +++ b/client/patterns/toggle-password-visibility/Details.jsx @@ -10,39 +10,40 @@ const Details = () => { return ( - -
    -
    - - +
    + +
    +
    + + +
    -
    - } - source={ + } + source={ `} /> - } - /> + } + /> +
    ); }; diff --git a/client/patterns/wizard/Details.jsx b/client/patterns/wizard/Details.jsx index 804617d..36f8775 100644 --- a/client/patterns/wizard/Details.jsx +++ b/client/patterns/wizard/Details.jsx @@ -10,38 +10,39 @@ import SampleCode from '../../SampleCode'; const Details = () => { return ( - -
    -
    -
    -
    -
    -
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    -
    -
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    +
    +
    -
    -
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    +
    +
    -
    -
    - } - source={ + } + source={ `} /> - } - /> + } + /> +
    ); }; diff --git a/client/placeholders/BrowserFrame.jsx b/client/placeholders/BrowserFrame.jsx index 74b3b04..dd9f59e 100644 --- a/client/placeholders/BrowserFrame.jsx +++ b/client/placeholders/BrowserFrame.jsx @@ -27,7 +27,7 @@ const BrowserFrame = ({ content, source }) => { }} >
    { {content}
    https://csslayout.io/button-with-icon https://csslayout.io/card https://csslayout.io/centering + https://csslayout.io/docked-at-corner https://csslayout.io/dot-navigation https://csslayout.io/feature-list https://csslayout.io/fixed-at-corner @@ -21,6 +22,7 @@ https://csslayout.io/previous-next-buttons https://csslayout.io/pricing-table https://csslayout.io/progress-bar + https://csslayout.io/questions-and-answers https://csslayout.io/same-height-columns https://csslayout.io/search-box https://csslayout.io/separator