mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-10-24 11:16:27 +02:00
Code Issues Releases Wiki Activity

Fix details layout

Browse Source
This commit is contained in:
Phuoc Nguyen
2021-09-27 22:12:27 +07:00
parent 3ca97206ce
commit 6403dfdf36
115 changed files with 767 additions and 797 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
bin/generateScreenshot.ts
View File

@@ -18,7 +18,7 @@ const main = () => {
const browser = await puppeteer.launch(); const browser = await puppeteer.launch();
const page = await browser.newPage(); const page = await browser.newPage();
await page.goto(`http://localhost:3000/patterns/${pattern}`); await page.goto(`http://localhost:3000/${pattern}`);
await page.waitForSelector('.demo__live'); await page.waitForSelector('.demo__live');
const element = await page.$('.demo__live'); const element = await page.$('.demo__live');

20
client/components/Heading.tsx
View File

@@ -1,20 +0,0 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import './heading.css';
interface HeadingProps {
title: string;
}
const Heading: React.FC<HeadingProps> = ({ title }) => {
return (
<h3 className="heading">{title}</h3>
);
};
export default Heading;

30
client/components/RelatedPatterns.tsx
View File

@@ -1,30 +0,0 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Pattern from '../constants/Pattern';
import CoverCard from '../../components/CoverCard';
import Heading from './Heading';
interface RelatedPatternsProps {
patterns: Pattern[];
}
const RelatedPatterns: React.FC<RelatedPatternsProps> = ({ patterns }) => {
return (
<section>
<Heading title="Related patterns" />
<div style={{ alignItems: 'start', display: 'flex', flexWrap: 'wrap', padding: '24px' }}>
{
patterns.map((pattern) => <CoverCard key={pattern} pattern={pattern} />)
}
</div>
</section>
);
};
export default RelatedPatterns;

67
client/layouts/DetailsLayout.tsx
View File

@@ -1,67 +0,0 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import { Helmet } from 'react-helmet';
import Ad from '../components/Ad';
import Product from '../components/Product';
import { ProductList } from '../constants/ProductList';
import Pattern from '../constants/Pattern';
import randomItems from '../helpers/randomIterms';
import slug from '../../utils/slug';
import CoverLoader from '../../components/CoverLoader';
import Layout from './Layout';
interface DetailsLayoutProps {
pattern: Pattern;
}
const DetailsLayout: React.FC<DetailsLayoutProps> = ({ pattern, children }) => {
const products = React.useMemo(() => randomItems(ProductList, 3), []);
const patternSlug = slug(pattern);
return (
<Layout>
<Helmet>
<title>CSS Layout ∙ {pattern}</title>
<meta name="title" content={`CSS Layout ∙ ${pattern}`} />
<meta property="og:image" content={`https://csslayout.io/assets/patterns/${patternSlug}.png`} />
<meta property="og:title" content={`CSS Layout ∙ ${pattern}`} />
<meta property="og:url" content={`https://csslayout.io/patterns/${patternSlug}`} />
<meta property="twitter:image" content={`https://csslayout.io/assets/patterns/${patternSlug}.png`} />
<meta property="twitter:title" content={`CSS Layout ∙ ${pattern}`} />
<meta property="twitter:url" content={`https://csslayout.io/patterns/${patternSlug}`} />
</Helmet>
<div className="hero">
<div className="container">
<div className="hero__logo">
<CoverLoader pattern={pattern} />
</div>
<h1 className="hero__heading">{pattern}</h1>
</div>
</div>
<div className="container">
<div className="content">
<main className="main">
{children}
</main>
<div className="sidebar">
<div className="sidebar__inner">
<Ad />
{
products.map(product => <Product key={product.name} product={product} />)
}
</div>
</div>
</div>
</div>
</Layout>
);
};
export default DetailsLayout;

23
components/Code.tsx Normal file
View File

@@ -0,0 +1,23 @@
import * as React from 'react';
import Highlight, { defaultProps } from 'prism-react-renderer';
import theme from 'prism-react-renderer/themes/vsDark';
export const Code = ({ children, className }) => {
const lang = className ? className.split('-').pop() : 'js';
return (
<Highlight {...defaultProps} theme={theme} code={children.trim()} language={lang}>
{({ className, style, tokens, getLineProps, getTokenProps }) => (
<pre className={`block-code ${className}`} style={{ ...style }}>
{tokens.map((line, i) => (
<div key={i} {...getLineProps({ line, key: i })}>
{line.map((token, key) => (
<span key={key} {...getTokenProps({ token, key })} />
))}
</div>
))}
</pre>
)}
</Highlight>
);
};

2
components/CoverCard.tsx
View File

@@ -139,7 +139,7 @@ export const CoverCard: React.FC<CoverCardProps> = ({ pattern }) => {
const Cover = CoverList[pattern]; const Cover = CoverList[pattern];
return ( return (
<Link href={`/patterns/${slug(pattern)}`}> <Link href={`/${slug(pattern)}`}>
<a className="block-cover"> <a className="block-cover">
<Cover /> <Cover />
<h4 className="block-cover__name"> <h4 className="block-cover__name">

23
components/RelatedPatterns.tsx Normal file
View File

@@ -0,0 +1,23 @@
import * as React from 'react';
import { Heading, Spacer } from '@1milligram/design';
import { Pattern } from '../constants/Pattern';
import { CoverCard } from './CoverCard';
interface RelatedPatternsProps {
patterns: Pattern[];
}
export const RelatedPatterns: React.FC<RelatedPatternsProps> = ({ patterns }) => {
return (
<section>
<Heading level={2}>See also</Heading>
<div style={{ alignItems: 'start', display: 'flex', flexWrap: 'wrap', padding: '1.5rem' }}>
{
patterns.map((pattern) => <CoverCard key={pattern} pattern={pattern} />)
}
</div>
</section>
);
};

42
layouts/DetailsLayout.tsx Normal file
View File

@@ -0,0 +1,42 @@
import * as React from 'react';
import Head from 'next/head';
import { Heading, Spacer } from '@1milligram/design';
import { Pattern } from '../constants/Pattern';
import { slug } from '../utils/slug';
import { Layout } from './Layout';
interface DetailsLayoutProps {
pattern: Pattern;
}
export const DetailsLayout: React.FC<DetailsLayoutProps> = ({ pattern, children }) => {
const patternSlug = slug(pattern);
return (
<Layout title={pattern}>
<Head>
<title>CSS Layout ∙ {pattern}</title>
<meta name="title" content={`${pattern} - CSS Layout`} />
<meta property="og:image" content={`https://csslayout.io/assets/patterns/${patternSlug}.png`} />
<meta property="og:title" content={`${pattern} - CSS Layout`} />
<meta property="og:url" content={`https://csslayout.io/patterns/${patternSlug}`} />
<meta property="twitter:image" content={`https://csslayout.io/assets/patterns/${patternSlug}.png`} />
<meta property="twitter:title" content={`${pattern} - CSS Layout`} />
<meta property="twitter:url" content={`https://csslayout.io/patterns/${patternSlug}`} />
</Head>
<div className="block-container">
<div className="page-home__hero">
<Spacer size="extraLarge" />
<Heading level={1}>{pattern}</Heading>
<Spacer size="large" />
</div>
{children}
</div>
</Layout>
);
};

12
pages/accordion/index.tsx
View File

@@ -4,11 +4,11 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block'; import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
@@ -58,12 +58,12 @@ const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.Accordion}> <DetailsLayout pattern={Pattern.Accordion}>
<Helmet> <Head>
<meta name="description" content="Create an accordion with CSS flexbox" /> <meta name="description" content="Create an accordion with CSS flexbox" />
<meta name="og:description" content="Create an accordion with CSS flexbox" /> <meta name="og:description" content="Create an accordion with CSS flexbox" />
<meta name="twitter:description" content="Create an accordion with CSS flexbox" /> <meta name="twitter:description" content="Create an accordion with CSS flexbox" />
<meta name="keywords" content="css accordion, css flexbox" /> <meta name="keywords" content="css accordion, css flexbox" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

12
pages/arrow-buttons/index.tsx
View File

@@ -4,22 +4,22 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.ArrowButtons}> <DetailsLayout pattern={Pattern.ArrowButtons}>
<Helmet> <Head>
<meta name="description" content="Create arrow buttons with CSS" /> <meta name="description" content="Create arrow buttons with CSS" />
<meta name="og:description" content="Create arrow buttons with CSS" /> <meta name="og:description" content="Create arrow buttons with CSS" />
<meta name="twitter:description" content="Create arrow buttons with CSS" /> <meta name="twitter:description" content="Create arrow buttons with CSS" />
<meta name="keywords" content="css arrow buttons" /> <meta name="keywords" content="css arrow buttons" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

12
pages/avatar-list/index.tsx
View File

@@ -4,11 +4,11 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
const Avatar: React.FC<{}> = ({ children }) => { const Avatar: React.FC<{}> = ({ children }) => {
@@ -34,12 +34,12 @@ const Avatar: React.FC<{}> = ({ children }) => {
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.AvatarList}> <DetailsLayout pattern={Pattern.AvatarList}>
<Helmet> <Head>
<meta name="description" content="Create an avatar list with CSS flexbox" /> <meta name="description" content="Create an avatar list with CSS flexbox" />
<meta name="og:description" content="Create an avatar list with CSS flexbox" /> <meta name="og:description" content="Create an avatar list with CSS flexbox" />
<meta name="twitter:description" content="Create an avatar list with CSS flexbox" /> <meta name="twitter:description" content="Create an avatar list with CSS flexbox" />
<meta name="keywords" content="css avatar, css flexbox" /> <meta name="keywords" content="css avatar, css flexbox" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

12
pages/avatar/index.tsx
View File

@@ -4,22 +4,22 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.Avatar}> <DetailsLayout pattern={Pattern.Avatar}>
<Helmet> <Head>
<meta name="description" content="Create an avatar component with CSS flexbox" /> <meta name="description" content="Create an avatar component with CSS flexbox" />
<meta name="og:description" content="Create an avatar component with CSS flexbox" /> <meta name="og:description" content="Create an avatar component with CSS flexbox" />
<meta name="twitter:description" content="Create an avatar component with CSS flexbox" /> <meta name="twitter:description" content="Create an avatar component with CSS flexbox" />
<meta name="keywords" content="css avatar, css flexbox" /> <meta name="keywords" content="css avatar, css flexbox" />
</Helmet> </Head>
<BrowserFrame <BrowserFrame
html={` html={`
<div class="avatar"> <div class="avatar">

12
pages/badge/index.tsx
View File

@@ -4,22 +4,22 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.Badge}> <DetailsLayout pattern={Pattern.Badge}>
<Helmet> <Head>
<meta name="description" content="Create a badge component with CSS flexbox" /> <meta name="description" content="Create a badge component with CSS flexbox" />
<meta name="og:description" content="Create a badge component with CSS flexbox" /> <meta name="og:description" content="Create a badge component with CSS flexbox" />
<meta name="twitter:description" content="Create a badge component with CSS flexbox" /> <meta name="twitter:description" content="Create a badge component with CSS flexbox" />
<meta name="keywords" content="css badge, css flexbox" /> <meta name="keywords" content="css badge, css flexbox" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

10
pages/breadcrumb/index.tsx
View File

@@ -4,22 +4,22 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.Breadcrumb}> <DetailsLayout pattern={Pattern.Breadcrumb}>
<Helmet> <Head>
<meta name="description" content="Create a breadcrumb with CSS flexbox" /> <meta name="description" content="Create a breadcrumb with CSS flexbox" />
<meta name="og:description" content="Create a breadcrumb with CSS flexbox" /> <meta name="og:description" content="Create a breadcrumb with CSS flexbox" />
<meta name="twitter:description" content="Create a breadcrumb with CSS flexbox" /> <meta name="twitter:description" content="Create a breadcrumb with CSS flexbox" />
<meta name="keywords" content="css breadcrumb, css flexbox" /> <meta name="keywords" content="css breadcrumb, css flexbox" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

10
pages/button-with-icon/index.tsx
View File

@@ -4,10 +4,10 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle'; import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
@@ -15,12 +15,12 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.ButtonWithIcon}> <DetailsLayout pattern={Pattern.ButtonWithIcon}>
<Helmet> <Head>
<meta name="description" content="Create an icon button with CSS flexbox" /> <meta name="description" content="Create an icon button with CSS flexbox" />
<meta name="og:description" content="Create an icon button with CSS flexbox" /> <meta name="og:description" content="Create an icon button with CSS flexbox" />
<meta name="twitter:description" content="Create an icon button with CSS flexbox" /> <meta name="twitter:description" content="Create an icon button with CSS flexbox" />
<meta name="keywords" content="css flexbox, css icon button" /> <meta name="keywords" content="css flexbox, css icon button" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

12
pages/card-layout/index.tsx
View File

@@ -4,23 +4,23 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.CardLayout}> <DetailsLayout pattern={Pattern.CardLayout}>
<Helmet> <Head>
<meta name="description" content="Create a card layout with CSS flexbox" /> <meta name="description" content="Create a card layout with CSS flexbox" />
<meta name="og:description" content="Create a card layout with CSS flexbox" /> <meta name="og:description" content="Create a card layout with CSS flexbox" />
<meta name="twitter:description" content="Create a card layout with CSS flexbox" /> <meta name="twitter:description" content="Create a card layout with CSS flexbox" />
<meta name="keywords" content="css card layout, css flexbox, css layout" /> <meta name="keywords" content="css card layout, css flexbox, css layout" />
</Helmet> </Head>
<BrowserFrame <BrowserFrame
html={` html={`
<div class="cards"> <div class="cards">

12
pages/card/index.tsx
View File

@@ -4,11 +4,11 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block'; import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
@@ -16,12 +16,12 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.Card}> <DetailsLayout pattern={Pattern.Card}>
<Helmet> <Head>
<meta name="description" content="Create a card with CSS flexbox" /> <meta name="description" content="Create a card with CSS flexbox" />
<meta name="og:description" content="Create a card with CSS flexbox" /> <meta name="og:description" content="Create a card with CSS flexbox" />
<meta name="twitter:description" content="Create a card with CSS flexbox" /> <meta name="twitter:description" content="Create a card with CSS flexbox" />
<meta name="keywords" content="css card, css flexbox" /> <meta name="keywords" content="css card, css flexbox" />
</Helmet> </Head>
<BrowserFrame <BrowserFrame
html={` html={`
<div class="card"> <div class="card">

10
pages/centering/index.tsx
View File

@@ -4,10 +4,10 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle'; import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
@@ -15,12 +15,12 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.Centering}> <DetailsLayout pattern={Pattern.Centering}>
<Helmet> <Head>
<meta name="description" content="Center an element with CSS flexbox" /> <meta name="description" content="Center an element with CSS flexbox" />
<meta name="og:description" content="Center an element with CSS flexbox" /> <meta name="og:description" content="Center an element with CSS flexbox" />
<meta name="twitter:description" content="Center an element with CSS flexbox" /> <meta name="twitter:description" content="Center an element with CSS flexbox" />
<meta name="keywords" content="css centering, css flexbox" /> <meta name="keywords" content="css centering, css flexbox" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

