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 page = await browser.newPage();
await page.goto(`http://localhost:3000/patterns/${pattern}`);
await page.goto(`http://localhost:3000/${pattern}`);
await page.waitForSelector('.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];
return (
<Link href={`/patterns/${slug(pattern)}`}>
<Link href={`/${slug(pattern)}`}>
<a className="block-cover">
<Cover />
<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 { Helmet } from 'react-helmet';
import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
@@ -58,12 +58,12 @@ const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.Accordion}>
<Helmet>
<Head>
<meta name="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="keywords" content="css accordion, css flexbox" />
</Helmet>
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`

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

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

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

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

12
pages/avatar/index.tsx
View File

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

12
pages/badge/index.tsx
View File

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

10
pages/breadcrumb/index.tsx
View File

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

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

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

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

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

12
pages/card/index.tsx
View File

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

10
pages/centering/index.tsx
View File

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

12
pages/chip/index.tsx
View File

@@ -4,24 +4,24 @@
*/
import * as React from 'react';
import { Helmet } from 'react-helmet';
import Head from 'next/head';
import { Link } from 'react-router-dom';
import RelatedPatterns from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import InputChip from './InputChip';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.Chip}>
<Helmet>
<Head>
<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="twitter:description" content="Create a chip component with CSS flexbox" />
<meta name="keywords" content="css chip, css flexbox, css tag" />
</Helmet>
</Head>
<div className='p-8 pb-20'>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
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 { Helmet } from 'react-helmet';
import Pattern from '../../constants/Pattern';
import Head from 'next/head';
import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Square from '../../placeholders/Square';
@@ -50,12 +50,12 @@ const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.CircularNavigation}>
<Helmet>
<Head>
<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="twitter:description" content="Create a circular navigation with CSS flexbox" />
<meta name="keywords" content="css circular navigation, css flexbox" />
</Helmet>
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

10
pages/drawer/index.tsx
View File

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

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

@@ -4,21 +4,21 @@
*/
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 Pattern from '../../constants/Pattern';
import { Pattern } from '../../constants/Pattern';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.DropCap}>
<Helmet>
<Head>
<meta name="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="keywords" content="css drop cap" />
</Helmet>
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`

12
pages/dropdown/index.tsx
View File

@@ -4,11 +4,11 @@
*/
import * as React from 'react';
import { Helmet } from 'react-helmet';
import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
@@ -17,12 +17,12 @@ import Triangle from '../../placeholders/Triangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.Dropdown}>
<Helmet>
<Head>
<meta name="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="keywords" content="css dropdown, css menu" />
</Helmet>
</Head>
<div className='p-8 pb-20'>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
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 { Helmet } from 'react-helmet';
import Pattern from '../../constants/Pattern';
import Head from 'next/head';
import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.FadingLongSection}>
<Helmet>
<Head>
<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="twitter:description" content="Fading long section to indicate there is more content" />
<meta name="keywords" content="css fading overflow, css linear gradient" />
</Helmet>
</Head>
<div className='p-8 pb-20'>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
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 { Helmet } from 'react-helmet';
import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
@@ -17,12 +17,12 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.FeatureComparison}>
<Helmet>
<Head>
<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="twitter:description" content="Create a feature comparison list with CSS flexbox" />
<meta name="keywords" content="css feature comparison, css flexbox" />
</Helmet>
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`

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

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

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

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

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

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

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

@@ -4,23 +4,23 @@
*/
import * as React from 'react';
import { Helmet } from 'react-helmet';
import Head from 'next/head';
import './floating-label.css';
import DetailsLayout from '../../layouts/DetailsLayout';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Pattern from '../../constants/Pattern';
import { Pattern } from '../../constants/Pattern';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.FloatingLabel}>
<Helmet>
<Head>
<meta name="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="keywords" content="css floating label, placeholder shown" />
</Helmet>
</Head>
<div className='p-8 pb-20'>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
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 { Helmet } from 'react-helmet';
import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Square from '../../placeholders/Square';
import './folder-structure.css';
@@ -16,12 +16,12 @@ import './folder-structure.css';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.FolderStructure}>
<Helmet>
<Head>
<meta name="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="keywords" content="css folder structure, css folder tree" />
</Helmet>
</Head>
<BrowserFrame
html={`
<div class="folder-structure">

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

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

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

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

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

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

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

@@ -4,23 +4,23 @@
*/
import * as React from 'react';
import { Helmet } from 'react-helmet';
import Head from 'next/head';
import { Link } from 'react-router-dom';
import RelatedPatterns from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.InitialAvatar}>
<Helmet>
<Head>
<meta name="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="keywords" content="css avatar" />
</Helmet>
</Head>
<div className='p-8 pb-20'>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
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 { Helmet } from 'react-helmet';
import Pattern from '../../constants/Pattern';
import Head from 'next/head';
import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.InputAddon}>
<Helmet>
<Head>
<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="twitter:description" content="Create an input add-on with CSS flexbox" />
<meta name="keywords" content="css flexbox, css input add-on" />
</Helmet>
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`

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

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

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

@@ -4,12 +4,12 @@
*/
import * as React from 'react';
import { Helmet } from 'react-helmet';
import Head from 'next/head';
import { Link } from 'react-router-dom';
import Heading from '../../components/Heading';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
interface ItemProps {
@@ -47,12 +47,12 @@ const Item: React.FC<ItemProps> = ({ action, keys }) => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.KeyboardShortcut}>
<Helmet>
<Head>
<meta name="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="keywords" content="kbd tag, keyboard shortcut" />
</Helmet>
</Head>
<div className='p-8 pb-20'>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
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 { Helmet } from 'react-helmet';
import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import './styles.css';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.LayeredCard}>
<Helmet>
<Head>
<meta name="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="keywords" content="css layered card" />
</Helmet>
</Head>
<BrowserFrame
html={`
<div class="layered-card">

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

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

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

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

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

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

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

