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

Format pattern pages

Browse Source
This commit is contained in:
Phuoc Nguyen
2021-09-27 23:14:35 +07:00
parent 6403dfdf36
commit 9d394a8561
222 changed files with 8168 additions and 8468 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
bin/generateScreenshot.ts
View File

@@ -13,20 +13,20 @@ const main = () => {
}
const pattern = args[2];
(async () => {
const browser = await puppeteer.launch();
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(`http://localhost:3000/${pattern}`);
await page.waitForSelector('.demo__live');
const element = await page.$('.demo__live');
await element.screenshot({
path: `public/assets/patterns/${pattern}.png`
path: `public/assets/patterns/${pattern}.png`,
});
await page.close();
await browser.close();
})();
};

30
client/App.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 { BrowserRouter as Router, Route, Switch as RouteSwitch } from 'react-router-dom';
import './index.css';
import ExplorePage from './pages/ExplorePage';
import HomePage from './pages/HomePage';
import PatternPage from './pages/PatternPage';
const App = () => {
return (
<Router>
<RouteSwitch>
<Route exact={true} path='/'><HomePage /></Route>
<Route exact={true} path='/patterns'><ExplorePage /></Route>
<Route
path='/patterns/:pattern'
render={(props) => <PatternPage pattern={props.match.params.pattern as string} />} // tslint:disable-line
/>
</RouteSwitch>
</Router>
);
};
export default App;

28
client/components/Product.tsx
View File

@@ -1,28 +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 './product.css';
import ProductModel from '../constants/ProductModel';
import slug from '../../utils/slug';
interface ProductProps {
product: ProductModel;
}
const Product: React.FC<ProductProps> = ({ product }) => {
return (
<div className="product" style={{ backgroundColor: product.themeColor }}>
<a href={product.url}>
<img className="product__logo" src={`/assets/${slug(product.name)}.png`} alt={`${product.name} - ${product.description}`} />
<h3 className="product__name">{product.name}</h3>
<div className="product__desc">{product.description}</div>
</a>
</div>
);
};
export default Product;

27
client/components/SampleCode.tsx
View File

@@ -1,27 +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 highlight from '../helpers/highlight';
interface SampleCodeProps {
code: string;
fullHeight?: boolean;
lang: string;
}
const SampleCode: React.FC<SampleCodeProps> = ({ code, fullHeight = false, lang }) => {
return code === ''
? <></>
: (
<pre
className={`language-${lang}`}
dangerouslySetInnerHTML={{ __html: highlight(code, lang) }}
/>
);
};
export default SampleCode;

23
client/components/ad.css
View File

@@ -1,23 +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>
*/
#carbonads {
border: 1px solid rgba(0, 0, 0, .3);
border-radius: 0.5rem;
padding: 0.5rem;
}
.carbon-img {
display: block;
margin-bottom: 0.5rem;
text-align: center;
}
.carbon-poweredby {
display: block;
font-size: 0.75rem;
text-align: right;
}
.carbon-text {
display: block;
}

19
client/components/heading.css
View File

@@ -1,19 +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>
*/
.heading {
color: var(--color-gray-9);
display: grid;
font-size: 2rem;
grid-template-columns: 1fr auto 1fr;
grid-gap: 1rem;
text-align: center;
}
.heading::before,
.heading::after {
align-self: center;
border-top: 0.25rem double var(--color-gray-9);
content: '';
}

30
client/components/product.css
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>
*/
.product {
border-radius: 0.5rem;
color: #FFF;
margin: 1rem 0;
overflow: hidden;
padding: 1rem;
}
.product a {
color: #FFF;
text-align: center;
text-decoration: none;
}
.product__logo {
display: flex;
height: auto;
margin: 0 auto;
width: 6rem;
}
.product__name {
font-size: 1.5rem;
margin: 1rem;
}
.product__desc {
text-align: center;
}

10
client/helpers/chunk.ts
View File

@@ -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 chunk<T>(arr: T[], size: number): T[][] {
return arr.reduce((acc, e, i) => (i % size ? acc[acc.length - 1].push(e) : acc.push([e]), acc), []);
};
export default chunk;

16
client/helpers/highlight.ts
View File

@@ -1,16 +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 Prism from 'prismjs';
const highlight = (input: string, language: string) => {
const lang = language || 'html';
const value = Prism.highlight(input, Prism.languages[language], language);
const highlighted = value.replace('&amp;', '&').trim();
return `<code class="language-${lang}">${highlighted}</code>`;
};
export default highlight;

11
client/helpers/shuffe.ts
View File

@@ -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>
*/
const shuffe = (array: number[]) => {
array.sort(() => Math.random() - 0.5);
return array;
};
export default shuffe;

21
client/hooks/useInterval.ts
View File

@@ -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>
*/
import { useEffect } from 'react';
const useInterval = (callback: () => void, delay?: number) => {
useEffect(
() => {
const handler = () => callback();
if (delay !== null) {
const id = setInterval(handler, delay);
return () => clearInterval(id);
}
},
[delay],
);
};
export default useInterval;

179
client/index.css
View File

@@ -1,179 +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>
*/
:root {
--background-color: #e7d900;
--color-blue-6: #2563EB;
--color-gray-2: #E5E7EB;
--color-gray-5: #6B7280;
--color-gray-8: #27272A;
--color-gray-9: #111827;
}
body {
font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
margin: 0;
}
* {
box-sizing: border-box;
}
a {
text-decoration: none;
}
::-webkit-scrollbar {
height: 0.5rem;
width: 0.5rem;
}
::-webkit-scrollbar-thumb {
background-color: var(--color-gray-5);
border-radius: 0.5rem;
}
::-webkit-scrollbar-track {
background-color: transparent;
border-radius: 0.5rem;
}
/* Layout */
.container {
margin: 0 auto;
max-width: 80rem;
padding: 0 1rem;
}
.main {
flex: 1;
overflow: hidden;
padding: 4rem 0;
}
.sidebar {
display: none;
padding: 4rem 0;
}
/* Sidebar */
.sidebar__inner {
position: sticky;
top: 1rem;
}
/* Hero */
.hero {
--current-background-color: var(--background-color);
background: var(--background-color);
display: flex;
justify-content: center;
padding-bottom: 1rem;
}
.hero__logo {
display: flex;
justify-content: center;
}
.hero__logo img {
object-fit: cover;
width: 16rem;
}
.hero__heading {
color: var(--color-gray-9);
font-size: 2rem;
line-height: 1.5;
text-align: center;
text-transform: uppercase;
}
.hero__subheading {
color: var(--color-gray-9);
font-size: 1.5rem;
line-height: 1.5;
text-align: center;
}
/*
Prism theme
Credit to https://github.com/tailwindlabs/tailwindcss.com/blob/master/src/css/prism.css
*/
pre {
background: var(--color-gray-8);
border: none;
border-radius: 0px;
box-shadow: none;
color: #FFF;
font-family: "Source Code Pro", monospace;
font-size: 1rem;
line-height: 1.5;
margin: 0px;
overflow-x: auto;
padding: 1rem;
white-space: pre;
}
.token.tag,
.token.class-name,
.token.selector,
.token.selector .class,
.token.function {
color: #E879F9;
}
.token.attr-name,
.token.keyword,
.token.rule,
.token.operator,
.token.pseudo-class,
.token.important {
color: #22D3EE;
}
.token.attr-value,
.token.class,
.token.string,
.token.number,
.token.unit,
.token.color {
color: #BEF264;
}
.token.punctuation,
.token.module,
.token.property {
color: #BAE6FD;
}
.token.atapply .token:not(.rule):not(.important) {
color: inherit;
}
.language-shell .token:not(.comment) {
color: inherit;
}
.language-css .token.function {
color: inherit;
}
.token.comment {
color: #A1A1AA;
}
/* Responsive */
@media (min-width: 640px) {
.content {
display: flex;
}
.sidebar {
display: block;
flex: 0 0 8rem;
margin-left: 0.5rem;
}
}
@media (min-width: 768px) {
.sidebar {
flex-basis: 12rem;
margin-left: 1rem;
}
}
@media (min-width: 1024px) {
.sidebar {
flex-basis: 16rem;
margin-left: 2rem;
}
}

24
client/index.html
View File

@@ -1,24 +0,0 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="Nguyen Huu Phuoc" />
<meta property="og:site_name" content="CSS Layout" />
<meta property="og:type" content="website" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:creator" content="@nghuuphuoc" />
<meta property="twitter:site" content="@nghuuphuoc" />
<link href="/assets/favicon.png" rel="icon">
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&family=Lato&display=swap" rel="stylesheet">
</head>
<body>
<div id="root"></div>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-139616701-3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-139616701-3');
</script>
</body>
</html>

14
client/index.tsx
View File

@@ -1,14 +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 { hydrate, render } from 'react-dom';
import App from './App';
const rootElement = document.getElementById('root');
rootElement.hasChildNodes()
? hydrate(<App />, rootElement)
: render(<App />, rootElement);

16
client/types/hightlight.d.ts vendored
View File

@@ -1,16 +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>
*/
declare module 'highlight.js/lib/highlight' {
interface HighlightResult {
value: string;
}
function highlight(lang: string, code: string): HighlightResult;
function registerLanguage(name: string, language: any): void;
}
declare module 'highlight.js/lib/languages/javascript' {}
declare module 'highlight.js/lib/languages/xml' {}

19
client/components/Ad.tsx → components/Ad.tsx
View File

@@ -1,21 +1,10 @@
/**
* 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 './ad.css';
const Ad: React.FC<{}> = () => {
export const Ad: React.FC<{}> = () => {
const containerRef = React.useRef<HTMLDivElement | null>(null);
const source = 'https://cdn.carbonads.com/carbon.js?serve=CE7I6KQL&placement=csslayoutio';
React.useEffect(() => {
// Ignore if the code is reached in snapping mode
if (navigator.userAgent === 'ReactSnap') {
return;
}
const container = containerRef.current;
if (!container) {
return;
@@ -32,9 +21,5 @@ const Ad: React.FC<{}> = () => {
};
}, []);
return (
<div ref={containerRef} />
);
return <div ref={containerRef} />;
};
export default Ad;

4
components/CoverCard.tsx
View File

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

14
components/RelatedPatterns.tsx
View File

@@ -1,22 +1,20 @@
import * as React from 'react';
import { Heading, Spacer } from '@1milligram/design';
import { Heading } from '@1milligram/design';
import { Pattern } from '../constants/Pattern';
import { CoverCard } from './CoverCard';
interface RelatedPatternsProps {
export const RelatedPatterns: React.FC<{
patterns: Pattern[];
}
export const RelatedPatterns: React.FC<RelatedPatternsProps> = ({ patterns }) => {
}> = ({ 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} />)
}
{patterns.map((pattern) => (
<CoverCard key={pattern} pattern={pattern} />
))}
</div>
</section>
);

2
constants/Pattern.ts
View File

@@ -101,4 +101,4 @@ export enum Pattern {
Watermark = 'Watermark',
Wizard = 'Wizard',
ZigzagTimeline = 'Zigzag timeline',
};
}

13
hooks/useInterval.ts Normal file
View File

@@ -0,0 +1,13 @@
import { useEffect } from 'react';
const useInterval = (callback: () => void, delay?: number) => {
useEffect(() => {
const handler = () => callback();
if (delay !== null) {
const id = setInterval(handler, delay);
return () => clearInterval(id);
}
}, [delay]);
};
export default useInterval;

15
layouts/DetailsLayout.tsx → layouts/PatternLayout.tsx
View File

@@ -2,21 +2,20 @@ import * as React from 'react';
import Head from 'next/head';
import { Heading, Spacer } from '@1milligram/design';
import { Ad } from '../components/Ad';
import { Pattern } from '../constants/Pattern';
import { slug } from '../utils/slug';
import { Layout } from './Layout';
interface DetailsLayoutProps {
export const PatternLayout: React.FC<{
pattern: Pattern;
}
export const DetailsLayout: React.FC<DetailsLayoutProps> = ({ pattern, children }) => {
}> = ({ pattern, children }) => {
const patternSlug = slug(pattern);
return (
<Layout title={pattern}>
<Head>
<title>CSS Layout ∙ {pattern}</title>
<title>{pattern} - CSS Layout</title>
<meta name="title" content={`${pattern} - CSS Layout`} />
<meta property="og:image" content={`https://csslayout.io/assets/patterns/${patternSlug}.png`} />
@@ -33,9 +32,13 @@ export const DetailsLayout: React.FC<DetailsLayoutProps> = ({ pattern, children
<Spacer size="extraLarge" />
<Heading level={1}>{pattern}</Heading>
<Spacer size="large" />
<div className="block-ad">
<Ad />
</div>
<Spacer size="medium" />
</div>
{children}
<Spacer size="extraLarge" />
</div>
</Layout>
);

4
package.json
View File

@@ -32,9 +32,7 @@
"screenshot": "TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' ts-node bin/generateScreenshot.ts"
},
"dependencies": {
"@loadable/component": "^5.14.1",
"@1milligram/design": "^0.4.0",
"@1milligram/frame": "^1.0.0",
"@mdx-js/loader": "^1.6.22",
"@mdx-js/react": "^1.6.22",
"@next/mdx": "^11.1.2",
@@ -44,8 +42,6 @@
"react-dom": "^17.0.2"
},
"devDependencies": {
"@types/linkifyjs": "^2.1.4",
"@types/loadable__component": "^5.13.3",
"@types/react": "^17.0.20",
"@types/react-dom": "^17.0.9",
"puppeteer": "^10.4.0",

15
pages/_document.tsx
View File

@@ -9,16 +9,25 @@ 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 display, css flexbox, css grid, css layouts, flex, flexbox, flexbox cheatsheet, web design, web template" 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" />
<meta content="A collection of popular layouts and patterns made with CSS" name="twitter:description" />
<meta
content="A collection of popular layouts and patterns made with CSS"
name="twitter:description"
/>
<meta content="A collection of popular layouts and patterns made with CSS" name="twitter:title" />
<meta content="/assets/logo.png" name="twitter:image" />
<meta content="A collection of popular layouts and patterns made with CSS" property="og:title" />
<meta content="A collection of popular layouts and patterns made with CSS" property="og:description" />
<meta
content="A collection of popular layouts and patterns made with CSS"
property="og:description"
/>
<meta content="article" property="og:type" />
<meta content="https://csslayout.io" property="og:url" />
<meta content="/assets/logo.png" property="og:image" />

176
pages/accordion/index.tsx
View File

@@ -1,14 +1,10 @@
/**
* 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 Head from 'next/head';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
@@ -23,7 +19,7 @@ const Details: React.FC<{}> = () => {
const [activeItem, setActiveItem] = React.useState(1);
const Item: React.FC<ItemProps> = ({ index, title, children }) => {
const isOpened = (index === activeItem);
const isOpened = index === activeItem;
const click = () => setActiveItem(isOpened ? -1 : index);
return (
<>
@@ -57,16 +53,15 @@ const Details: React.FC<{}> = () => {
};
return (
<DetailsLayout pattern={Pattern.Accordion}>
<PatternLayout pattern={Pattern.Accordion}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<!-- Container -->
<div class="accordion">
<!-- Each accordion item -->
@@ -92,93 +87,112 @@ html={`
...
</div>
`}
css={`
.accordion {
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
border-bottom-color: transparent;
border-radius: 4px;
}
css={`
.accordion {
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
border-bottom-color: transparent;
border-radius: 4px;
}
.accordion__item {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
.accordion__item {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
.accordion__header {
/* Center the content horizontally */
align-items: center;
display: flex;
.accordion__header {
/* Center the content horizontally */
align-items: center;
display: flex;
cursor: pointer;
padding: 16px;
}
cursor: pointer;
padding: 16px;
}
.accordion__toggle {
margin-right: 12px;
}
.accordion__toggle {
margin-right: 12px;
}
.accordion__title {
/* Take remaining width */
flex: 1;
}
.accordion__title {
/* Take remaining width */
flex: 1;
}
.accordion__content {
/* For not selected item */
display: none;
.accordion__content {
/* For not selected item */
display: none;
border-top: 1px solid rgba(0, 0, 0, 0.3);
padding: 16px;
}
border-top: 1px solid rgba(0, 0, 0, 0.3);
padding: 16px;
}
.accordion__content--selected {
/* For selected item */
display: block;
}
`}
.accordion__content--selected {
/* For selected item */
display: block;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderBottomColor: 'transparent',
borderRadius: '4px',
width: '60%',
}}
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderBottomColor: 'transparent',
borderRadius: '4px',
width: '60%',
}}
<Item
index={0}
title={
<div style={{ width: '40%' }}>
<Rectangle />
</div>
}
>
<Item
index={0}
title={<div style={{ width: '40%' }}><Rectangle /></div>}
>
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
</Item>
<Item
index={1}
title={<div style={{ width: '80%' }}><Rectangle /></div>}
>
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={15} /></div>
</Item>
<Item
index={2}
title={<div style={{ width: '60%' }}><Rectangle /></div>}
>
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
</Item>
</div>
<div style={{ marginBottom: '16px' }}>
<Block numberOfBlocks={10} />
</div>
</Item>
<Item
index={1}
title={
<div style={{ width: '80%' }}>
<Rectangle />
</div>
}
>
<div style={{ marginBottom: '16px' }}>
<Block numberOfBlocks={15} />
</div>
</Item>
<Item
index={2}
title={
<div style={{ width: '60%' }}>
<Rectangle />
</div>
}
>
<div style={{ marginBottom: '16px' }}>
<Block numberOfBlocks={10} />
</div>
</Item>
</div>
</BrowserFrame>
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.QuestionsAndAnswers]} />
</DetailsLayout>
</PatternLayout>
);
};

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

@@ -1,28 +1,23 @@
/**
* 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 Head from 'next/head';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.ArrowButtons}>
<PatternLayout pattern={Pattern.ArrowButtons}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<!-- Up arrow button -->
<button class="button">
<!-- Arrow -->
@@ -59,202 +54,202 @@ html={`
...
</button>
`}
css={`
.button {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
css={`
.button {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Spacing */
padding: 8px;
}
/* Spacing */
padding: 8px;
}
.button__arrow {
/* Transparent background */
background-color: transparent;
.button__arrow {
/* Transparent background */
background-color: transparent;
/* Size */
height: 12px;
width: 12px;
}
/* Size */
height: 12px;
width: 12px;
}
.button__arrow--up {
/* Edges */
border-left: 1px solid rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(0, 0, 0, 0.3);
transform: translateY(25%) rotate(45deg);
}
.button__arrow--up {
/* Edges */
border-left: 1px solid rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(0, 0, 0, 0.3);
transform: translateY(25%) rotate(45deg);
}
.button__arrow--right {
/* Edges */
border-right: 1px solid rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(0, 0, 0, 0.3);
transform: translateX(-25%) rotate(45deg);
}
.button__arrow--right {
/* Edges */
border-right: 1px solid rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(0, 0, 0, 0.3);
transform: translateX(-25%) rotate(45deg);
}
.button__arrow--down {
/* Edges */
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-right: 1px solid rgba(0, 0, 0, 0.3);
transform: translateY(-25%) rotate(45deg);
}
.button__arrow--down {
/* Edges */
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-right: 1px solid rgba(0, 0, 0, 0.3);
transform: translateY(-25%) rotate(45deg);
}
.button__arrow--left {
/* Edges */
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-left: 1px solid rgba(0, 0, 0, 0.3);
transform: translateX(25%) rotate(45deg);
}
`}
.button__arrow--left {
/* Edges */
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-left: 1px solid rgba(0, 0, 0, 0.3);
transform: translateX(25%) rotate(45deg);
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '8px',
height: '200px',
position: 'relative',
width: '200px',
}}
>
<div
style={{
height: '200px',
position: 'relative',
width: '200px',
left: '50%',
position: 'absolute',
top: 0,
transform: 'translate(-50%, -50%)',
}}
>
<div
<button
style={{
left: '50%',
position: 'absolute',
top: 0,
transform: 'translate(-50%, -50%)',
alignItems: 'center',
backgroundColor: 'transparent',
border: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'center',
padding: '8px',
}}
>
<button
<div
style={{
alignItems: 'center',
backgroundColor: 'transparent',
border: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'center',
padding: '8px',
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
height: '12px',
transform: 'translateY(25%) rotate(45deg)',
width: '12px',
}}
>
<div
style={{
backgroundColor: 'transparent',
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
height: '12px',
transform: 'translateY(25%) rotate(45deg)',
width: '12px',
}}
/>
<div style={{ marginLeft: '8px' }}>Up</div>
</button>
</div>
<div
/>
<div style={{ marginLeft: '8px' }}>Up</div>
</button>
</div>
<div
style={{
position: 'absolute',
right: 0,
top: '50%',
transform: 'translate(50%, -50%)',
}}
>
<button
style={{
position: 'absolute',
right: 0,
top: '50%',
transform: 'translate(50%, -50%)',
alignItems: 'center',
backgroundColor: 'transparent',
border: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'center',
padding: '8px',
}}
>
<button
<div style={{ marginRight: '8px' }}>Right</div>
<div
style={{
alignItems: 'center',
backgroundColor: 'transparent',
border: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'center',
padding: '8px',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
height: '12px',
transform: 'translateX(-25%) rotate(45deg)',
width: '12px',
}}
>
<div style={{ marginRight: '8px' }}>Right</div>
<div
style={{
backgroundColor: 'transparent',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
height: '12px',
transform: 'translateX(-25%) rotate(45deg)',
width: '12px',
}}
/>
</button>
</div>
<div
/>
</button>
</div>
<div
style={{
bottom: 0,
left: '50%',
position: 'absolute',
transform: 'translate(-50%, 50%)',
}}
>
<button
style={{
bottom: 0,
left: '50%',
position: 'absolute',
transform: 'translate(-50%, 50%)',
alignItems: 'center',
backgroundColor: 'transparent',
border: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'center',
padding: '8px',
}}
>
<button
<div
style={{
alignItems: 'center',
backgroundColor: 'transparent',
border: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'center',
padding: '8px',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
height: '12px',
transform: 'translateY(-25%) rotate(45deg)',
width: '12px',
}}
>
<div
style={{
backgroundColor: 'transparent',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
height: '12px',
transform: 'translateY(-25%) rotate(45deg)',
width: '12px',
}}
/>
<div style={{ marginLeft: '8px' }}>Down</div>
</button>
</div>
<div
/>
<div style={{ marginLeft: '8px' }}>Down</div>
</button>
</div>
<div
style={{
left: 0,
position: 'absolute',
top: '50%',
transform: 'translate(-50%, -50%)',
}}
>
<button
style={{
left: 0,
position: 'absolute',
top: '50%',
transform: 'translate(-50%, -50%)',
alignItems: 'center',
backgroundColor: 'transparent',
border: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'center',
padding: '8px',
}}
>
<button
<div
style={{
alignItems: 'center',
backgroundColor: 'transparent',
border: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'center',
padding: '8px',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
height: '12px',
transform: 'translateX(25%) rotate(45deg)',
width: '12px',
}}
>
<div
style={{
backgroundColor: 'transparent',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
height: '12px',
transform: 'translateX(25%) rotate(45deg)',
width: '12px',
}}
/>
<div style={{ marginLeft: '8px' }}>Left</div>
</button>
</div>
/>
<div style={{ marginLeft: '8px' }}>Left</div>
</button>
</div>
</div>
</BrowserFrame>
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.CloseButton, Pattern.PopoverArrow, Pattern.TriangleButtons]} />
</DetailsLayout>
</PatternLayout>
);
};

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

@@ -1,14 +1,10 @@
/**
* 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 Head from 'next/head';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Avatar: React.FC<{}> = ({ children }) => {
@@ -33,16 +29,15 @@ const Avatar: React.FC<{}> = ({ children }) => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.AvatarList}>
<PatternLayout pattern={Pattern.AvatarList}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<div class="avatars">
<!-- Avatar item -->
<div class="avatars__item">
@@ -56,52 +51,63 @@ html={`
...
</div>
`}
css={`
.avatars {
display: flex;
}
css={`
.avatars {
display: flex;
}
.avatars__item {
/* Nagative margin make avatar overlap to previous one */
margin-left: -4px;
}
.avatars__item {
/* Nagative margin make avatar overlap to previous one */
margin-left: -4px;
}
.avatars__image {
/* Add a white curve between avatars */
box-shadow: 0 0 0 4px #FFF;
.avatars__image {
/* Add a white curve between avatars */
box-shadow: 0 0 0 4px #fff;
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Rounded border */
border-radius: 9999px;
}
`}
/* Rounded border */
border-radius: 9999px;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
<div style={{ marginLeft: '-4px' }}><Avatar>+5</Avatar></div>
<div style={{ marginLeft: '-4px' }}>
<Avatar />
</div>
</BrowserFrame>
</div>
<div style={{ marginLeft: '-4px' }}>
<Avatar />
</div>
<div style={{ marginLeft: '-4px' }}>
<Avatar />
</div>
<div style={{ marginLeft: '-4px' }}>
<Avatar />
</div>
<div style={{ marginLeft: '-4px' }}>
<Avatar>+5</Avatar>
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns
patterns={[Pattern.Avatar, Pattern.Centering, Pattern.InitialAvatar, Pattern.PresenceIndicator]}
/>
</DetailsLayout>
</PatternLayout>
);
};

48
pages/avatar/index.tsx
View File

@@ -1,19 +1,15 @@
/**
* 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 Head from 'next/head';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.Avatar}>
<PatternLayout pattern={Pattern.Avatar}>
<Head>
<meta name="description" content="Create an avatar component with CSS flexbox" />
<meta name="og:description" content="Create an avatar component with CSS flexbox" />
@@ -21,29 +17,29 @@ const Details: React.FC<{}> = () => {
<meta name="keywords" content="css avatar, css flexbox" />
</Head>
<BrowserFrame
html={`
html={`
<div class="avatar">
<!-- Avatar image -->
<img class="avatar__image" src="..." />
</div>
`}
css={`
.avatar {
/* Rounded border */
border-radius: 50%;
height: 64px;
width: 64px;
}
css={`
.avatar {
/* Rounded border */
border-radius: 50%;
height: 64px;
width: 64px;
}
.avatar__image {
/* Rounded border */
border-radius: 50%;
.avatar__image {
/* Rounded border */
border-radius: 50%;
/* Take full size */
height: 100%;
width: 100%;
}
`}
/* Take full size */
height: 100%;
width: 100%;
}
`}
>
<div
style={{
@@ -69,7 +65,7 @@ css={`
style={{
fill: 'none',
height: '100%',
stroke: "#FFF",
stroke: '#FFF',
strokeLinecap: 'round',
strokeLinejoin: 'round',
strokeWidth: 1,
@@ -85,9 +81,9 @@ css={`
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.AvatarList, Pattern.InitialAvatar, Pattern.PresenceIndicator]} />
</DetailsLayout>
</PatternLayout>
);
};

87
pages/badge/index.tsx
View File

@@ -1,82 +1,77 @@
/**
* 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 Head from 'next/head';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.Badge}>
<PatternLayout pattern={Pattern.Badge}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<div class="badge">
...
</div>
`}
css={`
.badge {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
css={`
.badge {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Colors */
background-color: rgba(0, 0, 0, .3);
color: #FFF;
/* Colors */
background-color: rgba(0, 0, 0, 0.3);
color: #fff;
/* Rounded border */
border-radius: 9999px;
height: 32px;
width: 32px;
}
`}
/* Rounded border */
border-radius: 9999px;
height: 32px;
width: 32px;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.3)',
borderRadius: '9999px',
color: '#FFF',
display: 'flex',
flexDirection: 'column',
height: '100%',
fontSize: '20px',
height: '32px',
justifyContent: 'center',
padding: '8px',
width: '32px',
}}
>
<div
style={{
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.3)',
borderRadius: '9999px',
color: '#FFF',
display: 'flex',
flexDirection: 'column',
fontSize: '20px',
height: '32px',
justifyContent: 'center',
width: '32px',
}}
>
1
</div>
1
</div>
</BrowserFrame>
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.Centering, Pattern.InitialAvatar]} />
</DetailsLayout>
</PatternLayout>
);
};

85
pages/breadcrumb/index.tsx
View File

@@ -1,28 +1,22 @@
/**
* 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 Head from 'next/head';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.Breadcrumb}>
<PatternLayout pattern={Pattern.Breadcrumb}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<div class="breadcrumb">
<!-- Breadcrumb item -->
<a>...</a>
@@ -34,41 +28,48 @@ html={`
...
</div>
`}
css={`
.breadcrumb {
/* Content is centered vertically */
align-items: center;
display: flex;
}
css={`
.breadcrumb {
/* Content is centered vertically */
align-items: center;
display: flex;
}
.breadcrumb__separator {
margin: 0 8px;
}
`}
.breadcrumb__separator {
margin: 0 8px;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ alignItems: 'center', display: 'flex' }}>
<div style={{ width: '128px' }}><Rectangle height={16} /></div>
<div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '36px', margin: '0 4px' }}>/</div>
<div style={{ width: '32px' }}><Rectangle height={16} /></div>
<div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '36px', margin: '0 4px' }}>/</div>
<div style={{ width: '64px' }}><Rectangle height={16} /></div>
<div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '36px', margin: '0 4px' }}>/</div>
<div style={{ width: '32px' }}><Rectangle height={16} /></div>
<div style={{ alignItems: 'center', display: 'flex' }}>
<div style={{ width: '128px' }}>
<Rectangle height={16} />
</div>
<div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '36px', margin: '0 4px' }}>/</div>
<div style={{ width: '32px' }}>
<Rectangle height={16} />
</div>
<div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '36px', margin: '0 4px' }}>/</div>
<div style={{ width: '64px' }}>
<Rectangle height={16} />
</div>
<div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '36px', margin: '0 4px' }}>/</div>
<div style={{ width: '32px' }}>
<Rectangle height={16} />
</div>
</div>
</BrowserFrame>
</div>
</DetailsLayout>
</div>
</BrowserFrame>
</PatternLayout>
);
};

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