12
pages/chip/index.tsx
View File

@@ -4,24 +4,24 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import InputChip from './InputChip'; import InputChip from './InputChip';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.Chip}> <DetailsLayout pattern={Pattern.Chip}>
<Helmet> <Head>
<meta name="description" content="Create a chip component with CSS flexbox" /> <meta name="description" content="Create a chip component with CSS flexbox" />
<meta name="og:description" content="Create a chip component with CSS flexbox" /> <meta name="og:description" content="Create a chip component with CSS flexbox" />
<meta name="twitter:description" content="Create a chip component with CSS flexbox" /> <meta name="twitter:description" content="Create a chip component with CSS flexbox" />
<meta name="keywords" content="css chip, css flexbox, css tag" /> <meta name="keywords" content="css chip, css flexbox, css tag" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}> <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
You can use a <Link to='/patterns/close-button'>close button</Link> to remove a chip. You can use a <Link to='/patterns/close-button'>close button</Link> to remove a chip.

10
pages/circular-navigation/index.tsx
View File

@@ -4,10 +4,10 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Square from '../../placeholders/Square'; import Square from '../../placeholders/Square';
@@ -50,12 +50,12 @@ const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.CircularNavigation}> <DetailsLayout pattern={Pattern.CircularNavigation}>
<Helmet> <Head>
<meta name="description" content="Create a circular navigation with CSS flexbox" /> <meta name="description" content="Create a circular navigation with CSS flexbox" />
<meta name="og:description" content="Create a circular navigation with CSS flexbox" /> <meta name="og:description" content="Create a circular navigation with CSS flexbox" />
<meta name="twitter:description" content="Create a circular navigation with CSS flexbox" /> <meta name="twitter:description" content="Create a circular navigation with CSS flexbox" />
<meta name="keywords" content="css circular navigation, css flexbox" /> <meta name="keywords" content="css circular navigation, css flexbox" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

12
pages/close-button/index.tsx
View File

@@ -4,22 +4,22 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.CloseButton}> <DetailsLayout pattern={Pattern.CloseButton}>
<Helmet> <Head>
<meta name="description" content="Create a close button with CSS flexbox" /> <meta name="description" content="Create a close button with CSS flexbox" />
<meta name="og:description" content="Create a close button with CSS flexbox" /> <meta name="og:description" content="Create a close button with CSS flexbox" />
<meta name="twitter:description" content="Create a close button with CSS flexbox" /> <meta name="twitter:description" content="Create a close button with CSS flexbox" />
<meta name="keywords" content="css close button, css flexbox" /> <meta name="keywords" content="css close button, css flexbox" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

10
pages/color-swatch/index.tsx
View File

@@ -4,21 +4,21 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.ColorSwatch}> <DetailsLayout pattern={Pattern.ColorSwatch}>
<Helmet> <Head>
<meta name="description" content="Create a color swatch with CSS flexbox" /> <meta name="description" content="Create a color swatch with CSS flexbox" />
<meta name="og:description" content="Create a color swatch with CSS flexbox" /> <meta name="og:description" content="Create a color swatch with CSS flexbox" />
<meta name="twitter:description" content="Create a color swatch with CSS flexbox" /> <meta name="twitter:description" content="Create a color swatch with CSS flexbox" />
<meta name="keywords" content="css color swatch, css flexbox" /> <meta name="keywords" content="css color swatch, css flexbox" />
</Helmet> </Head>
<BrowserFrame <BrowserFrame
html={` html={`
<div class="swatch"> <div class="swatch">

12
pages/concave-corners/index.tsx
View File

@@ -4,22 +4,22 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.ConcaveCorners}> <DetailsLayout pattern={Pattern.ConcaveCorners}>
<Helmet> <Head>
<meta name="description" content="Create concave corners with CSS" /> <meta name="description" content="Create concave corners with CSS" />
<meta name="og:description" content="Create concave corners with CSS" /> <meta name="og:description" content="Create concave corners with CSS" />
<meta name="twitter:description" content="Create concave corners with CSS" /> <meta name="twitter:description" content="Create concave corners with CSS" />
<meta name="keywords" content="css border radius, css concave border radius, css concave corners" /> <meta name="keywords" content="css border radius, css concave border radius, css concave corners" />
</Helmet> </Head>
<BrowserFrame <BrowserFrame
html={` html={`
<div class="concave-corners"> <div class="concave-corners">

12
pages/cookie-banner/index.tsx
View File

@@ -4,11 +4,11 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block'; import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
@@ -16,12 +16,12 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.CookieBanner}> <DetailsLayout pattern={Pattern.CookieBanner}>
<Helmet> <Head>
<meta name="description" content="Create a cookie banner with CSS flexbox" /> <meta name="description" content="Create a cookie banner with CSS flexbox" />
<meta name="og:description" content="Create a cookie banner with CSS flexbox" /> <meta name="og:description" content="Create a cookie banner with CSS flexbox" />
<meta name="twitter:description" content="Create a cookie banner with CSS flexbox" /> <meta name="twitter:description" content="Create a cookie banner with CSS flexbox" />
<meta name="keywords" content="css cookie banner, css flexbox" /> <meta name="keywords" content="css cookie banner, css flexbox" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

12
pages/corner-ribbon/index.tsx
View File

@@ -4,24 +4,24 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import Heading from '../../components/Heading'; import Heading from '../../components/Heading';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.CornerRibbon}> <DetailsLayout pattern={Pattern.CornerRibbon}>
<Helmet> <Head>
<meta name="description" content="Create a corner ribbon with CSS flexbox" /> <meta name="description" content="Create a corner ribbon with CSS flexbox" />
<meta name="og:description" content="Create a corner ribbon with CSS flexbox" /> <meta name="og:description" content="Create a corner ribbon with CSS flexbox" />
<meta name="twitter:description" content="Create a corner ribbon with CSS flexbox" /> <meta name="twitter:description" content="Create a corner ribbon with CSS flexbox" />
<meta name="keywords" content="css flexbox, css ribbon" /> <meta name="keywords" content="css flexbox, css ribbon" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