@@ -4,13 +4,13 @@
*/
import * as React from 'react';
import { Helmet } from 'react-helmet';
import Head from 'next/head';
import './mega-menu.css';
import RelatedPatterns from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
@@ -19,12 +19,12 @@ import Triangle from '../../placeholders/Triangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.MegaMenu}>
<Helmet>
<Head>
<meta name="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="keywords" content="css mega menu" />
</Helmet>
</Head>
<div className='p-8 pb-20'>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
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 { Helmet } from 'react-helmet';
import Head from 'next/head';
import './menu.css';
import RelatedPatterns from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle';
@@ -18,12 +18,12 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.Menu}>
<Helmet>
<Head>
<meta name="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="keywords" content="css flexbox, css menu" />
</Helmet>
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`

10
pages/modal/index.tsx
View File

@@ -4,11 +4,11 @@
*/
import * as React from 'react';
import { Helmet } from 'react-helmet';
import Head from 'next/head';
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 BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
@@ -17,12 +17,12 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.Modal}>
<Helmet>
<Head>
<meta name="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="keywords" content="css dialog, css flexbox, css modal" />
</Helmet>
</Head>
<div className='p-8 pb-20'>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
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 { Helmet } from 'react-helmet';
import Head from 'next/head';
import './nested-dropdowns.css';
import RelatedPatterns from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.NestedDropdowns}>
<Helmet>
<Head>
<meta name="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="keywords" content="css dropdown menu, css multi-level dropdown menu, css nested dropdown menu" />
</Helmet>
</Head>
<div className='p-8 pb-20'>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
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 { Helmet } from 'react-helmet';
import Head from 'next/head';
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 BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
@@ -16,12 +16,12 @@ import Circle from '../../placeholders/Circle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.Notification}>
<Helmet>
<Head>
<meta name="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="keywords" content="css alert, css flexbox, css notification" />
</Helmet>
</Head>
<div className='p-8 pb-20'>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
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 { Helmet } from 'react-helmet';
import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Triangle from '../../placeholders/Triangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.OverlayPlayButton}>
<Helmet>
<Head>
<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="twitter:description" content="Create an overlay play button with CSS flexbox" />
<meta name="keywords" content="css flexbox" />
</Helmet>
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`

10
pages/pagination/index.tsx
View File

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

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

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

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

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

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

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

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

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

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

@@ -4,12 +4,12 @@
*/
import * as React from 'react';
import { Helmet } from 'react-helmet';
import Head from 'next/head';
import { Link } from 'react-router-dom';
import RelatedPatterns from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
@@ -18,12 +18,12 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.PricingTable}>
<Helmet>
<Head>
<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="twitter:description" content="Create a pricing table with CSS flexbox" />
<meta name="keywords" content="css flexbox, css pricing table" />
</Helmet>
</Head>
<div className='p-8 pb-20'>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
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 { Helmet } from 'react-helmet';
import Pattern from '../../constants/Pattern';
import Head from 'next/head';
import { Pattern } from '../../constants/Pattern';
import useInterval from '../../hooks/useInterval';
import DetailsLayout from '../../layouts/DetailsLayout';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
@@ -19,12 +19,12 @@ const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.ProgressBar}>
<Helmet>
<Head>
<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="twitter:description" content="Create a progress bar with CSS flexbox" />
<meta name="keywords" content="css flexbox, css progress bar" />
</Helmet>
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`

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

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

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

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

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

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

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

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

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

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

10
pages/rating/index.tsx
View File

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

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

@@ -4,21 +4,21 @@
*/
import * as React from 'react';
import { Helmet } from 'react-helmet';
import Pattern from '../../constants/Pattern';
import Head from 'next/head';
import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.ResizableElement}>
<Helmet>
<Head>
<meta name="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="keywords" content="css resizable, css resize cursor" />
</Helmet>
</Head>
<div className='p-8 pb-20'>
<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

12
pages/ribbon/index.tsx
View File

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

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

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

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

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

10
pages/separator/index.tsx
View File

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

10
pages/sidebar/index.tsx
View File

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

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

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

10
pages/slider/index.tsx
View File

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

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

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

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

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

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

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

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

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

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

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

10
pages/statistic/index.tsx
View File

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

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

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

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

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

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

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

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

@@ -4,11 +4,11 @@
*/
import * as React from 'react';
import { Helmet } from 'react-helmet';
import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
@@ -16,12 +16,12 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.StickyTableHeaders}>
<Helmet>
<Head>
<meta name="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="keywords" content="css position sticky, css sticky table headers" />
</Helmet>
</Head>
<div className='p-8 pb-20'>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
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 { Helmet } from 'react-helmet';
import Head from 'next/head';
import RelatedPatterns from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
@@ -17,12 +17,12 @@ const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.Switch}>
<Helmet>
<Head>
<meta name="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="keywords" content="css custom checkbox, css flexbox, css switch, css switcher" />
</Helmet>
</Head>
<div className='p-8 pb-20'>
<div style={{ lineHeight: 1.5, marginBottom: '16px'}}>
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 { Helmet } from 'react-helmet';
import Pattern from '../../constants/Pattern';
import Head from 'next/head';
import { Pattern } from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
@@ -40,12 +40,12 @@ const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.Tab}>
<Helmet>
<Head>
<meta name="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="keywords" content="css flexbox, css navigation, css tab" />
</Helmet>
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`

10
pages/teardrop/index.tsx
View File

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

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

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

12
pages/timeline/index.tsx
View File

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

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

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

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