@@ -1,29 +1,23 @@
/**
* 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 Head from 'next/head';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.ButtonWithIcon}>
<PatternLayout pattern={Pattern.ButtonWithIcon}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<button class="button">
<!-- Icon -->
...
@@ -32,46 +26,47 @@ html={`
...
</div>
`}
css={`
.button {
/* Center the content */
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
}
`}
css={`
.button {
/* Center the content */
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ width: '256px' }}>
<button
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '8px',
display: 'flex',
height: '64px',
padding: '8px',
width: '100%',
}}
>
<div style={{ marginRight: '8px' }}><Circle size={32} /></div>
<Rectangle />
</button>
</div>
<div style={{ width: '256px' }}>
<button
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '8px',
display: 'flex',
height: '64px',
padding: '8px',
width: '100%',
}}
>
<div style={{ marginRight: '8px' }}>
<Circle size={32} />
</div>
<Rectangle />
</button>
</div>
</BrowserFrame>
</div>
</DetailsLayout>
</div>
</BrowserFrame>
</PatternLayout>
);
};

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

@@ -1,20 +1,16 @@
/**
* 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 Head from 'next/head';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.CardLayout}>
<PatternLayout pattern={Pattern.CardLayout}>
<Head>
<meta name="description" content="Create a card layout with CSS flexbox" />
<meta name="og:description" content="Create a card layout with CSS flexbox" />
@@ -22,7 +18,7 @@ const Details: React.FC<{}> = () => {
<meta name="keywords" content="css card layout, css flexbox, css layout" />
</Head>
<BrowserFrame
html={`
html={`
<div class="cards">
<!-- A card with given width -->
<div class="cards__item">
@@ -33,25 +29,25 @@ html={`
...
</div>
`}
css={`
.cards {
display: flex;
css={`
.cards {
display: flex;
/* Put a card in the next row when previous cards take all width */
flex-wrap: wrap;
/* Put a card in the next row when previous cards take all width */
flex-wrap: wrap;
margin-left: -8px;
margin-right: -8px;
}
margin-left: -8px;
margin-right: -8px;
}
.cards__item {
/* There will be 4 cards per row */
flex-basis: 25%;
.cards__item {
/* There will be 4 cards per row */
flex-basis: 25%;
padding-left: 8px;
padding-right: 8px;
}
`}
padding-left: 8px;
padding-right: 8px;
}
`}
>
<div
style={{
@@ -71,21 +67,25 @@ css={`
width: '60%',
}}
>
{
Array(10).fill(0).map((_, index) => {
{Array(10)
.fill(0)
.map((_, index) => {
return (
<div key={index} style={{ flexBasis: '25%', marginBottom: '24px', padding: '0 8px' }}>
<div
key={index}
style={{ flexBasis: '25%', marginBottom: '24px', padding: '0 8px' }}
>
<Rectangle height={80} />
</div>
);
})
}
})}
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.Card, Pattern.MasonryGrid, Pattern.SimpleGrid]} />
</DetailsLayout>
</PatternLayout>
);
};

51
pages/card/index.tsx
View File

@@ -1,21 +1,17 @@
/**
* 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 Head from 'next/head';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.Card}>
<PatternLayout pattern={Pattern.Card}>
<Head>
<meta name="description" content="Create a card with CSS flexbox" />
<meta name="og:description" content="Create a card with CSS flexbox" />
@@ -23,7 +19,7 @@ const Details: React.FC<{}> = () => {
<meta name="keywords" content="css card, css flexbox" />
</Head>
<BrowserFrame
html={`
html={`
<div class="card">
<!-- Cover -->
<div class="card__cover">
@@ -37,22 +33,22 @@ html={`
...
</div>
`}
css={`
.card {
display: flex;
flex-direction: column;
}
css={`
.card {
display: flex;
flex-direction: column;
}
.card__cover {
height: 150px;
width: 100%;
}
.card__cover {
height: 150px;
width: 100%;
}
.card__content {
/* Take available height */
flex: 1;
}
`}
.card__content {
/* Take available height */
flex: 1;
}
`}
>
<div
style={{
@@ -75,7 +71,9 @@ css={`
>
<Rectangle height={150} />
<div style={{ flex: 1, padding: '16px' }}>
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={15} /></div>
<div style={{ marginBottom: '16px' }}>
<Block numberOfBlocks={15} />
</div>
<div style={{ width: '128px' }}>
<Rectangle height={32} />
</div>
@@ -84,8 +82,11 @@ css={`
</div>
</BrowserFrame>
<RelatedPatterns patterns={[Pattern.CardLayout, Pattern.LayeredCard, Pattern.StackedCards, Pattern.ThreeDimensionsCard]} />
</DetailsLayout>
<Spacer size="extraLarge" />
<RelatedPatterns
patterns={[Pattern.CardLayout, Pattern.LayeredCard, Pattern.StackedCards, Pattern.ThreeDimensionsCard]}
/>
</PatternLayout>
);
};

69
pages/centering/index.tsx
View File

@@ -1,59 +1,58 @@
/**
* 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 Head from 'next/head';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.Centering}>
<PatternLayout pattern={Pattern.Centering}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<div class="container">
...
</div>
`}
css={`
.container {
align-items: center;
display: flex;
justify-content: center;
}
`}
css={`
.container {
align-items: center;
display: flex;
justify-content: center;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<Circle size={64} />
<div style={{ marginTop: '16px', width: '40%' }}><Rectangle /></div>
<div style={{ marginTop: '8px', width: '30%' }}><Rectangle /></div>
<div style={{ marginTop: '8px', width: '20%' }}><Rectangle /></div>
<Circle size={64} />
<div style={{ marginTop: '16px', width: '40%' }}>
<Rectangle />
</div>
</BrowserFrame>
</div>
</DetailsLayout>
<div style={{ marginTop: '8px', width: '30%' }}>
<Rectangle />
</div>
<div style={{ marginTop: '8px', width: '20%' }}>
<Rectangle />
</div>
</div>
</BrowserFrame>
</PatternLayout>
);
};

60
pages/chip/InputChip.tsx
View File

@@ -1,60 +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';
const InputChip: React.FC<{}> = ({ children }) => {
return (
<div
style={{
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.1)',
borderRadius: '9999px',
display: 'inline-flex',
justifyContent: 'center',
padding: '4px 8px',
}}
>
<div style={{ flex: 1, marginRight: '4px' }}>
{children}
</div>
<button
style={{
backgroundColor: 'transparent',
borderColor: 'transparent',
cursor: 'pointer',
height: '16px',
position: 'relative',
width: '16px',
}}
>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
height: '1px',
left: 0,
position: 'absolute',
top: '50%',
transform: 'translate(0%, -50%) rotate(45deg)',
width: '100%',
}}
/>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
height: '100%',
left: '50%',
position: 'absolute',
top: 0,
transform: 'translate(-50%, 0%) rotate(45deg)',
width: '1px',
}}
/>
</button>
</div>
);
};
export default InputChip;

140
pages/chip/index.tsx
View File

@@ -1,33 +1,81 @@
/**
* 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 Head from 'next/head';
import { Link } from 'react-router-dom';
import Link from 'next/link';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import InputChip from './InputChip';
const InputChip: React.FC<{}> = ({ children }) => {
return (
<div
style={{
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.1)',
borderRadius: '9999px',
display: 'inline-flex',
justifyContent: 'center',
padding: '4px 8px',
}}
>
<div style={{ flex: 1, marginRight: '4px' }}>{children}</div>
<button
style={{
backgroundColor: 'transparent',
borderColor: 'transparent',
cursor: 'pointer',
height: '16px',
position: 'relative',
width: '16px',
}}
>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
height: '1px',
left: 0,
position: 'absolute',
top: '50%',
transform: 'translate(0%, -50%) rotate(45deg)',
width: '100%',
}}
/>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
height: '100%',
left: '50%',
position: 'absolute',
top: 0,
transform: 'translate(-50%, 0%) rotate(45deg)',
width: '1px',
}}
/>
</button>
</div>
);
};
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.Chip}>
<PatternLayout pattern={Pattern.Chip}>
<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" />
</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.
</div>
<BrowserFrame
html={`
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
You can use a{' '}
<Link href="/close-button">
<a>close button</a>
</Link>{' '}
to remove a chip.
</div>
<BrowserFrame
html={`
<div class="chip">
<!-- Content -->
<div class="chip__content">
@@ -39,44 +87,44 @@ html={`
...
</div>
`}
css={`
.chip {
/* Center the content */
align-items: center;
display: inline-flex;
justify-content: center;
css={`
.chip {
/* Center the content */
align-items: center;
display: inline-flex;
justify-content: center;
/* Background color */
background-color: rgba(0, 0, 0, .1);
/* Background color */
background-color: rgba(0, 0, 0, 0.1);
/* Rounded border */
border-radius: 9999px;
/* Rounded border */
border-radius: 9999px;
/* Spacing */
padding: 4px 8px;
}
/* Spacing */
padding: 4px 8px;
}
.chip__content {
margin-right: 4px;
}
`}
.chip__content {
margin-right: 4px;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<InputChip>CSS</InputChip>
</div>
</BrowserFrame>
</div>
<InputChip>CSS</InputChip>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.CloseButton]} />
</DetailsLayout>
</PatternLayout>
);
};

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

@@ -1,13 +1,8 @@
/**
* 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 Head from 'next/head';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Square from '../../placeholders/Square';
@@ -49,16 +44,15 @@ const Details: React.FC<{}> = () => {
const numItems = 6;
return (
<DetailsLayout pattern={Pattern.CircularNavigation}>
<PatternLayout pattern={Pattern.CircularNavigation}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<div class="navigation">
<!-- The trigger element that will show all circles when user clicks it -->
...
@@ -75,75 +69,76 @@ html={`
...
</div>
`}
css={`
.navigation {
position: relative;
}
css={`
.navigation {
position: relative;
}
.navigation__circle {
/* Position */
position: absolute;
top: 0;
/*
.navigation__circle {
/* Position */
position: absolute;
top: 0;
/*
80px is the distance from the item to the trigger element.
Replace 0deg with 60deg, 180deg, 240deg, 300deg for another item
in case you want to have a total of 6 menu items.
The formulation is 360 / numberOfItems * indexOfItem
*/
transform: rotate(0deg) translateX(-80px);
transform: rotate(0deg) translateX(-80px);
/* Must have the same size as the trigger element */
height: 32px;
width: 32px;
}
/* Must have the same size as the trigger element */
height: 32px;
width: 32px;
}
.navigation__content {
/*
.navigation__content {
/*
Rotate it to make it displayed vertically
Replace -0deg with -60deg, -180deg, -240deg, -300deg for another item
in case you want to have a total of 6 menu items.
The formulation is -(360 / numberOfItems * indexOfItem)
*/
transform: rotate(-0deg);
transform: rotate(-0deg);
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Take full size */
height: 100%;
width: 100%;
}
`}
/* Take full size */
height: 100%;
width: 100%;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ position: 'relative' }}>
<div style={{ height: '32px', width: '32px' }}>
<Square />
</div>
{
Array(numItems).fill(0).map((_, i) => {
return (
<CircularItem key={i} degree={360 / numItems * i}>{i + 1}</CircularItem>
);
})
}
<div style={{ position: 'relative' }}>
<div style={{ height: '32px', width: '32px' }}>
<Square />
</div>
{Array(numItems)
.fill(0)
.map((_, i) => {
return (
<CircularItem key={i} degree={(360 / numItems) * i}>
{i + 1}
</CircularItem>
);
})}
</div>
</BrowserFrame>
</div>
</DetailsLayout>
</div>
</BrowserFrame>
</PatternLayout>
);
};

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

@@ -1,135 +1,130 @@
/**
* 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 Head from 'next/head';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.CloseButton}>
<PatternLayout pattern={Pattern.CloseButton}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<button class="button">
<div class="button__line button__line--first"></div>
<div class="button__line button__line--second"></div>
</button>
`}
css={`
.button {
/* Reset */
background-color: transparent;
border-color: transparent;
css={`
.button {
/* Reset */
background-color: transparent;
border-color: transparent;
/* Cursor */
cursor: pointer;
/* Cursor */
cursor: pointer;
/* Size */
height: 32px;
width: 32px;
/* Size */
height: 32px;
width: 32px;
/* Used to position the inner */
position: relative;
}
/* Used to position the inner */
position: relative;
}
.button__line {
/* Background color */
background-color: rgba(0, 0, 0, 0.3);
.button__line {
/* Background color */
background-color: rgba(0, 0, 0, 0.3);
/* Position */
position: absolute;
/* Position */
position: absolute;
/* Size */
height: 1px;
width: 100%;
}
/* Size */
height: 1px;
width: 100%;
}
.button__line--first {
/* Position */
left: 0px;
top: 50%;
transform: translate(0%, -50%) rotate(45deg);
.button__line--first {
/* Position */
left: 0px;
top: 50%;
transform: translate(0%, -50%) rotate(45deg);
/* Size */
height: 1px;
width: 100%;
}
/* Size */
height: 1px;
width: 100%;
}
.button__line--second {
/* Position */
left: 50%;
top: 0px;
transform: translate(-50%, 0%) rotate(45deg);
.button__line--second {
/* Position */
left: 50%;
top: 0px;
transform: translate(-50%, 0%) rotate(45deg);
/* Size */
height: 100%;
width: 1px;
}
`}
/* Size */
height: 100%;
width: 1px;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
<button
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
backgroundColor: 'transparent',
borderColor: 'transparent',
cursor: 'pointer',
height: '32px',
position: 'relative',
width: '32px',
}}
>
<button
<div
style={{
backgroundColor: 'transparent',
borderColor: 'transparent',
cursor: 'pointer',
height: '32px',
position: 'relative',
width: '32px',
backgroundColor: 'rgba(0, 0, 0, 0.3)',
height: '1px',
left: 0,
position: 'absolute',
top: '50%',
transform: 'translate(0%, -50%) rotate(45deg)',
width: '100%',
}}
>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
height: '1px',
left: 0,
position: 'absolute',
top: '50%',
transform: 'translate(0%, -50%) rotate(45deg)',
width: '100%',
}}
/>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
height: '100%',
left: '50%',
position: 'absolute',
top: 0,
transform: 'translate(-50%, 0%) rotate(45deg)',
width: '1px',
}}
/>
</button>
</div>
</BrowserFrame>
</div>
/>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
height: '100%',
left: '50%',
position: 'absolute',
top: 0,
transform: 'translate(-50%, 0%) rotate(45deg)',
width: '1px',
}}
/>
</button>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.ArrowButtons, Pattern.Chip, Pattern.Modal, Pattern.Notification]} />
</DetailsLayout>
</PatternLayout>
);
};

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

@@ -1,18 +1,13 @@
/**
* 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 Head from 'next/head';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.ColorSwatch}>
<PatternLayout pattern={Pattern.ColorSwatch}>
<Head>
<meta name="description" content="Create a color swatch with CSS flexbox" />
<meta name="og:description" content="Create a color swatch with CSS flexbox" />
@@ -20,7 +15,7 @@ const Details: React.FC<{}> = () => {
<meta name="keywords" content="css color swatch, css flexbox" />
</Head>
<BrowserFrame
html={`
html={`
<div class="swatch">
<div class="swatch__item" style="background-color: ..."></div>
@@ -28,22 +23,22 @@ html={`
...
</div>
`}
css={`
.swatch {
/* Wrap the items */
display: flex;
flex-wrap: wrap;
}
.swatch__item {
/* Rounded border */
border-radius: 9999px;
height: 1.5rem;
width: 1.5rem;
css={`
.swatch {
/* Wrap the items */
display: flex;
flex-wrap: wrap;
}
.swatch__item {
/* Rounded border */
border-radius: 9999px;
height: 1.5rem;
width: 1.5rem;
/* Space between items */
margin: 0.5rem;
}
`}
/* Space between items */
margin: 0.5rem;
}
`}
>
<div
style={{
@@ -60,24 +55,24 @@ css={`
flexWrap: 'wrap',
}}
>
{
Array(9).fill(0).map((_, index) => (
<div
key={index}
style={{
backgroundColor: `rgba(0, 0, 0, 0.${index + 1})`,
borderRadius: '9999px',
height: '1.5rem',
margin: '0.5rem',
width: '1.5rem',
}}
/>
))
}
{Array(9)
.fill(0)
.map((_, index) => (
<div
key={index}
style={{
backgroundColor: `rgba(0, 0, 0, 0.${index + 1})`,
borderRadius: '9999px',
height: '1.5rem',
margin: '0.5rem',
width: '1.5rem',
}}
/>
))}
</div>
</div>
</BrowserFrame>
</DetailsLayout>
</PatternLayout>
);
};

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

@@ -1,19 +1,15 @@
/**
* 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 Head from 'next/head';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.ConcaveCorners}>
<PatternLayout pattern={Pattern.ConcaveCorners}>
<Head>
<meta name="description" content="Create concave corners with CSS" />
<meta name="og:description" content="Create concave corners with CSS" />
@@ -21,7 +17,7 @@ const Details: React.FC<{}> = () => {
<meta name="keywords" content="css border radius, css concave border radius, css concave corners" />
</Head>
<BrowserFrame
html={`
html={`
<div class="concave-corners">
<!-- The top-left corner -->
<div class="concave-corners__corner concave-corners__corner--tl"></div>
@@ -39,69 +35,69 @@ html={`
...
</div>
`}
css={`
:root {
--concave-corners-background: rgba(0, 0, 0, .3);
--concave-corners-size: 1rem;
}
css={`
:root {
--concave-corners-background: rgba(0, 0, 0, 0.3);
--concave-corners-size: 1rem;
}
.concave-corners {
background-color: var(--concave-corners-background);
/* Used to position the corners */
position: relative;
.concave-corners {
background-color: var(--concave-corners-background);
/* Misc */
height: 100%;
}
/* Used to position the corners */
position: relative;
.concave-corners__corner {
/* Absolute position */
position: absolute;
/* Misc */
height: 100%;
}
/* Size */
height: var(--concave-corners-size);
width: var(--concave-corners-size);
.concave-corners__corner {
/* Absolute position */
position: absolute;
background: #FFF;
}
/* Size */
height: var(--concave-corners-size);
width: var(--concave-corners-size);
.concave-corners__corner--tl {
/* Position */
left: 0;
top: 0;
background: #fff;
}
/* Border radius */
border-radius: 0 0 var(--concave-corners-size) 0;
}
.concave-corners__corner--tl {
/* Position */
left: 0;
top: 0;
.concave-corners__corner--tr {
/* Position */
right: 0;
top: 0;
/* Border radius */
border-radius: 0 0 var(--concave-corners-size) 0;
}
/* Border radius */
border-radius: 0 0 0 var(--concave-corners-size);
}
.concave-corners__corner--tr {
/* Position */
right: 0;
top: 0;
.concave-corners__corner--bl {
/* Position */
bottom: 0;
left: 0;
/* Border radius */
border-radius: 0 0 0 var(--concave-corners-size);
}
/* Border radius */
border-radius: 0 var(--concave-corners-size) 0 0;
}
.concave-corners__corner--bl {
/* Position */
bottom: 0;
left: 0;
.concave-corners__corner--br {
/* Position */
bottom: 0;
right: 0;
/* Border radius */
border-radius: 0 var(--concave-corners-size) 0 0;
}
/* Border radius */
border-radius: var(--concave-corners-size) 0 0 0;
}
`}
.concave-corners__corner--br {
/* Position */
bottom: 0;
right: 0;
/* Border radius */
border-radius: var(--concave-corners-size) 0 0 0;
}
`}
>
<div
style={{
@@ -119,18 +115,19 @@ css={`
width: '16rem',
}}
>
<div className='concave-corners'>
<div className='concave-corners__corner concave-corners__corner--tl' />
<div className='concave-corners__corner concave-corners__corner--tr' />
<div className='concave-corners__corner concave-corners__corner--bl' />
<div className='concave-corners__corner concave-corners__corner--br' />
<div className="concave-corners">
<div className="concave-corners__corner concave-corners__corner--tl" />
<div className="concave-corners__corner concave-corners__corner--tr" />
<div className="concave-corners__corner concave-corners__corner--bl" />
<div className="concave-corners__corner concave-corners__corner--br" />
</div>
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.InvertedCorners]} />
</DetailsLayout>
</PatternLayout>
);
};

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

@@ -1,30 +1,25 @@
/**
* 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 Head from 'next/head';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.CookieBanner}>
<PatternLayout pattern={Pattern.CookieBanner}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<div class="banner">
<!-- Tells visitors that the website uses cookie -->
<div class="banner__content">
@@ -35,61 +30,62 @@ html={`
...
</div>
`}
css={`
.banner {
/* Banner is displayed at the bottom */
bottom: 0;
left: 0;
position: fixed;
width: 100%;
css={`
.banner {
/* Banner is displayed at the bottom */
bottom: 0;
left: 0;
position: fixed;
width: 100%;
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
}
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
}
.banner__content {
/* Take available width */
flex: 1;
}
`}
.banner__content {
/* Take available width */
flex: 1;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
position: 'relative',
}}
>
<div
style={{
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.05)',
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
bottom: 0,
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
position: 'relative',
left: 0,
padding: '8px',
position: 'absolute',
width: '100%',
}}
>
<div
style={{
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.05)',
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
bottom: 0,
display: 'flex',
left: 0,
padding: '8px',
position: 'absolute',
width: '100%',
}}
>
<div style={{ flex: 1, marginRight: '12px' }}>
<Block numberOfBlocks={5} />
</div>
<div style={{ width: '96px' }}>
<Rectangle height={32} />
</div>
<div style={{ flex: 1, marginRight: '12px' }}>
<Block numberOfBlocks={5} />
</div>
<div style={{ width: '96px' }}>
<Rectangle height={32} />
</div>
</div>
</BrowserFrame>
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.FixedAtCorner]} />
</DetailsLayout>
</PatternLayout>
);
};

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

@@ -1,30 +1,24 @@
/**
* 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 Head from 'next/head';
import { Link } from 'react-router-dom';
import Link from 'next/link';
import { Heading, Spacer } from '@1milligram/design';
import Heading from '../../components/Heading';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.CornerRibbon}>
<PatternLayout pattern={Pattern.CornerRibbon}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<div class="container">
<!-- The container -->
<div class="container__wrapper">
@@ -35,98 +29,102 @@ html={`
</div>
</div>
`}
css={`
.container {
position: relative;
}
css={`
.container {
position: relative;
}
.container__wrapper {
/* Displayed at the top left corner */
left: 0px;
position: absolute;
top: 0px;
.container__wrapper {
/* Displayed at the top left corner */
left: 0px;
position: absolute;
top: 0px;
/* Size */
height: 100px;
width: 100px;
/* Size */
height: 100px;
width: 100px;
/* Hide the part of its children which is displayed outside */
overflow: hidden;
}
/* Hide the part of its children which is displayed outside */
overflow: hidden;
}
.container__ribbon {
/* Position */
left: -64px;
position: absolute;
top: 32px;
.container__ribbon {
/* Position */
left: -64px;
position: absolute;
top: 32px;
/* Size */
height: 24px;
width: 206px;
/* Size */
height: 24px;
width: 206px;
/* Displayed diagonally */
transform: rotate(-45deg);
/* Displayed diagonally */
transform: rotate(-45deg);
/* Background color */
background-color: rgba(0, 0, 0, 0.3);
/* Background color */
background-color: rgba(0, 0, 0, 0.3);
/* Centerize the text content */
text-align: center;
}
`}
/* Centerize the text content */
text-align: center;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
height: '256px',
position: 'relative',
width: '256px',
}}
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
height: '256px',
position: 'relative',
width: '256px',
height: '100px',
left: 0,
overflow: 'hidden',
position: 'absolute',
top: 0,
width: '100px',
}}
>
<div
style={{
height: '100px',
left: 0,
overflow: 'hidden',
backgroundColor: 'rgba(0, 0, 0, 0.3)',
height: '24px',
left: '-64px',
position: 'absolute',
top: 0,
width: '100px',
textAlign: 'center',
top: '32px',
transform: 'rotate(-45deg)',
width: '206px',
}}
>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
height: '24px',
left: '-64px',
position: 'absolute',
textAlign: 'center',
top: '32px',
transform: 'rotate(-45deg)',
width: '206px',
}}
/>
</div>
/>
</div>
</div>
</BrowserFrame>
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<section>
<Heading title="Use cases" />
<Heading level={2}>Use cases</Heading>
<div style={{ padding: '32px' }}>
<div style={{ padding: '2rem' }}>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
You can add a ribbon to a <Link to='/patterns/pricing-table'> pricing table</Link> to
indicate the most popular option.
You can add a ribbon to a{' '}
<Link href="/pricing-table">
<a>pricing table</a>
</Link>{' '}
to indicate the most popular option.
</div>
<div
@@ -197,8 +195,9 @@ css={`
</div>
</section>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.FixedAtCorner, Pattern.Ribbon]} />
</DetailsLayout>
</PatternLayout>
);
};

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