12
pages/curved-background/index.tsx
View File

@@ -4,22 +4,22 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.CurvedBackground}> <DetailsLayout pattern={Pattern.CurvedBackground}>
<Helmet> <Head>
<meta name="description" content="Create an element with curved background" /> <meta name="description" content="Create an element with curved background" />
<meta name="og:description" content="Create an element with curved background" /> <meta name="og:description" content="Create an element with curved background" />
<meta name="twitter:description" content="Create an element with curved background" /> <meta name="twitter:description" content="Create an element with curved background" />
<meta name="keywords" content="css border radius, css curved background" /> <meta name="keywords" content="css border radius, css curved background" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

12
pages/custom-checkbox-button/index.tsx
View File

@@ -4,11 +4,11 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
@@ -64,12 +64,12 @@ const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.CustomCheckboxButton}> <DetailsLayout pattern={Pattern.CustomCheckboxButton}>
<Helmet> <Head>
<meta name="description" content="Create a custom checkbox button with CSS flexbox" /> <meta name="description" content="Create a custom checkbox button with CSS flexbox" />
<meta name="og:description" content="Create a custom checkbox button with CSS flexbox" /> <meta name="og:description" content="Create a custom checkbox button with CSS flexbox" />
<meta name="twitter:description" content="Create a custom checkbox button with CSS flexbox" /> <meta name="twitter:description" content="Create a custom checkbox button with CSS flexbox" />
<meta name="keywords" content="css checkbox, css flexbox" /> <meta name="keywords" content="css checkbox, css flexbox" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

12
pages/custom-radio-button/index.tsx
View File

@@ -4,11 +4,11 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
@@ -65,12 +65,12 @@ const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.CustomRadioButton}> <DetailsLayout pattern={Pattern.CustomRadioButton}>
<Helmet> <Head>
<meta name="description" content="Create a custom radio button with CSS flexbox" /> <meta name="description" content="Create a custom radio button with CSS flexbox" />
<meta name="og:description" content="Create a custom radio button with CSS flexbox" /> <meta name="og:description" content="Create a custom radio button with CSS flexbox" />
<meta name="twitter:description" content="Create a custom radio button with CSS flexbox" /> <meta name="twitter:description" content="Create a custom radio button with CSS flexbox" />
<meta name="keywords" content="css flexbox, css radio" /> <meta name="keywords" content="css flexbox, css radio" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

12
pages/diagonal-section/index.tsx
View File

@@ -4,23 +4,23 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block'; import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.DiagonalSection}> <DetailsLayout pattern={Pattern.DiagonalSection}>
<Helmet> <Head>
<meta name="description" content="Create a diagonal section with CSS" /> <meta name="description" content="Create a diagonal section with CSS" />
<meta name="og:description" content="Create a diagonal section with CSS" /> <meta name="og:description" content="Create a diagonal section with CSS" />
<meta name="twitter:description" content="Create a diagonal section with CSS" /> <meta name="twitter:description" content="Create a diagonal section with CSS" />
<meta name="keywords" content="css diagonal section, css transform skew" /> <meta name="keywords" content="css diagonal section, css transform skew" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

12
pages/docked-at-corner/index.tsx
View File

@@ -4,24 +4,24 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import Heading from '../../components/Heading'; import Heading from '../../components/Heading';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.DockedAtCorner}> <DetailsLayout pattern={Pattern.DockedAtCorner}>
<Helmet> <Head>
<meta name="description" content="Dock an element at corner with CSS" /> <meta name="description" content="Dock an element at corner with CSS" />
<meta name="og:description" content="Dock an element at corner with CSS" /> <meta name="og:description" content="Dock an element at corner with CSS" />
<meta name="twitter:description" content="Dock an element at corner with CSS" /> <meta name="twitter:description" content="Dock an element at corner with CSS" />
<meta name="keywords" content="css docked, css flexbox" /> <meta name="keywords" content="css docked, css flexbox" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

12
pages/dot-leader/index.tsx
View File

@@ -4,12 +4,12 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import Heading from '../../components/Heading'; import Heading from '../../components/Heading';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle'; import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
@@ -17,12 +17,12 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.DotLeader}> <DetailsLayout pattern={Pattern.DotLeader}>
<Helmet> <Head>
<meta name="description" content="Create dot leaders with CSS flexbox" /> <meta name="description" content="Create dot leaders with CSS flexbox" />
<meta name="og:description" content="Create dot leaders with CSS flexbox" /> <meta name="og:description" content="Create dot leaders with CSS flexbox" />
<meta name="twitter:description" content="Create dot leaders with CSS flexbox" /> <meta name="twitter:description" content="Create dot leaders with CSS flexbox" />
<meta name="keywords" content="css dot leader, css flexbox" /> <meta name="keywords" content="css dot leader, css flexbox" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

10
pages/dot-navigation/index.tsx
View File

@@ -4,10 +4,10 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
interface DotProps { interface DotProps {
@@ -38,12 +38,12 @@ const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.DotNavigation}> <DetailsLayout pattern={Pattern.DotNavigation}>
<Helmet> <Head>
<meta name="description" content="Create dot navigation with CSS flexbox" /> <meta name="description" content="Create dot navigation with CSS flexbox" />
<meta name="og:description" content="Create dot navigation with CSS flexbox" /> <meta name="og:description" content="Create dot navigation with CSS flexbox" />
<meta name="twitter:description" content="Create dot navigation with CSS flexbox" /> <meta name="twitter:description" content="Create dot navigation with CSS flexbox" />
<meta name="keywords" content="css dot navigation, css flexbox" /> <meta name="keywords" content="css dot navigation, css flexbox" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

10
pages/drawer/index.tsx
View File

@@ -4,22 +4,22 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block'; import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.Drawer}> <DetailsLayout pattern={Pattern.Drawer}>
<Helmet> <Head>
<meta name="description" content="Create a drawer navigation with CSS" /> <meta name="description" content="Create a drawer navigation with CSS" />
<meta name="og:description" content="Create a drawer navigation with CSS" /> <meta name="og:description" content="Create a drawer navigation with CSS" />
<meta name="twitter:description" content="Create a drawer navigation with CSS" /> <meta name="twitter:description" content="Create a drawer navigation with CSS" />
<meta name="keywords" content="css drawer, css off-canvas" /> <meta name="keywords" content="css drawer, css off-canvas" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}> <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
This pattern is also known as off-canvas. This pattern is also known as off-canvas.

10
pages/drop-area/index.tsx
View File

@@ -4,22 +4,22 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block'; import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.DropArea}> <DetailsLayout pattern={Pattern.DropArea}>
<Helmet> <Head>
<meta name="description" content="Create a dropping area with CSS flexbox" /> <meta name="description" content="Create a dropping area with CSS flexbox" />
<meta name="og:description" content="Create a dropping area with CSS flexbox" /> <meta name="og:description" content="Create a dropping area with CSS flexbox" />
<meta name="twitter:description" content="Create a dropping area with CSS flexbox" /> <meta name="twitter:description" content="Create a dropping area with CSS flexbox" />
<meta name="keywords" content="css dropping area, css flexbox" /> <meta name="keywords" content="css dropping area, css flexbox" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

10
pages/drop-cap/index.tsx
View File

@@ -4,21 +4,21 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.DropCap}> <DetailsLayout pattern={Pattern.DropCap}>
<Helmet> <Head>
<meta name="description" content="Create a drop cap with CSS" /> <meta name="description" content="Create a drop cap with CSS" />
<meta name="og:description" content="Create a drop cap with CSS" /> <meta name="og:description" content="Create a drop cap with CSS" />
<meta name="twitter:description" content="Create a drop cap with CSS" /> <meta name="twitter:description" content="Create a drop cap with CSS" />
<meta name="keywords" content="css drop cap" /> <meta name="keywords" content="css drop cap" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

12
pages/dropdown/index.tsx
View File

@@ -4,11 +4,11 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block'; import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
@@ -17,12 +17,12 @@ import Triangle from '../../placeholders/Triangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.Dropdown}> <DetailsLayout pattern={Pattern.Dropdown}>
<Helmet> <Head>
<meta name="description" content="Create a dropdown with CSS" /> <meta name="description" content="Create a dropdown with CSS" />
<meta name="og:description" content="Create a dropdown with CSS" /> <meta name="og:description" content="Create a dropdown with CSS" />
<meta name="twitter:description" content="Create a dropdown with CSS" /> <meta name="twitter:description" content="Create a dropdown with CSS" />
<meta name="keywords" content="css dropdown, css menu" /> <meta name="keywords" content="css dropdown, css menu" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}> <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
Move the mouse over the button to see the dropdown. Move the mouse over the button to see the dropdown.

10
pages/fading-long-section/index.tsx
View File

@@ -4,22 +4,22 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block'; import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.FadingLongSection}> <DetailsLayout pattern={Pattern.FadingLongSection}>
<Helmet> <Head>
<meta name="description" content="Fading long section to indicate there is more content" /> <meta name="description" content="Fading long section to indicate there is more content" />
<meta name="og:description" content="Fading long section to indicate there is more content" /> <meta name="og:description" content="Fading long section to indicate there is more content" />
<meta name="twitter:description" content="Fading long section to indicate there is more content" /> <meta name="twitter:description" content="Fading long section to indicate there is more content" />
<meta name="keywords" content="css fading overflow, css linear gradient" /> <meta name="keywords" content="css fading overflow, css linear gradient" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}> <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
Fading a long section to indicate there is more content. Fading a long section to indicate there is more content.

12
pages/feature-comparison/index.tsx
View File

@@ -4,11 +4,11 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block'; import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle'; import Circle from '../../placeholders/Circle';
@@ -17,12 +17,12 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.FeatureComparison}> <DetailsLayout pattern={Pattern.FeatureComparison}>
<Helmet> <Head>
<meta name="description" content="Create a feature comparison list with CSS flexbox" /> <meta name="description" content="Create a feature comparison list with CSS flexbox" />
<meta name="og:description" content="Create a feature comparison list with CSS flexbox" /> <meta name="og:description" content="Create a feature comparison list with CSS flexbox" />
<meta name="twitter:description" content="Create a feature comparison list with CSS flexbox" /> <meta name="twitter:description" content="Create a feature comparison list with CSS flexbox" />
<meta name="keywords" content="css feature comparison, css flexbox" /> <meta name="keywords" content="css feature comparison, css flexbox" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

12
pages/feature-list/index.tsx
View File

