/
docs.grid.jsx
139 lines (128 loc) · 4.35 KB
/
docs.grid.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
import { useRef, useState } from "react";
import Code from "~/components/Code";
import Heading from "~/components/Heading";
import Link from "~/components/Link";
import Content from "~/components/docs/Content";
import EditOnGithub from "~/components/docs/EditOnGithub";
import Header from "~/components/docs/Header";
import TableOfContents from "~/components/docs/TableOfContents";
import Minus from "~/components/icons/Minus";
import Plus from "~/components/icons/Plus";
import metaData from "~/data/meta";
const { titleSuffix } = metaData;
export const meta = () => [
{ title: `Grid ${titleSuffix}` },
{
name: "description",
content: "Create minimal responsive layouts with .grid to enable auto-layout columns.",
},
];
export default function Grid() {
const syntaxRef = useRef();
const aboutRef = useRef();
const [columns, setColumns] = useState(4);
const minColumns = 1;
const maxColumns = 10;
function handleAddColumn() {
setColumns(Math.min(columns + 1, maxColumns));
}
function handleRemoveColumn() {
setColumns(Math.max(columns - 1, minColumns));
}
return (
<>
{/* Header */}
<Header
title="Grid"
description={
<>
Create minimal responsive layouts with <code>.grid</code> to enable
auto-layout columns.
</>
}
/>
{/* Table of contents */}
<TableOfContents
data={[
{
anchor: "",
title: "Syntax",
ref: syntaxRef,
},
{
anchor: "about-css-grids",
title: "About CSS Grids",
ref: aboutRef,
},
]}
/>
{/* Content */}
<Content>
<section ref={syntaxRef}>
<p className="btn-group">
<button className="secondary" onClick={handleAddColumn}>
<Plus />
Add column
</button>
<button className="secondary" onClick={handleRemoveColumn}>
<Minus />
Remove column
</button>
</p>
<article className="component" aria-label="Grid example">
<div className="grid">
{Array.from({ length: columns }, (_, i) => {
const index = i + 1;
return <div key={index}>{index}</div>;
})}
</div>
<Code as="footer">{`<div class="grid">
${Array.from({ length: columns }, (_, i) => {
const index = i + 1;
return `${i > 0 ? " " : ""}<div>${index}</div>`;
}).join("\n")}
</div>`}</Code>
</article>
<p>
Columns intentionally collapse on small devices (<code>{`<768px`}</code>).
</p>
<p>
<code>.grid</code> is not available in the{" "}
<Link to="/docs/classless">class‑less version</Link>.
</p>
</section>
<section ref={aboutRef}>
<Heading level={2} anchor="about-css-grids">
About CSS Grids
</Heading>
<p>As Pico focuses on native HTML elements, we kept this grid system minimalist.</p>
<p>
A complete grid system in flexbox, with all the ordering, offsetting, and breakpoints
utilities, can be heavier than the total size of the Pico library. Not really in the
Pico spirit.
</p>
<p>
If you need a quick way to prototype or build a complex layout, you can look at{" "}
<strong>Flexbox grid layouts</strong>—for example,{" "}
<a href="https://getbootstrap.com/docs/4.2/getting-started/contents/">
Bootstrap Grid System
</a>{" "}
or <a href="http://flexboxgrid.com/">Flexbox Grid</a>.
</p>
<p>
If you need a light and custom grid, you can look at{" "}
<strong>CSS Grid Generators</strong>—for example,{" "}
<a href="https://cssgrid-generator.netlify.com/">CSS Grid Generator</a>,{" "}
<a href="http://grid.layoutit.com/">Layoutit!</a>, or{" "}
<a href="https://griddy.io/">Griddy</a>.
</p>
<p>
Alternatively, you can <a href="https://learncssgrid.com/">learn about CSS Grid</a>.
</p>
</section>
{/* Edit on GitHub */}
<EditOnGithub file="docs.grid.jsx" />
</Content>
</>
);
}