picocss.com/app/routes/docs.classless.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
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 examples from "~/data/examples";
import metaData from "~/data/meta";

const { titleSuffix, cdnBaseUrl } = metaData;
const classlessExample = examples.find((example) => example.title === "Class-less preview");

export const meta = () => [
  { title: `Class-less version ${titleSuffix}` },
  {
    name: "description",
    content:
      "Embrace minimalism with Pico’s .classless version, a semantic option for wild HTML purists who prefer a stripped-down approach.",
  },
];

export default function Classless() {
  const introductionRef = useRef();
  const usageRef = useRef();
  const rootContainerRef = useRef();

  return (
    <>
      {/* Header */}
      <Header
        title="Class-less version"
        description={
          <>
            Embrace minimalism with Pico’s <code>.classless</code> version, a semantic&nbsp;option
            for wild&nbsp;HTML&nbsp;purists who prefer a stripped-down&nbsp;approach.
          </>
        }
      />

      {/* Table of content */}
      <TableOfContents
        data={[
          {
            anchor: "",
            title: "Semantic containers",
            ref: introductionRef,
          },
          {
            anchor: "usage",
            title: "Usage",
            ref: usageRef,
          },
          {
            anchor: "root-container",
            title: "Custom root container",
            ref: rootContainerRef,
          },
        ]}
      />

      {/* Content */}
      <Content>
        <section ref={introductionRef}>
          <p>
            Pico provides a <code>.classless</code> version (
            <Link to={classlessExample.links.preview}>example</Link>
            ).
          </p>
          <p>
            In this 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{" "}
            <Link to="/docs/container">containers</Link> to define a centered or a fluid viewport.
          </p>
          <Code language="css">{`/* Containers */
body > header,
body > main,
body > footer {
  ...
}`}</Code>
          <p>These 2 pages have the same style:</p>
          <Code>{`<!-- With pico.min.css -->
<body>
  <main class="container">
    <h1>Hello, world!</h1>
  </main>
</body>`}</Code>
          <Code>{`<!-- With pico.classless.min.css -->
<body>
  <main>
    <h1>Hello, world!</h1>
  </main>
</body>`}</Code>
          <p>
            See the <Link to="/docs/version-picker">version picker</Link> to easily select the ideal
            Pico CSS version variant to match your project's needs.
          </p>
        </section>

        <section ref={usageRef}>
          <Heading level={2} anchor="usage">
            Usage
          </Heading>
          <p>
            Use the default <code>.classless</code> version if you need centered viewports:
          </p>
          <Code className="small">{`<link rel="stylesheet" href="css/pico.classless.min.css">`}</Code>

          <p>
            Or use the <code>.fluid.classless</code> version if you need a fluid container:
          </p>
          <Code className="small">{`<link rel="stylesheet" href="css/pico.fluid.classless.min.css">`}</Code>

          <p>
            These <code>.classless</code> versions are also available on{" "}
            <a href={cdnBaseUrl}>jsDelivr CDN</a>:
          </p>
          <Code>{`<!-- Centered viewport -->
<link
  rel="stylesheet"
  href="${cdnBaseUrl}css/pico.classless.min.css"
>`}</Code>
          <Code>{`<!-- Fluid viewport -->
<link
  rel="stylesheet"
  href="${cdnBaseUrl}css/pico.fluid.classless.min.css"
>`}</Code>
        </section>

        <section ref={rootContainerRef}>
          <Heading level={2} anchor="root-container">
            Root container
          </Heading>
          <p>
            If you need to customize the default root container for{" "}
            <Code display="inline">{`<header>`}</Code>, <Code display="inline">{`<main>`}</Code>,
            and <Code display="inline">{`<footer>`}</Code>, you can recompile Pico with another CSS
            selector.
          </p>

          <p>
            Useful for <a href="https://reactjs.org/">React</a>,{" "}
            <a href="https://www.gatsbyjs.com/">Gatsby</a>, or{" "}
            <a href="https://nextjs.org/">Next.js</a>.
          </p>
          <Code language="scss">{`/* Custom Class-less version for React */
@use "pico" with (

  // Define the root element used to target <header>, <main>, <footer>
  // with $enable-semantic-container and $enable-responsive-spacings
  $semantic-root-element: "#root",

  // Enable <header>, <main>, <footer> inside $semantic-root-element as containers
  $enable-semantic-container: true,

  // Enable .classes
  $enable-classes: false
)`}</Code>

          <p>The code above will compile Pico with the containers defined like this:</p>
          <Code language="css">{`/* Containers */
#root > header,
#root > main,
#root > footer {
  ...
}`}</Code>
          <p>
            Learn more about{" "}
            <Link to="/docs/sass">compiling a custom version of Pico with SASS</Link>.
          </p>
        </section>

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