@@ -4,11 +4,11 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block'; import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle'; import Circle from '../../placeholders/Circle';
@@ -17,12 +17,12 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.FeatureList}> <DetailsLayout pattern={Pattern.FeatureList}>
<Helmet> <Head>
<meta name="description" content="Create a feature list with CSS flexbox" /> <meta name="description" content="Create a feature list with CSS flexbox" />
<meta name="og:description" content="Create a feature list with CSS flexbox" /> <meta name="og:description" content="Create a feature list with CSS flexbox" />
<meta name="twitter:description" content="Create a feature list with CSS flexbox" /> <meta name="twitter:description" content="Create a feature list with CSS flexbox" />
<meta name="keywords" content="css feature list, css flexbox" /> <meta name="keywords" content="css feature list, css flexbox" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

12
pages/fixed-at-corner/index.tsx
View File

@@ -4,23 +4,23 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Triangle from '../../placeholders/Triangle'; import Triangle from '../../placeholders/Triangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.FixedAtCorner}> <DetailsLayout pattern={Pattern.FixedAtCorner}>
<Helmet> <Head>
<meta name="description" content="Fix an element at corner with CSS" /> <meta name="description" content="Fix an element at corner with CSS" />
<meta name="og:description" content="Fix an element at corner with CSS" /> <meta name="og:description" content="Fix an element at corner with CSS" />
<meta name="twitter:description" content="Fix an element at corner with CSS" /> <meta name="twitter:description" content="Fix an element at corner with CSS" />
<meta name="keywords" content="css fixed" /> <meta name="keywords" content="css fixed" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

12
pages/fixed-at-side/index.tsx
View File

@@ -4,23 +4,23 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import Heading from '../../components/Heading'; import Heading from '../../components/Heading';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.FixedAtSide}> <DetailsLayout pattern={Pattern.FixedAtSide}>
<Helmet> <Head>
<meta name="description" content="Fix an element at the middle of side with CSS" /> <meta name="description" content="Fix an element at the middle of side with CSS" />
<meta name="og:description" content="Fix an element at the middle of side with CSS" /> <meta name="og:description" content="Fix an element at the middle of side with CSS" />
<meta name="twitter:description" content="Fix an element at the middle of side with CSS" /> <meta name="twitter:description" content="Fix an element at the middle of side with CSS" />
<meta name="keywords" content="css fixed" /> <meta name="keywords" content="css fixed" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

10
pages/floating-label/index.tsx
View File

@@ -4,23 +4,23 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import './floating-label.css'; import './floating-label.css';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.FloatingLabel}> <DetailsLayout pattern={Pattern.FloatingLabel}>
<Helmet> <Head>
<meta name="description" content="Create a floating label with CSS" /> <meta name="description" content="Create a floating label with CSS" />
<meta name="og:description" content="Create a floating label with CSS" /> <meta name="og:description" content="Create a floating label with CSS" />
<meta name="twitter:description" content="Create a floating label with CSS" /> <meta name="twitter:description" content="Create a floating label with CSS" />
<meta name="keywords" content="css floating label, placeholder shown" /> <meta name="keywords" content="css floating label, placeholder shown" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}> <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
Type something in the input to see how the label is shown up. Type something in the input to see how the label is shown up.

12
pages/folder-structure/index.tsx
View File

@@ -4,11 +4,11 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Square from '../../placeholders/Square'; import Square from '../../placeholders/Square';
import './folder-structure.css'; import './folder-structure.css';
@@ -16,12 +16,12 @@ import './folder-structure.css';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.FolderStructure}> <DetailsLayout pattern={Pattern.FolderStructure}>
<Helmet> <Head>
<meta name="description" content="Create a folder structure with CSS" /> <meta name="description" content="Create a folder structure with CSS" />
<meta name="og:description" content="Create a folder structure with CSS" /> <meta name="og:description" content="Create a folder structure with CSS" />
<meta name="twitter:description" content="Create a folder structure with CSS" /> <meta name="twitter:description" content="Create a folder structure with CSS" />
<meta name="keywords" content="css folder structure, css folder tree" /> <meta name="keywords" content="css folder structure, css folder tree" />
</Helmet> </Head>
<BrowserFrame <BrowserFrame
html={` html={`
<div class="folder-structure"> <div class="folder-structure">

12
pages/full-background/index.tsx
View File

@@ -4,23 +4,23 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block'; import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.FullBackground}> <DetailsLayout pattern={Pattern.FullBackground}>
<Helmet> <Head>
<meta name="description" content="Create a full background element with CSS" /> <meta name="description" content="Create a full background element with CSS" />
<meta name="og:description" content="Create a full background element with CSS" /> <meta name="og:description" content="Create a full background element with CSS" />
<meta name="twitter:description" content="Create a full background element with CSS" /> <meta name="twitter:description" content="Create a full background element with CSS" />
<meta name="keywords" content="css background size cover, css full background" /> <meta name="keywords" content="css background size cover, css full background" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

10
pages/full-screen-menu/index.tsx
View File

@@ -4,22 +4,22 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.FullScreenMenu}> <DetailsLayout pattern={Pattern.FullScreenMenu}>
<Helmet> <Head>
<meta name="description" content="Create a full screen menu with CSS flexbox" /> <meta name="description" content="Create a full screen menu with CSS flexbox" />
<meta name="og:description" content="Create a full screen menu with CSS flexbox" /> <meta name="og:description" content="Create a full screen menu with CSS flexbox" />
<meta name="twitter:description" content="Create a full screen menu with CSS flexbox" /> <meta name="twitter:description" content="Create a full screen menu with CSS flexbox" />
<meta name="keywords" content="css fixed, css flexbox, css menu" /> <meta name="keywords" content="css fixed, css flexbox, css menu" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

10
pages/holy-grail/index.tsx
View File

@@ -4,10 +4,10 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block'; import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
@@ -15,12 +15,12 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.HolyGrail}> <DetailsLayout pattern={Pattern.HolyGrail}>
<Helmet> <Head>
<meta name="description" content="Create a holy grail layout with CSS flexbox" /> <meta name="description" content="Create a holy grail layout with CSS flexbox" />
<meta name="og:description" content="Create a holy grail layout with CSS flexbox" /> <meta name="og:description" content="Create a holy grail layout with CSS flexbox" />
<meta name="twitter:description" content="Create a holy grail layout with CSS flexbox" /> <meta name="twitter:description" content="Create a holy grail layout with CSS flexbox" />
<meta name="keywords" content="css flexbox, css holy grail layout, css layout" /> <meta name="keywords" content="css flexbox, css holy grail layout, css layout" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

12
pages/initial-avatar/index.tsx
View File

@@ -4,23 +4,23 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.InitialAvatar}> <DetailsLayout pattern={Pattern.InitialAvatar}>
<Helmet> <Head>
<meta name="description" content="Create an initial avatar with CSS" /> <meta name="description" content="Create an initial avatar with CSS" />
<meta name="og:description" content="Create an initial avatar with CSS" /> <meta name="og:description" content="Create an initial avatar with CSS" />
<meta name="twitter:description" content="Create an initial avatar with CSS" /> <meta name="twitter:description" content="Create an initial avatar with CSS" />
<meta name="keywords" content="css avatar" /> <meta name="keywords" content="css avatar" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}> <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
To center the content, you also can use other technique demonstrated in To center the content, you also can use other technique demonstrated in

10
pages/input-addon/index.tsx
View File

@@ -4,22 +4,22 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.InputAddon}> <DetailsLayout pattern={Pattern.InputAddon}>
<Helmet> <Head>
<meta name="description" content="Create an input add-on with CSS flexbox" /> <meta name="description" content="Create an input add-on with CSS flexbox" />
<meta name="og:description" content="Create an input add-on with CSS flexbox" /> <meta name="og:description" content="Create an input add-on with CSS flexbox" />
<meta name="twitter:description" content="Create an input add-on with CSS flexbox" /> <meta name="twitter:description" content="Create an input add-on with CSS flexbox" />
<meta name="keywords" content="css flexbox, css input add-on" /> <meta name="keywords" content="css flexbox, css input add-on" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

12
pages/inverted-corners/index.tsx
View File

