mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-06 14:16:50 +02:00
Categorize patterns
This commit is contained in:
Phuoc Nguyen
@@ -1,32 +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 { Link } from 'react-router-dom';
|
||||
|
||||
import Pattern from '../constants/Pattern';
|
||||
import slug from '../helpers/slug';
|
||||
import CoverLoader from '../loaders/CoverLoader';
|
||||
import './coverCard.css';
|
||||
|
||||
interface CoverCardProps {
|
||||
pattern: Pattern;
|
||||
}
|
||||
|
||||
const CoverCard: React.FC<CoverCardProps> = ({ pattern }) => {
|
||||
return (
|
||||
<Link
|
||||
to={`/patterns/${slug(pattern)}`}
|
||||
className="cover"
|
||||
>
|
||||
<CoverLoader pattern={pattern} />
|
||||
<h4 className="cover__name">
|
||||
{pattern}
|
||||
</h4>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
export default CoverCard;
|
||||
@@ -7,7 +7,7 @@ import * as React from 'react';
|
||||
|
||||
import './product.css';
|
||||
import ProductModel from '../constants/ProductModel';
|
||||
import slug from '../helpers/slug';
|
||||
import slug from '../../utils/slug';
|
||||
|
||||
interface ProductProps {
|
||||
product: ProductModel;
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import Pattern from '../constants/Pattern';
|
||||
import CoverCard from './CoverCard';
|
||||
import CoverCard from '../../components/CoverCard';
|
||||
import Heading from './Heading';
|
||||
|
||||
interface RelatedPatternsProps {
|
||||
|
||||
@@ -1,71 +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 ProductModel from './ProductModel';
|
||||
|
||||
const ProductList: ProductModel[] = [
|
||||
{
|
||||
name: 'Intersection Observer Examples',
|
||||
url: 'https://intersectionobserver.io',
|
||||
description: 'Practical, real world examples of Intersection Observer',
|
||||
themeColor: '#024ca9',
|
||||
},
|
||||
{
|
||||
name: 'Blur Page',
|
||||
url: 'https://blur.page',
|
||||
description: 'A browser extension to hide sensitive information on a web page',
|
||||
themeColor: '#4e7fb8',
|
||||
},
|
||||
{
|
||||
name: 'Check Browsers Support',
|
||||
url: 'https://checkbrowsers.support',
|
||||
description: 'A browser extension to check browser compatibility without leaving your tab',
|
||||
themeColor: '#f33446',
|
||||
},
|
||||
{
|
||||
name: 'Form Validation',
|
||||
url: 'https://formvalidation.io',
|
||||
description: 'The best validation library for JavaScript',
|
||||
themeColor: '#014ba6',
|
||||
},
|
||||
{
|
||||
name: 'React PDF Viewer',
|
||||
url: 'https://react-pdf-viewer.dev',
|
||||
description: 'A React component to view a PDF document',
|
||||
themeColor: '#fb6303',
|
||||
},
|
||||
{
|
||||
name: '1 LOC',
|
||||
url: 'https://1loc.dev',
|
||||
description: 'Favorite JavaScript utilities in single line of code',
|
||||
themeColor: '#000200',
|
||||
},
|
||||
{
|
||||
name: 'Front-end Tips',
|
||||
url: 'https://getfrontend.tips',
|
||||
description: 'Super tiny, quick tips, tricks and best practices of front-end development',
|
||||
themeColor: '#2e2c74',
|
||||
},
|
||||
{
|
||||
name: 'HTML DOM',
|
||||
url: 'https://htmldom.dev',
|
||||
description: 'How to manage HTML DOM with vanilla JavaScript',
|
||||
themeColor: '#5b5d8a',
|
||||
},
|
||||
{
|
||||
name: 'Responsive Design Patterns',
|
||||
url: 'https://responsive.page',
|
||||
description: 'A collection of patterns to create a responsive web page',
|
||||
themeColor: '#43246d',
|
||||
},
|
||||
{
|
||||
name: 'this VS that',
|
||||
url: 'https://thisthat.dev',
|
||||
description: 'The differences between _ and _ in the front-end development',
|
||||
themeColor: '#414293',
|
||||
},
|
||||
];
|
||||
|
||||
export { ProductList };
|
||||
@@ -1,11 +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>
|
||||
*/
|
||||
|
||||
export default interface ProductModel {
|
||||
name: string;
|
||||
url: string;
|
||||
description: string;
|
||||
themeColor: string;
|
||||
}
|
||||
@@ -1,8 +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>
|
||||
*/
|
||||
|
||||
const random = (min: number, max: number) => min + Math.round(Math.random() * (max - min));
|
||||
|
||||
export default random;
|
||||
@@ -1,10 +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>
|
||||
*/
|
||||
|
||||
function randomFromArray<T>(array: T[]): T {
|
||||
return array[Math.floor(Math.random() * array.length)];
|
||||
};
|
||||
|
||||
export default randomFromArray;
|
||||
@@ -1,8 +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>
|
||||
*/
|
||||
|
||||
const slug = (item: string) => item.toLowerCase().split(' ').join('-');
|
||||
|
||||
export default slug;
|
||||
@@ -11,8 +11,8 @@ import Product from '../components/Product';
|
||||
import { ProductList } from '../constants/ProductList';
|
||||
import Pattern from '../constants/Pattern';
|
||||
import randomItems from '../helpers/randomIterms';
|
||||
import slug from '../helpers/slug';
|
||||
import CoverLoader from '../loaders/CoverLoader';
|
||||
import slug from '../../utils/slug';
|
||||
import CoverLoader from '../../components/CoverLoader';
|
||||
import Layout from './Layout';
|
||||
|
||||
interface DetailsLayoutProps {
|
||||
|
||||
@@ -1,86 +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 './footer.css';
|
||||
|
||||
const Footer: React.FC<{}> = () => {
|
||||
return (
|
||||
<footer className="footer">
|
||||
<div className="container">
|
||||
<div className="footer__about">
|
||||
<div className="footer__author">
|
||||
<div>© 2019-{new Date().getFullYear()} Nguyen Huu Phuoc.</div>
|
||||
<div>All rights reserved</div>
|
||||
</div>
|
||||
<a className="footer__social" href="https://twitter.com/nghuuphuoc" rel="noopener noreferrer" target="_blank">
|
||||
<svg height="24" version="1.1" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M23,6.628l-2-0.5l1-2l-2.464,0.7c-1.809-1.688-4.644-1.589-6.332,0.22c-0.78,0.836-1.21,1.938-1.204,3.08v1 c-3.539,0.73-6.634-1.2-9.5-4.5c-0.5,2.667,0,4.667,1.5,6l-3-0.5c0.405,2.069,1.362,3.7,4,4l-2.5,1c1,2,2.566,2.31,5,2.5 c-1.893,1.353-4.174,2.054-6.5,2c12.755,5.669,20-2.664,20-10V8.3L23,6.628z" strokeLinecap="round" fill="none" stroke="currentColor" strokeLinejoin="round"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a className="footer__social" href="https://github.com/phuoc-ng" rel="noopener noreferrer" target="_blank">
|
||||
<svg height="24" version="1.1" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12,.5A11.5,11.5,0,0,0,8.365,22.914c.574.1.756-.237.756-.541,0-.275.006-1.037,0-2-3.2.694-3.861-1.515-3.861-1.515a3.043,3.043,0,0,0-1.276-1.682c-1.044-.714.078-.7.078-.7a2.414,2.414,0,0,1,1.762,1.184,2.448,2.448,0,0,0,3.346.956A2.45,2.45,0,0,1,9.9,17.084c-2.553-.292-5.238-1.278-5.238-5.686A4.447,4.447,0,0,1,5.847,8.312a4.126,4.126,0,0,1,.112-3.043s.967-.309,3.162,1.18a10.883,10.883,0,0,1,5.76,0c2.2-1.488,3.159-1.18,3.159-1.18a4.131,4.131,0,0,1,.114,3.043A4.442,4.442,0,0,1,19.337,11.4c0,4.42-2.689,5.391-5.251,5.674a2.727,2.727,0,0,1,.787,2.12v3.184c0,.307.186.647.77.536A11.5,11.5,0,0,0,12,.5Z" strokeLinecap="round" fill="none" stroke="currentColor" strokeLinejoin="round"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="footer__grid">
|
||||
<div className="footer__col">
|
||||
<ul className="footer__products">
|
||||
<li className="footer__product">
|
||||
<a href="https://blur.page" rel="noopener noreferrer" target="_blank" title="A browser extension to hide sensitive element on page">Blur Page</a>
|
||||
</li>
|
||||
<li className="footer__product">
|
||||
<a href="https://checkbrowsers.support" rel="noopener noreferrer" target="_blank" title="A browser extension to check browser compatibility without leaving your tab">Check Browsers Support</a>
|
||||
</li>
|
||||
<li className="footer__product">
|
||||
<a href="https://fakenumbers.io" rel="noopener noreferrer" target="_blank" title="A JavaScript library to fake a number">Fake Numbers</a>
|
||||
</li>
|
||||
<li className="footer__product">
|
||||
<a href="https://intersectionobserver.io" rel="noopener noreferrer" target="_blank" title="Practical, real world examples of Intersection Observer">Intersection Observer Examples</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="footer__col">
|
||||
<ul className="footer__products">
|
||||
<li className="footer__product">
|
||||
<a href="https://formvalidation.io" rel="noopener noreferrer" target="_blank" title="The best validation library for JavaScript">Form Validation</a>
|
||||
</li>
|
||||
<li className="footer__product">
|
||||
<a href="https://react-pdf-viewer.dev" rel="noopener noreferrer" target="_blank" title="A PDF viewer made for React">React PDF Viewer</a>
|
||||
</li>
|
||||
<li className="footer__product">
|
||||
<a href="https://1loc.dev" rel="noopener noreferrer" target="_blank" title="Favorite JavaScript utilities in single line of code">1 LOC (4.2k ★)</a>
|
||||
</li>
|
||||
<li className="footer__product">
|
||||
<a href="https://csslayout.io" rel="noopener noreferrer" target="_blank" title="A collection of popular layouts and patterns made with CSS">CSS Layout (3.5k ★)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="footer__col">
|
||||
<ul className="footer__products">
|
||||
<li className="footer__product">
|
||||
<a href="https://getfrontend.tips" rel="noopener noreferrer" target="_blank" title="Super tiny, quick tips, tricks and best practices of front-end development">Front-end Tips</a>
|
||||
</li>
|
||||
<li className="footer__product">
|
||||
<a href="https://htmldom.dev" rel="noopener noreferrer" target="_blank" title="Common tasks of managing HTML DOM with native API">HTML DOM (3.7k ★)</a>
|
||||
</li>
|
||||
<li className="footer__product">
|
||||
<a href="https://responsive.page" rel="noopener noreferrer" target="_blank" title="A collection of patterns to create a responsive web page">Responsive Design Patterns</a>
|
||||
</li>
|
||||
<li className="footer__product">
|
||||
<a href="https://thisthat.dev" rel="noopener noreferrer" target="_blank" title="What is the difference between ___ and ___ in the front-end development?">this VS that (750 ★)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
@@ -1,43 +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 { Link } from 'react-router-dom';
|
||||
|
||||
import './header.css';
|
||||
|
||||
const STARS_KEY = 'stars';
|
||||
|
||||
const Header: React.FC<{}> = () => {
|
||||
const stars = window.localStorage.getItem(STARS_KEY) || '';
|
||||
const [totalStars, setTotalStars] = React.useState(stars);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (window.location.pathname === '/' || stars === '') {
|
||||
fetch('https://api.github.com/repos/phuoc-ng/csslayout')
|
||||
.then(res => res.json())
|
||||
.then(data => setTotalStars(data.stargazers_count))
|
||||
.catch(console.log);
|
||||
}
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => window.localStorage.setItem(STARS_KEY, totalStars), [totalStars]);
|
||||
|
||||
return (
|
||||
<header className="header">
|
||||
<div className="container">
|
||||
<div className="header__nav">
|
||||
<Link to="/">
|
||||
<img src="/assets/logo.svg" />
|
||||
</Link>
|
||||
<Link to="/patterns">Patterns</Link>
|
||||
<a href="https://github.com/phuoc-ng/csslayout">{totalStars}★</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
@@ -1,25 +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 Footer from './Footer';
|
||||
import Header from './Header';
|
||||
|
||||
const Layout: React.FC<{}> = ({ children }) => {
|
||||
React.useEffect(() => {
|
||||
window.scrollTo(0, 0);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
{children}
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
@@ -1,47 +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>
|
||||
*/
|
||||
|
||||
.footer {
|
||||
padding: 2rem 0;
|
||||
}
|
||||
.footer__about {
|
||||
border-bottom: 1px solid var(--color-gray-2);
|
||||
color: var(--color-gray-9);
|
||||
display: flex;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
.footer__author {
|
||||
flex: 1;
|
||||
}
|
||||
.footer__social {
|
||||
margin-left: 0.5rem;
|
||||
color: var(--color-gray-5);
|
||||
}
|
||||
.footer__grid {
|
||||
margin-left: -1rem;
|
||||
margin-right: -1rem;
|
||||
}
|
||||
.footer__col {
|
||||
flex: 1;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
.footer__products {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.footer__product {
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
.footer__product a {
|
||||
color: var(--color-gray-5);
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.footer__grid {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
@@ -1,21 +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>
|
||||
*/
|
||||
|
||||
.header {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
.header__nav {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.header__nav a:first-child {
|
||||
margin-left: 0;
|
||||
margin-right: auto;
|
||||
}
|
||||
.header__nav a {
|
||||
color: var(--color-gray-9);
|
||||
margin-left: 1rem;
|
||||
}
|
||||
@@ -1,18 +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 loadable, { LoadableComponent } from '@loadable/component';
|
||||
|
||||
import Pattern from '../constants/Pattern';
|
||||
|
||||
interface CoverLoaderProps {
|
||||
pattern: Pattern;
|
||||
}
|
||||
|
||||
const slug = (item: string) => item.toLowerCase().split(' ').join('-');
|
||||
|
||||
const CoverLoader: LoadableComponent<CoverLoaderProps> = loadable((props: CoverLoaderProps) => import(`../patterns/${slug(props.pattern)}/Cover`));
|
||||
|
||||
export default CoverLoader;
|
||||
@@ -1,53 +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 loadable, { LoadableComponent } from '@loadable/component';
|
||||
import * as React from 'react';
|
||||
|
||||
import './spinner.css';
|
||||
|
||||
interface DetailsLoaderProps {
|
||||
pattern: string;
|
||||
}
|
||||
|
||||
const slug = (item: string) => item.toLowerCase().split(' ').join('-');
|
||||
|
||||
// In order to create a link to another page that is dynamically loaded (via <Link to="...">),
|
||||
// the page chunks have to be loadable by @loadable.
|
||||
// We have to add a magic comment /* #__LOADABLE__ */ here
|
||||
// and the following plugin to Babel's settings (.babelrc):
|
||||
// {
|
||||
// "plugins": ["@loadable/babel-plugin"],
|
||||
// }
|
||||
const loadDetails = /* #__LOADABLE__ */ (props: DetailsLoaderProps) => import(`../patterns/${slug(props.pattern)}/Details`);
|
||||
|
||||
const DetailsLoader: LoadableComponent<DetailsLoaderProps> = loadable(loadDetails, {
|
||||
fallback: (
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<svg className="spinner" width="64px" height="64px" viewBox="0 0 32 32">
|
||||
<circle
|
||||
cx="16"
|
||||
cy="16"
|
||||
fill="none"
|
||||
r="12"
|
||||
stroke="rgba(0, 0, 0, 0.4)"
|
||||
strokeDasharray={Math.PI * 2 * 9}
|
||||
strokeLinecap="round"
|
||||
strokeWidth="4"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
),
|
||||
});
|
||||
|
||||
export default DetailsLoader;
|
||||
@@ -1,21 +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>
|
||||
*/
|
||||
|
||||
.spinner {
|
||||
animation-duration: 750ms;
|
||||
animation-name: viewer-spinner-transform;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
transition-property: transform;
|
||||
}
|
||||
|
||||
@keyframes viewer-spinner-transform {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@@ -1,201 +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 CoverCard from '../components/CoverCard';
|
||||
import Heading from '../components/Heading';
|
||||
import Product from '../components/Product';
|
||||
import Pattern from '../constants/Pattern';
|
||||
import { ProductList } from '../constants/ProductList';
|
||||
import Layout from '../layouts/Layout';
|
||||
import './explorePage.css';
|
||||
|
||||
const ExplorePage = () => {
|
||||
const numPatterns = Object.keys(Pattern).length;
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<Helmet>
|
||||
<title>CSS Layout ∙ Patterns</title>
|
||||
<meta name="title" content="CSS Layout ∙ Patterns" />
|
||||
<meta name="description" content="CSS layouts and patterns" />
|
||||
<meta name="keywords" content="css display, css flexbox, css grid, css layouts, flex, flexbox, flexbox cheatsheet, web design, web template" />
|
||||
|
||||
<meta property="og:description" content="CSS layouts and patterns" />
|
||||
<meta property="og:image" content="https://csslayout.io/assets/screenshot.png" />
|
||||
<meta property="og:title" content="CSS Layout ∙ Patterns" />
|
||||
<meta property="og:url" content="https://csslayout.io/patterns" />
|
||||
|
||||
<meta property="twitter:description" content="CSS layouts and patterns" />
|
||||
<meta property="twitter:image" content="https://csslayout.io/assets/screenshot.png" />
|
||||
<meta property="twitter:title" content="CSS Layout ∙ Patterns" />
|
||||
<meta property="twitter:url" content="https://csslayout.io/patterns" />
|
||||
</Helmet>
|
||||
<div className="hero">
|
||||
<div className="container">
|
||||
<h1 className="hero__heading">Collection of {numPatterns} patterns</h1>
|
||||
<h2 className="hero__subheading">Covers are made with CSS only. Inspect them!</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container">
|
||||
<div className="content">
|
||||
<main className="main">
|
||||
<section>
|
||||
<Heading title="Layout" />
|
||||
|
||||
<div className="explore__collection">
|
||||
<CoverCard pattern={Pattern.CardLayout} />
|
||||
<CoverCard pattern={Pattern.HolyGrail} />
|
||||
<CoverCard pattern={Pattern.MasonryGrid} />
|
||||
<CoverCard pattern={Pattern.SameHeightColumns} />
|
||||
<CoverCard pattern={Pattern.Sidebar} />
|
||||
<CoverCard pattern={Pattern.SimpleGrid} />
|
||||
<CoverCard pattern={Pattern.SplitScreen} />
|
||||
<CoverCard pattern={Pattern.StickyFooter} />
|
||||
<CoverCard pattern={Pattern.StickyHeader} />
|
||||
<CoverCard pattern={Pattern.StickySections} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<Heading title="Navigation" />
|
||||
|
||||
<div className="explore__collection">
|
||||
<CoverCard pattern={Pattern.Breadcrumb} />
|
||||
<CoverCard pattern={Pattern.CircularNavigation} />
|
||||
<CoverCard pattern={Pattern.DotNavigation} />
|
||||
<CoverCard pattern={Pattern.Drawer} />
|
||||
<CoverCard pattern={Pattern.Dropdown} />
|
||||
<CoverCard pattern={Pattern.FullScreenMenu} />
|
||||
<CoverCard pattern={Pattern.MegaMenu} />
|
||||
<CoverCard pattern={Pattern.Menu} />
|
||||
<CoverCard pattern={Pattern.NestedDropdowns} />
|
||||
<CoverCard pattern={Pattern.Pagination} />
|
||||
<CoverCard pattern={Pattern.PreviousNextButtons} />
|
||||
<CoverCard pattern={Pattern.SplitNavigation} />
|
||||
<CoverCard pattern={Pattern.Tab} />
|
||||
<CoverCard pattern={Pattern.Wizard} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<Heading title="Input" />
|
||||
|
||||
<div className="explore__collection">
|
||||
<CoverCard pattern={Pattern.ButtonWithIcon} />
|
||||
<CoverCard pattern={Pattern.Chip} />
|
||||
<CoverCard pattern={Pattern.CustomCheckboxButton} />
|
||||
<CoverCard pattern={Pattern.CustomRadioButton} />
|
||||
<CoverCard pattern={Pattern.FloatingLabel} />
|
||||
<CoverCard pattern={Pattern.InputAddon} />
|
||||
<CoverCard pattern={Pattern.RadioButtonGroup} />
|
||||
<CoverCard pattern={Pattern.RadioSwitch} />
|
||||
<CoverCard pattern={Pattern.Rating} />
|
||||
<CoverCard pattern={Pattern.SearchBox} />
|
||||
<CoverCard pattern={Pattern.Slider} />
|
||||
<CoverCard pattern={Pattern.SpinButton} />
|
||||
<CoverCard pattern={Pattern.StepperInput} />
|
||||
<CoverCard pattern={Pattern.Switch} />
|
||||
<CoverCard pattern={Pattern.TogglePasswordVisibility} />
|
||||
<CoverCard pattern={Pattern.UploadButton} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<Heading title="Display" />
|
||||
|
||||
<div className="explore__collection">
|
||||
<CoverCard pattern={Pattern.Accordion} />
|
||||
<CoverCard pattern={Pattern.ArrowButtons} />
|
||||
<CoverCard pattern={Pattern.Avatar} />
|
||||
<CoverCard pattern={Pattern.AvatarList} />
|
||||
<CoverCard pattern={Pattern.Badge} />
|
||||
<CoverCard pattern={Pattern.Card} />
|
||||
<CoverCard pattern={Pattern.Centering} />
|
||||
<CoverCard pattern={Pattern.CloseButton} />
|
||||
<CoverCard pattern={Pattern.ColorSwatch} />
|
||||
<CoverCard pattern={Pattern.ConcaveCorners} />
|
||||
<CoverCard pattern={Pattern.CookieBanner} />
|
||||
<CoverCard pattern={Pattern.CornerRibbon} />
|
||||
<CoverCard pattern={Pattern.CurvedBackground} />
|
||||
<CoverCard pattern={Pattern.DiagonalSection} />
|
||||
<CoverCard pattern={Pattern.DockedAtCorner} />
|
||||
<CoverCard pattern={Pattern.DotLeader} />
|
||||
<CoverCard pattern={Pattern.DropArea} />
|
||||
<CoverCard pattern={Pattern.DropCap} />
|
||||
<CoverCard pattern={Pattern.FadingLongSection} />
|
||||
<CoverCard pattern={Pattern.FeatureComparison} />
|
||||
<CoverCard pattern={Pattern.FeatureList} />
|
||||
<CoverCard pattern={Pattern.FixedAtCorner} />
|
||||
<CoverCard pattern={Pattern.FixedAtSide} />
|
||||
<CoverCard pattern={Pattern.FolderStructure} />
|
||||
<CoverCard pattern={Pattern.FullBackground} />
|
||||
<CoverCard pattern={Pattern.InitialAvatar} />
|
||||
<CoverCard pattern={Pattern.InvertedCorners} />
|
||||
<CoverCard pattern={Pattern.KeyboardShortcut} />
|
||||
<CoverCard pattern={Pattern.LayeredCard} />
|
||||
<CoverCard pattern={Pattern.LinedPaper} />
|
||||
<CoverCard pattern={Pattern.MediaObject} />
|
||||
<CoverCard pattern={Pattern.OverlayPlayButton} />
|
||||
<CoverCard pattern={Pattern.PriceTag} />
|
||||
<CoverCard pattern={Pattern.PricingTable} />
|
||||
<CoverCard pattern={Pattern.PropertyList} />
|
||||
<CoverCard pattern={Pattern.QuestionsAndAnswers} />
|
||||
<CoverCard pattern={Pattern.Ribbon} />
|
||||
<CoverCard pattern={Pattern.Separator} />
|
||||
<CoverCard pattern={Pattern.StackedCards} />
|
||||
<CoverCard pattern={Pattern.StampBorder} />
|
||||
<CoverCard pattern={Pattern.Statistic} />
|
||||
<CoverCard pattern={Pattern.StatusLight} />
|
||||
<CoverCard pattern={Pattern.StickyTableColumn} />
|
||||
<CoverCard pattern={Pattern.StickyTableHeaders} />
|
||||
<CoverCard pattern={Pattern.Teardrop} />
|
||||
<CoverCard pattern={Pattern.ThreeDimensionsCard} />
|
||||
<CoverCard pattern={Pattern.Timeline} />
|
||||
<CoverCard pattern={Pattern.TreeDiagram} />
|
||||
<CoverCard pattern={Pattern.TriangleButtons} />
|
||||
<CoverCard pattern={Pattern.VideoBackground} />
|
||||
<CoverCard pattern={Pattern.Voting} />
|
||||
<CoverCard pattern={Pattern.Watermark} />
|
||||
<CoverCard pattern={Pattern.ZigzagTimeline} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<Heading title="Feedback" />
|
||||
|
||||
<div className="explore__collection">
|
||||
<CoverCard pattern={Pattern.Modal} />
|
||||
<CoverCard pattern={Pattern.Notification} />
|
||||
<CoverCard pattern={Pattern.PopoverArrow} />
|
||||
<CoverCard pattern={Pattern.ProgressBar} />
|
||||
<CoverCard pattern={Pattern.RadialProgressBar} />
|
||||
<CoverCard pattern={Pattern.ResizableElement} />
|
||||
<CoverCard pattern={Pattern.PresenceIndicator} />
|
||||
<CoverCard pattern={Pattern.Tooltip} />
|
||||
<CoverCard pattern={Pattern.ValidationIcon} />
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div className="sidebar">
|
||||
<div className="sidebar__inner">
|
||||
<Ad />
|
||||
{
|
||||
ProductList.map(product => <Product key={product.name} product={product} />)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default ExplorePage;
|
||||
@@ -1,117 +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 { Link } from 'react-router-dom';
|
||||
|
||||
import './homePage.css';
|
||||
|
||||
import CoverCard from '../components/CoverCard';
|
||||
import Pattern from '../constants/Pattern';
|
||||
import chunk from '../helpers/chunk';
|
||||
import Layout from '../layouts/Layout';
|
||||
|
||||
const NUM_SLIDES = 3;
|
||||
|
||||
const HomePage = () => {
|
||||
const numPatterns = Object.keys(Pattern).length;
|
||||
|
||||
const numPatternsPerSlide = Math.floor(numPatterns / NUM_SLIDES);
|
||||
const groups = chunk(Object.entries(Pattern).map(([_, v]) => v).slice(0, NUM_SLIDES * numPatternsPerSlide), numPatternsPerSlide);
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<Helmet>
|
||||
<title>CSS Layout</title>
|
||||
<meta name="title" content="CSS Layout" />
|
||||
<meta name="description" content="CSS layouts and patterns" />
|
||||
<meta name="keywords" content="css display, css flexbox, css grid, css layouts, flex, flexbox, flexbox cheatsheet, web design, web template" />
|
||||
|
||||
<meta property="og:description" content="A collection of popular layouts and patterns made with CSS" />
|
||||
<meta property="og:image" content="https://csslayout.io/assets/screenshot.png" />
|
||||
<meta property="og:title" content="CSS Layout ∙ A collection of popular layouts and patterns made with CSS" />
|
||||
<meta property="og:url" content="https://csslayout.io" />
|
||||
|
||||
<meta property="twitter:description" content="A collection of popular layouts and patterns made with CSS" />
|
||||
<meta property="twitter:image" content="https://csslayout.io/assets/screenshot.png" />
|
||||
<meta property="twitter:title" content="CSS Layout ∙ A collection of popular layouts and patterns made with CSS" />
|
||||
<meta property="twitter:url" content="https://csslayout.io" />
|
||||
</Helmet>
|
||||
<div className="hero">
|
||||
<div className="container">
|
||||
<div className="hero__logo"><img src="/assets/logo.png" alt="CSS Layout" /></div>
|
||||
<h1 className="home__heading">CSS Layout</h1>
|
||||
<h2 className="hero__subheading">Popular Layouts & patterns made with CSS</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container">
|
||||
<div className="home__features">
|
||||
<div className="home__feature">
|
||||
<div className="home__icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 48 48" width="48" height="48"><g transform="matrix(2,0,0,2,0,0)"><path d="M0.500 12.000 A11.500 11.500 0 1 0 23.500 12.000 A11.500 11.500 0 1 0 0.500 12.000 Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M4.5,14.5v-4a1,1,0,0,1,1-1h1" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M4.5 12.5L6 12.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M8.5 14.5L8.5 9.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M8.5,9.5h.75a1.25,1.25,0,0,1,0,2.5H8.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M10.5 14.5L9 12" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M14.5,14.5h-1a1,1,0,0,1-1-1v-3a1,1,0,0,1,1-1h1" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M12.5 12.5L14.5 12.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M18.5,14.5h-1a1,1,0,0,1-1-1v-3a1,1,0,0,1,1-1h1" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M16.5 12.5L18.5 12.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path></g></svg>
|
||||
</div>
|
||||
<div className="home__title">
|
||||
Zero Dependencies
|
||||
</div>
|
||||
</div>
|
||||
<div className="home__feature">
|
||||
<div className="home__icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 48 48" width="48" height="48"><g transform="matrix(2,0,0,2,0,0)"><path d="M0.500 2.500 L23.500 2.500 L23.500 21.500 L0.500 21.500 Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M0.5 7.5L23.5 7.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M4,4.75A.25.25,0,1,1,3.75,5,.25.25,0,0,1,4,4.75" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M7,4.75A.25.25,0,1,1,6.75,5,.25.25,0,0,1,7,4.75" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M10,4.75A.25.25,0,1,1,9.75,5,.25.25,0,0,1,10,4.75" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M8.5,11.5a2,2,0,0,0-2,2v1a2,2,0,0,0,2,2" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M12.5,11.5h-1a1,1,0,0,0-1,1c0,1.5,2,1.5,2,3a1,1,0,0,1-1,1h-1" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M16.5,11.5h-1a1,1,0,0,0-1,1c0,1.5,2,1.5,2,3a1,1,0,0,1-1,1h-1" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path></g></svg>
|
||||
</div>
|
||||
<div className="home__title">No Frameworks</div>
|
||||
</div>
|
||||
<div className="home__feature">
|
||||
<div className="home__icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 48 48" width="48" height="48"><g transform="matrix(2,0,0,2,0,0)"><path d="M13.514 23.5L10.514 23.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M14.514 21.5L9.514 21.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M12.014 0.5L12.014 3.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M3.528 4.015L5.65 6.136" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M20.499 4.015L18.378 6.136" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M0.514 12.5L3.514 12.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M23.514 12.5L20.514 12.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M18.014,12.5a6,6,0,1,0-9.429,4.917,1,1,0,0,1,.429.821V19a.5.5,0,0,0,.5.5h5a.5.5,0,0,0,.5-.5v-.763a1,1,0,0,1,.429-.821A5.98,5.98,0,0,0,18.014,12.5Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path></g></svg>
|
||||
</div>
|
||||
<div className="home__title">
|
||||
No CSS Hacks
|
||||
</div>
|
||||
</div>
|
||||
<div className="home__feature">
|
||||
<div className="home__icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 48 48" width="48" height="48"><g transform="matrix(2,0,0,2,0,0)"><path d="M9.000 9.500 A3 1.5 0 1 0 15.000 9.500 A3 1.5 0 1 0 9.000 9.500 Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M9.000 3.500 A3 1.5 0 1 0 15.000 3.500 A3 1.5 0 1 0 9.000 3.500 Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M16.000 6.500 A3 1.5 0 1 0 22.000 6.500 A3 1.5 0 1 0 16.000 6.500 Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M2.500 6.500 A3 1.5 0 1 0 8.500 6.500 A3 1.5 0 1 0 2.500 6.500 Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M9.737 4.484L7.582 5.421" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M16.694 5.541L14.261 4.483" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M3.074,7.381,1.1,8.239a1,1,0,0,0-.6.917v6.7a1,1,0,0,0,.586.91L11.1,21.32a1,1,0,0,0,.8.013l10.983-4.577a1,1,0,0,0,.615-.923V9.156a1,1,0,0,0-.6-.917L21.2,7.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M11.5 13.5L11.5 21.408" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M23.315 8.577L11.5 13.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M11.5 13.5L0.681 8.582" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path></g></svg>
|
||||
</div>
|
||||
<div className="home__title">Real Use Cases</div>
|
||||
</div>
|
||||
<div className="home__feature">
|
||||
<div className="home__icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 48 48" width="48" height="48"><g transform="matrix(2,0,0,2,0,0)"><path d="M20,15.659h0a1.5,1.5,0,1,1,0,3H19a1.5,1.5,0,0,1,1.5,1.5c0,.829-.672,1-1.5,1H12.5c-2.851,0-3.5-.5-7-1v-8.5c2.45,0,6.5-4.5,6.5-8.5,0-1.581,2.189-2.17,3,.719.5,1.781-1,5.281-1,5.281h8a1.5,1.5,0,0,1,1.5,1.5c0,.829-.672,2-1.5,2H21a1.5,1.5,0,0,1,0,3H20" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M0.5 10.159H5.5V22.159H0.5z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M3.25 19.659L3.25 19.659" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M3.25,19.659a.25.25,0,1,0,.25.25.25.25,0,0,0-.25-.25" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path></g></svg>
|
||||
</div>
|
||||
<div className="home__title">Good Practices <div className="home__soon">soon</div></div>
|
||||
</div>
|
||||
<div className="home__feature">
|
||||
<div className="home__icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 48 48" width="48" height="48"><g transform="matrix(2,0,0,2,0,0)"><path d="M7,6,8.362,16.44a1,1,0,0,0,1.184.853C11.644,16.882,16.233,16,17,16c1,0,1.5,5.5,2,5.5a11.343,11.343,0,0,0,2-.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M7.389,12.557A5.645,5.645,0,0,0,3,18a5.487,5.487,0,0,0,5.4,5.5A5.66,5.66,0,0,0,14,18V16.451" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M9.456,3.227A2.728,2.728,0,1,1,6.728.5,2.728,2.728,0,0,1,9.456,3.227Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M7.389 12.557L13.5 11" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path></g></svg>
|
||||
</div>
|
||||
<div className="home__title">Accessibility Support <div className="home__soon">soon</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="home__patterns">
|
||||
<div className="home__overlay">
|
||||
<div className="home__heading">{numPatterns} patterns</div>
|
||||
<Link to="/patterns" className="home__explore">Explore the collection</Link>
|
||||
</div>
|
||||
<div className="home__sliders">
|
||||
{
|
||||
groups.map((patterns, index) => (
|
||||
<div className="home__slide" key={index}>
|
||||
{
|
||||
patterns.map(pattern => <CoverCard key={pattern} pattern={pattern} />)
|
||||
}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default HomePage;
|
||||
@@ -1,29 +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 DetailsLoader from '../loaders/DetailsLoader';
|
||||
|
||||
interface PatternPageProps {
|
||||
pattern: string;
|
||||
}
|
||||
|
||||
const capitalizeFirstLetter = (s: string) => `${s.charAt(0).toUpperCase()}${s.slice(1)}`;
|
||||
|
||||
const PatternPage: React.FC<PatternPageProps> = ({ pattern }) => {
|
||||
const name = pattern.split('-').map((s) => capitalizeFirstLetter(s)).join('');
|
||||
const patterns = Object.keys(Pattern);
|
||||
|
||||
return (
|
||||
patterns.indexOf(name) === -1
|
||||
// TODO: Render 404
|
||||
? <div>404</div>
|
||||
: <DetailsLoader pattern={pattern} />
|
||||
);
|
||||
};
|
||||
|
||||
export default PatternPage;
|
||||
@@ -1,9 +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>
|
||||
*/
|
||||
|
||||
.explore__collection {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@@ -1,102 +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>
|
||||
*/
|
||||
|
||||
.home__features {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 1rem -1rem;
|
||||
}
|
||||
.home__feature {
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.home__icon {
|
||||
color: var(--color-blue-6);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.home__title {
|
||||
color: var(--color-gray-5);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.home__patterns {
|
||||
height: 80rem;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.home__overlay {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
.home__heading {
|
||||
color: var(--color-gray-9);
|
||||
font-size: 3rem;
|
||||
font-weight: 600;
|
||||
margin: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
.home__explore {
|
||||
background-color: var(--background-color);
|
||||
border-radius: 0.4rem;
|
||||
color: var(--color-gray-9);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
.home__sliders {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.home__slide {
|
||||
animation: slide 20s linear infinite;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.home__soon {
|
||||
background: #1e1d6e;
|
||||
border-radius: 9999px;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
padding: 0.125rem 1rem;
|
||||
}
|
||||
|
||||
@keyframes slide {
|
||||
from {
|
||||
transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (min-width: 640px) {
|
||||
.home__feature {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.home__feature {
|
||||
width: 33.333333%;
|
||||
}
|
||||
}
|
||||
151
components/CoverCard.tsx
Normal file
151
components/CoverCard.tsx
Normal file
@@ -0,0 +1,151 @@
|
||||
import * as React from 'react';
|
||||
import dynamic from 'next/dynamic';
|
||||
import Link from 'next/link';
|
||||
|
||||
import { Pattern } from '../constants/Pattern';
|
||||
import { slug } from '../utils/slug';
|
||||
|
||||
interface CoverCardProps {
|
||||
pattern: Pattern;
|
||||
}
|
||||
|
||||
const CoverList = {
|
||||
// A
|
||||
[Pattern.Accordion]: dynamic(() => import('../patterns/accordion/Cover')),
|
||||
[Pattern.ArrowButtons]: dynamic(() => import('../patterns/arrow-buttons/Cover')),
|
||||
[Pattern.Avatar]: dynamic(() => import('../patterns/avatar/Cover')),
|
||||
[Pattern.AvatarList]: dynamic(() => import('../patterns/avatar-list/Cover')),
|
||||
// B
|
||||
[Pattern.Badge]: dynamic(() => import('../patterns/badge/Cover')),
|
||||
[Pattern.Breadcrumb]: dynamic(() => import('../patterns/breadcrumb/Cover')),
|
||||
[Pattern.ButtonWithIcon]: dynamic(() => import('../patterns/button-with-icon/Cover')),
|
||||
// C
|
||||
[Pattern.Card]: dynamic(() => import('../patterns/card/Cover')),
|
||||
[Pattern.CardLayout]: dynamic(() => import('../patterns/card-layout/Cover')),
|
||||
[Pattern.Centering]: dynamic(() => import('../patterns/centering/Cover')),
|
||||
[Pattern.Chip]: dynamic(() => import('../patterns/chip/Cover')),
|
||||
[Pattern.CircularNavigation]: dynamic(() => import('../patterns/circular-navigation/Cover')),
|
||||
[Pattern.CloseButton]: dynamic(() => import('../patterns/close-button/Cover')),
|
||||
[Pattern.ColorSwatch]: dynamic(() => import('../patterns/color-swatch/Cover')),
|
||||
[Pattern.ConcaveCorners]: dynamic(() => import('../patterns/concave-corners/Cover')),
|
||||
[Pattern.CookieBanner]: dynamic(() => import('../patterns/cookie-banner/Cover')),
|
||||
[Pattern.CornerRibbon]: dynamic(() => import('../patterns/corner-ribbon/Cover')),
|
||||
[Pattern.CurvedBackground]: dynamic(() => import('../patterns/curved-background/Cover')),
|
||||
[Pattern.CustomCheckboxButton]: dynamic(() => import('../patterns/custom-checkbox-button/Cover')),
|
||||
[Pattern.CustomRadioButton]: dynamic(() => import('../patterns/custom-radio-button/Cover')),
|
||||
// D
|
||||
[Pattern.DiagonalSection]: dynamic(() => import('../patterns/diagonal-section/Cover')),
|
||||
[Pattern.DockedAtCorner]: dynamic(() => import('../patterns/docked-at-corner/Cover')),
|
||||
[Pattern.DotLeader]: dynamic(() => import('../patterns/dot-leader/Cover')),
|
||||
[Pattern.DotNavigation]: dynamic(() => import('../patterns/dot-navigation/Cover')),
|
||||
[Pattern.Drawer]: dynamic(() => import('../patterns/drawer/Cover')),
|
||||
[Pattern.DropArea]: dynamic(() => import('../patterns/drop-area/Cover')),
|
||||
[Pattern.DropCap]: dynamic(() => import('../patterns/drop-cap/Cover')),
|
||||
[Pattern.Dropdown]: dynamic(() => import('../patterns/dropdown/Cover')),
|
||||
// F
|
||||
[Pattern.FadingLongSection]: dynamic(() => import('../patterns/fading-long-section/Cover')),
|
||||
[Pattern.FeatureComparison]: dynamic(() => import('../patterns/feature-comparison/Cover')),
|
||||
[Pattern.FeatureList]: dynamic(() => import('../patterns/feature-list/Cover')),
|
||||
[Pattern.FixedAtCorner]: dynamic(() => import('../patterns/fixed-at-corner/Cover')),
|
||||
[Pattern.FixedAtSide]: dynamic(() => import('../patterns/fixed-at-side/Cover')),
|
||||
[Pattern.FloatingLabel]: dynamic(() => import('../patterns/floating-label/Cover')),
|
||||
[Pattern.FolderStructure]: dynamic(() => import('../patterns/folder-structure/Cover')),
|
||||
[Pattern.FullBackground]: dynamic(() => import('../patterns/full-background/Cover')),
|
||||
[Pattern.FullScreenMenu]: dynamic(() => import('../patterns/full-screen-menu/Cover')),
|
||||
// H
|
||||
[Pattern.HolyGrail]: dynamic(() => import('../patterns/holy-grail/Cover')),
|
||||
// I
|
||||
[Pattern.InitialAvatar]: dynamic(() => import('../patterns/initial-avatar/Cover')),
|
||||
[Pattern.InputAddon]: dynamic(() => import('../patterns/input-addon/Cover')),
|
||||
[Pattern.InvertedCorners]: dynamic(() => import('../patterns/inverted-corners/Cover')),
|
||||
// K
|
||||
[Pattern.KeyboardShortcut]: dynamic(() => import('../patterns/keyboard-shortcut/Cover')),
|
||||
// L
|
||||
[Pattern.LayeredCard]: dynamic(() => import('../patterns/layered-card/Cover')),
|
||||
[Pattern.LinedPaper]: dynamic(() => import('../patterns/lined-paper/Cover')),
|
||||
// M
|
||||
[Pattern.MasonryGrid]: dynamic(() => import('../patterns/masonry-grid/Cover')),
|
||||
[Pattern.MediaObject]: dynamic(() => import('../patterns/media-object/Cover')),
|
||||
[Pattern.MegaMenu]: dynamic(() => import('../patterns/mega-menu/Cover')),
|
||||
[Pattern.Menu]: dynamic(() => import('../patterns/menu/Cover')),
|
||||
[Pattern.Modal]: dynamic(() => import('../patterns/modal/Cover')),
|
||||
// N
|
||||
[Pattern.NestedDropdowns]: dynamic(() => import('../patterns/nested-dropdowns/Cover')),
|
||||
[Pattern.Notification]: dynamic(() => import('../patterns/notification/Cover')),
|
||||
// O
|
||||
[Pattern.OverlayPlayButton]: dynamic(() => import('../patterns/overlay-play-button/Cover')),
|
||||
// P
|
||||
[Pattern.Pagination]: dynamic(() => import('../patterns/pagination/Cover')),
|
||||
[Pattern.PopoverArrow]: dynamic(() => import('../patterns/popover-arrow/Cover')),
|
||||
[Pattern.PresenceIndicator]: dynamic(() => import('../patterns/presence-indicator/Cover')),
|
||||
[Pattern.PreviousNextButtons]: dynamic(() => import('../patterns/previous-next-buttons/Cover')),
|
||||
[Pattern.PriceTag]: dynamic(() => import('../patterns/price-tag/Cover')),
|
||||
[Pattern.PricingTable]: dynamic(() => import('../patterns/pricing-table/Cover')),
|
||||
[Pattern.ProgressBar]: dynamic(() => import('../patterns/progress-bar/Cover')),
|
||||
[Pattern.PropertyList]: dynamic(() => import('../patterns/property-list/Cover')),
|
||||
// Q
|
||||
[Pattern.QuestionsAndAnswers]: dynamic(() => import('../patterns/questions-and-answers/Cover')),
|
||||
// R
|
||||
[Pattern.RadialProgressBar]: dynamic(() => import('../patterns/radial-progress-bar/Cover')),
|
||||
[Pattern.RadioButtonGroup]: dynamic(() => import('../patterns/radio-button-group/Cover')),
|
||||
[Pattern.RadioSwitch]: dynamic(() => import('../patterns/radio-switch/Cover')),
|
||||
[Pattern.Rating]: dynamic(() => import('../patterns/rating/Cover')),
|
||||
[Pattern.ResizableElement]: dynamic(() => import('../patterns/resizable-element/Cover')),
|
||||
[Pattern.Ribbon]: dynamic(() => import('../patterns/ribbon/Cover')),
|
||||
// S
|
||||
[Pattern.SameHeightColumns]: dynamic(() => import('../patterns/same-height-columns/Cover')),
|
||||
[Pattern.SearchBox]: dynamic(() => import('../patterns/search-box/Cover')),
|
||||
[Pattern.Separator]: dynamic(() => import('../patterns/separator/Cover')),
|
||||
[Pattern.Sidebar]: dynamic(() => import('../patterns/sidebar/Cover')),
|
||||
[Pattern.SimpleGrid]: dynamic(() => import('../patterns/simple-grid/Cover')),
|
||||
[Pattern.Slider]: dynamic(() => import('../patterns/slider/Cover')),
|
||||
[Pattern.SpinButton]: dynamic(() => import('../patterns/spin-button/Cover')),
|
||||
[Pattern.SplitNavigation]: dynamic(() => import('../patterns/split-navigation/Cover')),
|
||||
[Pattern.SplitScreen]: dynamic(() => import('../patterns/split-screen/Cover')),
|
||||
[Pattern.StackedCards]: dynamic(() => import('../patterns/stacked-cards/Cover')),
|
||||
[Pattern.StampBorder]: dynamic(() => import('../patterns/stamp-border/Cover')),
|
||||
[Pattern.Statistic]: dynamic(() => import('../patterns/statistic/Cover')),
|
||||
[Pattern.StatusLight]: dynamic(() => import('../patterns/status-light/Cover')),
|
||||
[Pattern.StepperInput]: dynamic(() => import('../patterns/stepper-input/Cover')),
|
||||
[Pattern.StickyFooter]: dynamic(() => import('../patterns/sticky-footer/Cover')),
|
||||
[Pattern.StickyHeader]: dynamic(() => import('../patterns/sticky-header/Cover')),
|
||||
[Pattern.StickySections]: dynamic(() => import('../patterns/sticky-sections/Cover')),
|
||||
[Pattern.StickyTableColumn]: dynamic(() => import('../patterns/sticky-table-column/Cover')),
|
||||
[Pattern.StickyTableHeaders]: dynamic(() => import('../patterns/sticky-table-headers/Cover')),
|
||||
[Pattern.Switch]: dynamic(() => import('../patterns/switch/Cover')),
|
||||
// T
|
||||
[Pattern.Tab]: dynamic(() => import('../patterns/tab/Cover')),
|
||||
[Pattern.Teardrop]: dynamic(() => import('../patterns/teardrop/Cover')),
|
||||
[Pattern.ThreeDimensionsCard]: dynamic(() => import('../patterns/three-dimensions-card/Cover')),
|
||||
[Pattern.Timeline]: dynamic(() => import('../patterns/timeline/Cover')),
|
||||
[Pattern.TogglePasswordVisibility]: dynamic(() => import('../patterns/toggle-password-visibility/Cover')),
|
||||
[Pattern.Tooltip]: dynamic(() => import('../patterns/tooltip/Cover')),
|
||||
[Pattern.TreeDiagram]: dynamic(() => import('../patterns/tree-diagram/Cover')),
|
||||
[Pattern.TriangleButtons]: dynamic(() => import('../patterns/triangle-buttons/Cover')),
|
||||
// U
|
||||
[Pattern.UploadButton]: dynamic(() => import('../patterns/upload-button/Cover')),
|
||||
// V
|
||||
[Pattern.ValidationIcon]: dynamic(() => import('../patterns/validation-icon/Cover')),
|
||||
[Pattern.VideoBackground]: dynamic(() => import('../patterns/video-background/Cover')),
|
||||
[Pattern.Voting]: dynamic(() => import('../patterns/voting/Cover')),
|
||||
// W
|
||||
[Pattern.Watermark]: dynamic(() => import('../patterns/watermark/Cover')),
|
||||
[Pattern.Wizard]: dynamic(() => import('../patterns/wizard/Cover')),
|
||||
// Z
|
||||
[Pattern.ZigzagTimeline]: dynamic(() => import('../patterns/zigzag-timeline/Cover')),
|
||||
};
|
||||
|
||||
export const CoverCard: React.FC<CoverCardProps> = ({ pattern }) => {
|
||||
const Cover = CoverList[pattern];
|
||||
|
||||
return (
|
||||
<Link href={`/patterns/${slug(pattern)}`}>
|
||||
<a className="block-cover">
|
||||
<Cover />
|
||||
<h4 className="block-cover__name">
|
||||
{pattern}
|
||||
</h4>
|
||||
</a>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
@@ -1,9 +1,4 @@
|
||||
/**
|
||||
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
|
||||
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
|
||||
*/
|
||||
|
||||
enum Pattern {
|
||||
export enum Pattern {
|
||||
Accordion = 'Accordion',
|
||||
ArrowButtons = 'Arrow buttons',
|
||||
Avatar = 'Avatar',
|
||||
@@ -106,6 +101,4 @@ enum Pattern {
|
||||
Watermark = 'Watermark',
|
||||
Wizard = 'Wizard',
|
||||
ZigzagTimeline = 'Zigzag timeline',
|
||||
}
|
||||
|
||||
export default Pattern;
|
||||
};
|
||||
@@ -9,7 +9,7 @@ class MyDocument extends Document {
|
||||
<meta charSet="utf-8" />
|
||||
|
||||
<meta content="A collection of popular layouts and patterns made with CSS" name="description" />
|
||||
<meta content="CSS flexbox, CSS grid, CSS layout, CSS patterns" name="keywords" />
|
||||
<meta content="css display, css flexbox, css grid, css layouts, flex, flexbox, flexbox cheatsheet, web design, web template" name="keywords" />
|
||||
<meta content="Nguyen Huu Phuoc" name="author" />
|
||||
<meta content="@nghuuphuoc" name="twitter:site" />
|
||||
<meta content="summary" name="twitter:card" />
|
||||
|
||||
135
pages/index.tsx
135
pages/index.tsx
@@ -1,11 +1,146 @@
|
||||
import * as React from 'react';
|
||||
import { Heading, Spacer } from '@1milligram/design';
|
||||
|
||||
import { CoverCard } from '../components/CoverCard';
|
||||
import { Pattern } from '../constants/Pattern';
|
||||
import { Layout } from '../layouts/Layout';
|
||||
|
||||
const HomePage = () => {
|
||||
return (
|
||||
<Layout title="A collection of popular layouts and patterns made with CSS">
|
||||
<div className="block-container">
|
||||
<div className="page-home__hero">
|
||||
<Spacer size="extraLarge" />
|
||||
<Heading level={1}>CSS Layout</Heading>
|
||||
<Heading level={4}>Popular layouts and patterns made with CSS</Heading>
|
||||
<Spacer size="large" />
|
||||
<div>Following covers are made with CSS only. Inspect them!</div>
|
||||
</div>
|
||||
|
||||
<div className="page-home__category"><Heading level={2}>Display</Heading></div>
|
||||
<div className="page-home__collection">
|
||||
<CoverCard pattern={Pattern.Accordion} />
|
||||
<CoverCard pattern={Pattern.ArrowButtons} />
|
||||
<CoverCard pattern={Pattern.Avatar} />
|
||||
<CoverCard pattern={Pattern.AvatarList} />
|
||||
<CoverCard pattern={Pattern.Badge} />
|
||||
<CoverCard pattern={Pattern.Card} />
|
||||
<CoverCard pattern={Pattern.Centering} />
|
||||
<CoverCard pattern={Pattern.CloseButton} />
|
||||
<CoverCard pattern={Pattern.ColorSwatch} />
|
||||
<CoverCard pattern={Pattern.ConcaveCorners} />
|
||||
<CoverCard pattern={Pattern.CookieBanner} />
|
||||
<CoverCard pattern={Pattern.CornerRibbon} />
|
||||
<CoverCard pattern={Pattern.CurvedBackground} />
|
||||
<CoverCard pattern={Pattern.DiagonalSection} />
|
||||
<CoverCard pattern={Pattern.DockedAtCorner} />
|
||||
<CoverCard pattern={Pattern.DotLeader} />
|
||||
<CoverCard pattern={Pattern.DropArea} />
|
||||
<CoverCard pattern={Pattern.DropCap} />
|
||||
<CoverCard pattern={Pattern.FadingLongSection} />
|
||||
<CoverCard pattern={Pattern.FeatureComparison} />
|
||||
<CoverCard pattern={Pattern.FeatureList} />
|
||||
<CoverCard pattern={Pattern.FixedAtCorner} />
|
||||
<CoverCard pattern={Pattern.FixedAtSide} />
|
||||
<CoverCard pattern={Pattern.FolderStructure} />
|
||||
<CoverCard pattern={Pattern.FullBackground} />
|
||||
<CoverCard pattern={Pattern.InitialAvatar} />
|
||||
<CoverCard pattern={Pattern.InvertedCorners} />
|
||||
<CoverCard pattern={Pattern.KeyboardShortcut} />
|
||||
<CoverCard pattern={Pattern.LayeredCard} />
|
||||
<CoverCard pattern={Pattern.LinedPaper} />
|
||||
<CoverCard pattern={Pattern.MediaObject} />
|
||||
<CoverCard pattern={Pattern.OverlayPlayButton} />
|
||||
<CoverCard pattern={Pattern.PriceTag} />
|
||||
<CoverCard pattern={Pattern.PricingTable} />
|
||||
<CoverCard pattern={Pattern.PropertyList} />
|
||||
<CoverCard pattern={Pattern.QuestionsAndAnswers} />
|
||||
<CoverCard pattern={Pattern.Ribbon} />
|
||||
<CoverCard pattern={Pattern.Separator} />
|
||||
<CoverCard pattern={Pattern.StackedCards} />
|
||||
<CoverCard pattern={Pattern.StampBorder} />
|
||||
<CoverCard pattern={Pattern.Statistic} />
|
||||
<CoverCard pattern={Pattern.StatusLight} />
|
||||
<CoverCard pattern={Pattern.StickyTableColumn} />
|
||||
<CoverCard pattern={Pattern.StickyTableHeaders} />
|
||||
<CoverCard pattern={Pattern.Teardrop} />
|
||||
<CoverCard pattern={Pattern.ThreeDimensionsCard} />
|
||||
<CoverCard pattern={Pattern.Timeline} />
|
||||
<CoverCard pattern={Pattern.TreeDiagram} />
|
||||
<CoverCard pattern={Pattern.TriangleButtons} />
|
||||
<CoverCard pattern={Pattern.VideoBackground} />
|
||||
<CoverCard pattern={Pattern.Voting} />
|
||||
<CoverCard pattern={Pattern.Watermark} />
|
||||
<CoverCard pattern={Pattern.ZigzagTimeline} />
|
||||
</div>
|
||||
|
||||
<div className="page-home__category"><Heading level={2}>Feedback</Heading></div>
|
||||
<div className="page-home__collection">
|
||||
<CoverCard pattern={Pattern.Modal} />
|
||||
<CoverCard pattern={Pattern.Notification} />
|
||||
<CoverCard pattern={Pattern.PopoverArrow} />
|
||||
<CoverCard pattern={Pattern.ProgressBar} />
|
||||
<CoverCard pattern={Pattern.RadialProgressBar} />
|
||||
<CoverCard pattern={Pattern.ResizableElement} />
|
||||
<CoverCard pattern={Pattern.PresenceIndicator} />
|
||||
<CoverCard pattern={Pattern.Tooltip} />
|
||||
<CoverCard pattern={Pattern.ValidationIcon} />
|
||||
</div>
|
||||
|
||||
<div className="page-home__category"><Heading level={2}>Input</Heading></div>
|
||||
<div className="page-home__collection">
|
||||
<CoverCard pattern={Pattern.ButtonWithIcon} />
|
||||
<CoverCard pattern={Pattern.Chip} />
|
||||
<CoverCard pattern={Pattern.CustomCheckboxButton} />
|
||||
<CoverCard pattern={Pattern.CustomRadioButton} />
|
||||
<CoverCard pattern={Pattern.FloatingLabel} />
|
||||
<CoverCard pattern={Pattern.InputAddon} />
|
||||
<CoverCard pattern={Pattern.RadioButtonGroup} />
|
||||
<CoverCard pattern={Pattern.RadioSwitch} />
|
||||
<CoverCard pattern={Pattern.Rating} />
|
||||
<CoverCard pattern={Pattern.SearchBox} />
|
||||
<CoverCard pattern={Pattern.Slider} />
|
||||
<CoverCard pattern={Pattern.SpinButton} />
|
||||
<CoverCard pattern={Pattern.StepperInput} />
|
||||
<CoverCard pattern={Pattern.Switch} />
|
||||
<CoverCard pattern={Pattern.TogglePasswordVisibility} />
|
||||
<CoverCard pattern={Pattern.UploadButton} />
|
||||
</div>
|
||||
|
||||
<div className="page-home__category"><Heading level={2}>Layout</Heading></div>
|
||||
<div className="page-home__collection">
|
||||
<CoverCard pattern={Pattern.CardLayout} />
|
||||
<CoverCard pattern={Pattern.HolyGrail} />
|
||||
<CoverCard pattern={Pattern.MasonryGrid} />
|
||||
<CoverCard pattern={Pattern.SameHeightColumns} />
|
||||
<CoverCard pattern={Pattern.Sidebar} />
|
||||
<CoverCard pattern={Pattern.SimpleGrid} />
|
||||
<CoverCard pattern={Pattern.SplitScreen} />
|
||||
<CoverCard pattern={Pattern.StickyFooter} />
|
||||
<CoverCard pattern={Pattern.StickyHeader} />
|
||||
<CoverCard pattern={Pattern.StickySections} />
|
||||
</div>
|
||||
|
||||
<div className="page-home__category"><Heading level={2}>Navigation</Heading></div>
|
||||
<div className="page-home__collection">
|
||||
<CoverCard pattern={Pattern.Breadcrumb} />
|
||||
<CoverCard pattern={Pattern.CircularNavigation} />
|
||||
<CoverCard pattern={Pattern.DotNavigation} />
|
||||
<CoverCard pattern={Pattern.Drawer} />
|
||||
<CoverCard pattern={Pattern.Dropdown} />
|
||||
<CoverCard pattern={Pattern.FullScreenMenu} />
|
||||
<CoverCard pattern={Pattern.MegaMenu} />
|
||||
<CoverCard pattern={Pattern.Menu} />
|
||||
<CoverCard pattern={Pattern.NestedDropdowns} />
|
||||
<CoverCard pattern={Pattern.Pagination} />
|
||||
<CoverCard pattern={Pattern.PreviousNextButtons} />
|
||||
<CoverCard pattern={Pattern.SplitNavigation} />
|
||||
<CoverCard pattern={Pattern.Tab} />
|
||||
<CoverCard pattern={Pattern.Wizard} />
|
||||
</div>
|
||||
|
||||
<Spacer size="large" />
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
|
||||
import * as React from 'react';
|
||||
|
||||
import random from '../../helpers/random';
|
||||
import { random } from '../../utils/random';
|
||||
import Frame from '../../placeholders/Frame';
|
||||
import Line from '../../placeholders/Line';
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user