@@ -1,67 +1,62 @@
/**
* 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 Head from 'next/head';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.CurvedBackground}>
<PatternLayout pattern={Pattern.CurvedBackground}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<div class="container">
...
</div>
`}
css={`
.container {
/* Background color */
background-color: rgba(0, 0, 0, 0.3);
css={`
.container {
/* Background color */
background-color: rgba(0, 0, 0, 0.3);
/* You can use gradient background color such as
/* You can use gradient background color such as
background: linear-gradient(rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 100%); */
/* Curved corners */
border-bottom-left-radius: 50% 40%;
border-bottom-right-radius: 50% 40%;
}
`}
/* Curved corners */
border-bottom-left-radius: 50% 40%;
border-bottom-right-radius: 50% 40%;
}
`}
>
<div
style={{
height: '100%',
padding: '8px',
}}
>
<div
style={{
height: '100%',
padding: '8px',
backgroundColor: 'rgba(0, 0, 0, 0.3)',
borderBottomLeftRadius: '50% 40%',
borderBottomRightRadius: '50% 40%',
height: '50%',
width: '100%',
}}
>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
borderBottomLeftRadius: '50% 40%',
borderBottomRightRadius: '50% 40%',
height: '50%',
width: '100%',
}}
/>
</div>
</BrowserFrame>
</div>
/>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.DiagonalSection]} />
</DetailsLayout>
</PatternLayout>
);
};

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

@@ -1,14 +1,10 @@
/**
* 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 Head from 'next/head';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
@@ -63,16 +59,15 @@ const Details: React.FC<{}> = () => {
};
return (
<DetailsLayout pattern={Pattern.CustomCheckboxButton}>
<PatternLayout pattern={Pattern.CustomCheckboxButton}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<label class="label">
<!-- The real checkbox -->
<input type="checkbox" class="label__input" />
@@ -87,91 +82,97 @@ html={`
...
</div>
`}
css={`
.label {
/* Center the content horizontally */
align-items: center;
display: inline-flex;
css={`
.label {
/* Center the content horizontally */
align-items: center;
display: inline-flex;
/* Cursor */
cursor: pointer;
}
/* Cursor */
cursor: pointer;
}
.label__input {
/* Hide it */
display: none;
}
.label__input {
/* Hide it */
display: none;
}
.label__square {
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 4px;
.label__square {
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 4px;
/* Spacing */
margin-right: 8px;
padding: 4px;
}
/* Spacing */
margin-right: 8px;
padding: 4px;
}
.label__checkbox {
background-color: transparent;
border-radius: 4px;
height: 16px;
width: 16px;
}
.label__checkbox {
background-color: transparent;
border-radius: 4px;
height: 16px;
width: 16px;
}
.label__checkbox--selected {
/* For selected checkbox */
background-color: #00449E;
}
`}
.label__checkbox--selected {
/* For selected checkbox */
background-color: #00449e;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ width: '200px' }}>
<div
style={{
alignItems: 'center',
display: 'inline-flex',
marginBottom: '16px',
}}
>
<Checkbox value='1' isChecked={false}>
<div style={{ width: '100px' }}><Rectangle /></div>
</Checkbox>
</div>
<div
style={{
alignItems: 'center',
display: 'inline-flex',
marginBottom: '16px',
}}
>
<Checkbox value='2' isChecked={true}>
<div style={{ width: '200px' }}><Rectangle /></div>
</Checkbox>
</div>
<div
style={{
alignItems: 'center',
display: 'inline-flex',
}}
>
<Checkbox value='3' isChecked={false}>
<div style={{ width: '150px' }}><Rectangle /></div>
</Checkbox>
</div>
<div style={{ width: '200px' }}>
<div
style={{
alignItems: 'center',
display: 'inline-flex',
marginBottom: '16px',
}}
>
<Checkbox value="1" isChecked={false}>
<div style={{ width: '100px' }}>
<Rectangle />
</div>
</Checkbox>
</div>
<div
style={{
alignItems: 'center',
display: 'inline-flex',
marginBottom: '16px',
}}
>
<Checkbox value="2" isChecked={true}>
<div style={{ width: '200px' }}>
<Rectangle />
</div>
</Checkbox>
</div>
<div
style={{
alignItems: 'center',
display: 'inline-flex',
}}
>
<Checkbox value="3" isChecked={false}>
<div style={{ width: '150px' }}>
<Rectangle />
</div>
</Checkbox>
</div>
</div>
</BrowserFrame>
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.CustomRadioButton, Pattern.RadioButtonGroup]} />
</DetailsLayout>
</PatternLayout>
);
};

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

@@ -1,14 +1,10 @@
/**
* 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 Head from 'next/head';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
@@ -49,9 +45,7 @@ const Details: React.FC<{}> = () => {
>
<div
style={{
backgroundColor: value === selectedValue
? '#00449E'
: 'transparent',
backgroundColor: value === selectedValue ? '#00449E' : 'transparent',
borderRadius: '9999px',
height: '16px',
width: '16px',
@@ -64,16 +58,15 @@ const Details: React.FC<{}> = () => {
};
return (
<DetailsLayout pattern={Pattern.CustomRadioButton}>
<PatternLayout pattern={Pattern.CustomRadioButton}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<label class="label">
<!-- The real radio -->
<input type="radio" class="label__input" />
@@ -88,95 +81,101 @@ html={`
...
</div>
`}
css={`
.label {
/* Center the content horizontally */
align-items: center;
display: inline-flex;
css={`
.label {
/* Center the content horizontally */
align-items: center;
display: inline-flex;
/* Cursor */
cursor: pointer;
}
/* Cursor */
cursor: pointer;
}
.label__input {
/* Hide it */
display: none;
}
.label__input {
/* Hide it */
display: none;
}
.label__circle {
/* Rounded border */
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 9999px;
.label__circle {
/* Rounded border */
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 9999px;
/* Spacing */
margin-right: 8px;
padding: 4px;
}
/* Spacing */
margin-right: 8px;
padding: 4px;
}
.label__radio {
/* Rounded border */
border-radius: 9999px;
height: 16px;
width: 16px;
.label__radio {
/* Rounded border */
border-radius: 9999px;
height: 16px;
width: 16px;
/* For not selected radio */
background-color: transparent;
}
/* For not selected radio */
background-color: transparent;
}
.label__radio--selected {
/* For selected radio */
background-color: #00449E;
}
`}
.label__radio--selected {
/* For selected radio */
background-color: #00449e;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ width: '200px' }}>
<div
style={{
alignItems: 'center',
display: 'inline-flex',
marginBottom: '16px',
}}
>
<Radio value='1'>
<div style={{ width: '100px' }}><Rectangle /></div>
</Radio>
</div>
<div
style={{
alignItems: 'center',
display: 'inline-flex',
marginBottom: '16px',
}}
>
<Radio value='2'>
<div style={{ width: '200px' }}><Rectangle /></div>
</Radio>
</div>
<div
style={{
alignItems: 'center',
display: 'inline-flex',
}}
>
<Radio value='3'>
<div style={{ width: '150px' }}><Rectangle /></div>
</Radio>
</div>
<div style={{ width: '200px' }}>
<div
style={{
alignItems: 'center',
display: 'inline-flex',
marginBottom: '16px',
}}
>
<Radio value="1">
<div style={{ width: '100px' }}>
<Rectangle />
</div>
</Radio>
</div>
<div
style={{
alignItems: 'center',
display: 'inline-flex',
marginBottom: '16px',
}}
>
<Radio value="2">
<div style={{ width: '200px' }}>
<Rectangle />
</div>
</Radio>
</div>
<div
style={{
alignItems: 'center',
display: 'inline-flex',
}}
>
<Radio value="3">
<div style={{ width: '150px' }}>
<Rectangle />
</div>
</Radio>
</div>
</div>
</BrowserFrame>
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.CustomCheckboxButton, Pattern.RadioButtonGroup]} />
</DetailsLayout>
</PatternLayout>
);
};

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

@@ -1,29 +1,24 @@
/**
* 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 Head from 'next/head';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.DiagonalSection}>
<PatternLayout pattern={Pattern.DiagonalSection}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<div class="container">
<!-- The diagonal area -->
<div class="container__diagonal"></div>
@@ -32,75 +27,74 @@ html={`
...
</div>
`}
css={`
.container {
/* Used to position the diagonal area */
position: relative;
}
css={`
.container {
/* Used to position the diagonal area */
position: relative;
}
.container__diagonal {
/* Absolute position */
left: 0px;
position: absolute;
top: 0px;
.container__diagonal {
/* Absolute position */
left: 0px;
position: absolute;
top: 0px;
/* Take full size */
height: 100%;
width: 100%;
/* Take full size */
height: 100%;
width: 100%;
/* Create diagonal sides */
transform: skewY(-5deg);
/* Create diagonal sides */
transform: skewY(-5deg);
/* Background color */
background-color: rgba(0, 0, 0, 0.3);
/* Background color */
background-color: rgba(0, 0, 0, 0.3);
/* Displayed under the main content */
z-index: -1;
}
`}
/* Displayed under the main content */
z-index: -1;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
height: '200px',
justifyContent: 'center',
position: 'relative',
width: '75%',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '200px',
justifyContent: 'center',
position: 'relative',
width: '75%',
backgroundColor: 'rgba(0, 0, 0, 0.3)',
height: '100%',
left: 0,
position: 'absolute',
top: 0,
transform: 'skewY(-5deg)',
width: '100%',
zIndex: -1,
}}
>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
height: '100%',
left: 0,
position: 'absolute',
top: 0,
transform: 'skewY(-5deg)',
width: '100%',
zIndex: -1,
}}
/>
<div style={{ width: '60%' }}>
<Block backgroundColor='#fff' justify='center' numberOfBlocks={5} />
</div>
/>
<div style={{ width: '60%' }}>
<Block backgroundColor="#fff" justify="center" numberOfBlocks={5} />
</div>
</div>
</BrowserFrame>
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.CurvedBackground]} />
</DetailsLayout>
</PatternLayout>
);
};

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

@@ -1,30 +1,24 @@
/**
* 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 Head from 'next/head';
import { Heading, Spacer } from '@1milligram/design';
import Heading from '../../components/Heading';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.DockedAtCorner}>
<PatternLayout pattern={Pattern.DockedAtCorner}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<div class="container">
<!-- Docked at the top right corner -->
<div class="container__docker">
@@ -34,62 +28,64 @@ html={`
...
</div>
`}
css={`
.container {
position: relative;
}
css={`
.container {
position: relative;
}
.container__docker {
position: absolute;
right: 0;
top: 0;
transform: translate(50%, -50%);
.container__docker {
position: absolute;
right: 0;
top: 0;
transform: translate(50%, -50%);
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
}
`}
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '8px',
padding: '16px',
position: 'relative',
width: '128px',
}}
>
<Rectangle />
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '8px',
padding: '16px',
position: 'relative',
width: '128px',
backgroundColor: '#00449E',
borderRadius: '9999px',
height: '32px',
position: 'absolute',
right: 0,
top: 0,
transform: 'translate(50%, -50%)',
width: '32px',
}}
>
<Rectangle />
<div
style={{
backgroundColor: '#00449E',
borderRadius: '9999px',
height: '32px',
position: 'absolute',
right: 0,
top: 0,
transform: 'translate(50%, -50%)',
width: '32px',
}}
/>
</div>
/>
</div>
</BrowserFrame>
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<section>
<Heading title="Use cases" />
<Heading level={2}>Use cases</Heading>
<div style={{ padding: '32px' }}>
<div
@@ -156,8 +152,9 @@ css={`
</div>
</div>
</section>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.PresenceIndicator]} />
</DetailsLayout>
</PatternLayout>
);
};

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

@@ -1,31 +1,25 @@
/**
* 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 Head from 'next/head';
import { Heading, Spacer } from '@1milligram/design';
import Heading from '../../components/Heading';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.DotLeader}>
<PatternLayout pattern={Pattern.DotLeader}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<div class="container">
<!-- Left side -->
<div>...</div>
@@ -37,80 +31,87 @@ html={`
<div>...</div>
</div>
`}
css={`
.container {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
}
css={`
.container {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
}
.container__dots {
/* Bottom border */
border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
.container__dots {
/* Bottom border */
border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
/* Take remaining width */
flex: 1;
/* Take remaining width */
flex: 1;
/* Spacing */
margin: 0px 4px;
}
`}
/* Spacing */
margin: 0px 4px;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
}}
>
<div style={{ width: '400px' }}>
<div
style={{
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
marginBottom: '8px',
width: '100%',
}}
>
<div style={{ width: '60%' }}><Rectangle /></div>
<div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
<Circle />
<div style={{ width: '400px' }}>
<div
style={{
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
marginBottom: '8px',
width: '100%',
}}
>
<div style={{ width: '60%' }}>
<Rectangle />
</div>
<div
style={{
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
marginBottom: '8px',
width: '100%',
}}
>
<div style={{ width: '40%' }}><Rectangle /></div>
<div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
<Circle />
<div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
<Circle />
</div>
<div
style={{
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
marginBottom: '8px',
width: '100%',
}}
>
<div style={{ width: '40%' }}>
<Rectangle />
</div>
<div
style={{
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
width: '100%',
}}
>
<div style={{ width: '30%' }}><Rectangle /></div>
<div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
<Circle />
<div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
<Circle />
</div>
<div
style={{
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
width: '100%',
}}
>
<div style={{ width: '30%' }}>
<Rectangle />
</div>
<div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
<Circle />
</div>
</div>
</BrowserFrame>
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<section>
<Heading title="Use cases" />
<Heading level={2}>Use cases</Heading>
<div style={{ padding: '32px' }}>
<div style={{ marginBottom: '16px', width: '60%' }}>
@@ -171,8 +172,9 @@ css={`
</div>
</div>
</section>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.Menu, Pattern.PropertyList, Pattern.SplitNavigation]} />
</DetailsLayout>
</PatternLayout>
);
};

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

@@ -1,13 +1,8 @@
/**
* 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 Head from 'next/head';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
interface DotProps {
@@ -37,16 +32,15 @@ const Details: React.FC<{}> = () => {
};
return (
<DetailsLayout pattern={Pattern.DotNavigation}>
<PatternLayout pattern={Pattern.DotNavigation}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<ul class="dots">
<li class="dots__item"></li>
@@ -54,66 +48,65 @@ html={`
...
</div>
`}
css={`
.dots {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
css={`
.dots {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Reset styles */
list-style-type: none;
margin: 0;
padding: 0;
}
/* Reset styles */
list-style-type: none;
margin: 0;
padding: 0;
}
.dots__item {
/* Rounded border */
border-radius: 9999px;
height: 12px;
width: 12px;
.dots__item {
/* Rounded border */
border-radius: 9999px;
height: 12px;
width: 12px;
/* Active dot */
background-color: rgba(0, 0, 0, .3);
/* Active dot */
background-color: rgba(0, 0, 0, 0.3);
/* Inactive dot */
background-color: transparent;
border: 1px solid rgba(0, 0, 0, .3);
/* Inactive dot */
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 0.3);
/* OPTIONAL: Spacing between dots */
margin: 0 4px;
}
`}
/* OPTIONAL: Spacing between dots */
margin: 0 4px;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
<ul
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
listStyleType: 'none',
margin: 0,
padding: 0,
}}
>
<ul
style={{
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
listStyleType: 'none',
margin: 0,
padding: 0,
}}
>
<Dot index={0} />
<Dot index={1} />
<Dot index={2} />
<Dot index={3} />
</ul>
</div>
</BrowserFrame>
</div>
</DetailsLayout>
<Dot index={0} />
<Dot index={1} />
<Dot index={2} />
<Dot index={3} />
</ul>
</div>
</BrowserFrame>
</PatternLayout>
);
};

137
pages/drawer/index.tsx
View File

@@ -1,31 +1,23 @@
/**
* 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 Head from 'next/head';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.Drawer}>
<PatternLayout pattern={Pattern.Drawer}>
<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" />
</Head>
<div className='p-8 pb-20'>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
This pattern is also known as off-canvas.
</div>
<BrowserFrame
html={`
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>This pattern is also known as off-canvas.</div>
<BrowserFrame
html={`
<div class="container">
<!-- Backdrop -->
<div class="container__overlay"></div>
@@ -36,79 +28,78 @@ html={`
</div>
</div>
`}
css={`
.container {
/* Container takes full size */
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
css={`
.container {
/* Container takes full size */
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
}
z-index: 9999;
}
.container__overlay {
/* Take full size */
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
.container__overlay {
/* Take full size */
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
/* User still can see the content of main page */
background-color: rgba(0, 0, 0, 0.5);
/* User still can see the content of main page */
background-color: rgba(0, 0, 0, 0.5);
z-index: -1;
}
z-index: -1;
}
.container__sidebar {
/* Take full height */
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 200px;
.container__sidebar {
/* Take full height */
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 200px;
/* Background */
background-color: #fff;
}
`}
/* Background */
background-color: #fff;
}
`}
>
<div
style={{
height: '100%',
position: 'relative',
width: '100%',
}}
>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
height: '100%',
position: 'relative',
left: 0,
position: 'absolute',
top: 0,
width: '100%',
}}
/>
<div
style={{
backgroundColor: '#fff',
height: '100%',
left: 0,
padding: '16px',
position: 'absolute',
top: 0,
width: '250px',
}}
>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
height: '100%',
left: 0,
position: 'absolute',
top: 0,
width: '100%',
}}
/>
<div
style={{
backgroundColor: '#fff',
height: '100%',
left: 0,
padding: '16px',
position: 'absolute',
top: 0,
width: '250px',
}}
>
<Block numberOfBlocks={20} />
</div>
<Block numberOfBlocks={20} />
</div>
</BrowserFrame>
</div>
</DetailsLayout>
</div>
</BrowserFrame>
</PatternLayout>
);
};

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

@@ -1,33 +1,27 @@
/**
* 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 Head from 'next/head';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.DropArea}>
<PatternLayout pattern={Pattern.DropArea}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<div class="container">
...
</div>
`}
css={`
css={`
.container {
/* Center the content */
align-items: center;
@@ -39,37 +33,36 @@ css={`
border-radius: 4px;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
border: '4px dashed rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
flexDirection: 'column',
height: '100%',
height: '80%',
justifyContent: 'center',
padding: '8px',
width: '80%',
}}
>
<div
style={{
alignItems: 'center',
border: '4px dashed rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
flexDirection: 'column',
height: '80%',
justifyContent: 'center',
width: '80%',
}}
>
<div style={{ width: '40%' }}>
<Block justify='center' numberOfBlocks={10} />
</div>
<div style={{ width: '40%' }}>
<Block justify="center" numberOfBlocks={10} />
</div>
</div>
</BrowserFrame>
</div>
</DetailsLayout>
</div>
</BrowserFrame>
</PatternLayout>
);
};

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

@@ -1,70 +1,62 @@
/**
* 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 Head from 'next/head';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import { Pattern } from '../../constants/Pattern';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.DropCap}>
<PatternLayout pattern={Pattern.DropCap}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<div class="container">
...
</div>
`}
css={`
/* Styles for the first letter */
.container:first-letter {
/* Display at the left */
float: left;
line-height: 1;
css={`
/* Styles for the first letter */
.container:first-letter {
/* Display at the left */
float: left;
line-height: 1;
/* Spacing */
margin: 0 8px 0 0;
padding: 0 8px;
/* Spacing */
margin: 0 8px 0 0;
padding: 0 8px;
/* Optional */
font-size: 64px;
font-weight: 700;
}
`}
/* Optional */
font-size: 64px;
font-weight: 700;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ width: '256px' }}>
<div className="p-drop-cap">
Cascading Style Sheets (CSS) is a style sheet language used for
describing the presentation of a document written in a markup
language like HTML. CSS is a cornerstone technology of the World Wide Web,
alongside HTML and JavaScript.
</div>
<div style={{ width: '256px' }}>
<div className="p-drop-cap">
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation
of a document written in a markup language like HTML. CSS is a cornerstone technology of the
World Wide Web, alongside HTML and JavaScript.
</div>
</div>
</BrowserFrame>
</div>
</DetailsLayout>
</div>
</BrowserFrame>
</PatternLayout>
);
};

179
pages/dropdown/index.tsx
View File

@@ -1,14 +1,10 @@
/**
* 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 Head from 'next/head';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
@@ -16,19 +12,18 @@ import Triangle from '../../placeholders/Triangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.Dropdown}>
<PatternLayout pattern={Pattern.Dropdown}>
<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" />
</Head>
<div className='p-8 pb-20'>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
Move the mouse over the button to see the dropdown.
</div>
<BrowserFrame
html={`
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
Move the mouse over the button to see the dropdown.
</div>
<BrowserFrame
html={`
<div class="dropdown">
<!-- The trigger element -->
<button>...</button>
@@ -39,108 +34,110 @@ html={`
</div>
</div>
`}
css={`
.dropdown {
position: relative;
}
css={`
.dropdown {
position: relative;
}
/* Hide the dropdown's content by default */
.dropdown__content {
display: none;
/* Hide the dropdown's content by default */
.dropdown__content {
display: none;
/* Position it right below the trigger element */
left: 0;
paddingTop: 4px;
position: absolute;
top: 100%;
/* Position it right below the trigger element */
left: 0;
paddingtop: 4px;
position: absolute;
top: 100%;
/* It should be on the top of other elements */
background-color: #FFF;
zIndex: 9999;
/* It should be on the top of other elements */
background-color: #fff;
zindex: 9999;
/* Size */
height: 200px;
width: 200px;
}
/* Size */
height: 200px;
width: 200px;
}
/* Show the content when hover on the container */
.dropdown:hover .dropdown__content {
display: block;
}
`}
/* Show the content when hover on the container */
.dropdown:hover .dropdown__content {
display: block;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
className="p-dropdown"
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
position: 'relative',
}}
>
<div
className="p-dropdown"
<button
style={{
position: 'relative',
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
height: '32px',
width: '128px',
}}
>
<button
<span style={{ flex: 1, marginRight: '8px' }}>
<Rectangle />
</span>
<Triangle size={8} corner="b" />
</button>
<div
className="p-dropdown-content"
style={{
backgroundColor: '#FFF',
height: '200px',
left: 0,
paddingTop: '4px',
position: 'absolute',
top: '100%',
width: '200px',
zIndex: 9999,
}}
>
<div
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
height: '32px',
width: '128px',
height: '100%',
justifyContent: 'center',
padding: '16px',
width: '100%',
}}
>
<span style={{ flex: 1, marginRight: '8px' }}><Rectangle /></span>
<Triangle size={8} corner='b' />
</button>
<div
className="p-dropdown-content"
style={{
backgroundColor: '#FFF',
height: '200px',
left: 0,
paddingTop: '4px',
position: 'absolute',
top: '100%',
width: '200px',
zIndex: 9999,
}}
>
<div
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '16px',
width: '100%',
}}
>
<Block numberOfBlocks={10} justify='center' />
</div>
<Block numberOfBlocks={10} justify="center" />
</div>
</div>
<div
style={{
marginTop: '16px',
width: '256px',
}}
>
<Block numberOfBlocks={20} justify='center' />
</div>
</div>
</BrowserFrame>
</div>
<div
style={{
marginTop: '16px',
width: '256px',
}}
>
<Block numberOfBlocks={20} justify="center" />
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.MegaMenu, Pattern.Menu, Pattern.NestedDropdowns]} />
</DetailsLayout>
</PatternLayout>
);
};

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

@@ -1,31 +1,25 @@
/**
* 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 Head from 'next/head';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.FadingLongSection}>
<PatternLayout pattern={Pattern.FadingLongSection}>
<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" />
</Head>
<div className='p-8 pb-20'>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
Fading a long section to indicate there is more content.
</div>
<BrowserFrame
html={`
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
Fading a long section to indicate there is more content.
</div>
<BrowserFrame
html={`
<div class="container"
<!-- Main content -->
<div class="container__content">
@@ -36,70 +30,69 @@ html={`
<div class="container__fading"></div>
</div>
`}
css={`
.container {
/* Used to position the faded element */
position: relative;
}
css={`
.container {
/* Used to position the faded element */
position: relative;
}
.container__content {
/* Height */
height: 200px;
.container__content {
/* Height */
height: 200px;
/* Scrollable */
overflow-y: scroll;
}
/* Scrollable */
overflow-y: scroll;
}
.container__fading {
/* Displayed at the bottom */
bottom: 0;
left: 0;
position: absolute;
.container__fading {
/* Displayed at the bottom */
bottom: 0;
left: 0;
position: absolute;
/* Size */
height: 30px;
width: 100%;
/* Size */
height: 30px;
width: 100%;
/* Gradient background */
background: linear-gradient(rgba(255, 255, 255, 0.01), #fff);
}
`}
/* Gradient background */
background: linear-gradient(rgba(255, 255, 255, 0.01), #fff);
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ position: 'relative', width: '200px' }}>
<div
style={{
height: '200px',
overflowY: 'scroll',
}}
>
<Block numberOfBlocks={50} />
</div>
<div
style={{
background: 'linear-gradient(rgba(255, 255, 255, 0.01), #fff)',
bottom: 0,
height: '30px',
left: 0,
position: 'absolute',
width: '100%',
}}
/>
<div style={{ position: 'relative', width: '200px' }}>
<div
style={{
height: '200px',
overflowY: 'scroll',
}}
>
<Block numberOfBlocks={50} />
</div>
<div
style={{
background: 'linear-gradient(rgba(255, 255, 255, 0.01), #fff)',
bottom: 0,
height: '30px',
left: 0,
position: 'absolute',
width: '100%',
}}
/>
</div>
</BrowserFrame>
</div>
</DetailsLayout>
</div>
</BrowserFrame>
</PatternLayout>
);
};

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