@@ -4,12 +4,12 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import Heading from '../../components/Heading'; import Heading from '../../components/Heading';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import './inverted-corners.css'; import './inverted-corners.css';
@@ -17,12 +17,12 @@ import './inverted-corners.css';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.InvertedCorners}> <DetailsLayout pattern={Pattern.InvertedCorners}>
<Helmet> <Head>
<meta name="description" content="Create inverted corners with CSS" /> <meta name="description" content="Create inverted corners with CSS" />
<meta name="og:description" content="Create inverted corners with CSS" /> <meta name="og:description" content="Create inverted corners with CSS" />
<meta name="twitter:description" content="Create inverted corners with CSS" /> <meta name="twitter:description" content="Create inverted corners with CSS" />
<meta name="keywords" content="css border radius, css inverted border radius, css inverted corners" /> <meta name="keywords" content="css border radius, css inverted border radius, css inverted corners" />
</Helmet> </Head>
<BrowserFrame <BrowserFrame
html={` html={`
<div class="inverted-corners"> <div class="inverted-corners">

10
pages/keyboard-shortcut/index.tsx
View File

@@ -4,12 +4,12 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import Heading from '../../components/Heading'; import Heading from '../../components/Heading';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
interface ItemProps { interface ItemProps {
@@ -47,12 +47,12 @@ const Item: React.FC<ItemProps> = ({ action, keys }) => {
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.KeyboardShortcut}> <DetailsLayout pattern={Pattern.KeyboardShortcut}>
<Helmet> <Head>
<meta name="description" content="Create a keyboard shortcut with CSS" /> <meta name="description" content="Create a keyboard shortcut with CSS" />
<meta name="og:description" content="Create a keyboard shortcut with CSS" /> <meta name="og:description" content="Create a keyboard shortcut with CSS" />
<meta name="twitter:description" content="Create a keyboard shortcut with CSS" /> <meta name="twitter:description" content="Create a keyboard shortcut with CSS" />
<meta name="keywords" content="kbd tag, keyboard shortcut" /> <meta name="keywords" content="kbd tag, keyboard shortcut" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}> <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
We use the native <code>kbd</code> tag to display the keyboard shortcut. We use the native <code>kbd</code> tag to display the keyboard shortcut.

12
pages/layered-card/index.tsx
View File

@@ -4,23 +4,23 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import './styles.css'; import './styles.css';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.LayeredCard}> <DetailsLayout pattern={Pattern.LayeredCard}>
<Helmet> <Head>
<meta name="description" content="Create a layered card with CSS" /> <meta name="description" content="Create a layered card with CSS" />
<meta name="og:description" content="Create a layered card with CSS" /> <meta name="og:description" content="Create a layered card with CSS" />
<meta name="twitter:description" content="Create a layered card with CSS" /> <meta name="twitter:description" content="Create a layered card with CSS" />
<meta name="keywords" content="css layered card" /> <meta name="keywords" content="css layered card" />
</Helmet> </Head>
<BrowserFrame <BrowserFrame
html={` html={`
<div class="layered-card"> <div class="layered-card">

10
pages/lined-paper/index.tsx
View File

@@ -4,21 +4,21 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.LinedPaper}> <DetailsLayout pattern={Pattern.LinedPaper}>
<Helmet> <Head>
<meta name="description" content="Create lined paper with CSS" /> <meta name="description" content="Create lined paper with CSS" />
<meta name="og:description" content="Create lined paper with CSS" /> <meta name="og:description" content="Create lined paper with CSS" />
<meta name="twitter:description" content="Create lined paper with CSS" /> <meta name="twitter:description" content="Create lined paper with CSS" />
<meta name="keywords" content="css linear gradient, css lined paper, css multiple horizontal lines" /> <meta name="keywords" content="css linear gradient, css lined paper, css multiple horizontal lines" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

12
pages/masonry-grid/index.tsx
View File

@@ -4,11 +4,11 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
@@ -17,12 +17,12 @@ import './masonry-grid.css';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.MasonryGrid}> <DetailsLayout pattern={Pattern.MasonryGrid}>
<Helmet> <Head>
<meta name="description" content="Create a masonry grid with CSS" /> <meta name="description" content="Create a masonry grid with CSS" />
<meta name="og:description" content="Create a masonry grid with CSS" /> <meta name="og:description" content="Create a masonry grid with CSS" />
<meta name="twitter:description" content="Create a masonry grid with CSS" /> <meta name="twitter:description" content="Create a masonry grid with CSS" />
<meta name="keywords" content="css column-count, css column-gap, css masonry, css masonry grid" /> <meta name="keywords" content="css column-count, css column-gap, css masonry, css masonry grid" />
</Helmet> </Head>
<BrowserFrame <BrowserFrame
html={` html={`
<div class="masonry-grid"> <div class="masonry-grid">

10
pages/media-object/index.tsx
View File

@@ -4,10 +4,10 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block'; import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
@@ -16,12 +16,12 @@ import Square from '../../placeholders/Square';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.MediaObject}> <DetailsLayout pattern={Pattern.MediaObject}>
<Helmet> <Head>
<meta name="description" content="Create a media object with CSS flexbox" /> <meta name="description" content="Create a media object with CSS flexbox" />
<meta name="og:description" content="Create a media object with CSS flexbox" /> <meta name="og:description" content="Create a media object with CSS flexbox" />
<meta name="twitter:description" content="Create a media object with CSS flexbox" /> <meta name="twitter:description" content="Create a media object with CSS flexbox" />
<meta name="keywords" content="css flexbox, media object" /> <meta name="keywords" content="css flexbox, media object" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

12
pages/mega-menu/index.tsx
View File

@@ -4,13 +4,13 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import './mega-menu.css'; import './mega-menu.css';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block'; import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
@@ -19,12 +19,12 @@ import Triangle from '../../placeholders/Triangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.MegaMenu}> <DetailsLayout pattern={Pattern.MegaMenu}>
<Helmet> <Head>
<meta name="description" content="Create a mega menu with CSS" /> <meta name="description" content="Create a mega menu with CSS" />
<meta name="og:description" content="Create a mega menu with CSS" /> <meta name="og:description" content="Create a mega menu with CSS" />
<meta name="twitter:description" content="Create a mega menu with CSS" /> <meta name="twitter:description" content="Create a mega menu with CSS" />
<meta name="keywords" content="css mega menu" /> <meta name="keywords" content="css mega menu" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}> <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
Move the mouse over the second navigation item to see the mega menu. Move the mouse over the second navigation item to see the mega menu.

12
pages/menu/index.tsx
View File

@@ -4,13 +4,13 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import './menu.css'; import './menu.css';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle'; import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
@@ -18,12 +18,12 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.Menu}> <DetailsLayout pattern={Pattern.Menu}>
<Helmet> <Head>
<meta name="description" content="Create a menu with CSS flexbox" /> <meta name="description" content="Create a menu with CSS flexbox" />
<meta name="og:description" content="Create a menu with CSS flexbox" /> <meta name="og:description" content="Create a menu with CSS flexbox" />
<meta name="twitter:description" content="Create a menu with CSS flexbox" /> <meta name="twitter:description" content="Create a menu with CSS flexbox" />
<meta name="keywords" content="css flexbox, css menu" /> <meta name="keywords" content="css flexbox, css menu" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

10
pages/modal/index.tsx
View File

@@ -4,11 +4,11 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block'; import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle'; import Circle from '../../placeholders/Circle';
@@ -17,12 +17,12 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.Modal}> <DetailsLayout pattern={Pattern.Modal}>
<Helmet> <Head>
<meta name="description" content="Create a modal with CSS flexbox" /> <meta name="description" content="Create a modal with CSS flexbox" />
<meta name="og:description" content="Create a modal with CSS flexbox" /> <meta name="og:description" content="Create a modal with CSS flexbox" />
<meta name="twitter:description" content="Create a modal with CSS flexbox" /> <meta name="twitter:description" content="Create a modal with CSS flexbox" />
<meta name="keywords" content="css dialog, css flexbox, css modal" /> <meta name="keywords" content="css dialog, css flexbox, css modal" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}> <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
You can use the <Link to='/patterns/close-button'>close button</Link> to You can use the <Link to='/patterns/close-button'>close button</Link> to

12
pages/nested-dropdowns/index.tsx
View File

@@ -4,24 +4,24 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import './nested-dropdowns.css'; import './nested-dropdowns.css';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.NestedDropdowns}> <DetailsLayout pattern={Pattern.NestedDropdowns}>
<Helmet> <Head>
<meta name="description" content="Create nested dropdown menu with CSS" /> <meta name="description" content="Create nested dropdown menu with CSS" />
<meta name="og:description" content="Create nested dropdown menu with CSS" /> <meta name="og:description" content="Create nested dropdown menu with CSS" />
<meta name="twitter:description" content="Create nested dropdown menu with CSS" /> <meta name="twitter:description" content="Create nested dropdown menu with CSS" />
<meta name="keywords" content="css dropdown menu, css multi-level dropdown menu, css nested dropdown menu" /> <meta name="keywords" content="css dropdown menu, css multi-level dropdown menu, css nested dropdown menu" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}> <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
Hover on the Patterns &rarr; Navigation to see the sub dropdowns. Hover on the Patterns &rarr; Navigation to see the sub dropdowns.

10
pages/notification/index.tsx
View File

@@ -4,11 +4,11 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block'; import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle'; import Circle from '../../placeholders/Circle';
@@ -16,12 +16,12 @@ import Circle from '../../placeholders/Circle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.Notification}> <DetailsLayout pattern={Pattern.Notification}>
<Helmet> <Head>
<meta name="description" content="Create a notification with CSS flexbox" /> <meta name="description" content="Create a notification with CSS flexbox" />
<meta name="og:description" content="Create a notification with CSS flexbox" /> <meta name="og:description" content="Create a notification with CSS flexbox" />
<meta name="twitter:description" content="Create a notification with CSS flexbox" /> <meta name="twitter:description" content="Create a notification with CSS flexbox" />
<meta name="keywords" content="css alert, css flexbox, css notification" /> <meta name="keywords" content="css alert, css flexbox, css notification" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}> <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
You can use the <Link to='/patterns/close-button'>close button</Link> to You can use the <Link to='/patterns/close-button'>close button</Link> to

12
pages/overlay-play-button/index.tsx
View File

@@ -4,23 +4,23 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Triangle from '../../placeholders/Triangle'; import Triangle from '../../placeholders/Triangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.OverlayPlayButton}> <DetailsLayout pattern={Pattern.OverlayPlayButton}>
<Helmet> <Head>
<meta name="description" content="Create an overlay play button with CSS flexbox" /> <meta name="description" content="Create an overlay play button with CSS flexbox" />
<meta name="og:description" content="Create an overlay play button with CSS flexbox" /> <meta name="og:description" content="Create an overlay play button with CSS flexbox" />
<meta name="twitter:description" content="Create an overlay play button with CSS flexbox" /> <meta name="twitter:description" content="Create an overlay play button with CSS flexbox" />
<meta name="keywords" content="css flexbox" /> <meta name="keywords" content="css flexbox" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

10
pages/pagination/index.tsx
View File

@@ -4,10 +4,10 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle'; import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
@@ -15,12 +15,12 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.Pagination}> <DetailsLayout pattern={Pattern.Pagination}>
<Helmet> <Head>
<meta name="description" content="Create a pagination with CSS flexbox" /> <meta name="description" content="Create a pagination with CSS flexbox" />
<meta name="og:description" content="Create a pagination with CSS flexbox" /> <meta name="og:description" content="Create a pagination with CSS flexbox" />
<meta name="twitter:description" content="Create a pagination with CSS flexbox" /> <meta name="twitter:description" content="Create a pagination with CSS flexbox" />
<meta name="keywords" content="css flexbox, css pagination" /> <meta name="keywords" content="css flexbox, css pagination" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

12
pages/popover-arrow/index.tsx
View File

@@ -4,22 +4,22 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.PopoverArrow}> <DetailsLayout pattern={Pattern.PopoverArrow}>
<Helmet> <Head>
<meta name="description" content="Create a popover arrow with CSS" /> <meta name="description" content="Create a popover arrow with CSS" />
<meta name="og:description" content="Create a popover arrow with CSS" /> <meta name="og:description" content="Create a popover arrow with CSS" />
<meta name="twitter:description" content="Create a popover arrow with CSS" /> <meta name="twitter:description" content="Create a popover arrow with CSS" />
<meta name="keywords" content="css arrow, css popover" /> <meta name="keywords" content="css arrow, css popover" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

12
pages/presence-indicator/index.tsx
View File

@@ -4,23 +4,23 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle'; import Circle from '../../placeholders/Circle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.PresenceIndicator}> <DetailsLayout pattern={Pattern.PresenceIndicator}>
<Helmet> <Head>
<meta name="description" content="Create a presence indicator with CSS" /> <meta name="description" content="Create a presence indicator with CSS" />
<meta name="og:description" content="Create a presence indicator with CSS" /> <meta name="og:description" content="Create a presence indicator with CSS" />
<meta name="twitter:description" content="Create a presence indicator with CSS" /> <meta name="twitter:description" content="Create a presence indicator with CSS" />
<meta name="keywords" content="css indicator" /> <meta name="keywords" content="css indicator" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

