picocss.com/app/routes/docs.container.jsx at main · picocss/picocss.com · GitHub

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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
import { useRef } 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 metaData from "~/data/meta";

const { titleSuffix } = metaData;

export const meta = () => [
  { title: `Container ${titleSuffix}` },
  {
    name: "description",
    content: "Use .container for a centered viewport or .container-fluid for a full-width layout.",
  },
];

const breakpoints = [
  {
    key: "xs",
    name: "Extra small",
    breakpoint: "<576px",
    viewport: "100%",
  },
  {
    key: "sm",
    name: "Small",
    breakpoint: "≥576px",
    viewport: "510px",
  },
  {
    key: "md",
    name: "Medium",
    breakpoint: "≥768px",
    viewport: "700px",
  },
  {
    key: "lg",
    name: "Large",
    breakpoint: "≥1024px",
    viewport: "950px",
  },
  {
    key: "xl",
    name: "Extra large",
    breakpoint: "≥1280px",
    viewport: "1200px",
  },
  {
    key: "xxl",
    name: "Extra extra large",
    breakpoint: "≥1536px",
    viewport: "1450px",
  },
];

export default function Container() {
  const breakpointsRef = useRef();
  const fixedRef = useRef();
  const fluidRef = useRef();
  const semanticRef = useRef();

  return (
    <>
      {/* Header */}
      <Header
        title="Container"
        description={
          <>
            Use <code>.container</code> for a centered&nbsp;viewport or{" "}
            <code>.container-fluid</code> for a full-width&nbsp;layout.
          </>
        }
      />

      {/* Table of content */}
      <TableOfContents
        data={[
          {
            anchor: "",
            title: "Breakpoints",
            ref: breakpointsRef,
          },
          {
            anchor: "fixed-width",
            title: "Fixed width",
            ref: fixedRef,
          },
          {
            anchor: "fluid-width",
            title: "Fluid width",
            ref: fluidRef,
          },
          {
            anchor: "semantic-containers",
            title: "Semantic containers",
            ref: semanticRef,
          },
        ]}
      />

      {/* Content */}
      <Content>
        <section ref={breakpointsRef}>
          <p>
            Pico includes six default breakpoints. These breakpoints can be customized with{" "}
            <Link to="/docs/sass">Sass</Link>.
          </p>
          <table className="striped">
            <thead>
              <tr>
                <th>Device</th>
                <th>Breakpoint</th>
                <th>Viewport</th>
              </tr>
            </thead>
            <tbody>
              {breakpoints.map((breakpoint) => (
                <tr key={breakpoint.key}>
                  <td>{breakpoint.name}</td>
                  <td>{breakpoint.breakpoint}</td>
                  <td>{breakpoint.viewport}</td>
                </tr>
              ))}
            </tbody>
          </table>
          <p>
            <code>.container</code> and{" "}
            <code>.container-fluid</code> are not available in the{" "}
            <Link to="/docs/classless">class&#8209;less&nbsp;version</Link> (see{" "}
            <Link to="#semantic-containers">Semantic containers</Link> for an alternative).
          </p>
        </section>

        <section ref={fixedRef}>
          <Heading level={2} anchor="fixed-width">
            Fixed width
          </Heading>
          <p>
            <code>.container</code> provides a centered container with a fixed
            width.
          </p>
          <Code>{`<body>
  <main class="container">
    ...
  </main>
</body>`}</Code>
        </section>

        <section ref={fluidRef}>
          <Heading level={2} anchor="fluid-width">
            Fluid width
          </Heading>
          <p>
            <code>.container-fluid</code> provides a full-width container.
          </p>
          <Code>{`<body>
  <main class="container-fluid">
    ...
  </main>
</body>`}</Code>
        </section>

        <section ref={semanticRef}>
          <Heading level={2} anchor="semantic-containers">
            Semantic containers
          </Heading>
          <p>
            In the classless version, <Code display="inline">{`<header>`}</Code>,{" "}
            <Code display="inline">{`<main>`}</Code>, and <Code display="inline">{`<footer>`}</Code>{" "}
            inside <Code display="inline">{`<body>`}</Code> act as containers to define a centered
            or a fluid viewport.
          </p>
          <p>
            See <Link to="/docs/classless">Class-less version</Link>.
          </p>
        </section>

        {/* Edit on GitHub */}
        <EditOnGithub file="docs.container.jsx" />
      </Content>
    </>
  );
}