@@ -1,14 +1,10 @@
/**
* 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 Head from 'next/head';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
@@ -16,16 +12,15 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.FeatureComparison}>
<PatternLayout pattern={Pattern.FeatureComparison}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<div class="container">
<!-- Feature name -->
<div class="container__feature">
@@ -48,145 +43,179 @@ html={`
<!-- Repeated items -->
...
`}
css={`
.container {
align-items: center;
display: flex;
css={`
.container {
align-items: center;
display: flex;
/* Bottom border */
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
/* Bottom border */
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
/* Spacing */
padding: 12px 0px;
}
/* Spacing */
padding: 12px 0px;
}
.container__feature {
/* Take available width */
flex: 1;
.container__feature {
/* Take available width */
flex: 1;
/* Spacing */
margin-right: 16px;
}
/* Spacing */
margin-right: 16px;
}
.container__model {
/* Center the content */
display: flex;
justify-content: center;
.container__model {
/* Center the content */
display: flex;
justify-content: center;
/* Spacing */
margin-right: 16px;
}
`}
/* Spacing */
margin-right: 16px;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
}}
>
<div style={{ width: '60%' }}>
<div
style={{
alignItems: 'center',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
padding: '12px 0',
width: '100%',
}}
>
<div style={{ flex: 1, marginRight: '16px' }}>
<Rectangle />
</div>
<div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }}>
<Rectangle />
</div>
<div style={{ display: 'flex', justifyContent: 'center', width: '50px' }}>
<Rectangle />
</div>
<div style={{ width: '60%' }}>
<div
style={{
alignItems: 'center',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
padding: '12px 0',
width: '100%',
}}
>
<div style={{ flex: 1, marginRight: '16px' }}>
<Rectangle />
</div>
<div
style={{
alignItems: 'center',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
padding: '8px 0',
width: '100%',
justifyContent: 'center',
marginRight: '16px',
width: '75px',
}}
>
<div style={{ flex: 1, marginRight: '16px' }}>
<Block numberOfBlocks={4} />
</div>
<div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }}>
<Circle size={8} />
</div>
<div style={{ display: 'flex', justifyContent: 'center', width: '50px' }}>
<Circle size={8} />
</div>
<Rectangle />
</div>
<div
style={{
alignItems: 'center',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
padding: '8px 0',
width: '100%',
}}
>
<div style={{ flex: 1, marginRight: '16px' }}>
<Block numberOfBlocks={5} />
</div>
<div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }} />
<div style={{ display: 'flex', justifyContent: 'center', width: '50px' }}>
<Circle size={8} />
</div>
</div>
<div
style={{
alignItems: 'center',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
padding: '8px 0',
width: '100%',
}}
>
<div style={{ flex: 1, marginRight: '16px' }}>
<Block numberOfBlocks={4} />
</div>
<div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }}>
<Circle size={8} />
</div>
<div style={{ display: 'flex', justifyContent: 'center', width: '50px' }} />
</div>
<div
style={{
alignItems: 'center',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
padding: '8px 0',
width: '100%',
}}
>
<div style={{ flex: 1, marginRight: '16px' }}>
<Block numberOfBlocks={6} />
</div>
<div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }}>
<Circle size={8} />
</div>
<div style={{ display: 'flex', justifyContent: 'center', width: '50px' }} />
<div style={{ display: 'flex', justifyContent: 'center', width: '50px' }}>
<Rectangle />
</div>
</div>
</div>
</BrowserFrame>
</div>
<div
style={{
alignItems: 'center',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
padding: '8px 0',
width: '100%',
}}
>
<div style={{ flex: 1, marginRight: '16px' }}>
<Block numberOfBlocks={4} />
</div>
<div
style={{
display: 'flex',
justifyContent: 'center',
marginRight: '16px',
width: '75px',
}}
>
<Circle size={8} />
</div>
<div style={{ display: 'flex', justifyContent: 'center', width: '50px' }}>
<Circle size={8} />
</div>
</div>
<div
style={{
alignItems: 'center',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
padding: '8px 0',
width: '100%',
}}
>
<div style={{ flex: 1, marginRight: '16px' }}>
<Block numberOfBlocks={5} />
</div>
<div
style={{
display: 'flex',
justifyContent: 'center',
marginRight: '16px',
width: '75px',
}}
/>
<div style={{ display: 'flex', justifyContent: 'center', width: '50px' }}>
<Circle size={8} />
</div>
</div>
<div
style={{
alignItems: 'center',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
padding: '8px 0',
width: '100%',
}}
>
<div style={{ flex: 1, marginRight: '16px' }}>
<Block numberOfBlocks={4} />
</div>
<div
style={{
display: 'flex',
justifyContent: 'center',
marginRight: '16px',
width: '75px',
}}
>
<Circle size={8} />
</div>
<div style={{ display: 'flex', justifyContent: 'center', width: '50px' }} />
</div>
<div
style={{
alignItems: 'center',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
padding: '8px 0',
width: '100%',
}}
>
<div style={{ flex: 1, marginRight: '16px' }}>
<Block numberOfBlocks={6} />
</div>
<div
style={{
display: 'flex',
justifyContent: 'center',
marginRight: '16px',
width: '75px',
}}
>
<Circle size={8} />
</div>
<div style={{ display: 'flex', justifyContent: 'center', width: '50px' }} />
</div>
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.FeatureList, Pattern.PricingTable]} />
</DetailsLayout>
</PatternLayout>
);
};

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

@@ -1,14 +1,10 @@
/**
* 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 Head from 'next/head';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
@@ -16,16 +12,15 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.FeatureList}>
<PatternLayout pattern={Pattern.FeatureList}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<!-- Feature item -->
<div class="container">
<!-- Image -->
@@ -42,57 +37,64 @@ html={`
<!-- Repeated items -->
...
`}
css={`
.container {
display: flex;
css={`
.container {
display: flex;
/* OPTIONAL: Reverse the order of image and content */
flex-direction: row-reverse;
/* OPTIONAL: Reverse the order of image and content */
flex-direction: row-reverse;
/* OPTIONAL: Spacing between items */
margin: 16px 0;
}
/* OPTIONAL: Spacing between items */
margin: 16px 0;
}
.container__image {
width: 128px;
}
.container__image {
width: 128px;
}
.container__feature {
/* Take the remaining width */
flex: 1;
}
`}
.container__feature {
/* Take the remaining width */
flex: 1;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
}}
>
<div style={{ width: '60%' }}>
<div style={{ display: 'flex', marginBottom: '32px' }}>
<div style={{ margin: '0 16px' }}><Circle size={128} /></div>
<div style={{ flex: 1 }}>
<div style={{ marginBottom: '32px' }}><Rectangle height={8} /></div>
<Block numberOfBlocks={10} />
</div>
<div style={{ width: '60%' }}>
<div style={{ display: 'flex', marginBottom: '32px' }}>
<div style={{ margin: '0 16px' }}>
<Circle size={128} />
</div>
<div style={{ display: 'flex', flexDirection: 'row-reverse', marginBottom: '32px' }}>
<div style={{ margin: '0 16px' }}><Circle size={128} /></div>
<div style={{ flex: 1 }}>
<div style={{ marginBottom: '32px' }}><Rectangle height={8} /></div>
<Block numberOfBlocks={15} />
<div style={{ flex: 1 }}>
<div style={{ marginBottom: '32px' }}>
<Rectangle height={8} />
</div>
<Block numberOfBlocks={10} />
</div>
</div>
<div style={{ display: 'flex', flexDirection: 'row-reverse', marginBottom: '32px' }}>
<div style={{ margin: '0 16px' }}>
<Circle size={128} />
</div>
<div style={{ flex: 1 }}>
<div style={{ marginBottom: '32px' }}>
<Rectangle height={8} />
</div>
<Block numberOfBlocks={15} />
</div>
</div>
</div>
</BrowserFrame>
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.FeatureComparison]} />
</DetailsLayout>
</PatternLayout>
);
};

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

@@ -1,29 +1,24 @@
/**
* 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 Head from 'next/head';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Triangle from '../../placeholders/Triangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.FixedAtCorner}>
<PatternLayout pattern={Pattern.FixedAtCorner}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<div class="container">
<!-- Top-left corner -->
<div class="container__corner container__corner--tl">
@@ -46,54 +41,54 @@ html={`
</div>
</div>
`}
css={`
.container {
position: relative;
}
css={`
.container {
position: relative;
}
.container__corner {
position: absolute;
}
.container__corner {
position: absolute;
}
.container__corner--tl {
left: 0;
top: 0;
}
.container__corner--tl {
left: 0;
top: 0;
}
.container__corner--tr {
top: 0;
right: 0;
}
.container__corner--tr {
top: 0;
right: 0;
}
.container__corner--br {
bottom: 0;
right: 0;
}
.container__corner--br {
bottom: 0;
right: 0;
}
.container__corner--bl {
bottom: 0;
left: 0;
}
`}
>
<div style={{ height: '100%', position: 'relative' }}>
<div style={{ left: 0, position: 'absolute', top: 0 }}>
<Triangle size={64} corner="tl" />
</div>
<div style={{ position: 'absolute', right: 0, top: 0 }}>
<Triangle size={64} corner="tr" />
</div>
<div style={{ bottom: 0, position: 'absolute', right: 0 }}>
<Triangle size={64} corner="br" />
</div>
<div style={{ bottom: 0, left: 0, position: 'absolute' }}>
<Triangle size={64} corner="bl" />
</div>
.container__corner--bl {
bottom: 0;
left: 0;
}
`}
>
<div style={{ height: '100%', position: 'relative' }}>
<div style={{ left: 0, position: 'absolute', top: 0 }}>
<Triangle size={64} corner="tl" />
</div>
</BrowserFrame>
</div>
<div style={{ position: 'absolute', right: 0, top: 0 }}>
<Triangle size={64} corner="tr" />
</div>
<div style={{ bottom: 0, position: 'absolute', right: 0 }}>
<Triangle size={64} corner="br" />
</div>
<div style={{ bottom: 0, left: 0, position: 'absolute' }}>
<Triangle size={64} corner="bl" />
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.CookieBanner, Pattern.CornerRibbon, Pattern.FixedAtSide]} />
</DetailsLayout>
</PatternLayout>
);
};

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

@@ -1,67 +1,61 @@
/**
* 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 Head from 'next/head';
import { Heading, Spacer } from '@1milligram/design';
import Heading from '../../components/Heading';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.FixedAtSide}>
<PatternLayout pattern={Pattern.FixedAtSide}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<!-- Fixed at the middle of side -->
<div class="container">
...
</div>
`}
css={`
.container {
right: 0;
position: fixed;
top: 50%;
transform: translate(0px, -50%);
}
`}
css={`
.container {
right: 0;
position: fixed;
top: 50%;
transform: translate(0px, -50%);
}
`}
>
<div
style={{
height: '100%',
position: 'relative',
width: '100%',
}}
>
<div
style={{
height: '100%',
position: 'relative',
width: '100%',
backgroundColor: 'rgba(0, 0, 0, 0.3)',
height: '200px',
position: 'absolute',
right: 0,
top: '50%',
transform: 'translate(0, -50%)',
width: '32px',
}}
>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
height: '200px',
position: 'absolute',
right: 0,
top: '50%',
transform: 'translate(0, -50%)',
width: '32px',
}}
/>
</div>
</BrowserFrame>
</div>
/>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<section>
<Heading title="Use cases" />
<Heading level={2}>Use cases</Heading>
<div style={{ padding: '48px' }}>
<div
@@ -261,8 +255,9 @@ css={`
</div>
</section>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.FixedAtCorner]} />
</DetailsLayout>
</PatternLayout>
);
};

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

@@ -1,32 +1,24 @@
/**
* 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 Head from 'next/head';
import './floating-label.css';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import { Pattern } from '../../constants/Pattern';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.FloatingLabel}>
<PatternLayout pattern={Pattern.FloatingLabel}>
<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" />
</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.
</div>
<BrowserFrame
html={`
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
Type something in the input to see how the label is shown up.
</div>
<BrowserFrame
html={`
<div class="container">
<!-- The input -->
<input placeholder="Placeholder" class="container__input" />
@@ -35,80 +27,79 @@ html={`
<label class="container__label">Placeholder</label>
</div>
`}
css={`
.container {
position: relative;
}
css={`
.container {
position: relative;
}
/*
/*
Show the label at desired position when the
placeholder of input isn't shown
*/
.container__input:not(:placeholder-shown) + .container__label {
background: #FFF;
transform: translate(0, -50%);
opacity: 1;
}
.container__input:not(:placeholder-shown) + .container__label {
background: #fff;
transform: translate(0, -50%);
opacity: 1;
}
.container__label {
/* Position the label */
left: 8px;
position: absolute;
top: 0;
.container__label {
/* Position the label */
left: 8px;
position: absolute;
top: 0;
/* Hide it by default */
opacity: 0;
transition: all 200ms;
}
`}
/* Hide it by default */
opacity: 0;
transition: all 200ms;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
className="p-floating-container"
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
padding: '0 1px',
position: 'relative',
width: '200px',
}}
>
<div
className="p-floating-container"
<input
id="floating-label-input"
placeholder="Placeholder"
type="text"
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
padding: '0 1px',
position: 'relative',
width: '200px',
borderColor: 'transparent',
padding: '8px',
width: '100%',
}}
/>
<label
htmlFor="floating-label-input"
style={{
left: '8px',
padding: '0 8px',
position: 'absolute',
top: 0,
transition: 'all 200ms',
}}
>
<input
id="floating-label-input"
placeholder="Placeholder"
type="text"
style={{
borderColor: 'transparent',
padding: '8px',
width: '100%',
}}
/>
<label
htmlFor="floating-label-input"
style={{
left: '8px',
padding: '0 8px',
position: 'absolute',
top: 0,
transition: 'all 200ms',
}}
>
Placeholder
</label>
</div>
Placeholder
</label>
</div>
</BrowserFrame>
</div>
</DetailsLayout>
</div>
</BrowserFrame>
</PatternLayout>
);
};

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

@@ -1,21 +1,17 @@
/**
* 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 Head from 'next/head';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Square from '../../placeholders/Square';
import './folder-structure.css';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.FolderStructure}>
<PatternLayout pattern={Pattern.FolderStructure}>
<Head>
<meta name="description" content="Create a folder structure with CSS" />
<meta name="og:description" content="Create a folder structure with CSS" />
@@ -23,7 +19,7 @@ const Details: React.FC<{}> = () => {
<meta name="keywords" content="css folder structure, css folder tree" />
</Head>
<BrowserFrame
html={`
html={`
<div class="folder-structure">
<ul>
<li>
@@ -53,57 +49,59 @@ html={`
</ul>
</div>
`}
css={`
:root {
--folder-structure-item-height: 1rem;
--folder-structure-item-margin-left: 2rem;
--folder-structure-item-padding-top: 1rem;
}
css={`
:root {
--folder-structure-item-height: 1rem;
--folder-structure-item-margin-left: 2rem;
--folder-structure-item-padding-top: 1rem;
}
.folder-structure ul {
/* Reset */
list-style-type: none;
margin: 0;
}
.folder-structure ul {
/* Reset */
list-style-type: none;
margin: 0;
}
.folder-structure li {
padding: var(--folder-structure-item-padding-top) 0rem 0rem 0rem;
position: relative;
}
.folder-structure li {
padding: var(--folder-structure-item-padding-top) 0rem 0rem 0rem;
position: relative;
}
.folder-structure li::before {
border-left: 1px solid rgba(0, 0, 0, .3);
content: '';
/* Position */
left: 0;
position: absolute;
top: 0;
transform: translate(calc(-1 * var(--folder-structure-item-margin-left)), 0);
.folder-structure li::before {
border-left: 1px solid rgba(0, 0, 0, 0.3);
content: '';
/* Size */
height: 100%;
}
/* Position */
left: 0;
position: absolute;
top: 0;
transform: translate(calc(-1 * var(--folder-structure-item-margin-left)), 0);
.folder-structure li::after {
border-bottom: 1px solid rgba(0, 0, 0, .3);
content: '';
/* Size */
height: 100%;
}
/* Position */
left: 0;
position: absolute;
top: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
transform: translate(-100%, 0);
.folder-structure li::after {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
content: '';
/* Size */
width: var(--folder-structure-item-margin-left);
}
/* Position */
left: 0;
position: absolute;
top: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
transform: translate(-100%, 0);
/* Remove the border from the last item */
.folder-structure li:last-child::before {
height: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
}
`}
/* Size */
width: var(--folder-structure-item-margin-left);
}
/* Remove the border from the last item */
.folder-structure li:last-child::before {
height: calc(
var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2
);
}
`}
>
<div
style={{
@@ -117,40 +115,57 @@ css={`
<div className="folder-structure">
<ul>
<li>
<Square size='1rem' />
<Square size="1rem" />
<ul>
<li><Square size='1rem' /></li>
<li>
<Square size="1rem" />
</li>
</ul>
</li>
<li>
<Square size='1rem' />
<Square size="1rem" />
<ul>
<li>
<Square size='1rem' />
<Square size="1rem" />
<ul>
<li><Square size='1rem' /></li>
<li><Square size='1rem' /></li>
<li><Square size='1rem' /></li>
<li>
<Square size="1rem" />
</li>
<li>
<Square size="1rem" />
</li>
<li>
<Square size="1rem" />
</li>
</ul>
</li>
<li><Square size='1rem' /></li>
<li>
<Square size='1rem' />
<Square size="1rem" />
</li>
<li>
<Square size="1rem" />
<ul>
<li><Square size='1rem' /></li>
<li><Square size='1rem' /></li>
<li>
<Square size="1rem" />
</li>
<li>
<Square size="1rem" />
</li>
</ul>
</li>
</ul>
</li>
<li><Square size='1rem' /></li>
<li>
<Square size="1rem" />
</li>
</ul>
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.TreeDiagram]} />
</DetailsLayout>
</PatternLayout>
);
};

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

@@ -1,80 +1,74 @@
/**
* 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 Head from 'next/head';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.FullBackground}>
<PatternLayout pattern={Pattern.FullBackground}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<div class="container">
...
</div>
`}
css={`
.container {
/* Center the content */
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
css={`
.container {
/* Center the content */
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
/* Take full size */
height: 100vh;
width: 100%;
/* Take full size */
height: 100vh;
width: 100%;
/* Background */
background: url('/assets/full-background.jpeg') center center / cover no-repeat;
}
`}
/* Background */
background: url('/assets/full-background.jpeg') center center / cover no-repeat;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
}}
>
<div
style={{
alignItems: 'center',
background: 'url("/assets/full-background.jpeg") center center / cover no-repeat',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
width: '100%',
}}
>
<div
style={{
alignItems: 'center',
background: 'url("/assets/full-background.jpeg") center center / cover no-repeat',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
width: '100%',
}}
>
<div style={{ width: '250px' }}>
<Block backgroundColor='#fff' justify='center' numberOfBlocks={10} />
</div>
<div style={{ width: '250px' }}>
<Block backgroundColor="#fff" justify="center" numberOfBlocks={10} />
</div>
</div>
</BrowserFrame>
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.VideoBackground]} />
</DetailsLayout>
</PatternLayout>
);
};

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

@@ -1,28 +1,22 @@
/**
* 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 Head from 'next/head';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.FullScreenMenu}>
<PatternLayout pattern={Pattern.FullScreenMenu}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<div class="container">
<!-- The close button -->
<button class="container__close">
@@ -35,104 +29,111 @@ html={`
</ul>
</div>
`}
css={`
.container {
/* Full screen overlay */
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
css={`
.container {
/* Full screen overlay */
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
}
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
}
.container__close {
/* Shown at top right corner */
position: absolute;
right: 16px;
top: 16px;
}
`}
.container__close {
/* Shown at top right corner */
position: absolute;
right: 16px;
top: 16px;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
position: 'relative',
}}
>
<button
style={{
backgroundColor: 'transparent',
borderColor: 'transparent',
padding: 0,
position: 'absolute',
right: '16px',
top: '16px',
}}
>
<svg
viewBox="0 0 24 24"
style={{
fill: 'none',
height: 24,
stroke: '#000',
strokeLinecap: 'round',
strokeLinejoin: 'round',
strokeWidth: 1,
width: 24,
}}
>
<path
d={`M7,16.999l10-10
M17,16.999l-10-10
M12,0.499c6.351,0,11.5,5.149,11.5,11.5s-5.149,11.5-11.5,11.5
S0.5,18.35,0.5,11.999S5.649,0.499,12,0.499z`}
/>
</svg>
</button>
<div
style={{
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.25)',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
position: 'relative',
left: 0,
position: 'absolute',
top: 0,
width: '100%',
}}
>
<button
style={{
backgroundColor: 'transparent',
borderColor: 'transparent',
padding: 0,
position: 'absolute',
right: '16px',
top: '16px',
}}
>
<svg
viewBox="0 0 24 24"
style={{
fill: 'none',
height: 24,
stroke: '#000',
strokeLinecap: 'round',
strokeLinejoin: 'round',
strokeWidth: 1,
width: 24,
}}
>
<path
d={`M7,16.999l10-10
M17,16.999l-10-10
M12,0.499c6.351,0,11.5,5.149,11.5,11.5s-5.149,11.5-11.5,11.5
S0.5,18.35,0.5,11.999S5.649,0.499,12,0.499z`}
/>
</svg>
</button>
<div
<ul
style={{
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.25)',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
left: 0,
position: 'absolute',
top: 0,
width: '100%',
listStyleType: 'none',
margin: 0,
padding: 0,
}}
>
<ul
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
listStyleType: 'none',
margin: 0,
padding: 0,
}}
>
<li style={{ marginBottom: '16px', width: '256px' }}><Rectangle /></li>
<li style={{ marginBottom: '16px', width: '144px' }}><Rectangle /></li>
<li style={{ marginBottom: '16px', width: '128px' }}><Rectangle /></li>
<li style={{ width: '160px' }}><Rectangle /></li>
</ul>
</div>
<li style={{ marginBottom: '16px', width: '256px' }}>
<Rectangle />
</li>
<li style={{ marginBottom: '16px', width: '144px' }}>
<Rectangle />
</li>
<li style={{ marginBottom: '16px', width: '128px' }}>
<Rectangle />
</li>
<li style={{ width: '160px' }}>
<Rectangle />
</li>
</ul>
</div>
</BrowserFrame>
</div>
</DetailsLayout>
</div>
</BrowserFrame>
</PatternLayout>
);
};

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

@@ -1,29 +1,23 @@
/**
* 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 Head from 'next/head';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.HolyGrail}>
<PatternLayout pattern={Pattern.HolyGrail}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<div class="container">
<header>
...
@@ -43,87 +37,90 @@ html={`
</footer>
</div>
`}
css={`
.container {
display: flex;
flex-direction: column;
}
css={`
.container {
display: flex;
flex-direction: column;
}
.container__main {
/* Take the remaining height */
flex-grow: 1;
.container__main {
/* Take the remaining height */
flex-grow: 1;
/* Layout the left sidebar, main content and right sidebar */
display: flex;
flex-direction: row;
}
/* Layout the left sidebar, main content and right sidebar */
display: flex;
flex-direction: row;
}
.container__left {
width: 25%;
}
.container__left {
width: 25%;
}
.container__middle {
/* Take the remaining width */
flex-grow: 1;
}
.container__middle {
/* Take the remaining width */
flex-grow: 1;
}
.container__right {
width: 20%;
}
`}
.container__right {
width: 20%;
}
`}
>
<div
style={{
display: 'flex',
flexDirection: 'column',
height: '100%',
}}
>
<div
style={{
display: 'flex',
flexDirection: 'column',
height: '100%',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
flexShrink: 0,
padding: '16px',
}}
>
<div
style={{
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
flexShrink: 0,
padding: '16px',
}}
>
<div style={{ width: '50%' }}><Rectangle /></div>
</div>
<div style={{ display: 'flex', flexGrow: 1 }}>
<div
style={{
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
padding: '16px',
width: '25%',
}}
>
<Block numberOfBlocks={10} />
</div>
<div style={{ flex: 1, padding: '16px' }}>
<Block numberOfBlocks={20} />
</div>
<div
style={{
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
padding: '16px',
width: '20%',
}}
>
<Block numberOfBlocks={5} />
</div>
</div>
<div
style={{
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
flexShrink: 0,
padding: '16px',
}}
>
<div style={{ width: '40%' }}><Rectangle /></div>
<div style={{ width: '50%' }}>
<Rectangle />
</div>
</div>
</BrowserFrame>
</div>
</DetailsLayout>
<div style={{ display: 'flex', flexGrow: 1 }}>
<div
style={{
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
padding: '16px',
width: '25%',
}}
>
<Block numberOfBlocks={10} />
</div>
<div style={{ flex: 1, padding: '16px' }}>
<Block numberOfBlocks={20} />
</div>
<div
style={{
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
padding: '16px',
width: '20%',
}}
>
<Block numberOfBlocks={5} />
</div>
</div>
<div
style={{
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
flexShrink: 0,
padding: '16px',
}}
>
<div style={{ width: '40%' }}>
<Rectangle />
</div>
</div>
</div>
</BrowserFrame>
</PatternLayout>
);
};

22
pages/index.tsx
View File