10
pages/previous-next-buttons/index.tsx
View File

@@ -4,22 +4,22 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.PreviousNextButtons}> <DetailsLayout pattern={Pattern.PreviousNextButtons}>
<Helmet> <Head>
<meta name="description" content="Create previous and next buttons with CSS flexbox" /> <meta name="description" content="Create previous and next buttons with CSS flexbox" />
<meta name="og:description" content="Create previous and next buttons with CSS flexbox" /> <meta name="og:description" content="Create previous and next buttons with CSS flexbox" />
<meta name="twitter:description" content="Create previous and next buttons with CSS flexbox" /> <meta name="twitter:description" content="Create previous and next buttons with CSS flexbox" />
<meta name="keywords" content="css flexbox, css pagination" /> <meta name="keywords" content="css flexbox, css pagination" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

12
pages/price-tag/index.tsx
View File

@@ -4,23 +4,23 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import './price-tag.css'; import './price-tag.css';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.PriceTag}> <DetailsLayout pattern={Pattern.PriceTag}>
<Helmet> <Head>
<meta name="description" content="Create a price tag with CSS" /> <meta name="description" content="Create a price tag with CSS" />
<meta name="og:description" content="Create a price tag with CSS" /> <meta name="og:description" content="Create a price tag with CSS" />
<meta name="twitter:description" content="Create a price tag with CSS" /> <meta name="twitter:description" content="Create a price tag with CSS" />
<meta name="keywords" content="css price tag" /> <meta name="keywords" content="css price tag" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

12
pages/pricing-table/index.tsx
View File

@@ -4,12 +4,12 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block'; import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle'; import Circle from '../../placeholders/Circle';
@@ -18,12 +18,12 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.PricingTable}> <DetailsLayout pattern={Pattern.PricingTable}>
<Helmet> <Head>
<meta name="description" content="Create a pricing table with CSS flexbox" /> <meta name="description" content="Create a pricing table with CSS flexbox" />
<meta name="og:description" content="Create a pricing table with CSS flexbox" /> <meta name="og:description" content="Create a pricing table with CSS flexbox" />
<meta name="twitter:description" content="Create a pricing table with CSS flexbox" /> <meta name="twitter:description" content="Create a pricing table with CSS flexbox" />
<meta name="keywords" content="css flexbox, css pricing table" /> <meta name="keywords" content="css flexbox, css pricing table" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}> <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
You can <Link to='/patterns/ribbon'>add</Link> <Link to='/patterns/corner-ribbon'>a ribbon</Link> to You can <Link to='/patterns/ribbon'>add</Link> <Link to='/patterns/corner-ribbon'>a ribbon</Link> to

10
pages/progress-bar/index.tsx
View File

@@ -4,11 +4,11 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import useInterval from '../../hooks/useInterval'; import useInterval from '../../hooks/useInterval';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
@@ -19,12 +19,12 @@ const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.ProgressBar}> <DetailsLayout pattern={Pattern.ProgressBar}>
<Helmet> <Head>
<meta name="description" content="Create a progress bar with CSS flexbox" /> <meta name="description" content="Create a progress bar with CSS flexbox" />
<meta name="og:description" content="Create a progress bar with CSS flexbox" /> <meta name="og:description" content="Create a progress bar with CSS flexbox" />
<meta name="twitter:description" content="Create a progress bar with CSS flexbox" /> <meta name="twitter:description" content="Create a progress bar with CSS flexbox" />
<meta name="keywords" content="css flexbox, css progress bar" /> <meta name="keywords" content="css flexbox, css progress bar" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

12
pages/property-list/index.tsx
View File

@@ -4,12 +4,12 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import Heading from '../../components/Heading'; import Heading from '../../components/Heading';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle'; import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
@@ -34,12 +34,12 @@ const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.PropertyList}> <DetailsLayout pattern={Pattern.PropertyList}>
<Helmet> <Head>
<meta name="description" content="Create a property list with CSS flexbox" /> <meta name="description" content="Create a property list with CSS flexbox" />
<meta name="og:description" content="Create a property list with CSS flexbox" /> <meta name="og:description" content="Create a property list with CSS flexbox" />
<meta name="twitter:description" content="Create a property list with CSS flexbox" /> <meta name="twitter:description" content="Create a property list with CSS flexbox" />
<meta name="keywords" content="css flexbox, property list" /> <meta name="keywords" content="css flexbox, property list" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

12
pages/questions-and-answers/index.tsx
View File

@@ -4,11 +4,11 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block'; import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
@@ -54,12 +54,12 @@ const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.QuestionsAndAnswers}> <DetailsLayout pattern={Pattern.QuestionsAndAnswers}>
<Helmet> <Head>
<meta name="description" content="Create a questions and answers section with CSS flexbox" /> <meta name="description" content="Create a questions and answers section with CSS flexbox" />
<meta name="og:description" content="Create a questions and answers section with CSS flexbox" /> <meta name="og:description" content="Create a questions and answers section with CSS flexbox" />
<meta name="twitter:description" content="Create a questions and answers section with CSS flexbox" /> <meta name="twitter:description" content="Create a questions and answers section with CSS flexbox" />
<meta name="keywords" content="css accordion, css faq, css flexbox" /> <meta name="keywords" content="css accordion, css faq, css flexbox" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

10
pages/radial-progress-bar/index.tsx
View File

@@ -4,10 +4,10 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
interface RadialProgressProps { interface RadialProgressProps {
@@ -74,12 +74,12 @@ const RadialProgress: React.FC<RadialProgressProps> = ({ percentages }) => {
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.RadialProgressBar}> <DetailsLayout pattern={Pattern.RadialProgressBar}>
<Helmet> <Head>
<meta name="description" content="Create a radial progress bar with CSS flexbox" /> <meta name="description" content="Create a radial progress bar with CSS flexbox" />
<meta name="og:description" content="Create a radial progress bar with CSS flexbox" /> <meta name="og:description" content="Create a radial progress bar with CSS flexbox" />
<meta name="twitter:description" content="Create a radial progress bar with CSS flexbox" /> <meta name="twitter:description" content="Create a radial progress bar with CSS flexbox" />
<meta name="keywords" content="css clip rect, css flexbox, css progress bar" /> <meta name="keywords" content="css clip rect, css flexbox, css progress bar" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

12
pages/radio-button-group/index.tsx
View File

@@ -4,13 +4,13 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import './radio-button-group.css'; import './radio-button-group.css';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
@@ -50,12 +50,12 @@ const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.RadioButtonGroup}> <DetailsLayout pattern={Pattern.RadioButtonGroup}>
<Helmet> <Head>
<meta name="description" content="Create a radio button group with CSS flexbox" /> <meta name="description" content="Create a radio button group with CSS flexbox" />
<meta name="og:description" content="Create a radio button group with CSS flexbox" /> <meta name="og:description" content="Create a radio button group with CSS flexbox" />
<meta name="twitter:description" content="Create a radio button group with CSS flexbox" /> <meta name="twitter:description" content="Create a radio button group with CSS flexbox" />
<meta name="keywords" content="css flexbox, css radio button" /> <meta name="keywords" content="css flexbox, css radio button" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

12
pages/radio-switch/index.tsx
View File

@@ -4,12 +4,12 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import Heading from '../../components/Heading'; import Heading from '../../components/Heading';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
@@ -18,12 +18,12 @@ const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.RadioSwitch}> <DetailsLayout pattern={Pattern.RadioSwitch}>
<Helmet> <Head>
<meta name="description" content="Create a radio switch with CSS flexbox" /> <meta name="description" content="Create a radio switch with CSS flexbox" />
<meta name="og:description" content="Create a radio switch with CSS flexbox" /> <meta name="og:description" content="Create a radio switch with CSS flexbox" />
<meta name="twitter:description" content="Create a radio switch with CSS flexbox" /> <meta name="twitter:description" content="Create a radio switch with CSS flexbox" />
<meta name="keywords" content="css flexbox, css radio switch, css switch" /> <meta name="keywords" content="css flexbox, css radio switch, css switch" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

10
pages/rating/index.tsx
View File

@@ -4,22 +4,22 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Star from './Star'; import Star from './Star';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.Rating}> <DetailsLayout pattern={Pattern.Rating}>
<Helmet> <Head>
<meta name="description" content="Create a star rating with CSS flexbox" /> <meta name="description" content="Create a star rating with CSS flexbox" />
<meta name="og:description" content="Create a star rating with CSS flexbox" /> <meta name="og:description" content="Create a star rating with CSS flexbox" />
<meta name="twitter:description" content="Create a star rating with CSS flexbox" /> <meta name="twitter:description" content="Create a star rating with CSS flexbox" />
<meta name="keywords" content="css flexbox, css star rating" /> <meta name="keywords" content="css flexbox, css star rating" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

10
pages/resizable-element/index.tsx
View File

@@ -4,21 +4,21 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.ResizableElement}> <DetailsLayout pattern={Pattern.ResizableElement}>
<Helmet> <Head>
<meta name="description" content="Create resizable indicators with CSS" /> <meta name="description" content="Create resizable indicators with CSS" />
<meta name="og:description" content="Create resizable indicators with CSS" /> <meta name="og:description" content="Create resizable indicators with CSS" />
<meta name="twitter:description" content="Create resizable indicators with CSS" /> <meta name="twitter:description" content="Create resizable indicators with CSS" />
<meta name="keywords" content="css resizable, css resize cursor" /> <meta name="keywords" content="css resizable, css resize cursor" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}> <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
You can move the mouse over each squares located at the corners and the middle of sides to see You can move the mouse over each squares located at the corners and the middle of sides to see

12
pages/ribbon/index.tsx
View File

@@ -4,23 +4,23 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.Ribbon}> <DetailsLayout pattern={Pattern.Ribbon}>
<Helmet> <Head>
<meta name="description" content="Create a ribbon with CSS" /> <meta name="description" content="Create a ribbon with CSS" />
<meta name="og:description" content="Create a ribbon with CSS" /> <meta name="og:description" content="Create a ribbon with CSS" />
<meta name="twitter:description" content="Create a ribbon with CSS" /> <meta name="twitter:description" content="Create a ribbon with CSS" />
<meta name="keywords" content="css ribbon" /> <meta name="keywords" content="css ribbon" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

10
pages/same-height-columns/index.tsx
View File

@@ -4,10 +4,10 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block'; import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
@@ -15,12 +15,12 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.SameHeightColumns}> <DetailsLayout pattern={Pattern.SameHeightColumns}>
<Helmet> <Head>
<meta name="description" content="Create same height columns with CSS flexbox" /> <meta name="description" content="Create same height columns with CSS flexbox" />
<meta name="og:description" content="Create same height columns with CSS flexbox" /> <meta name="og:description" content="Create same height columns with CSS flexbox" />
<meta name="twitter:description" content="Create same height columns with CSS flexbox" /> <meta name="twitter:description" content="Create same height columns with CSS flexbox" />
<meta name="keywords" content="css flexbox, css layout, css same height columns" /> <meta name="keywords" content="css flexbox, css layout, css same height columns" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

10
pages/search-box/index.tsx
View File

@@ -4,22 +4,22 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle'; import Circle from '../../placeholders/Circle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.SearchBox}> <DetailsLayout pattern={Pattern.SearchBox}>
<Helmet> <Head>
<meta name="description" content="Create a search box with CSS flexbox" /> <meta name="description" content="Create a search box with CSS flexbox" />
<meta name="og:description" content="Create a search box with CSS flexbox" /> <meta name="og:description" content="Create a search box with CSS flexbox" />
<meta name="twitter:description" content="Create a search box with CSS flexbox" /> <meta name="twitter:description" content="Create a search box with CSS flexbox" />
<meta name="keywords" content="css flexbox, css search box" /> <meta name="keywords" content="css flexbox, css search box" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

10
pages/separator/index.tsx
View File

@@ -4,22 +4,22 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.Separator}> <DetailsLayout pattern={Pattern.Separator}>
<Helmet> <Head>
<meta name="description" content="Create a separator with CSS flexbox" /> <meta name="description" content="Create a separator with CSS flexbox" />
<meta name="og:description" content="Create a separator with CSS flexbox" /> <meta name="og:description" content="Create a separator with CSS flexbox" />
<meta name="twitter:description" content="Create a separator with CSS flexbox" /> <meta name="twitter:description" content="Create a separator with CSS flexbox" />
<meta name="keywords" content="css divider, css flexbox, css separator" /> <meta name="keywords" content="css divider, css flexbox, css separator" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

10
pages/sidebar/index.tsx
View File

@@ -4,22 +4,22 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block'; import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.Sidebar}> <DetailsLayout pattern={Pattern.Sidebar}>
<Helmet> <Head>
<meta name="description" content="Create a sidebar with CSS flexbox" /> <meta name="description" content="Create a sidebar with CSS flexbox" />
<meta name="og:description" content="Create a sidebar with CSS flexbox" /> <meta name="og:description" content="Create a sidebar with CSS flexbox" />
<meta name="twitter:description" content="Create a sidebar with CSS flexbox" /> <meta name="twitter:description" content="Create a sidebar with CSS flexbox" />
<meta name="keywords" content="css flexbox, css layout, css sidebar" /> <meta name="keywords" content="css flexbox, css layout, css sidebar" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>Try to scroll the main content!</div> <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>Try to scroll the main content!</div>
<BrowserFrame <BrowserFrame

12
pages/simple-grid/index.tsx
View File

@@ -4,23 +4,23 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.SimpleGrid}> <DetailsLayout pattern={Pattern.SimpleGrid}>
<Helmet> <Head>
<meta name="description" content="Create a simple grid with CSS flexbox" /> <meta name="description" content="Create a simple grid with CSS flexbox" />
<meta name="og:description" content="Create a simple grid with CSS flexbox" /> <meta name="og:description" content="Create a simple grid with CSS flexbox" />
<meta name="twitter:description" content="Create a simple grid with CSS flexbox" /> <meta name="twitter:description" content="Create a simple grid with CSS flexbox" />
<meta name="keywords" content="css flexbox, css flexbox grid, css grid, css layout" /> <meta name="keywords" content="css flexbox, css flexbox grid, css grid, css layout" />
</Helmet> </Head>
<BrowserFrame <BrowserFrame
html={` html={`
<!-- Row --> <!-- Row -->

10
pages/slider/index.tsx
View File

@@ -4,10 +4,10 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle'; import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
@@ -15,12 +15,12 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.Slider}> <DetailsLayout pattern={Pattern.Slider}>
<Helmet> <Head>
<meta name="description" content="Create a slider with CSS flexbox" /> <meta name="description" content="Create a slider with CSS flexbox" />
<meta name="og:description" content="Create a slider with CSS flexbox" /> <meta name="og:description" content="Create a slider with CSS flexbox" />
<meta name="twitter:description" content="Create a slider with CSS flexbox" /> <meta name="twitter:description" content="Create a slider with CSS flexbox" />
<meta name="keywords" content="css flexbox, css slider" /> <meta name="keywords" content="css flexbox, css slider" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

12
pages/spin-button/index.tsx
View File

@@ -4,11 +4,11 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Triangle from '../../placeholders/Triangle'; import Triangle from '../../placeholders/Triangle';
@@ -20,12 +20,12 @@ const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.SpinButton}> <DetailsLayout pattern={Pattern.SpinButton}>
<Helmet> <Head>
<meta name="description" content="Create a spin button with CSS flexbox" /> <meta name="description" content="Create a spin button with CSS flexbox" />
<meta name="og:description" content="Create a spin button with CSS flexbox" /> <meta name="og:description" content="Create a spin button with CSS flexbox" />
<meta name="twitter:description" content="Create a spin button with CSS flexbox" /> <meta name="twitter:description" content="Create a spin button with CSS flexbox" />
<meta name="keywords" content="css flexbox, css spin button" /> <meta name="keywords" content="css flexbox, css spin button" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

12
pages/split-navigation/index.tsx
View File

@@ -4,23 +4,23 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.SplitNavigation}> <DetailsLayout pattern={Pattern.SplitNavigation}>
<Helmet> <Head>
<meta name="description" content="Create a split navigation with CSS flexbox" /> <meta name="description" content="Create a split navigation with CSS flexbox" />
<meta name="og:description" content="Create a split navigation with CSS flexbox" /> <meta name="og:description" content="Create a split navigation with CSS flexbox" />
<meta name="twitter:description" content="Create a split navigation with CSS flexbox" /> <meta name="twitter:description" content="Create a split navigation with CSS flexbox" />
<meta name="keywords" content="css flexbox, css menu, css navigation, css split navigation" /> <meta name="keywords" content="css flexbox, css menu, css navigation, css split navigation" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

10
pages/split-screen/index.tsx
View File

@@ -4,10 +4,10 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block'; import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle'; import Circle from '../../placeholders/Circle';
@@ -16,12 +16,12 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.SplitScreen}> <DetailsLayout pattern={Pattern.SplitScreen}>
<Helmet> <Head>
<meta name="description" content="Create a split screen with CSS flexbox" /> <meta name="description" content="Create a split screen with CSS flexbox" />
<meta name="og:description" content="Create a split screen with CSS flexbox" /> <meta name="og:description" content="Create a split screen with CSS flexbox" />
<meta name="twitter:description" content="Create a split screen with CSS flexbox" /> <meta name="twitter:description" content="Create a split screen with CSS flexbox" />
<meta name="keywords" content="css flexbox, css layout, css split screen" /> <meta name="keywords" content="css flexbox, css layout, css split screen" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

12
pages/stacked-cards/index.tsx
View File

@@ -4,22 +4,22 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.StackedCards}> <DetailsLayout pattern={Pattern.StackedCards}>
<Helmet> <Head>
<meta name="description" content="Create stacked cards with CSS" /> <meta name="description" content="Create stacked cards with CSS" />
<meta name="og:description" content="Create stacked cards with CSS" /> <meta name="og:description" content="Create stacked cards with CSS" />
<meta name="twitter:description" content="Create stacked cards with CSS" /> <meta name="twitter:description" content="Create stacked cards with CSS" />
<meta name="keywords" content="css card, css stacked cards, css transform rotate" /> <meta name="keywords" content="css card, css stacked cards, css transform rotate" />
</Helmet> </Head>
<BrowserFrame <BrowserFrame
html={` html={`
<div class="container"> <div class="container">

10
pages/stamp-border/index.tsx
View File

@@ -4,21 +4,21 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.StampBorder}> <DetailsLayout pattern={Pattern.StampBorder}>
<Helmet> <Head>
<meta name="description" content="Create stamp border with CSS" /> <meta name="description" content="Create stamp border with CSS" />
<meta name="og:description" content="Create stamp border with CSS" /> <meta name="og:description" content="Create stamp border with CSS" />
<meta name="twitter:description" content="Create stamp border with CSS" /> <meta name="twitter:description" content="Create stamp border with CSS" />
<meta name="keywords" content="css radial gradient, css stamp border" /> <meta name="keywords" content="css radial gradient, css stamp border" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

10
pages/statistic/index.tsx
View File

@@ -4,22 +4,22 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import { random } from '../../utils/random'; import { random } from '../../utils/random';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.Statistic}> <DetailsLayout pattern={Pattern.Statistic}>
<Helmet> <Head>
<meta name="description" content="Create a statistic component with CSS flexbox" /> <meta name="description" content="Create a statistic component with CSS flexbox" />
<meta name="og:description" content="Create a statistic component with CSS flexbox" /> <meta name="og:description" content="Create a statistic component with CSS flexbox" />
<meta name="twitter:description" content="Create a statistic component with CSS flexbox" /> <meta name="twitter:description" content="Create a statistic component with CSS flexbox" />
<meta name="keywords" content="css flexbox, css statistic" /> <meta name="keywords" content="css flexbox, css statistic" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

10
pages/status-light/index.tsx
View File

@@ -4,23 +4,23 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import Heading from '../../components/Heading'; import Heading from '../../components/Heading';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.StatusLight}> <DetailsLayout pattern={Pattern.StatusLight}>
<Helmet> <Head>
<meta name="description" content="Create a status light with CSS flexbox" /> <meta name="description" content="Create a status light with CSS flexbox" />
<meta name="og:description" content="Create a status light with CSS flexbox" /> <meta name="og:description" content="Create a status light with CSS flexbox" />
<meta name="twitter:description" content="Create a status light with CSS flexbox" /> <meta name="twitter:description" content="Create a status light with CSS flexbox" />
<meta name="keywords" content="css flexbox, css status light" /> <meta name="keywords" content="css flexbox, css status light" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

12
pages/stepper-input/index.tsx
View File

@@ -4,11 +4,11 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
@@ -23,12 +23,12 @@ const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.StepperInput}> <DetailsLayout pattern={Pattern.StepperInput}>
<Helmet> <Head>
<meta name="description" content="Create a stepper input with CSS flexbox" /> <meta name="description" content="Create a stepper input with CSS flexbox" />
<meta name="og:description" content="Create a stepper input with CSS flexbox" /> <meta name="og:description" content="Create a stepper input with CSS flexbox" />
<meta name="twitter:description" content="Create a stepper input with CSS flexbox" /> <meta name="twitter:description" content="Create a stepper input with CSS flexbox" />
<meta name="keywords" content="css flexbox, css stepper input" /> <meta name="keywords" content="css flexbox, css stepper input" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