@@ -17,7 +17,9 @@ const HomePage = () => {
<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__category">
<Heading level={2}>Display</Heading>
</div>
<div className="page-home__collection">
<CoverCard pattern={Pattern.Accordion} />
<CoverCard pattern={Pattern.ArrowButtons} />
@@ -74,7 +76,9 @@ const HomePage = () => {
<CoverCard pattern={Pattern.ZigzagTimeline} />
</div>
<div className="page-home__category"><Heading level={2}>Feedback</Heading></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} />
@@ -86,8 +90,10 @@ const HomePage = () => {
<CoverCard pattern={Pattern.Tooltip} />
<CoverCard pattern={Pattern.ValidationIcon} />
</div>
<div className="page-home__category"><Heading level={2}>Input</Heading></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} />
@@ -107,7 +113,9 @@ const HomePage = () => {
<CoverCard pattern={Pattern.UploadButton} />
</div>
<div className="page-home__category"><Heading level={2}>Layout</Heading></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} />
@@ -121,7 +129,9 @@ const HomePage = () => {
<CoverCard pattern={Pattern.StickySections} />
</div>
<div className="page-home__category"><Heading level={2}>Navigation</Heading></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} />

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

@@ -1,33 +1,31 @@
/**
* 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 Head from 'next/head';
import { Link } from 'react-router-dom';
import Link from 'next/link';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.InitialAvatar}>
<PatternLayout pattern={Pattern.InitialAvatar}>
<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" />
</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
the <Link to='/patterns/centering'>Centering</Link> pattern.
</div>
<BrowserFrame
html={`
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
To center the content, you also can use other technique demonstrated in the{' '}
<Link href="/centering">
<a>Centering</a>
</Link>{' '}
pattern.
</div>
<BrowserFrame
html={`
<div class="avatar">
<div class="avatar__letters">
<!-- The letters -->
@@ -35,71 +33,72 @@ html={`
</div>
</div>
`}
css={`
.avatar {
/* Center the content */
display: inline-block;
vertical-align: middle;
css={`
.avatar {
/* Center the content */
display: inline-block;
vertical-align: middle;
/* Used to position the content */
position: relative;
/* Used to position the content */
position: relative;
/* Colors */
background-color: rgba(0, 0, 0, .3);
color: #FFF;
/* Colors */
background-color: rgba(0, 0, 0, 0.3);
color: #fff;
/* Rounded border */
border-radius: 50%;
height: 48px;
width: 48px;
}
/* Rounded border */
border-radius: 50%;
height: 48px;
width: 48px;
}
.avatar__letters {
/* Center the content */
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
`}
.avatar__letters {
/* Center the content */
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
backgroundColor: 'rgba(0, 0, 0, 0.3)',
borderRadius: '50%',
color: '#FFF',
display: 'inline-block',
fontSize: '24px',
height: '48px',
position: 'relative',
verticalAlign: 'middle',
width: '48px',
}}
>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
borderRadius: '50%',
color: '#FFF',
display: 'inline-block',
fontSize: '24px',
height: '48px',
position: 'relative',
verticalAlign: 'middle',
width: '48px',
left: '50%',
position: 'absolute',
top: '50%',
transform: 'translate(-50%, -50%)',
}}
>
<div
style={{
left: '50%',
position: 'absolute',
top: '50%',
transform: 'translate(-50%, -50%)',
}}
>
PN
</div>
PN
</div>
</div>
</BrowserFrame>
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns
patterns={[
@@ -110,7 +109,7 @@ css={`
Pattern.PresenceIndicator,
]}
/>
</DetailsLayout>
</PatternLayout>
);
};

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

@@ -1,28 +1,22 @@
/**
* 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 Head from 'next/head';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.InputAddon}>
<PatternLayout pattern={Pattern.InputAddon}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<!-- Add-on prepended -->
<div class="container">
<!-- Add-on -->
@@ -61,153 +55,152 @@ html={`
</div>
</div>
`}
css={`
.container {
display: flex;
css={`
.container {
display: flex;
/* Take full size */
width: 100%;
}
/* Take full size */
width: 100%;
}
.container__input {
/* Take the remaining width */
flex: 1;
}
.container__input {
/* Take the remaining width */
flex: 1;
}
.container__addon {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
}
`}
.container__addon {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ width: '256px' }}>
<div style={{ width: '256px' }}>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
height: '32px',
marginBottom: '16px',
width: '100%',
}}
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.1)',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
height: '32px',
marginBottom: '16px',
width: '100%',
justifyContent: 'center',
padding: '8px',
width: '30%',
}}
>
<div
style={{
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.1)',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'center',
padding: '8px',
width: '30%',
}}
>
<Rectangle />
</div>
<input
type="text"
style={{
borderColor: 'transparent',
flex: 1,
marginRight: '1px',
padding: '4px',
}}
/>
<Rectangle />
</div>
<input
type="text"
style={{
borderColor: 'transparent',
flex: 1,
marginRight: '1px',
padding: '4px',
}}
/>
</div>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
height: '32px',
marginBottom: '16px',
width: '100%',
}}
>
<input
type="text"
style={{
borderColor: 'transparent',
flex: 1,
marginLeft: '1px',
padding: '8px',
}}
/>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.1)',
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
height: '32px',
marginBottom: '16px',
width: '100%',
justifyContent: 'center',
padding: '8px',
width: '40%',
}}
>
<input
type="text"
style={{
borderColor: 'transparent',
flex: 1,
marginLeft: '1px',
padding: '8px',
}}
/>
<div
style={{
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.1)',
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'center',
padding: '8px',
width: '40%',
}}
>
<Rectangle />
</div>
<Rectangle />
</div>
</div>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
height: '32px',
width: '100%',
}}
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.1)',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
height: '32px',
width: '100%',
justifyContent: 'center',
padding: '8px',
width: '20%',
}}
>
<div
style={{
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.1)',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'center',
padding: '8px',
width: '20%',
}}
>
<Rectangle />
</div>
<input
type="text"
style={{
borderColor: 'transparent',
flex: 1,
padding: '8px',
}}
/>
<div
style={{
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.1)',
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'center',
padding: '8px',
width: '30%',
}}
>
<Rectangle />
</div>
<Rectangle />
</div>
<input
type="text"
style={{
borderColor: 'transparent',
flex: 1,
padding: '8px',
}}
/>
<div
style={{
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.1)',
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'center',
padding: '8px',
width: '30%',
}}
>
<Rectangle />
</div>
</div>
</div>
</BrowserFrame>
</div>
</DetailsLayout>
</div>
</BrowserFrame>
</PatternLayout>
);
};

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

@@ -1,22 +1,17 @@
/**
* 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 Head from 'next/head';
import { Heading, Spacer } from '@1milligram/design';
import Heading from '../../components/Heading';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import './inverted-corners.css';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.InvertedCorners}>
<PatternLayout pattern={Pattern.InvertedCorners}>
<Head>
<meta name="description" content="Create inverted corners with CSS" />
<meta name="og:description" content="Create inverted corners with CSS" />
@@ -24,43 +19,43 @@ const Details: React.FC<{}> = () => {
<meta name="keywords" content="css border radius, css inverted border radius, css inverted corners" />
</Head>
<BrowserFrame
html={`
html={`
<div class="inverted-corners">
...
</div>
`}
css={`
:root {
--inverted-corners-background: #52525B;
--inverted-corners-size: 2rem;
}
css={`
:root {
--inverted-corners-background: #52525b;
--inverted-corners-size: 2rem;
}
.inverted-corners {
background-color: var(--inverted-corners-background);
.inverted-corners {
background-color: var(--inverted-corners-background);
/* Used to position the corner */
position: relative;
}
/* Used to position the corner */
position: relative;
}
.inverted-corners::before {
content: '';
.inverted-corners::before {
content: '';
/* Absolute position */
bottom: calc(-2 * var(--inverted-corners-size));
left: 0;
position: absolute;
/* Absolute position */
bottom: calc(-2 * var(--inverted-corners-size));
left: 0;
position: absolute;
/* Size */
height: calc(2 * var(--inverted-corners-size));
width: var(--inverted-corners-size);
/* Size */
height: calc(2 * var(--inverted-corners-size));
width: var(--inverted-corners-size);
/* Border */
background-color: transparent;
border-top-left-radius: var(--inverted-corners-size);
box-shadow: var(--inverted-corners-background)
0px calc(-1 * var(--inverted-corners-size)) 0px 0px;
}
`}
/* Border */
background-color: transparent;
border-top-left-radius: var(--inverted-corners-size);
box-shadow: var(--inverted-corners-background) 0px calc(-1 * var(--inverted-corners-size)) 0px
0px;
}
`}
>
<div
style={{
@@ -78,13 +73,15 @@ css={`
width: '16rem',
}}
>
<div className='inverted-corners'></div>
<div className="inverted-corners"></div>
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<section>
<Heading title="Use case" />
<Heading level={2}>Use cases</Heading>
<div
style={{
@@ -92,12 +89,13 @@ css={`
width: '16rem',
}}
>
<div className='inverted-corners inverted-corners--speech'>Speech Bubble</div>
<div className="inverted-corners inverted-corners--speech">Speech Bubble</div>
</div>
</section>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.ConcaveCorners]} />
</DetailsLayout>
</PatternLayout>
);
};

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

@@ -1,15 +1,10 @@
/**
* 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 Head from 'next/head';
import { Link } from 'react-router-dom';
import Link from 'next/link';
import { Heading, Spacer } from '@1milligram/design';
import Heading from '../../components/Heading';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
interface ItemProps {
@@ -46,71 +41,72 @@ const Item: React.FC<ItemProps> = ({ action, keys }) => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.KeyboardShortcut}>
<PatternLayout pattern={Pattern.KeyboardShortcut}>
<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" />
</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.
</div>
<BrowserFrame
html={`
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
We use the native <code>kbd</code> tag to display the keyboard shortcut.
</div>
<BrowserFrame
html={`
<kbd class="container">
...
</kbd>
`}
css={`
.container {
/* Background and color */
background-color: rgba(0, 0, 0, 0.1);
border-radius: 4px;
color: rgba(0, 0, 0, 0.7);
css={`
.container {
/* Background and color */
background-color: rgba(0, 0, 0, 0.1);
border-radius: 4px;
color: rgba(0, 0, 0, 0.7);
/* Bottom shadow */
box-shadow: rgba(0, 0, 0, 0.3) 0px -2px 0px inset,
rgba(0, 0, 0, 0.4) 0px 1px 1px;
/* Bottom shadow */
box-shadow: rgba(0, 0, 0, 0.3) 0px -2px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px;
/* Spacing */
padding: 8px;
}
`}
/* Spacing */
padding: 8px;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
<kbd
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.1)',
borderRadius: '4px',
boxShadow: 'rgba(0, 0, 0, 0.3) 0px -2px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px',
color: 'rgba(0, 0, 0, 0.7)',
padding: '8px',
}}
>
<kbd
style={{
backgroundColor: 'rgba(0, 0, 0, 0.1)',
borderRadius: '4px',
boxShadow: 'rgba(0, 0, 0, 0.3) 0px -2px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px',
color: 'rgba(0, 0, 0, 0.7)',
padding: '8px',
}}
>
⌘ + C
</kbd>
</div>
</BrowserFrame>
</div>
⌘ + C
</kbd>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<section>
<Heading title="Use cases" />
<Heading level={2}>Use cases</Heading>
<div style={{ padding: '32px' }}>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
We can use this pattern with the <Link to="/patterns/property-list">property list</Link> pattern
to create shortkey preferences as following:
We can use this pattern with the{' '}
<Link href="/property-list">
<a>property list</a>
</Link>{' '}
pattern to create shortkey preferences as following:
</div>
<div style={{ width: '250px' }}>
<Item action="Cut" keys="⌘ + X" />
@@ -119,7 +115,7 @@ css={`
</div>
</div>
</section>
</DetailsLayout>
</PatternLayout>
);
};

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

@@ -1,20 +1,16 @@
/**
* 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 Head from 'next/head';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import './styles.css';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.LayeredCard}>
<PatternLayout pattern={Pattern.LayeredCard}>
<Head>
<meta name="description" content="Create a layered card with CSS" />
<meta name="og:description" content="Create a layered card with CSS" />
@@ -22,35 +18,35 @@ const Details: React.FC<{}> = () => {
<meta name="keywords" content="css layered card" />
</Head>
<BrowserFrame
html={`
html={`
<div class="layered-card">
...
</div>
`}
css={`
.layered-card {
position: relative;
}
css={`
.layered-card {
position: relative;
}
.layered-card::before {
background: rgba(0, 0, 0, 0.3);
content: '';
/* Position */
top: 0;
left: 0;
position: absolute;
transform: translate(1rem, 1rem);
.layered-card::before {
background: rgba(0, 0, 0, 0.3);
content: '';
/* Size */
height: 100%;
width: 100%;
/* Position */
top: 0;
left: 0;
position: absolute;
transform: translate(1rem, 1rem);
/* Display under the main content */
z-index: -1;
}
`}
>
/* Size */
height: 100%;
width: 100%;
/* Display under the main content */
z-index: -1;
}
`}
>
<div
style={{
alignItems: 'center',
@@ -73,8 +69,9 @@ css={`
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.Card, Pattern.StackedCards, Pattern.ThreeDimensionsCard]} />
</DetailsLayout>
</PatternLayout>
);
};

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

@@ -1,78 +1,70 @@
/**
* 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 Head from 'next/head';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.LinedPaper}>
<PatternLayout pattern={Pattern.LinedPaper}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<div class="container">
...
</div>
`}
css={`
.container {
/* Lined background */
background-image: linear-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 0px);
background-size: 100% 2em;
css={`
.container {
/* Lined background */
background-image: linear-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 0px);
background-size: 100% 2em;
/*
/*
Display the content on top of the lines.
The line height must be the same as the background size defined above
*/
background-position-y: 24px;
line-height: 2em;
}
`}
background-position-y: 24px;
line-height: 2em;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 0)',
backgroundPositionY: '24px',
backgroundSize: '100% 2em',
height: '200px',
lineHeight: '2em',
width: '75%',
}}
>
<div
style={{
backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 0)',
backgroundPositionY: '24px',
backgroundSize: '100% 2em',
height: '200px',
lineHeight: '2em',
width: '75%',
}}
>
<div>
Cascading Style Sheets (CSS) is a style sheet language used for
describing the presentation of a document written in a markup
language like HTML. CSS is a cornerstone technology of the World Wide Web,
alongside HTML and JavaScript.
</div>
<div style={{ textAlign: 'right' }}>— Wikipedia</div>
<div>
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation
of a document written in a markup language like HTML. CSS is a cornerstone technology of the
World Wide Web, alongside HTML and JavaScript.
</div>
<div style={{ textAlign: 'right' }}>— Wikipedia</div>
</div>
</BrowserFrame>
</div>
</DetailsLayout>
</div>
</BrowserFrame>
</PatternLayout>
);
};

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

@@ -1,14 +1,10 @@
/**
* 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 Head from 'next/head';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
@@ -16,7 +12,7 @@ import './masonry-grid.css';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.MasonryGrid}>
<PatternLayout pattern={Pattern.MasonryGrid}>
<Head>
<meta name="description" content="Create a masonry grid with CSS" />
<meta name="og:description" content="Create a masonry grid with CSS" />
@@ -24,7 +20,7 @@ const Details: React.FC<{}> = () => {
<meta name="keywords" content="css column-count, css column-gap, css masonry, css masonry grid" />
</Head>
<BrowserFrame
html={`
html={`
<div class="masonry-grid">
<!--Item -->
<div class="masonry-grid__item">...</div>
@@ -32,26 +28,26 @@ html={`
<!-- Repeat other items -->
</div>
`}
css={`
.masonry-grid {
/* It is split into 3 columns */
column-count: 3;
css={`
.masonry-grid {
/* It is split into 3 columns */
column-count: 3;
/* The space between columns */
column-gap: 1rem;
/* The space between columns */
column-gap: 1rem;
/* Misc */
width: 100%;
}
/* Misc */
width: 100%;
}
.masonry-grid__item {
/* Prevent a column from breaking into multiple columns */
break-inside: avoid;
.masonry-grid__item {
/* Prevent a column from breaking into multiple columns */
break-inside: avoid;
/* Misc */
margin-bottom: 1rem;
}
`}
/* Misc */
margin-bottom: 1rem;
}
`}
>
<div
style={{
@@ -63,23 +59,44 @@ css={`
padding: '1rem',
}}
>
<div className='masonry-grid'>
<div className='masonry-grid__item'><Rectangle height={32} /></div>
<div className='masonry-grid__item'><Rectangle height={64} /></div>
<div className='masonry-grid__item'><Rectangle height={96} /></div>
<div className='masonry-grid__item'><Rectangle height={64} /></div>
<div className='masonry-grid__item'><Rectangle height={128} /></div>
<div className='masonry-grid__item'><Rectangle height={96} /></div>
<div className='masonry-grid__item'><Rectangle height={128} /></div>
<div className='masonry-grid__item'><Rectangle height={32} /></div>
<div className='masonry-grid__item'><Rectangle height={64} /></div>
<div className='masonry-grid__item'><Rectangle height={32} /></div>
<div className="masonry-grid">
<div className="masonry-grid__item">
<Rectangle height={32} />
</div>
<div className="masonry-grid__item">
<Rectangle height={64} />
</div>
<div className="masonry-grid__item">
<Rectangle height={96} />
</div>
<div className="masonry-grid__item">
<Rectangle height={64} />
</div>
<div className="masonry-grid__item">
<Rectangle height={128} />
</div>
<div className="masonry-grid__item">
<Rectangle height={96} />
</div>
<div className="masonry-grid__item">
<Rectangle height={128} />
</div>
<div className="masonry-grid__item">
<Rectangle height={32} />
</div>
<div className="masonry-grid__item">
<Rectangle height={64} />
</div>
<div className="masonry-grid__item">
<Rectangle height={32} />
</div>
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.CardLayout, Pattern.SimpleGrid]} />
</DetailsLayout>
</PatternLayout>
);
};

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

@@ -1,13 +1,8 @@
/**
* 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 Head from 'next/head';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
@@ -15,16 +10,15 @@ import Square from '../../placeholders/Square';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.MediaObject}>
<PatternLayout pattern={Pattern.MediaObject}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<div class="container">
<!-- Media object -->
<div class="container__media">
@@ -37,48 +31,51 @@ html={`
</div>
</div>
`}
css={`
.container {
/* Align sub-items to top */
align-items: start;
display: flex;
}
css={`
.container {
/* Align sub-items to top */
align-items: start;
display: flex;
}
.container__media {
margin-right: 16px;
.container__media {
margin-right: 16px;
/* Set the width for the media object */
width: 200px;
}
/* Set the width for the media object */
width: 200px;
}
.container__content {
/* Take the remaining width */
flex: 1;
}
`}
.container__content {
/* Take the remaining width */
flex: 1;
}
`}
>
<div
style={{
alignItems: 'flex-start',
display: 'flex',
height: '100%',
padding: '16px',
}}
>
<div
style={{
alignItems: 'flex-start',
display: 'flex',
height: '100%',
padding: '16px',
}}
>
<div style={{ height: '128px', marginRight: '16px', width: '128px' }}>
<Square />
<div style={{ height: '128px', marginRight: '16px', width: '128px' }}>
<Square />
</div>
<div style={{ flex: 1 }}>
<div style={{ marginBottom: '32px', width: '80%' }}>
<Rectangle />
</div>
<div style={{ flex: 1 }}>
<div style={{ marginBottom: '32px', width: '80%' }}>
<Rectangle />
</div>
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={15} /></div>
<div style={{ marginBottom: '32px' }}>
<Block numberOfBlocks={20} />
</div>
<div style={{ marginBottom: '32px' }}>
<Block numberOfBlocks={15} />
</div>
</div>
</BrowserFrame>
</div>
</DetailsLayout>
</div>
</BrowserFrame>
</PatternLayout>
);
};

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

@@ -1,16 +1,10 @@
/**
* 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 Head from 'next/head';
import './mega-menu.css';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
@@ -18,19 +12,18 @@ import Triangle from '../../placeholders/Triangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.MegaMenu}>
<PatternLayout pattern={Pattern.MegaMenu}>
<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" />
</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.
</div>
<BrowserFrame
html={`
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
Move the mouse over the second navigation item to see the mega menu.
</div>
<BrowserFrame
html={`
<div class="container">
<!-- Item -->
...
@@ -47,106 +40,107 @@ html={`
</div>
</div>
`}
css={`
.container {
/* Used to position the mega menu */
position: relative;
}
css={`
.container {
/* Used to position the mega menu */
position: relative;
}
.container__trigger:hover .container__content {
/* Show the mega menu when hovering the trigger item */
display: block;
}
.container__trigger:hover .container__content {
/* Show the mega menu when hovering the trigger item */
display: block;
}
.container__content {
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
margin-top: -1px;
.container__content {
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
margin-top: -1px;
/* Hidden by default */
display: none;
/* Hidden by default */
display: none;
/* Absolute position */
left: 0px;
position: absolute;
top: 100%;
/* Absolute position */
left: 0px;
position: absolute;
top: 100%;
/* Take full width */
width: 100%;
/* Take full width */
width: 100%;
/* Displayed on top of other elements */
background: #fff;
z-index: 9999;
}
`}
>
<div style={{ padding: '8px' }}>
<div className='p-mega-menu-container'>
/* Displayed on top of other elements */
background: #fff;
z-index: 9999;
}
`}
>
<div style={{ padding: '8px' }}>
<div className="p-mega-menu-container">
<div
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
display: 'inline-flex',
justifyContent: 'center',
}}
>
<div
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
display: 'inline-flex',
justifyContent: 'center',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
padding: '16px',
width: '150px',
}}
>
<div
style={{
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
padding: '16px',
width: '150px',
}}
>
<Rectangle />
</div>
<div
className='p-mega-menu-trigger'
style={{
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
width: '180px',
}}
>
<div style={{ display: 'flex', padding: '16px' }}>
<div style={{ flex: 1, marginRight: '8px' }}><Rectangle /></div>
<Triangle size={8} corner='b' />
<Rectangle />
</div>
<div
className="p-mega-menu-trigger"
style={{
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
width: '180px',
}}
>
<div style={{ display: 'flex', padding: '16px' }}>
<div style={{ flex: 1, marginRight: '8px' }}>
<Rectangle />
</div>
<div className='p-mega-menu-content'>
<div style={{ display: 'flex' }}>
<div style={{ flex: 1, padding: '16px' }}>
<Block numberOfBlocks={10} />
</div>
<div style={{ flex: 1, padding: '16px' }}>
<Block numberOfBlocks={6} />
</div>
<div style={{ flex: 1, padding: '16px' }}>
<Block numberOfBlocks={8} />
</div>
<div style={{ flex: 1, padding: '16px' }}>
<Block numberOfBlocks={6} />
</div>
<Triangle size={8} corner="b" />
</div>
<div className="p-mega-menu-content">
<div style={{ display: 'flex' }}>
<div style={{ flex: 1, padding: '16px' }}>
<Block numberOfBlocks={10} />
</div>
<div style={{ flex: 1, padding: '16px' }}>
<Block numberOfBlocks={6} />
</div>
<div style={{ flex: 1, padding: '16px' }}>
<Block numberOfBlocks={8} />
</div>
<div style={{ flex: 1, padding: '16px' }}>
<Block numberOfBlocks={6} />
</div>
</div>
</div>
<div
style={{
padding: '16px',
width: '120px',
}}
>
<Rectangle />
</div>
</div>
<div
style={{
padding: '16px',
width: '120px',
}}
>
<Rectangle />
</div>
</div>
<div style={{ marginTop: '16px' }}>
<Block numberOfBlocks={10} />
</div>
</div>
</BrowserFrame>
</div>
<div style={{ marginTop: '16px' }}>
<Block numberOfBlocks={10} />
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.Dropdown, Pattern.Menu, Pattern.NestedDropdowns]} />
</DetailsLayout>
</PatternLayout>
);
};

283
pages/menu/index.tsx
View File

@@ -1,32 +1,25 @@
/**
* 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 Head from 'next/head';
import './menu.css';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.Menu}>
<PatternLayout pattern={Pattern.Menu}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<div class="menu">
<!-- Normal menu item -->
<div class="menu__item">
@@ -61,146 +54,162 @@ html={`
<div class="menu__divider"></div>
</div>
`}
css={`
.menu {
display: flex;
flex-direction: column;
css={`
.menu {
display: flex;
flex-direction: column;
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 4px;
}
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 4px;
}
.menu__item {
/* Center the content horizontally */
align-items: center;
display: flex;
}
.menu__item {
/* Center the content horizontally */
align-items: center;
display: flex;
}
.menu__hotkey {
/* Push the hot key to the right */
margin-left: auto;
}
.menu__hotkey {
/* Push the hot key to the right */
margin-left: auto;
}
.menu__divider {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
height: 1px;
}
`}
.menu__divider {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
height: 1px;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
width: '40%',
}}
>
<div
className="p-menu-item"
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
width: '40%',
alignItems: 'center',
display: 'flex',
height: '32px',
padding: '0 8px',
}}
>
<div
className="p-menu-item"
style={{
alignItems: 'center',
display: 'flex',
height: '32px',
padding: '0 8px',
}}
>
<div style={{ width: '40%' }}><Rectangle /></div>
</div>
<div
className="p-menu-item"
style={{
alignItems: 'center',
display: 'flex',
height: '32px',
padding: '0 8px',
}}
>
<Circle />
<div style={{ marginLeft: '4px', width: '50%' }}><Rectangle /></div>
</div>
<div
className="p-menu-item"
style={{
alignItems: 'center',
display: 'flex',
height: '32px',
justifyContent: 'space-between',
padding: '0 8px',
}}
>
<div style={{ width: '30%' }}><Rectangle /></div>
<div>Ctrl + X</div>
</div>
<div
className="p-menu-item"
style={{
alignItems: 'center',
display: 'flex',
height: '32px',
justifyContent: 'space-between',
padding: '0 8px',
}}
>
<div style={{ width: '70%' }}><Rectangle /></div>
<div>Ctrl + C</div>
</div>
<div
className="p-menu-item"
style={{
alignItems: 'center',
display: 'flex',
height: '32px',
justifyContent: 'space-between',
padding: '0 8px',
}}
>
<div style={{ width: '20%' }}><Rectangle /></div>
<Circle />
</div>
<div
className="p-menu-item"
style={{
alignItems: 'center',
display: 'flex',
height: '32px',
justifyContent: 'space-between',
padding: '0 8px',
}}
>
<div style={{ alignItems: 'center', display: 'flex', width: '80%' }}>
<Circle />
<div style={{ marginLeft: '4px', width: '50%' }}><Rectangle /></div>
</div>
<Circle />
</div>
<div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)', height: '1px' }} />
<div
className="p-menu-item"
style={{
alignItems: 'center',
display: 'flex',
height: '32px',
justifyContent: 'space-between',
padding: '0 8px',
}}
>
<div style={{ width: '40%' }}><Rectangle /></div>
<div>Ctrl + V</div>
<div style={{ width: '40%' }}>
<Rectangle />
</div>
</div>
<div
className="p-menu-item"
style={{
alignItems: 'center',
display: 'flex',
height: '32px',
padding: '0 8px',
}}
>
<Circle />
<div style={{ marginLeft: '4px', width: '50%' }}>
<Rectangle />
</div>
</div>
<div
className="p-menu-item"
style={{
alignItems: 'center',
display: 'flex',
height: '32px',
justifyContent: 'space-between',
padding: '0 8px',
}}
>
<div style={{ width: '30%' }}>
<Rectangle />
</div>
<div>Ctrl + X</div>
</div>
<div
className="p-menu-item"
style={{
alignItems: 'center',
display: 'flex',
height: '32px',
justifyContent: 'space-between',
padding: '0 8px',
}}
>
<div style={{ width: '70%' }}>
<Rectangle />
</div>
<div>Ctrl + C</div>
</div>
<div
className="p-menu-item"
style={{
alignItems: 'center',
display: 'flex',
height: '32px',
justifyContent: 'space-between',
padding: '0 8px',
}}
>
<div style={{ width: '20%' }}>
<Rectangle />
</div>
<Circle />
</div>
<div
className="p-menu-item"
style={{
alignItems: 'center',
display: 'flex',
height: '32px',
justifyContent: 'space-between',
padding: '0 8px',
}}
>
<div style={{ alignItems: 'center', display: 'flex', width: '80%' }}>
<Circle />
<div style={{ marginLeft: '4px', width: '50%' }}>
<Rectangle />
</div>
</div>
<Circle />
</div>
<div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)', height: '1px' }} />
<div
className="p-menu-item"
style={{
alignItems: 'center',
display: 'flex',
height: '32px',
justifyContent: 'space-between',
padding: '0 8px',
}}
>
<div style={{ width: '40%' }}>
<Rectangle />
</div>
<div>Ctrl + V</div>
</div>
</div>
</BrowserFrame>
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns
patterns={[
Pattern.DotLeader,
@@ -210,7 +219,7 @@ css={`
Pattern.SplitNavigation,
]}
/>
</DetailsLayout>
</PatternLayout>
);
};

152
pages/modal/index.tsx
View File

@@ -1,14 +1,9 @@
/**
* 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 Head from 'next/head';
import { Link } from 'react-router-dom';
import { Pattern } from '../../constants/Pattern';
import Link from 'next/link';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
@@ -16,20 +11,22 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.Modal}>
<PatternLayout pattern={Pattern.Modal}>
<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" />
</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
represent the button for closing the modal.
</div>
<BrowserFrame
html={`
<div style={{ lineHeight: 1.5, marginBottom: '1rem' }}>
You can use the{' '}
<Link href="/close-button">
<a>close button</a>
</Link>{' '}
to represent the button for closing the modal.
</div>
<BrowserFrame
html={`
<div class="modal">
<!-- Header -->
<div class="modal__header">
@@ -48,80 +45,87 @@ html={`
</div>
</div>
`}
css={`
.modal {
/* Border */
border: 1px solid rgba(0, 0, 0.3);
border-radius: 4px;
}
css={`
.modal {
/* Border */
border: 1px solid rgba(0, 0, 0.3);
border-radius: 4px;
}
.modal__header {
display: flex;
justify-content: space-between;
/* Border */
border-bottom: 1px solid rgba(0, 0, 0.3);
}
.modal__header {
display: flex;
justify-content: space-between;
/* Border */
border-bottom: 1px solid rgba(0, 0, 0.3);
}
.modal__footer {
display: flex;
/* Push the buttons to the right */
justify-content: flex-end;
/* Border */
border-top: 1px solid rgba(0, 0, 0.3);
}
`}
.modal__footer {
display: flex;
/* Push the buttons to the right */
justify-content: flex-end;
/* Border */
border-top: 1px solid rgba(0, 0, 0.3);
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
width: '50%',
}}
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
width: '50%',
alignItems: 'center',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'space-between',
padding: '16px',
}}
>
<div
style={{
alignItems: 'center',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'space-between',
padding: '16px',
}}
>
<div style={{ width: '60%' }}><Rectangle /></div>
<div style={{ color: 'rgba(0, 0, 0, 0.7)' }}>
<Circle />
</div>
<div style={{ width: '60%' }}>
<Rectangle />
</div>
<div style={{ padding: '16px' }}>
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
<Block numberOfBlocks={5} />
<div style={{ color: 'rgba(0, 0, 0, 0.7)' }}>
<Circle />
</div>
<div
style={{
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'flex-end',
padding: '16px',
}}
>
<div style={{ marginRight: '8px', width: '30%' }}><Rectangle height={32} /></div>
<div style={{ width: '30%' }}><Rectangle height={32} /></div>
</div>
<div style={{ padding: '16px' }}>
<div style={{ marginBottom: '16px' }}>
<Block numberOfBlocks={10} />
</div>
<Block numberOfBlocks={5} />
</div>
<div
style={{
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'flex-end',
padding: '16px',
}}
>
<div style={{ marginRight: '8px', width: '30%' }}>
<Rectangle height={32} />
</div>
<div style={{ width: '30%' }}>
<Rectangle height={32} />
</div>
</div>
</div>
</BrowserFrame>
</div>
</DetailsLayout>
</div>
</BrowserFrame>
</PatternLayout>
);
};

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