10
pages/sticky-footer/index.tsx
View File

@@ -4,10 +4,10 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block'; import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
@@ -15,12 +15,12 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.StickyFooter}> <DetailsLayout pattern={Pattern.StickyFooter}>
<Helmet> <Head>
<meta name="description" content="Create a sticky footer with CSS flexbox" /> <meta name="description" content="Create a sticky footer with CSS flexbox" />
<meta name="og:description" content="Create a sticky footer with CSS flexbox" /> <meta name="og:description" content="Create a sticky footer with CSS flexbox" />
<meta name="twitter:description" content="Create a sticky footer with CSS flexbox" /> <meta name="twitter:description" content="Create a sticky footer with CSS flexbox" />
<meta name="keywords" content="css flexbox, css layout, css sticky, css sticky footer" /> <meta name="keywords" content="css flexbox, css layout, css sticky, css sticky footer" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}> <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
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.

12
pages/sticky-header/index.tsx
View File

@@ -4,11 +4,11 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block'; import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
@@ -16,12 +16,12 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.StickyHeader}> <DetailsLayout pattern={Pattern.StickyHeader}>
<Helmet> <Head>
<meta name="description" content="Create a sticky header with CSS" /> <meta name="description" content="Create a sticky header with CSS" />
<meta name="og:description" content="Create a sticky header with CSS" /> <meta name="og:description" content="Create a sticky header with CSS" />
<meta name="twitter:description" content="Create a sticky header with CSS" /> <meta name="twitter:description" content="Create a sticky header with CSS" />
<meta name="keywords" content="css layout, css position sticky, css sticky header" /> <meta name="keywords" content="css layout, css position sticky, css sticky header" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}> <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
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.

12
pages/sticky-sections/index.tsx
View File

@@ -4,22 +4,22 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.StickySections}> <DetailsLayout pattern={Pattern.StickySections}>
<Helmet> <Head>
<meta name="description" content="Create sticky sections with CSS" /> <meta name="description" content="Create sticky sections with CSS" />
<meta name="og:description" content="Create sticky sections with CSS" /> <meta name="og:description" content="Create sticky sections with CSS" />
<meta name="twitter:description" content="Create sticky sections with CSS" /> <meta name="twitter:description" content="Create sticky sections with CSS" />
<meta name="keywords" content="css layout, css sticky, css sticky sections" /> <meta name="keywords" content="css layout, css sticky, css sticky sections" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}> <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
Try to scroll the main content to see each section sticks to the top of page. Try to scroll the main content to see each section sticks to the top of page.

12
pages/sticky-table-column/index.tsx
View File

@@ -5,11 +5,11 @@
// tslint:disable:prefer-object-spread // tslint:disable:prefer-object-spread
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block'; import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
@@ -18,12 +18,12 @@ const Details: React.FC<{}> = () => {
const numberOfColumns = 10; const numberOfColumns = 10;
return ( return (
<DetailsLayout pattern={Pattern.StickyTableColumn}> <DetailsLayout pattern={Pattern.StickyTableColumn}>
<Helmet> <Head>
<meta name="description" content="Create sticky table column with CSS" /> <meta name="description" content="Create sticky table column with CSS" />
<meta name="og:description" content="Create sticky table column with CSS" /> <meta name="og:description" content="Create sticky table column with CSS" />
<meta name="twitter:description" content="Create sticky table column with CSS" /> <meta name="twitter:description" content="Create sticky table column with CSS" />
<meta name="keywords" content="css position sticky, css sticky table column" /> <meta name="keywords" content="css position sticky, css sticky table column" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}> <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
Try to scroll the main content of table horizontally to see the first column sticks to the left. Try to scroll the main content of table horizontally to see the first column sticks to the left.

12
pages/sticky-table-headers/index.tsx
View File

@@ -4,11 +4,11 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block'; import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
@@ -16,12 +16,12 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.StickyTableHeaders}> <DetailsLayout pattern={Pattern.StickyTableHeaders}>
<Helmet> <Head>
<meta name="description" content="Create sticky table headers with CSS" /> <meta name="description" content="Create sticky table headers with CSS" />
<meta name="og:description" content="Create sticky table headers with CSS" /> <meta name="og:description" content="Create sticky table headers with CSS" />
<meta name="twitter:description" content="Create sticky table headers with CSS" /> <meta name="twitter:description" content="Create sticky table headers with CSS" />
<meta name="keywords" content="css position sticky, css sticky table headers" /> <meta name="keywords" content="css position sticky, css sticky table headers" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}> <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
Try to scroll the main content of table to see the header sticks to the top. Try to scroll the main content of table to see the header sticks to the top.

12
pages/switch/index.tsx
View File

@@ -4,11 +4,11 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
@@ -17,12 +17,12 @@ const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.Switch}> <DetailsLayout pattern={Pattern.Switch}>
<Helmet> <Head>
<meta name="description" content="Create a switch with CSS flexbox" /> <meta name="description" content="Create a switch with CSS flexbox" />
<meta name="og:description" content="Create a switch with CSS flexbox" /> <meta name="og:description" content="Create a switch with CSS flexbox" />
<meta name="twitter:description" content="Create a switch with CSS flexbox" /> <meta name="twitter:description" content="Create a switch with CSS flexbox" />
<meta name="keywords" content="css custom checkbox, css flexbox, css switch, css switcher" /> <meta name="keywords" content="css custom checkbox, css flexbox, css switch, css switcher" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<div style={{ lineHeight: 1.5, marginBottom: '16px'}}> <div style={{ lineHeight: 1.5, marginBottom: '16px'}}>
The checkbox is placed inside a label. So when clicking on the label, The checkbox is placed inside a label. So when clicking on the label,

10
pages/tab/index.tsx
View File

@@ -4,10 +4,10 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
@@ -40,12 +40,12 @@ const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.Tab}> <DetailsLayout pattern={Pattern.Tab}>
<Helmet> <Head>
<meta name="description" content="Create tabs with CSS flexbox" /> <meta name="description" content="Create tabs with CSS flexbox" />
<meta name="og:description" content="Create tabs with CSS flexbox" /> <meta name="og:description" content="Create tabs with CSS flexbox" />
<meta name="twitter:description" content="Create tabs with CSS flexbox" /> <meta name="twitter:description" content="Create tabs with CSS flexbox" />
<meta name="keywords" content="css flexbox, css navigation, css tab" /> <meta name="keywords" content="css flexbox, css navigation, css tab" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

10
pages/teardrop/index.tsx
View File

@@ -4,22 +4,22 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle'; import Circle from '../../placeholders/Circle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.Teardrop}> <DetailsLayout pattern={Pattern.Teardrop}>
<Helmet> <Head>
<meta name="description" content="Create a teardrop with CSS" /> <meta name="description" content="Create a teardrop with CSS" />
<meta name="og:description" content="Create a teardrop with CSS" /> <meta name="og:description" content="Create a teardrop with CSS" />
<meta name="twitter:description" content="Create a teardrop with CSS" /> <meta name="twitter:description" content="Create a teardrop with CSS" />
<meta name="keywords" content="css border radius, css teardrop, css water drop shape, css water droplet" /> <meta name="keywords" content="css border radius, css teardrop, css water drop shape, css water droplet" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

12
pages/three-dimensions-card/index.tsx
View File

@@ -4,23 +4,23 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import './styles.css'; import './styles.css';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.ThreeDimensionsCard}> <DetailsLayout pattern={Pattern.ThreeDimensionsCard}>
<Helmet> <Head>
<meta name="description" content="Create a 3D card with CSS" /> <meta name="description" content="Create a 3D card with CSS" />
<meta name="og:description" content="Create a 3D card with CSS" /> <meta name="og:description" content="Create a 3D card with CSS" />
<meta name="twitter:description" content="Create a 3D card with CSS" /> <meta name="twitter:description" content="Create a 3D card with CSS" />
<meta name="keywords" content="css 3D card" /> <meta name="keywords" content="css 3D card" />
</Helmet> </Head>
<BrowserFrame <BrowserFrame
html={` html={`
<div class="three-dimensions-card"> <div class="three-dimensions-card">

12
pages/timeline/index.tsx
View File

@@ -4,11 +4,11 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import RelatedPatterns from '../../components/RelatedPatterns'; import { RelatedPatterns } from '../../components/RelatedPatterns';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block'; import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle'; import Circle from '../../placeholders/Circle';
@@ -17,12 +17,12 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.Timeline}> <DetailsLayout pattern={Pattern.Timeline}>
<Helmet> <Head>
<meta name="description" content="Create a timeline with CSS flexbox" /> <meta name="description" content="Create a timeline with CSS flexbox" />
<meta name="og:description" content="Create a timeline with CSS flexbox" /> <meta name="og:description" content="Create a timeline with CSS flexbox" />
<meta name="twitter:description" content="Create a timeline with CSS flexbox" /> <meta name="twitter:description" content="Create a timeline with CSS flexbox" />
<meta name="keywords" content="css flexbox, css timeline" /> <meta name="keywords" content="css flexbox, css timeline" />
</Helmet> </Head>
<BrowserFrame <BrowserFrame
html={` html={`
<div class="container"> <div class="container">

10
pages/toggle-password-visibility/index.tsx
View File

@@ -4,10 +4,10 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Helmet } from 'react-helmet'; import Head from 'next/head';
import Pattern from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
@@ -16,12 +16,12 @@ const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout pattern={Pattern.TogglePasswordVisibility}> <DetailsLayout pattern={Pattern.TogglePasswordVisibility}>
<Helmet> <Head>
<meta name="description" content="Create a toggle password visibility with CSS flexbox" /> <meta name="description" content="Create a toggle password visibility with CSS flexbox" />
<meta name="og:description" content="Create a toggle password visibility with CSS flexbox" /> <meta name="og:description" content="Create a toggle password visibility with CSS flexbox" />
<meta name="twitter:description" content="Create a toggle password visibility with CSS flexbox" /> <meta name="twitter:description" content="Create a toggle password visibility with CSS flexbox" />
<meta name="keywords" content="css flexbox, toggle password visibility" /> <meta name="keywords" content="css flexbox, toggle password visibility" />
</Helmet> </Head>
<div className='p-8 pb-20'> <div className='p-8 pb-20'>
<BrowserFrame <BrowserFrame
html={` html={`

Some files were not shown because too many files have changed in this diff Show More