@@ -1,33 +1,29 @@
/**
* 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 Head from 'next/head';
import './nested-dropdowns.css';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.NestedDropdowns}>
<PatternLayout pattern={Pattern.NestedDropdowns}>
<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" />
<meta
name="keywords"
content="css dropdown menu, css multi-level dropdown menu, css nested dropdown menu"
/>
</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.
</div>
<BrowserFrame
html={`
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
Hover on the Patterns &rarr; Navigation to see the sub dropdowns.
</div>
<BrowserFrame
html={`
<ul class="dropdown">
<li>Home</li>
<li>
@@ -54,100 +50,99 @@ html={`
<li>About</li>
</ul>
`}
css={`
.dropdown {
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
display: flex;
css={`
.dropdown {
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
display: flex;
/* Reset list styles */
list-style-type: none;
margin: 0;
padding: 0;
}
/* Reset list styles */
list-style-type: none;
margin: 0;
padding: 0;
}
.dropdown li {
/* Spacing */
padding: 8px;
.dropdown li {
/* Spacing */
padding: 8px;
/* Used to position the sub dropdown */
position: relative;
}
/* Used to position the sub dropdown */
position: relative;
}
/* The sub dropdown */
.dropdown ul {
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
/* The sub dropdown */
.dropdown ul {
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
/* Hidden by default */
display: none;
/* Hidden by default */
display: none;
/* Absolute position */
left: 0;
position: absolute;
top: 100%;
/* Absolute position */
left: 0;
position: absolute;
top: 100%;
/* Reset styles */
list-style-type: none;
margin: 0;
padding: 0;
/* Reset styles */
list-style-type: none;
margin: 0;
padding: 0;
/* Width */
width: 200px;
}
/* Width */
width: 200px;
}
/* The second level sub dropdown */
.dropdown ul ul {
left: 100%;
position: absolute;
top: 0;
}
/* The second level sub dropdown */
.dropdown ul ul {
left: 100%;
position: absolute;
top: 0;
}
/* Change background color of list item when being hovered */
.dropdown li:hover {
background-color: rgba(0, 0, 0, 0.1);
}
/* Change background color of list item when being hovered */
.dropdown li:hover {
background-color: rgba(0, 0, 0, 0.1);
}
/* Show the direct sub dropdown when hovering the list item */
.dropdown li:hover > ul {
display: block;
}
`}
/* Show the direct sub dropdown when hovering the list item */
.dropdown li:hover > ul {
display: block;
}
`}
>
<div
style={{
padding: '8px',
}}
>
<div
style={{
padding: '8px',
}}
>
<ul className="p-nested-dropdowns">
<li>Home</li>
<li>
<div>Patterns</div>
<ul>
<li>Layout</li>
<li>Input</li>
<li>
<div>Navigation</div>
<ul>
<li>Breadcrumb</li>
<li>Dropdown</li>
<li>Menu</li>
<li>Nested dropdown</li>
</ul>
</li>
<li>Display</li>
<li>Feedback</li>
</ul>
</li>
<li>Products</li>
<li>About</li>
</ul>
</div>
</BrowserFrame>
</div>
<ul className="p-nested-dropdowns">
<li>Home</li>
<li>
<div>Patterns</div>
<ul>
<li>Layout</li>
<li>Input</li>
<li>
<div>Navigation</div>
<ul>
<li>Breadcrumb</li>
<li>Dropdown</li>
<li>Menu</li>
<li>Nested dropdown</li>
</ul>
</li>
<li>Display</li>
<li>Feedback</li>
</ul>
</li>
<li>Products</li>
<li>About</li>
</ul>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.Dropdown, Pattern.Menu]} />
</DetailsLayout>
</PatternLayout>
);
};

102
pages/notification/index.tsx
View File

@@ -1,34 +1,31 @@
/**
* 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 Head from 'next/head';
import { Link } from 'react-router-dom';
import { Pattern } from '../../constants/Pattern';
import Link from 'next/link';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.Notification}>
<PatternLayout pattern={Pattern.Notification}>
<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" />
</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
represent the button for closing the notification.
</div>
<BrowserFrame
html={`
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
You can use the{' '}
<Link href="/close-button">
<a>close button</a>
</Link>{' '}
to represent the button for closing the notification.
</div>
<BrowserFrame
html={`
<div class="notification">
<!-- Content -->
...
@@ -37,53 +34,54 @@ html={`
...
</div>
`}
css={`
.notification {
display: flex;
justify-content: space-between;
}
`}
css={`
.notification {
display: flex;
justify-content: space-between;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
justifyContent: 'space-between',
width: '60%',
}}
>
<div
<div style={{ padding: '16px', width: '80%' }}>
<Block numberOfBlocks={5} />
</div>
<button
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
alignItems: 'center',
borderColor: 'transparent',
color: 'rgba(0, 0, 0, .3)',
display: 'flex',
justifyContent: 'space-between',
width: '60%',
fontSize: '36px',
height: '32px',
justifyContent: 'center',
marginRight: '1px',
width: '32px',
}}
>
<div style={{ padding: '16px', width: '80%' }}><Block numberOfBlocks={5} /></div>
<button
style={{
alignItems: 'center',
borderColor: 'transparent',
color: 'rgba(0, 0, 0, .3)',
display: 'flex',
fontSize: '36px',
height: '32px',
justifyContent: 'center',
marginRight: '1px',
width: '32px',
}}
>
<Circle />
</button>
</div>
<Circle />
</button>
</div>
</BrowserFrame>
</div>
</DetailsLayout>
</div>
</BrowserFrame>
</PatternLayout>
);
};

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

@@ -1,29 +1,24 @@
/**
* 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 Head from 'next/head';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Triangle from '../../placeholders/Triangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.OverlayPlayButton}>
<PatternLayout pattern={Pattern.OverlayPlayButton}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<div class="container">
<!-- The video element -->
<video src="..." />
@@ -35,82 +30,82 @@ html={`
</div>
</div>
`}
css={`
.container {
/* Used to position the overlay */
position: relative;
}
css={`
.container {
/* Used to position the overlay */
position: relative;
}
.container__overlay {
/* Position */
left: 0;
position: absolute;
top: 0;
.container__overlay {
/* Position */
left: 0;
position: absolute;
top: 0;
/* Take full size */
height: 100%;
width: 100%;
/* Take full size */
height: 100%;
width: 100%;
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Add a dark background */
background-color: rgba(0, 0, 0, 0.25);
}
`}
/* Add a dark background */
background-color: rgba(0, 0, 0, 0.25);
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
position: 'relative',
width: '100%',
}}
>
<div
style={{
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.25)',
display: 'flex',
height: '100%',
position: 'relative',
justifyContent: 'center',
left: 0,
position: 'absolute',
top: 0,
width: '100%',
}}
>
<div
style={{
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.25)',
border: '4px solid #FFF',
borderRadius: '9999px',
display: 'flex',
height: '100%',
height: '64px',
justifyContent: 'center',
left: 0,
position: 'absolute',
top: 0,
width: '100%',
width: '64px',
}}
>
<div
style={{
alignItems: 'center',
border: '4px solid #FFF',
borderRadius: '9999px',
display: 'flex',
height: '64px',
justifyContent: 'center',
width: '64px',
}}
>
<Triangle backgroundColor='#FFF' corner='r' size={8} />
</div>
<Triangle backgroundColor="#FFF" corner="r" size={8} />
</div>
</div>
</div>
</BrowserFrame>
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.VideoBackground]} />
</DetailsLayout>
</PatternLayout>
);
};

209
pages/pagination/index.tsx
View File

@@ -1,29 +1,23 @@
/**
* 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 Head from 'next/head';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.Pagination}>
<PatternLayout pattern={Pattern.Pagination}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<div class="pagination">
<!-- Pagination item -->
<div class="pagination__item">
@@ -34,119 +28,118 @@ html={`
...
</div>
`}
css={`
.pagination {
display: flex;
css={`
.pagination {
display: flex;
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 4px;
}
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 4px;
}
.pagination__item {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
.pagination__item {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Right border */
border-right: 1px solid rgba(0, 0, 0, 0.3);
}
.pagination__item + .pagination__item {
/* No right border */
border-right: none;
}
`}
/* Right border */
border-right: 1px solid rgba(0, 0, 0, 0.3);
}
.pagination__item + .pagination__item {
/* No right border */
border-right: none;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
alignItems: 'center',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'center',
padding: '8px',
width: '128px',
}}
>
<div
style={{
alignItems: 'center',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'center',
padding: '8px',
width: '128px',
}}
>
<Rectangle />
</div>
<div
style={{
alignItems: 'center',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'center',
padding: '8px',
}}
>
<Circle size={16} />
</div>
<div
style={{
alignItems: 'center',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'center',
padding: '8px',
}}
>
<Circle size={16} />
</div>
<div
style={{
alignItems: 'center',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'center',
padding: '8px',
}}
>
<Circle size={16} />
</div>
<div
style={{
alignItems: 'center',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'center',
padding: '8px',
}}
>
<Circle size={16} />
</div>
<div
style={{
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
padding: '8px',
width: '64px',
}}
>
<Rectangle />
</div>
<Rectangle />
</div>
<div
style={{
alignItems: 'center',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'center',
padding: '8px',
}}
>
<Circle size={16} />
</div>
<div
style={{
alignItems: 'center',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'center',
padding: '8px',
}}
>
<Circle size={16} />
</div>
<div
style={{
alignItems: 'center',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'center',
padding: '8px',
}}
>
<Circle size={16} />
</div>
<div
style={{
alignItems: 'center',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'center',
padding: '8px',
}}
>
<Circle size={16} />
</div>
<div
style={{
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
padding: '8px',
width: '64px',
}}
>
<Rectangle />
</div>
</div>
</BrowserFrame>
</div>
</DetailsLayout>
</div>
</BrowserFrame>
</PatternLayout>
);
};

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

@@ -1,28 +1,23 @@
/**
* 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 Head from 'next/head';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.PopoverArrow}>
<PatternLayout pattern={Pattern.PopoverArrow}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<div class="container">
<!-- The content -->
...
@@ -64,343 +59,342 @@ html={`
<div class="container__arrow container__arrow--lb"></div>
</div>
`}
css={`
.container {
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
css={`
.container {
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
/* Used to position the arrow */
position: relative;
}
/* Used to position the arrow */
position: relative;
}
.container__arrow {
/* Size */
height: 16px;
width: 16px;
.container__arrow {
/* Size */
height: 16px;
width: 16px;
background-color: #FFF;
position: absolute;
}
background-color: #fff;
position: absolute;
}
.container__arrow--tl {
/* Position at the top left corner */
left: 32px;
top: 0px;
.container__arrow--tl {
/* Position at the top left corner */
left: 32px;
top: 0px;
/* Border */
border-left: 1px solid rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(0, 0, 0, 0.3);
transform: translate(50%, -50%) rotate(45deg);
}
/* Border */
border-left: 1px solid rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(0, 0, 0, 0.3);
transform: translate(50%, -50%) rotate(45deg);
}
.container__arrow--tc {
/* Position at the top center */
left: 50%;
top: 0px;
.container__arrow--tc {
/* Position at the top center */
left: 50%;
top: 0px;
/* Border */
border-left: 1px solid rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(0, 0, 0, 0.3);
transform: translate(-50%, -50%) rotate(45deg);
}
/* Border */
border-left: 1px solid rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(0, 0, 0, 0.3);
transform: translate(-50%, -50%) rotate(45deg);
}
.container__arrow--tr {
/* Position at the top right corner */
right: 32px;
top: 0px;
.container__arrow--tr {
/* Position at the top right corner */
right: 32px;
top: 0px;
/* Border */
border-left: 1px solid rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(0, 0, 0, 0.3);
transform: translate(-50%, -50%) rotate(45deg);
}
/* Border */
border-left: 1px solid rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(0, 0, 0, 0.3);
transform: translate(-50%, -50%) rotate(45deg);
}
.container__arrow--rt {
/* Position at the right top corner */
right: 0;
top: 32px;
.container__arrow--rt {
/* Position at the right top corner */
right: 0;
top: 32px;
/* Border */
border-right: 1px solid rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(0, 0, 0, 0.3);
transform: translate(50%, 50%) rotate(45deg);
}
/* Border */
border-right: 1px solid rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(0, 0, 0, 0.3);
transform: translate(50%, 50%) rotate(45deg);
}
.container__arrow--rc {
/* Position at the right center */
right: 0;
top: 50%;
.container__arrow--rc {
/* Position at the right center */
right: 0;
top: 50%;
/* Border */
border-right: 1px solid rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(0, 0, 0, 0.3);
transform: translate(50%, -50%) rotate(45deg);
}
/* Border */
border-right: 1px solid rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(0, 0, 0, 0.3);
transform: translate(50%, -50%) rotate(45deg);
}
.container__arrow--rb {
/* Position at the right bottom corner */
bottom: 32px;
right: 0;
.container__arrow--rb {
/* Position at the right bottom corner */
bottom: 32px;
right: 0;
/* Border */
border-right: 1px solid rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(0, 0, 0, 0.3);
transform: translate(50%, -50%) rotate(45deg);
}
/* Border */
border-right: 1px solid rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(0, 0, 0, 0.3);
transform: translate(50%, -50%) rotate(45deg);
}
.container__arrow--bl {
/* Position at the bottom left corner */
bottom: -16px;
left: 32px;
.container__arrow--bl {
/* Position at the bottom left corner */
bottom: -16px;
left: 32px;
/* Border */
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-right: 1px solid rgba(0, 0, 0, 0.3);
transform: translate(50%, -50%) rotate(45deg);
}
/* Border */
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-right: 1px solid rgba(0, 0, 0, 0.3);
transform: translate(50%, -50%) rotate(45deg);
}
.container__arrow--bc {
/* Position at the bottom center */
bottom: -16px;
left: 50%;
.container__arrow--bc {
/* Position at the bottom center */
bottom: -16px;
left: 50%;
/* Border */
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-right: 1px solid rgba(0, 0, 0, 0.3);
transform: translate(-50%, -50%) rotate(45deg);
}
/* Border */
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-right: 1px solid rgba(0, 0, 0, 0.3);
transform: translate(-50%, -50%) rotate(45deg);
}
.container__arrow--br {
/* Position at the bottom right corner */
bottom: -16px;
right: 32px;
.container__arrow--br {
/* Position at the bottom right corner */
bottom: -16px;
right: 32px;
/* Border */
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-right: 1px solid rgba(0, 0, 0, 0.3);
transform: translate(-50%, -50%) rotate(45deg);
}
/* Border */
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-right: 1px solid rgba(0, 0, 0, 0.3);
transform: translate(-50%, -50%) rotate(45deg);
}
.container__arrow--lt {
/* Position at the left top corner */
left: 0;
top: 32px;
.container__arrow--lt {
/* Position at the left top corner */
left: 0;
top: 32px;
/* Border */
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-left: 1px solid rgba(0, 0, 0, 0.3);
transform: translate(-50%, 50%) rotate(45deg);
}
/* Border */
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-left: 1px solid rgba(0, 0, 0, 0.3);
transform: translate(-50%, 50%) rotate(45deg);
}
.container__arrow--lc {
/* Position at the left center */
left: 0;
top: 50%;
.container__arrow--lc {
/* Position at the left center */
left: 0;
top: 50%;
/* Border */
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-left: 1px solid rgba(0, 0, 0, 0.3);
transform: translate(-50%, -50%) rotate(45deg);
}
/* Border */
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-left: 1px solid rgba(0, 0, 0, 0.3);
transform: translate(-50%, -50%) rotate(45deg);
}
.container__arrow--lb {
/* Position at the left bottom corner */
bottom: 32px;
left: 0;
.container__arrow--lb {
/* Position at the left bottom corner */
bottom: 32px;
left: 0;
/* Border */
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-left: 1px solid rgba(0, 0, 0, 0.3);
transform: translate(-50%, -50%) rotate(45deg);
}
`}
/* Border */
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-left: 1px solid rgba(0, 0, 0, 0.3);
transform: translate(-50%, -50%) rotate(45deg);
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
height: '300px',
marginBottom: '16px',
position: 'relative',
width: '300px',
}}
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
height: '300px',
marginBottom: '16px',
position: 'relative',
width: '300px',
backgroundColor: '#FFF',
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
height: '16px',
left: '32px',
position: 'absolute',
top: 0,
transform: 'translate(50%, -50%) rotate(45deg)',
width: '16px',
}}
>
<div
style={{
backgroundColor: '#FFF',
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
height: '16px',
left: '32px',
position: 'absolute',
top: 0,
transform: 'translate(50%, -50%) rotate(45deg)',
width: '16px',
}}
/>
<div
style={{
backgroundColor: '#FFF',
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
height: '16px',
left: '50%',
position: 'absolute',
top: 0,
transform: 'translate(-50%, -50%) rotate(45deg)',
width: '16px',
}}
/>
<div
style={{
backgroundColor: '#FFF',
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
height: '16px',
position: 'absolute',
right: '32px',
top: 0,
transform: 'translate(-50%, -50%) rotate(45deg)',
width: '16px',
}}
/>
/>
<div
style={{
backgroundColor: '#FFF',
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
height: '16px',
left: '50%',
position: 'absolute',
top: 0,
transform: 'translate(-50%, -50%) rotate(45deg)',
width: '16px',
}}
/>
<div
style={{
backgroundColor: '#FFF',
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
height: '16px',
position: 'absolute',
right: '32px',
top: 0,
transform: 'translate(-50%, -50%) rotate(45deg)',
width: '16px',
}}
/>
<div
style={{
backgroundColor: '#FFF',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
height: '16px',
position: 'absolute',
right: 0,
top: '32px',
transform: 'translate(50%, 50%) rotate(45deg)',
width: '16px',
}}
/>
<div
style={{
backgroundColor: '#FFF',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
height: '16px',
position: 'absolute',
right: 0,
top: '50%',
transform: 'translate(50%, -50%) rotate(45deg)',
width: '16px',
}}
/>
<div
style={{
backgroundColor: '#FFF',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
bottom: '32px',
height: '16px',
position: 'absolute',
right: 0,
transform: 'translate(50%, -50%) rotate(45deg)',
width: '16px',
}}
/>
<div
style={{
backgroundColor: '#FFF',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
height: '16px',
position: 'absolute',
right: 0,
top: '32px',
transform: 'translate(50%, 50%) rotate(45deg)',
width: '16px',
}}
/>
<div
style={{
backgroundColor: '#FFF',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
height: '16px',
position: 'absolute',
right: 0,
top: '50%',
transform: 'translate(50%, -50%) rotate(45deg)',
width: '16px',
}}
/>
<div
style={{
backgroundColor: '#FFF',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
bottom: '32px',
height: '16px',
position: 'absolute',
right: 0,
transform: 'translate(50%, -50%) rotate(45deg)',
width: '16px',
}}
/>
<div
style={{
backgroundColor: '#FFF',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
bottom: '-16px',
height: '16px',
left: '32px',
position: 'absolute',
transform: 'translate(50%, -50%) rotate(45deg)',
width: '16px',
}}
/>
<div
style={{
backgroundColor: '#FFF',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
bottom: '-16px',
height: '16px',
left: '50%',
position: 'absolute',
transform: 'translate(-50%, -50%) rotate(45deg)',
width: '16px',
}}
/>
<div
style={{
backgroundColor: '#FFF',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
bottom: '-16px',
height: '16px',
position: 'absolute',
right: '32px',
transform: 'translate(-50%, -50%) rotate(45deg)',
width: '16px',
}}
/>
<div
style={{
backgroundColor: '#FFF',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
bottom: '-16px',
height: '16px',
left: '32px',
position: 'absolute',
transform: 'translate(50%, -50%) rotate(45deg)',
width: '16px',
}}
/>
<div
style={{
backgroundColor: '#FFF',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
bottom: '-16px',
height: '16px',
left: '50%',
position: 'absolute',
transform: 'translate(-50%, -50%) rotate(45deg)',
width: '16px',
}}
/>
<div
style={{
backgroundColor: '#FFF',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
bottom: '-16px',
height: '16px',
position: 'absolute',
right: '32px',
transform: 'translate(-50%, -50%) rotate(45deg)',
width: '16px',
}}
/>
<div
style={{
backgroundColor: '#FFF',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
height: '16px',
left: 0,
position: 'absolute',
top: '32px',
transform: 'translate(-50%, 50%) rotate(45deg)',
width: '16px',
}}
/>
<div
style={{
backgroundColor: '#FFF',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
height: '16px',
left: 0,
position: 'absolute',
top: '50%',
transform: 'translate(-50%, -50%) rotate(45deg)',
width: '16px',
}}
/>
<div
style={{
backgroundColor: '#FFF',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
bottom: '32px',
height: '16px',
left: 0,
position: 'absolute',
transform: 'translate(-50%, -50%) rotate(45deg)',
width: '16px',
}}
/>
</div>
<div
style={{
backgroundColor: '#FFF',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
height: '16px',
left: 0,
position: 'absolute',
top: '32px',
transform: 'translate(-50%, 50%) rotate(45deg)',
width: '16px',
}}
/>
<div
style={{
backgroundColor: '#FFF',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
height: '16px',
left: 0,
position: 'absolute',
top: '50%',
transform: 'translate(-50%, -50%) rotate(45deg)',
width: '16px',
}}
/>
<div
style={{
backgroundColor: '#FFF',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
bottom: '32px',
height: '16px',
left: 0,
position: 'absolute',
transform: 'translate(-50%, -50%) rotate(45deg)',
width: '16px',
}}
/>
</div>
</BrowserFrame>
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.ArrowButtons, Pattern.Tooltip]} />
</DetailsLayout>
</PatternLayout>
);
};

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

@@ -1,29 +1,24 @@
/**
* 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 Head from 'next/head';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.PresenceIndicator}>
<PatternLayout pattern={Pattern.PresenceIndicator}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<div class="container">
<!-- Other element such as avatar -->
...
@@ -32,7 +27,7 @@ html={`
<div class="container__indicator"></div>
</div>
`}
css={`
css={`
.container {
position: relative;
}
@@ -53,46 +48,47 @@ css={`
background-color: #FF4136;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '8px',
height: '64px',
marginRight: '16px',
position: 'relative',
width: '64px',
}}
>
<Circle size={64} />
<div
style={{
height: '64px',
marginRight: '16px',
position: 'relative',
width: '64px',
backgroundColor: '#FF4136',
borderRadius: '9999px',
bottom: 0,
height: '16px',
position: 'absolute',
right: 0,
transform: 'translate(50%, 50%)',
width: '16px',
}}
>
<Circle size={64} />
<div
style={{
backgroundColor: '#FF4136',
borderRadius: '9999px',
bottom: 0,
height: '16px',
position: 'absolute',
right: 0,
transform: 'translate(50%, 50%)',
width: '16px',
}}
/>
</div>
/>
</div>
</BrowserFrame>
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns
patterns={[Pattern.Avatar, Pattern.AvatarList, Pattern.DockedAtCorner, Pattern.InitialAvatar]}
/>
</DetailsLayout>
</PatternLayout>
);
};

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

@@ -1,28 +1,22 @@
/**
* 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 Head from 'next/head';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.PreviousNextButtons}>
<PatternLayout pattern={Pattern.PreviousNextButtons}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<div class="container">
<!-- Previous link sticks to the left -->
<a>..</a>
@@ -31,67 +25,66 @@ html={`
<a>..</a>
</div>
`}
css={`
.container {
align-items: center;
display: flex;
justify-content: space-between;
}
`}
css={`
.container {
align-items: center;
display: flex;
justify-content: space-between;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ width: '50%' }}>
<div
<div style={{ width: '50%' }}>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '32px',
justifyContent: 'space-between',
padding: '8px',
width: '100%',
}}
>
<a
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
height: '32px',
justifyContent: 'space-between',
padding: '8px',
width: '100%',
width: '30%',
}}
>
<a
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
padding: '8px',
width: '30%',
}}
>
<div style={{ marginRight: '8px' }}>&lt;</div>
<Rectangle />
</a>
<a
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
padding: '8px',
width: '30%',
}}
>
<Rectangle />
<div style={{ marginLeft: '8px' }}>&gt;</div>
</a>
</div>
<div style={{ marginRight: '8px' }}>&lt;</div>
<Rectangle />
</a>
<a
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
padding: '8px',
width: '30%',
}}
>
<Rectangle />
<div style={{ marginLeft: '8px' }}>&gt;</div>
</a>
</div>
</div>
</BrowserFrame>
</div>
</DetailsLayout>
</div>
</BrowserFrame>
</PatternLayout>
);
};

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

@@ -1,112 +1,103 @@
/**
* 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 Head from 'next/head';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import './price-tag.css';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.PriceTag}>
<PatternLayout pattern={Pattern.PriceTag}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<div class="price-tag">
...
</div>
`}
css={`
:root {
--price-tag-background: rgba(0, 0, 0, 0.3);
--price-tag-height: 2rem;
}
css={`
:root {
--price-tag-background: rgba(0, 0, 0, 0.3);
--price-tag-height: 2rem;
}
.price-tag {
background: var(--price-tag-background);
color: #FFF;
.price-tag {
background: var(--price-tag-background);
color: #fff;
/* Center the price */
align-items: center;
display: flex;
justify-content: center;
/* Center the price */
align-items: center;
display: flex;
justify-content: center;
/* Used to position the triangle */
position: relative;
/* Used to position the triangle */
position: relative;
/* Size */
height: var(--price-tag-height);
/* Size */
height: var(--price-tag-height);
/* Spacing */
padding: 0.25rem 0.5rem;
}
/* Spacing */
padding: 0.25rem 0.5rem;
}
/* The triangle */
.price-tag::before {
content: '';
/* The triangle */
.price-tag::before {
content: '';
border-color: transparent var(--price-tag-background) transparent transparent;
border-style: solid;
border-width: calc(var(--price-tag-height) / 2)
calc(var(--price-tag-height) / 2)
calc(var(--price-tag-height) / 2)
0rem;
/* Position */
left: 0px;
position: absolute;
top: 0px;
transform: translate(-100%, 0px);
}
border-color: transparent var(--price-tag-background) transparent transparent;
border-style: solid;
border-width: calc(var(--price-tag-height) / 2) calc(var(--price-tag-height) / 2)
calc(var(--price-tag-height) / 2) 0rem;
/* The dot */
.price-tag::after {
content: '';
/* Position */
left: 0px;
position: absolute;
top: 0px;
transform: translate(-100%, 0px);
}
/* Make it like a cirle */
background: #FFF;
border-radius: 9999rem;
/* Position */
left: 0;
position: absolute;
top: 50%;
transform: translate(-0.5rem, -50%);
/* The dot */
.price-tag::after {
content: '';
/* Size */
height: 0.5rem;
width: 0.5rem;
}
`}
/* Make it like a cirle */
background: #fff;
border-radius: 9999rem;
/* Position */
left: 0;
position: absolute;
top: 50%;
transform: translate(-0.5rem, -50%);
/* Size */
height: 0.5rem;
width: 0.5rem;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div className="price-tag">99.99$</div>
</div>
</BrowserFrame>
</div>
<div className="price-tag">99.99$</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.TriangleButtons]} />
</DetailsLayout>
</PatternLayout>
);
};

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

@@ -1,15 +1,11 @@
/**
* 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 Head from 'next/head';
import { Link } from 'react-router-dom';
import Link from 'next/link';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
@@ -17,20 +13,25 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.PricingTable}>
<PatternLayout pattern={Pattern.PricingTable}>
<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" />
</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
indicate the most popular option.
</div>
<BrowserFrame
html={`
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
You can{' '}
<Link href="/ribbon">
<a>add</a>
</Link>{' '}
<Link href="/corner-ribbon">
<a>a ribbon</a>
</Link>{' '}
to indicate the most popular option.
</div>
<BrowserFrame
html={`
<div class="container">
<!-- Pricing column -->
<div class="container__column">
@@ -51,117 +52,134 @@ html={`
...
</div>
`}
css={`
.container {
/* Content is centered horizontally */
align-items: center;
display: flex;
justify-content: center;
}
css={`
.container {
/* Content is centered horizontally */
align-items: center;
display: flex;
justify-content: center;
}
.container__column {
/* Content is centered vertically */
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
.container__column {
/* Content is centered vertically */
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
/* Make all columns have the same width */
flex: 1;
/* Make all columns have the same width */
flex: 1;
/* OPTIONAL: Space between columns */
margin: 0 8px;
/* OPTIONAL: Space between columns */
margin: 0 8px;
/* OPTIONAL: Border */
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 4px;
}
`}
/* OPTIONAL: Border */
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 4px;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '16px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '16px',
width: '60%',
}}
>
<div
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
width: '60%',
margin: '0 8px',
padding: '16px',
}}
>
<div
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
margin: '0 8px',
padding: '16px',
}}
>
<div style={{ marginBottom: '16px', width: '60%' }}><Rectangle /></div>
<div style={{ marginBottom: '16px' }}><Circle size={64} /></div>
<div style={{ marginBottom: '16px', width: '100%' }}>
<Block numberOfBlocks={10} />
</div>
<div style={{ width: '40%' }}><Rectangle height={32} /></div>
<div style={{ marginBottom: '16px', width: '60%' }}>
<Rectangle />
</div>
<div
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
margin: '0 8px',
padding: '16px',
}}
>
<div style={{ marginBottom: '16px', width: '60%' }}><Rectangle /></div>
<div style={{ marginBottom: '16px' }}><Circle size={64} /></div>
<div style={{ marginBottom: '16px', width: '100%' }}>
<Block numberOfBlocks={20} />
</div>
<div style={{ width: '40%' }}><Rectangle height={32} /></div>
<div style={{ marginBottom: '16px' }}>
<Circle size={64} />
</div>
<div
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
margin: '0 8px',
padding: '16px',
}}
>
<div style={{ marginBottom: '16px', width: '60%' }}><Rectangle /></div>
<div style={{ marginBottom: '16px' }}><Circle size={64} /></div>
<div style={{ marginBottom: '16px', width: '100%' }}>
<Block numberOfBlocks={10} />
</div>
<div style={{ width: '40%' }}><Rectangle height={32} /></div>
<div style={{ marginBottom: '16px', width: '100%' }}>
<Block numberOfBlocks={10} />
</div>
<div style={{ width: '40%' }}>
<Rectangle height={32} />
</div>
</div>
<div
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
margin: '0 8px',
padding: '16px',
}}
>
<div style={{ marginBottom: '16px', width: '60%' }}>
<Rectangle />
</div>
<div style={{ marginBottom: '16px' }}>
<Circle size={64} />
</div>
<div style={{ marginBottom: '16px', width: '100%' }}>
<Block numberOfBlocks={20} />
</div>
<div style={{ width: '40%' }}>
<Rectangle height={32} />
</div>
</div>
<div
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
margin: '0 8px',
padding: '16px',
}}
>
<div style={{ marginBottom: '16px', width: '60%' }}>
<Rectangle />
</div>
<div style={{ marginBottom: '16px' }}>
<Circle size={64} />
</div>
<div style={{ marginBottom: '16px', width: '100%' }}>
<Block numberOfBlocks={10} />
</div>
<div style={{ width: '40%' }}>
<Rectangle height={32} />
</div>
</div>
</div>
</BrowserFrame>
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.FeatureComparison]} />
</DetailsLayout>
</PatternLayout>
);
};

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

@@ -1,33 +1,27 @@
/**
* 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 Head from 'next/head';
import { Pattern } from '../../constants/Pattern';
import useInterval from '../../hooks/useInterval';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
const [progress, setProgress] = React.useState(0);
useInterval(() => {
setProgress((v) => v === 100 ? 0 : v + 1);
setProgress((v) => (v === 100 ? 0 : v + 1));
}, 1 * 100);
return (
<DetailsLayout pattern={Pattern.ProgressBar}>
<PatternLayout pattern={Pattern.ProgressBar}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<div class="container">
<div class="container__progress" style="
/* Width based on the number of percentages */
@@ -38,69 +32,68 @@ html={`
</div>
</div>
`}
css={`
.container {
/* Colors */
background-color: rgba(0, 0, 0, .1);
css={`
.container {
/* Colors */
background-color: rgba(0, 0, 0, 0.1);
/* Rounded border */
border-radius: 9999px;
}
/* Rounded border */
border-radius: 9999px;
}
.container__progress {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
.container__progress {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Colors */
background-color: #357edd;
color: #fff;
/* Colors */
background-color: #357edd;
color: #fff;
/* Rounded border */
border-radius: 9999px;
}
`}
/* Rounded border */
border-radius: 9999px;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
backgroundColor: 'rgba(0, 0, 0, 0.1)',
borderRadius: '9999px',
height: '16px',
width: '50%',
}}
>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.1)',
alignItems: 'center',
backgroundColor: '#357EDD',
borderRadius: '9999px',
height: '16px',
width: '50%',
color: '#FFF',
display: 'flex',
fontSize: '12px',
height: '100%',
justifyContent: 'center',
padding: '4px',
width: `${progress}%`,
}}
>
<div
style={{
alignItems: 'center',
backgroundColor: '#357EDD',
borderRadius: '9999px',
color: '#FFF',
display: 'flex',
fontSize: '12px',
height: '100%',
justifyContent: 'center',
padding: '4px',
width: `${progress}%`,
}}
>
{progress}%
</div>
{progress}%
</div>
</div>
</BrowserFrame>
</div>
</DetailsLayout>
</div>
</BrowserFrame>
</PatternLayout>
);
};

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

@@ -1,15 +1,10 @@
/**
* 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 Head from 'next/head';
import { Heading, Spacer } from '@1milligram/design';
import Heading from '../../components/Heading';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle';
@@ -33,16 +28,15 @@ const Details: React.FC<{}> = () => {
};
return (
<DetailsLayout pattern={Pattern.PropertyList}>
<PatternLayout pattern={Pattern.PropertyList}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<!-- A property item -->
<dl class="container">
<!-- Property name -->
@@ -52,59 +46,76 @@ html={`
<dd>...</dd>
</dl>
`}
css={`
.container {
/* Content is center horizontally */
align-items: center;
display: flex;
css={`
.container {
/* Content is center horizontally */
align-items: center;
display: flex;
/*
/*
The property name will stick to the left, and the value
will stick to the right
*/
justify-content: space-between;
justify-content: space-between;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
/* Spacing */
margin: 0px;
padding: 8px 0px;
}
`}
/* Spacing */
margin: 0px;
padding: 8px 0px;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ width: '40%' }}>
<Item>
<dt style={{ width: '80%' }}><Rectangle /></dt>
<dd><Circle /></dd>
</Item>
<Item>
<dt style={{ width: '60%' }}><Rectangle /></dt>
<dd><Circle /></dd>
</Item>
<Item>
<dt style={{ width: '30%' }}><Rectangle /></dt>
<dd><Circle /></dd>
</Item>
<Item>
<dt style={{ width: '50%' }}><Rectangle /></dt>
<dd><Circle /></dd>
</Item>
</div>
<div style={{ width: '40%' }}>
<Item>
<dt style={{ width: '80%' }}>
<Rectangle />
</dt>
<dd>
<Circle />
</dd>
</Item>
<Item>
<dt style={{ width: '60%' }}>
<Rectangle />
</dt>
<dd>
<Circle />
</dd>
</Item>
<Item>
<dt style={{ width: '30%' }}>
<Rectangle />
</dt>
<dd>
<Circle />
</dd>
</Item>
<Item>
<dt style={{ width: '50%' }}>
<Rectangle />
</dt>
<dd>
<Circle />
</dd>
</Item>
</div>
</BrowserFrame>
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<section>
<Heading title="Use cases" />
<Heading level={2}>Use cases</Heading>
<div style={{ padding: '32px', width: '500px' }}>
<Item>
@@ -125,8 +136,9 @@ css={`
</Item>
</div>
</section>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.DotLeader, Pattern.Menu, Pattern.SplitNavigation]} />
</DetailsLayout>
</PatternLayout>
);
};

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

@@ -1,14 +1,10 @@
/**
* 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 Head from 'next/head';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
@@ -23,7 +19,7 @@ const Details: React.FC<{}> = () => {
const [activeItem, setActiveItem] = React.useState(-1);
const Item: React.FC<ItemProps> = ({ index, title, children }) => {
const isOpened = (index === activeItem);
const isOpened = index === activeItem;
const click = () => setActiveItem(isOpened ? -1 : index);
return (
<>
@@ -53,16 +49,15 @@ const Details: React.FC<{}> = () => {
};
return (
<DetailsLayout pattern={Pattern.QuestionsAndAnswers}>
<PatternLayout pattern={Pattern.QuestionsAndAnswers}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<!-- Each question and answer item -->
<div class="container">
<!-- Heading -->
@@ -77,78 +72,89 @@ html={`
<!-- Answer -->
</div>
`}
css={`
.container {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
css={`
.container {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
.container__heading {
display: flex;
align-items: center;
justify-content: space-between;
}
`}
.container__heading {
display: flex;
align-items: center;
justify-content: space-between;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ width: '60%' }}>
<div
style={{
margin: '0 auto',
paddingBottom: '24px',
width: '200px',
}}
<div style={{ width: '60%' }}>
<div
style={{
margin: '0 auto',
paddingBottom: '24px',
width: '200px',
}}
>
<Rectangle />
</div>
<div
style={{
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
}}
>
<Item
index={0}
title={
<div style={{ width: '40%' }}>
<Rectangle />
</div>
}
>
<Rectangle />
</div>
<div
style={{
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
}}
<Block numberOfBlocks={10} />
</Item>
</div>
<div
style={{
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
}}
>
<Item
index={1}
title={
<div style={{ width: '80%' }}>
<Rectangle />
</div>
}
>
<Item
index={0}
title={<div style={{ width: '40%' }}><Rectangle /></div>}
>
<Block numberOfBlocks={10} />
</Item>
</div>
<div
style={{
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
}}
<Block numberOfBlocks={15} />
</Item>
</div>
<div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)' }}>
<Item
index={2}
title={
<div style={{ width: '60%' }}>
<Rectangle />
</div>
}
>
<Item
index={1}
title={<div style={{ width: '80%' }}><Rectangle /></div>}
>
<Block numberOfBlocks={15} />
</Item>
</div>
<div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)' }}>
<Item
index={2}
title={<div style={{ width: '60%' }}><Rectangle /></div>}
>
<Block numberOfBlocks={10} />
</Item>
</div>
<Block numberOfBlocks={10} />
</Item>
</div>
</div>
</BrowserFrame>
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.Accordion]} />
</DetailsLayout>
</PatternLayout>
);
};

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

@@ -1,13 +1,8 @@
/**
* 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 Head from 'next/head';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
interface RadialProgressProps {
@@ -34,9 +29,7 @@ const RadialProgress: React.FC<RadialProgressProps> = ({ percentages }) => {
</div>
<div
style={{
clip: percentages >= 50
? 'rect(auto, auto, auto, auto)'
: 'rect(0px, 128px, 128px, 64px)',
clip: percentages >= 50 ? 'rect(auto, auto, auto, auto)' : 'rect(0px, 128px, 128px, 64px)',
height: '100%',
left: 0,
position: 'absolute',
@@ -51,7 +44,7 @@ const RadialProgress: React.FC<RadialProgressProps> = ({ percentages }) => {
clip: 'rect(0px, 64px, 128px, 0px)',
height: '100%',
position: 'absolute',
transform: `rotate(${percentages * 360 / 100}deg)`,
transform: `rotate(${(percentages * 360) / 100}deg)`,
width: '100%',
}}
/>
@@ -73,16 +66,15 @@ const RadialProgress: React.FC<RadialProgressProps> = ({ percentages }) => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.RadialProgressBar}>
<PatternLayout pattern={Pattern.RadialProgressBar}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<div class="container">
<!-- Show number of percentages -->
<div class="container__percentages">
@@ -99,90 +91,91 @@ html={`
</div>
</div>
`}
css={`
.container {
position: relative;
}
css={`
.container {
position: relative;
}
.container__percentages {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
.container__percentages {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Rounded border */
border: 12px solid rgba(0, 0, 0, 0.3);
border-radius: 9999px;
/* Rounded border */
border: 12px solid rgba(0, 0, 0, 0.3);
border-radius: 9999px;
/* Size */
height: 128px;
width: 128px;
}
/* Size */
height: 128px;
width: 128px;
}
.container__curve {
/* Position */
left: 0;
position: absolute;
top: 0;
.container__curve {
/* Position */
left: 0;
position: absolute;
top: 0;
/* Take full size */
height: 100%;
width: 100%;
/* Take full size */
height: 100%;
width: 100%;
/* If percentages is less than 50 */
clip: rect(0px, 128px, 128px, 64px);
/* If percentages is less than 50 */
clip: rect(0px, 128px, 128px, 64px);
/* If percentages is greater than or equals to 50 */
clip: rect(auto, auto, auto, auto);
}
/* If percentages is greater than or equals to 50 */
clip: rect(auto, auto, auto, auto);
}
.container__half {
/* Take full size */
height: 100%;
position: absolute;
width: 100%;
.container__half {
/* Take full size */
height: 100%;
position: absolute;
width: 100%;
/*
/*
Background color of curve.
The border width should be the same as the area showing the percentages
*/
border: 12px solid rgb(0, 68, 158);
border-radius: 9999px;
}
border: 12px solid rgb(0, 68, 158);
border-radius: 9999px;
}
.container__half--first {
/* Position */
clip: rect(0px, 64px, 128px, 0px);
transform: rotate(162deg); /* Number of percentages * 360 / 100 */
}
.container__half--first {
/* Position */
clip: rect(0px, 64px, 128px, 0px);
transform: rotate(162deg); /* Number of percentages * 360 / 100 */
}
.container__half--second {
/* Position */
clip: rect(0px, 64px, 128px, 0px);
.container__half--second {
/* Position */
clip: rect(0px, 64px, 128px, 0px);
/* If percentages is less than 50 */
transform: rotate(0deg);
/* If percentages is less than 50 */
transform: rotate(0deg);
/* If percentages is greater than or equals to 50 */
transform: rotate(180deg);
}
`}
/* If percentages is greater than or equals to 50 */
transform: rotate(180deg);
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ marginRight: '16px' }}><RadialProgress percentages={45} /></div>
<RadialProgress percentages={80} />
<div style={{ marginRight: '16px' }}>
<RadialProgress percentages={45} />
</div>
</BrowserFrame>
</div>
</DetailsLayout>
<RadialProgress percentages={80} />
</div>
</BrowserFrame>
</PatternLayout>
);
};

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

@@ -1,16 +1,10 @@
/**
* 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 Head from 'next/head';
import './radio-button-group.css';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
@@ -49,16 +43,15 @@ const Details: React.FC<{}> = () => {
};
return (
<DetailsLayout pattern={Pattern.RadioButtonGroup}>
<PatternLayout pattern={Pattern.RadioButtonGroup}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<div class="container">
<!-- Each radio item -->
<label class="container__label">
@@ -73,81 +66,86 @@ html={`
...
</div>
`}
css={`
.container {
display: flex;
css={`
.container {
display: flex;
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 4px;
height: 32px;
}
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 4px;
height: 32px;
}
.container__label {
/* Center the content */
align-items: center;
display: inline-flex;
.container__label {
/* Center the content */
align-items: center;
display: inline-flex;
border-right: 1px solid rgba(0, 0, 0, 0.3);
padding: 8px;
border-right: 1px solid rgba(0, 0, 0, 0.3);
padding: 8px;
/* For not selected radio */
background-color: transparent;
color: #CCC;
}
/* For not selected radio */
background-color: transparent;
color: #ccc;
}
.container__label:last-child {
/* Remove the right border from the last label */
border-right-color: transparent;
}
.container__label:last-child {
/* Remove the right border from the last label */
border-right-color: transparent;
}
.container__label--selected {
/* For selected radio */
background-color: #00449E;
color: #FFF;
}
.container__label--selected {
/* For selected radio */
background-color: #00449e;
color: #fff;
}
.container__input {
/* Hide it */
display: none;
}
`}
.container__input {
/* Hide it */
display: none;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
className="p-radio-button-group"
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
height: '32px',
}}
>
<div
className="p-radio-button-group"
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
height: '32px',
}}
>
<Radio value='1'>
<div style={{ width: '80px' }}><Rectangle /></div>
</Radio>
<Radio value='2'>
<div style={{ width: '120px' }}><Rectangle /></div>
</Radio>
<Radio value='3'>
<div style={{ width: '100px' }}><Rectangle /></div>
</Radio>
</div>
<Radio value="1">
<div style={{ width: '80px' }}>
<Rectangle />
</div>
</Radio>
<Radio value="2">
<div style={{ width: '120px' }}>
<Rectangle />
</div>
</Radio>
<Radio value="3">
<div style={{ width: '100px' }}>
<Rectangle />
</div>
</Radio>
</div>
</BrowserFrame>
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.CustomCheckboxButton, Pattern.CustomRadioButton]} />
</DetailsLayout>
</PatternLayout>
);
};

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

@@ -1,15 +1,10 @@
/**
* 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 Head from 'next/head';
import { Heading, Spacer } from '@1milligram/design';
import Heading from '../../components/Heading';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
@@ -17,16 +12,15 @@ const Details: React.FC<{}> = () => {
const toggle = () => setFirstChecked((c) => !c);
return (
<DetailsLayout pattern={Pattern.RadioSwitch}>
<PatternLayout pattern={Pattern.RadioSwitch}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<!-- Container -->
<div class="container">
<!-- Radio container -->
@@ -41,107 +35,108 @@ html={`
...
</div>
`}
css={`
.container {
background-color: rgba(0, 0, 0, .1);
border-radius: 9999px;
display: inline-flex;
padding: 4px;
}
css={`
.container {
background-color: rgba(0, 0, 0, 0.1);
border-radius: 9999px;
display: inline-flex;
padding: 4px;
}
.container__label {
border-radius: 9999px;
cursor: pointer;
padding: 4px 8px;
}
.container__label {
border-radius: 9999px;
cursor: pointer;
padding: 4px 8px;
}
.container__label--selected {
/* For selected radio only */
background-color: #357edd;
color: #fff;
}
.container__label--selected {
/* For selected radio only */
background-color: #357edd;
color: #fff;
}
.container__input {
display: none
}
`}
.container__input {
display: none;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
backgroundColor: 'rgba(0, 0, 0, 0.1)',
borderRadius: '9999px',
display: 'inline-flex',
padding: '4px',
}}
>
<div
<label
htmlFor="radio-switch-first"
style={{
backgroundColor: 'rgba(0, 0, 0, 0.1)',
backgroundColor: isFirstChecked ? '#357EDD' : '',
borderRadius: '9999px',
display: 'inline-flex',
padding: '4px',
color: isFirstChecked ? '#FFF' : '',
cursor: 'pointer',
padding: '16px 8px',
}}
>
<label
htmlFor="radio-switch-first"
<input
id="radio-switch-first"
type="radio"
style={{ display: 'none' }}
checked={isFirstChecked}
onChange={toggle}
/>
<div
style={{
backgroundColor: isFirstChecked ? '#357EDD' : '',
borderRadius: '9999px',
color: isFirstChecked ? '#FFF' : '',
cursor: 'pointer',
padding: '16px 8px',
backgroundColor: isFirstChecked ? '#FFF' : 'rgba(0, 0, 0, 0.2)',
borderRadius: '4px',
height: '8px',
width: '64px',
}}
>
<input
id="radio-switch-first"
type="radio"
style={{ display: 'none' }}
checked={isFirstChecked}
onChange={toggle}
/>
<div
style={{
backgroundColor: isFirstChecked ? '#FFF' : 'rgba(0, 0, 0, 0.2)',
borderRadius: '4px',
height: '8px',
width: '64px',
}}
/>
</label>
<label
htmlFor="radio-switch-second"
/>
</label>
<label
htmlFor="radio-switch-second"
style={{
backgroundColor: isFirstChecked ? '' : '#357EDD',
borderRadius: '9999px',
color: isFirstChecked ? '' : '#FFF',
cursor: 'pointer',
padding: '16px 8px',
}}
>
<input
id="radio-switch-second"
type="radio"
style={{ display: 'none' }}
checked={!isFirstChecked}
onChange={toggle}
/>
<div
style={{
backgroundColor: isFirstChecked ? '' : '#357EDD',
borderRadius: '9999px',
color: isFirstChecked ? '' : '#FFF',
cursor: 'pointer',
padding: '16px 8px',
backgroundColor: isFirstChecked ? 'rgba(0, 0, 0, 0.2)' : '#FFF',
borderRadius: '4px',
height: '8px',
width: '64px',
}}
>
<input
id="radio-switch-second"
type="radio"
style={{ display: 'none' }}
checked={!isFirstChecked}
onChange={toggle}
/>
<div
style={{
backgroundColor: isFirstChecked ? 'rgba(0, 0, 0, 0.2)' : '#FFF',
borderRadius: '4px',
height: '8px',
width: '64px',
}}
/>
</label>
</div>
/>
</label>
</div>
</BrowserFrame>
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<section>
<Heading title="Use cases" />
<Heading level={2}>Use cases</Heading>
<div style={{ padding: '32px' }}>
<div
@@ -179,8 +174,9 @@ css={`
</div>
</div>
</section>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.Switch]} />
</DetailsLayout>
</PatternLayout>
);
};

22
pages/rating/Star.tsx
View File

@@ -1,22 +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 './star.css';
interface StarProps {
isActive: boolean;
}
const Star: React.FC<StarProps> = ({ isActive }) => {
return (
<button className="p-rating-star">
{isActive ? '★' : '☆'}
</button>
);
};
export default Star;

122
pages/rating/index.tsx
View File

@@ -1,28 +1,29 @@
/**
* 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 Head from 'next/head';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Star from './Star';
interface StarProps {
isActive: boolean;
}
const Star: React.FC<StarProps> = ({ isActive }) => {
return <button className="p-rating-star">{isActive ? '★' : '☆'}</button>;
};
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.Rating}>
<PatternLayout pattern={Pattern.Rating}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<div class="rating">
<button class="rating__star">☆</button>
<button class="rating__star">☆</button>
@@ -31,66 +32,65 @@ html={`
<button class="rating__star">★</button>
</div>
`}
css={`
.rating {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
css={`
.rating {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
flex-direction: row-reverse;
flex-direction: row-reverse;
font-size: 32px;
}
font-size: 32px;
}
.rating__star:hover,
.rating__star:hover ~ .rating__star {
color: transparent;
}
.rating__star:hover,
.rating__star:hover ~ .rating__star {
color: transparent;
}
/*
/*
Make all previous stars selected when hover on a star
Note that we use \`flex-direction: row-reverse\` on the container
*/
.rating__star:hover:before,
.rating__star:hover ~ .rating__star:before {
color: #00449e;
content: '\\2605';
left: 0;
position: absolute;
}
.rating__star:hover:before,
.rating__star:hover ~ .rating__star:before {
color: #00449e;
content: '\\2605';
left: 0;
position: absolute;
}
.rating__star {
/* Reset styles for button */
background-color: transparent;
border: transparent;
margin: 0 2px;
padding: 0;
.rating__star {
/* Reset styles for button */
background-color: transparent;
border: transparent;
margin: 0 2px;
padding: 0;
/* Used to position the hover state */
position: relative;
}
`}
/* Used to position the hover state */
position: relative;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
}}
>
<div className="p-rating">
<Star isActive={false} />
<Star isActive={false} />
<Star isActive={false} />
<Star isActive={false} />
<Star isActive={true} />
</div>
<div className="p-rating">
<Star isActive={false} />
<Star isActive={false} />
<Star isActive={false} />
<Star isActive={false} />
<Star isActive={true} />
</div>
</BrowserFrame>
</div>
</DetailsLayout>
</div>
</BrowserFrame>
</PatternLayout>
);
};

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

@@ -1,31 +1,25 @@
/**
* 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 Head from 'next/head';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.ResizableElement}>
<PatternLayout pattern={Pattern.ResizableElement}>
<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" />
</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
the cursors which indicate the associated side can be resized.
</div>
<BrowserFrame
html={`
<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 the
cursors which indicate the associated side can be resized.
</div>
<BrowserFrame
html={`
<div class="container">
<!-- The content -->
...
@@ -55,225 +49,224 @@ html={`
<div class="container__resizer container__resizer--lc"></div>
</div>
`}
css={`
.container {
/* Border */
border: 1px dashed rgba(0, 0, 0, 0.3);
css={`
.container {
/* Border */
border: 1px dashed rgba(0, 0, 0, 0.3);
/* Used to position the squares */
position: relative;
}
/* Used to position the squares */
position: relative;
}
.container__resizer {
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
position: absolute;
.container__resizer {
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
position: absolute;
/* Size */
height: 12px;
width: 12px;
}
/* Size */
height: 12px;
width: 12px;
}
.container__resizer--tl {
/* Resize cursor */
cursor: nwse-resize;
.container__resizer--tl {
/* Resize cursor */
cursor: nwse-resize;
/* Positioned at the top left corner */
left: 0px;
top: 0px;
transform: translate(-50%, -50%);
}
/* Positioned at the top left corner */
left: 0px;
top: 0px;
transform: translate(-50%, -50%);
}
.container__resizer--tc {
/* Resize cursor */
cursor: ns-resize;
.container__resizer--tc {
/* Resize cursor */
cursor: ns-resize;
/* Positioned at the middle of top side */
left: 50%;
top: 0px;
transform: translate(-50%, -50%);
}
/* Positioned at the middle of top side */
left: 50%;
top: 0px;
transform: translate(-50%, -50%);
}
.container__resizer--tr {
/* Resize cursor */
cursor: nesw-resize;
.container__resizer--tr {
/* Resize cursor */
cursor: nesw-resize;
/* Positioned at the top right corner */
right: 0px;
top: 0px;
transform: translate(50%, -50%);
}
/* Positioned at the top right corner */
right: 0px;
top: 0px;
transform: translate(50%, -50%);
}
.container__resizer--rc {
/* Resize cursor */
cursor: ew-resize;
.container__resizer--rc {
/* Resize cursor */
cursor: ew-resize;
/* Positioned at the middle of right side */
right: 0px;
top: 50%;
transform: translate(50%, -50%);
}
/* Positioned at the middle of right side */
right: 0px;
top: 50%;
transform: translate(50%, -50%);
}
.container__resizer--rb {
/* Resize cursor */
cursor: nwse-resize;
.container__resizer--rb {
/* Resize cursor */
cursor: nwse-resize;
/* Positioned at the right bottom corner */
bottom: 0px;
right: 0px;
transform: translate(50%, 50%);
}
/* Positioned at the right bottom corner */
bottom: 0px;
right: 0px;
transform: translate(50%, 50%);
}
.container__resizer--bc {
/* Resize cursor */
cursor: ns-resize;
.container__resizer--bc {
/* Resize cursor */
cursor: ns-resize;
/* Positioned at the middle of bottom side */
bottom: 0px;
right: 50%;
transform: translate(50%, 50%);
}
/* Positioned at the middle of bottom side */
bottom: 0px;
right: 50%;
transform: translate(50%, 50%);
}
.container__resizer--bl {
/* Resize cursor */
cursor: nesw-resize;
.container__resizer--bl {
/* Resize cursor */
cursor: nesw-resize;
/* Positioned at the bottom left corner */
bottom: 0px;
left: 0px;
transform: translate(-50%, 50%);
}
/* Positioned at the bottom left corner */
bottom: 0px;
left: 0px;
transform: translate(-50%, 50%);
}
.container__resizer--lc {
/* Resize cursor */
cursor: ew-resize;
.container__resizer--lc {
/* Resize cursor */
cursor: ew-resize;
/* Positioned at the middle of left side */
left: 0px;
top: 50%;
transform: translate(-50%, -50%);
}
`}
/* Positioned at the middle of left side */
left: 0px;
top: 50%;
transform: translate(-50%, -50%);
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
border: '1px dashed rgba(0, 0, 0, 0.3)',
height: '200px',
position: 'relative',
width: '200px',
}}
>
<div
style={{
border: '1px dashed rgba(0, 0, 0, 0.3)',
height: '200px',
position: 'relative',
width: '200px',
border: '1px solid rgba(0, 0, 0, 0.3)',
cursor: 'nwse-resize',
height: '12px',
left: 0,
position: 'absolute',
top: 0,
transform: 'translate(-50%, -50%)',
width: '12px',
}}
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
cursor: 'nwse-resize',
height: '12px',
left: 0,
position: 'absolute',
top: 0,
transform: 'translate(-50%, -50%)',
width: '12px',
}}
/>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
cursor: 'ns-resize',
height: '12px',
left: '50%',
position: 'absolute',
top: 0,
transform: 'translate(-50%, -50%)',
width: '12px',
}}
/>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
cursor: 'nesw-resize',
height: '12px',
position: 'absolute',
right: 0,
top: 0,
transform: 'translate(50%, -50%)',
width: '12px',
}}
/>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
cursor: 'ew-resize',
height: '12px',
position: 'absolute',
right: 0,
top: '50%',
transform: 'translate(50%, -50%)',
width: '12px',
}}
/>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
bottom: 0,
cursor: 'nwse-resize',
height: '12px',
position: 'absolute',
right: 0,
transform: 'translate(50%, 50%)',
width: '12px',
}}
/>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
bottom: 0,
cursor: 'ns-resize',
height: '12px',
position: 'absolute',
right: '50%',
transform: 'translate(50%, 50%)',
width: '12px',
}}
/>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
bottom: 0,
cursor: 'nesw-resize',
height: '12px',
left: 0,
position: 'absolute',
transform: 'translate(-50%, 50%)',
width: '12px',
}}
/>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
cursor: 'ew-resize',
height: '12px',
left: 0,
position: 'absolute',
top: '50%',
transform: 'translate(-50%, -50%)',
width: '12px',
}}
/>
</div>
/>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
cursor: 'ns-resize',
height: '12px',
left: '50%',
position: 'absolute',
top: 0,
transform: 'translate(-50%, -50%)',
width: '12px',
}}
/>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
cursor: 'nesw-resize',
height: '12px',
position: 'absolute',
right: 0,
top: 0,
transform: 'translate(50%, -50%)',
width: '12px',
}}
/>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
cursor: 'ew-resize',
height: '12px',
position: 'absolute',
right: 0,
top: '50%',
transform: 'translate(50%, -50%)',
width: '12px',
}}
/>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
bottom: 0,
cursor: 'nwse-resize',
height: '12px',
position: 'absolute',
right: 0,
transform: 'translate(50%, 50%)',
width: '12px',
}}
/>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
bottom: 0,
cursor: 'ns-resize',
height: '12px',
position: 'absolute',
right: '50%',
transform: 'translate(50%, 50%)',
width: '12px',
}}
/>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
bottom: 0,
cursor: 'nesw-resize',
height: '12px',
left: 0,
position: 'absolute',
transform: 'translate(-50%, 50%)',
width: '12px',
}}
/>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
cursor: 'ew-resize',
height: '12px',
left: 0,
position: 'absolute',
top: '50%',
transform: 'translate(-50%, -50%)',
width: '12px',
}}
/>
</div>
</BrowserFrame>
</div>
</DetailsLayout>
</div>
</BrowserFrame>
</PatternLayout>
);
};

226
pages/ribbon/index.tsx
View File

@@ -1,29 +1,24 @@
/**
* 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 Head from 'next/head';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.Ribbon}>
<PatternLayout pattern={Pattern.Ribbon}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<div class="container">
<!-- The content -->
...
@@ -41,137 +36,136 @@ html={`
<div class="container__side container__side--right"></div>
</div>
`}
css={`
.container {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
css={`
.container {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Background color */
background-color: #BBB;
/* Background color */
background-color: #bbb;
/* Size */
height: 32px;
/* Size */
height: 32px;
/* Use to position the corners */
position: relative;
}
/* Use to position the corners */
position: relative;
}
.container__side {
bottom: -8px;
position: absolute;
.container__side {
bottom: -8px;
position: absolute;
/* Displayed under the container */
z-index: -1;
/* Displayed under the container */
z-index: -1;
/* Background */
border: 16px solid #CCC;
border-left-color: transparent;
}
/* Background */
border: 16px solid #ccc;
border-left-color: transparent;
}
.container__side--left {
/* Position */
left: -24px;
}
.container__side--left {
/* Position */
left: -24px;
}
.container__side--right {
/* Position */
right: -24px;
}
.container__side--right {
/* Position */
right: -24px;
}
.container__triangle {
position: absolute;
top: 100%;
.container__triangle {
position: absolute;
top: 100%;
border: 8px solid transparent;
border-bottom-width: 0;
border-top-color: #AAA;
}
border: 8px solid transparent;
border-bottom-width: 0;
border-top-color: #aaa;
}
.container__triangle--left {
border-right-width: 0;
left: 0;
}
.container__triangle--left {
border-right-width: 0;
left: 0;
}
.container__triangle--right {
border-left-width: 0;
right: 0;
}
`}
.container__triangle--right {
border-left-width: 0;
right: 0;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
backgroundColor: '#BBB',
display: 'flex',
flexDirection: 'column',
height: '100%',
height: '32px',
justifyContent: 'center',
padding: '8px',
padding: '0 16px',
position: 'relative',
width: '150px',
}}
>
<Rectangle />
<div
style={{
alignItems: 'center',
backgroundColor: '#BBB',
display: 'flex',
height: '32px',
justifyContent: 'center',
padding: '0 16px',
position: 'relative',
width: '150px',
border: '16px solid #CCC',
borderLeftColor: 'transparent',
bottom: '-8px',
left: '-24px',
position: 'absolute',
zIndex: -1,
}}
>
<Rectangle />
<div
style={{
border: '16px solid #CCC',
borderLeftColor: 'transparent',
bottom: '-8px',
left: '-24px',
position: 'absolute',
zIndex: -1,
}}
/>
<div
style={{
border: '8px solid transparent',
borderBottomWidth: 0,
borderRightWidth: 0,
borderTopColor: '#AAA',
left: 0,
position: 'absolute',
top: '100%',
}}
/>
<div
style={{
border: '8px solid transparent',
borderBottomWidth: 0,
borderLeftWidth: 0,
borderTopColor: '#AAA',
position: 'absolute',
right: 0,
top: '100%',
}}
/>
<div
style={{
border: '16px solid #CCC',
borderRightColor: 'transparent',
bottom: '-8px',
position: 'absolute',
right: '-24px',
zIndex: -1,
}}
/>
</div>
/>
<div
style={{
border: '8px solid transparent',
borderBottomWidth: 0,
borderRightWidth: 0,
borderTopColor: '#AAA',
left: 0,
position: 'absolute',
top: '100%',
}}
/>
<div
style={{
border: '8px solid transparent',
borderBottomWidth: 0,
borderLeftWidth: 0,
borderTopColor: '#AAA',
position: 'absolute',
right: 0,
top: '100%',
}}
/>
<div
style={{
border: '16px solid #CCC',
borderRightColor: 'transparent',
bottom: '-8px',
position: 'absolute',
right: '-24px',
zIndex: -1,
}}
/>
</div>
</BrowserFrame>
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.CornerRibbon]} />
</DetailsLayout>
</PatternLayout>
);
};

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

@@ -1,29 +1,23 @@
/**
* 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 Head from 'next/head';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.SameHeightColumns}>
<PatternLayout pattern={Pattern.SameHeightColumns}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<div class="container">
<!-- Column -->
<div class="container__column">
@@ -43,99 +37,102 @@ html={`
...
</div>
`}
css={`
.container {
display: flex;
}
css={`
.container {
display: flex;
}
.container__column {
flex: 1;
/* Space between columns */
margin: 0 8px;
.container__column {
flex: 1;
/* Space between columns */
margin: 0 8px;
/* Layout each column */
display: flex;
flex-direction: column;
}
/* Layout each column */
display: flex;
flex-direction: column;
}
.container__content {
/* Take available height */
flex: 1;
}
`}
.container__content {
/* Take available height */
flex: 1;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ display: 'flex', height: '100%', width: '100%' }}>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.2)',
borderRadius: '4px',
display: 'flex',
flex: 1,
flexDirection: 'column',
margin: '0 8px',
}}
>
<Rectangle height={200} />
<div style={{ flex: 1, padding: '16px' }}>
<Block numberOfBlocks={10} />
</div>
<div style={{ padding: '16px', width: '128px' }}>
<Rectangle height={32} />
</div>
<div style={{ display: 'flex', height: '100%', width: '100%' }}>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.2)',
borderRadius: '4px',
display: 'flex',
flex: 1,
flexDirection: 'column',
margin: '0 8px',
}}
>
<Rectangle height={200} />
<div style={{ flex: 1, padding: '16px' }}>
<Block numberOfBlocks={10} />
</div>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.2)',
borderRadius: '4px',
display: 'flex',
flex: 1,
flexDirection: 'column',
margin: '0 8px',
}}
>
<Rectangle height={200} />
<div style={{ flex: 1, padding: '16px' }}>
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={15} /></div>
<div style={{ padding: '16px', width: '128px' }}>
<Rectangle height={32} />
</div>
</div>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.2)',
borderRadius: '4px',
display: 'flex',
flex: 1,
flexDirection: 'column',
margin: '0 8px',
}}
>
<Rectangle height={200} />
<div style={{ flex: 1, padding: '16px' }}>
<div style={{ marginBottom: '16px' }}>
<Block numberOfBlocks={15} />
</div>
<Block numberOfBlocks={5} />
</div>
<div style={{ padding: '16px', width: '128px' }}>
<Rectangle height={32} />
</div>
</div>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.2)',
borderRadius: '4px',
display: 'flex',
flex: 1,
flexDirection: 'column',
margin: '0 8px',
}}
>
<Rectangle height={200} />
<div style={{ flex: 1, padding: '16px' }}>
<div style={{ marginBottom: '16px' }}>
<Block numberOfBlocks={5} />
</div>
<div style={{ padding: '16px', width: '128px' }}>
<Rectangle height={32} />
</div>
<Block numberOfBlocks={10} />
</div>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.2)',
borderRadius: '4px',
display: 'flex',
flex: 1,
flexDirection: 'column',
margin: '0 8px',
}}
>
<Rectangle height={200} />
<div style={{ flex: 1, padding: '16px' }}>
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={5} /></div>
<Block numberOfBlocks={10} />
</div>
<div style={{ padding: '16px', width: '128px' }}>
<Rectangle height={32} />
</div>
<div style={{ padding: '16px', width: '128px' }}>
<Rectangle height={32} />
</div>
</div>
</div>
</BrowserFrame>
</div>
</DetailsLayout>
</div>
</BrowserFrame>
</PatternLayout>
);
};

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

@@ -1,28 +1,22 @@
/**
* 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 Head from 'next/head';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.SearchBox}>
<PatternLayout pattern={Pattern.SearchBox}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<div class="container">
<!-- Text input -->
<input type="text" class="container__input" />
@@ -31,83 +25,82 @@ html={`
...
</div>
`}
css={`
.container {
display: flex;
css={`
.container {
display: flex;
/* If you want to place the icon before the text input */
flex-direction: row-reverse;
/* If you want to place the icon before the text input */
flex-direction: row-reverse;
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
}
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
}
.container__input {
border-color: transparent;
/* Take available width */
flex: 1;
}
`}
.container__input {
border-color: transparent;
/* Take available width */
flex: 1;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ width: '256px' }}>
<div
<div style={{ width: '256px' }}>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '2px',
display: 'flex',
marginBottom: '16px',
}}
>
<input
type="text"
placeholder="Search"
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '2px',
display: 'flex',
marginBottom: '16px',
borderColor: 'transparent',
flex: 1,
padding: '4px',
}}
>
<input
type="text"
placeholder="Search"
style={{
borderColor: 'transparent',
flex: 1,
padding: '4px',
}}
/>
<div style={{ padding: '8px' }}>
<Circle />
</div>
/>
<div style={{ padding: '8px' }}>
<Circle />
</div>
</div>
<div
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '2px',
display: 'flex',
flexDirection: 'row-reverse',
}}
>
<input
type="text"
placeholder="Search"
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '2px',
display: 'flex',
flexDirection: 'row-reverse',
borderColor: 'transparent',
flex: 1,
padding: '4px',
}}
>
<input
type="text"
placeholder="Search"
style={{
borderColor: 'transparent',
flex: 1,
padding: '4px',
}}
/>
<div style={{ padding: '8px' }}>
<Circle />
</div>
/>
<div style={{ padding: '8px' }}>
<Circle />
</div>
</div>
</div>
</BrowserFrame>
</div>
</DetailsLayout>
</div>
</BrowserFrame>
</PatternLayout>
);
};

121
pages/separator/index.tsx
View File

@@ -1,28 +1,22 @@
/**
* 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 Head from 'next/head';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.Separator}>
<PatternLayout pattern={Pattern.Separator}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<div class="container">
<!-- Text -->
<div class="container__content">
@@ -33,76 +27,77 @@ html={`
<div class="container__separator"></div>
</div>
`}
css={`
.container {
/* Content is centered horizontally */
align-items: center;
display: flex;
css={`
.container {
/* Content is centered horizontally */
align-items: center;
display: flex;
/* Used to set the position of text */
position: relative;
}
/* Used to set the position of text */
position: relative;
}
.container__content {
/* We won't see the separator line */
background: #FFF;
.container__content {
/* We won't see the separator line */
background: #fff;
/* Displayed at the center of container */
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
/* Displayed at the center of container */
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
.container__separator {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
height: 1px;
width: 100%;
}
`}
.container__separator {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
height: 1px;
width: 100%;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
position: 'relative',
width: '60%',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
position: 'relative',
width: '60%',
backgroundColor: '#FFF',
left: '50%',
padding: '0 8px',
position: 'absolute',
top: '50%',
transform: 'translate(-50%, -50%)',
}}
>
<div
style={{
backgroundColor: '#FFF',
left: '50%',
padding: '0 8px',
position: 'absolute',
top: '50%',
transform: 'translate(-50%, -50%)',
}}
>
<div style={{ width: '128px' }}><Rectangle height={16} /></div>
<div style={{ width: '128px' }}>
<Rectangle height={16} />
</div>
<div
style={{
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
height: '1px',
width: '100%',
}}
/>
</div>
<div
style={{
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
height: '1px',
width: '100%',
}}
/>
</div>
</BrowserFrame>
</div>
</DetailsLayout>
</div>
</BrowserFrame>
</PatternLayout>
);
};

117
pages/sidebar/index.tsx
View File

@@ -1,29 +1,23 @@
/**
* 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 Head from 'next/head';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.Sidebar}>
<PatternLayout pattern={Pattern.Sidebar}>
<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" />
</Head>
<div className='p-8 pb-20'>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>Try to scroll the main content!</div>
<BrowserFrame
html={`
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>Try to scroll the main content!</div>
<BrowserFrame
html={`
<div class="container">
<!-- Sidebar -->
<aside class="container__sidebar">
@@ -36,55 +30,68 @@ html={`
</main>
</div>
`}
css={`
.container {
display: flex;
}
css={`
.container {
display: flex;
}
.container__sidebar {
width: 30%;
}
.container__sidebar {
width: 30%;
}
.container__main {
/* Take the remaining width */
flex: 1;
.container__main {
/* Take the remaining width */
flex: 1;
/* Make it scrollable */
overflow: auto;
}
`}
>
<div style={{ display: 'flex', height: '100%' }}>
<div
style={{
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
flexDirection: 'column',
justifyContent: 'flex-end',
padding: '16px',
width: '30%',
}}
>
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={5} /></div>
<div style={{ width: '80%' }}><Block numberOfBlocks={4} /></div>
/* Make it scrollable */
overflow: auto;
}
`}
>
<div style={{ display: 'flex', height: '100%' }}>
<div
style={{
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
flexDirection: 'column',
justifyContent: 'flex-end',
padding: '16px',
width: '30%',
}}
>
<div style={{ marginBottom: '16px' }}>
<Block numberOfBlocks={5} />
</div>
<div
style={{
flex: 1,
overflow: 'auto',
padding: '16px',
}}
>
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
<div style={{ width: '80%' }}><Block numberOfBlocks={10} /></div>
<div style={{ width: '80%' }}>
<Block numberOfBlocks={4} />
</div>
</div>
</BrowserFrame>
</div>
</DetailsLayout>
<div
style={{
flex: 1,
overflow: 'auto',
padding: '16px',
}}
>
<div style={{ marginBottom: '32px' }}>
<Block numberOfBlocks={20} />
</div>
<div style={{ marginBottom: '32px' }}>
<Block numberOfBlocks={20} />
</div>
<div style={{ marginBottom: '32px' }}>
<Block numberOfBlocks={20} />
</div>
<div style={{ marginBottom: '32px' }}>
<Block numberOfBlocks={20} />
</div>
<div style={{ width: '80%' }}>
<Block numberOfBlocks={10} />
</div>
</div>
</div>
</BrowserFrame>
</PatternLayout>
);
};

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

@@ -1,20 +1,16 @@
/**
* 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 Head from 'next/head';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.SimpleGrid}>
<PatternLayout pattern={Pattern.SimpleGrid}>
<Head>
<meta name="description" content="Create a simple grid with CSS flexbox" />
<meta name="og:description" content="Create a simple grid with CSS flexbox" />
@@ -22,7 +18,7 @@ const Details: React.FC<{}> = () => {
<meta name="keywords" content="css flexbox, css flexbox grid, css grid, css layout" />
</Head>
<BrowserFrame
html={`
html={`
<!-- Row -->
<div class="row">
<!--Cell with given width. Replace 25% with whatever you want -->
@@ -34,28 +30,28 @@ html={`
</div>
</div>
`}
css={`
.row {
display: flex;
css={`
.row {
display: flex;
margin-left: -8px;
margin-right: -8px;
}
margin-left: -8px;
margin-right: -8px;
}
.row__cell {
padding-left: 8px;
padding-right: 8px;
}
.row__cell {
padding-left: 8px;
padding-right: 8px;
}
/* Cell with given width. Replace 25% with whatever you want */
.row__cell--1/4 {
flex: 0 0 25%;
}
/* Cell with given width. Replace 25% with whatever you want */
.row__cell--1/4 {
flex: 0 0 25%;
}
.row__cell--fill {
flex: 1;
}
`}
.row__cell--fill {
flex: 1;
}
`}
>
<div
style={{
@@ -140,8 +136,9 @@ css={`
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.CardLayout, Pattern.MasonryGrid]} />
</DetailsLayout>
</PatternLayout>
);
};

115
pages/slider/index.tsx
View File

@@ -1,29 +1,23 @@
/**
* 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 Head from 'next/head';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.Slider}>
<PatternLayout pattern={Pattern.Slider}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<div class="container">
<!-- Left side -->
<!-- Width based on the current value -->
@@ -36,71 +30,74 @@ html={`
<div class="container__right"></div>
</div>
`}
css={`
.container {
/* Content is centered horizontally */
align-items: center;
display: flex;
css={`
.container {
/* Content is centered horizontally */
align-items: center;
display: flex;
/* Size */
height: 32px;
}
/* Size */
height: 32px;
}
.container__left {
height: 2px;
.container__left {
height: 2px;
/* Colors */
background-color: rgba(0, 0, 0, .3);
}
/* Colors */
background-color: rgba(0, 0, 0, 0.3);
}
.container__circle {
/* Size */
height: 32px;
width: 32px;
.container__circle {
/* Size */
height: 32px;
width: 32px;
/* Rounded border */
border-radius: 9999px;
/* Rounded border */
border-radius: 9999px;
/* Colors */
background-color: rgba(0, 0, 0, .3);
}
/* Colors */
background-color: rgba(0, 0, 0, 0.3);
}
.container__right {
/* Take the remaining width */
flex: 1;
height: 2px;
.container__right {
/* Take the remaining width */
flex: 1;
height: 2px;
/* Colors */
background-color: rgba(0, 0, 0, .3);
}
`}
/* Colors */
background-color: rgba(0, 0, 0, 0.3);
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
height: '16px',
width: '256px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '16px',
width: '256px',
}}
>
<div style={{ width: '20%' }}><Rectangle height={2} /></div>
<Circle size={32} />
<div style={{ flex: 1 }}><Rectangle height={2} /></div>
<div style={{ width: '20%' }}>
<Rectangle height={2} />
</div>
<Circle size={32} />
<div style={{ flex: 1 }}>
<Rectangle height={2} />
</div>
</div>
</BrowserFrame>
</div>
</DetailsLayout>
</div>
</BrowserFrame>
</PatternLayout>
);
};

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

@@ -1,14 +1,10 @@
/**
* 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 Head from 'next/head';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { DetailsLayout } from '../../layouts/DetailsLayout';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Triangle from '../../placeholders/Triangle';
@@ -19,16 +15,15 @@ const Details: React.FC<{}> = () => {
const change = (e: React.ChangeEvent<HTMLInputElement>) => setValue(parseInt(e.target.value, 10));
return (
<DetailsLayout pattern={Pattern.SpinButton}>
<PatternLayout pattern={Pattern.SpinButton}>
<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" />
</Head>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<BrowserFrame
html={`
<div class="container">
<!-- Input -->
<input type="text" class="container__input" />
@@ -47,97 +42,97 @@ html={`
</div>
</div>
`}
css={`
.container {
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 2px;
display: flex;
}
css={`
.container {
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 2px;
display: flex;
}
.container__input {
border-color: transparent;
margin-right: 4px;
padding: 4px;
width: 100px;
}
.container__input {
border-color: transparent;
margin-right: 4px;
padding: 4px;
width: 100px;
}
.container__buttons {
/* Content is centered vertically */
display: flex;
flex-direction: column;
justify-content: center;
}
.container__buttons {
/* Content is centered vertically */
display: flex;
flex-direction: column;
justify-content: center;
}
.container__button {
border-color: transparent;
/* Make buttons have the same height */
flex: 1,
}
`}
.container__button {
border-color: transparent;
/* Make buttons have the same height */
flex: 1;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
}}
>
<div
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '2px',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
}}
>
<input
type="text"
style={{
borderColor: 'transparent',
marginRight: '4px',
padding: '4px',
width: '100px',
}}
value={value}
onChange={change}
/>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '2px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
}}
>
<input
type="text"
<button
style={{
borderColor: 'transparent',
marginRight: '4px',
padding: '4px',
width: '100px',
}}
value={value}
onChange={change}
/>
<div
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
cursor: 'pointer',
flex: 1,
padding: '4px 4px 2px 4px',
}}
onClick={increase}
>
<button
style={{
borderColor: 'transparent',
cursor: 'pointer',
flex: 1,
padding: '4px 4px 2px 4px',
}}
onClick={increase}
>
<Triangle size={6} corner="t" />
</button>
<button
style={{
borderColor: 'transparent',
cursor: 'pointer',
flex: 1,
padding: '2px 4px 4px 4px',
}}
onClick={decrease}
>
<Triangle size={6} corner="b" />
</button>
</div>
<Triangle size={6} corner="t" />
</button>
<button
style={{
borderColor: 'transparent',
cursor: 'pointer',
flex: 1,
padding: '2px 4px 4px 4px',
}}
onClick={decrease}
>
<Triangle size={6} corner="b" />
</button>
</div>
</div>
</BrowserFrame>
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.StepperInput, Pattern.Voting]} />
</DetailsLayout>
</PatternLayout>
);
};

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