2021-12-19 09:50:55 +07:00
<!doctype html>
< html lang = "en" >
< head >
${require('./_head.html')
title="Class-less version"
description="For wild HTML purists, Pico provides a .classless version."
canonical="classless.html"
}
< / head >
< body >
${require('./_nav.html')}
< main class = "container" id = "docs" >
${require('./_sidebar.html') active="classless-link"}
< div role = "document" >
< section id = "classless" >
< hgroup >
< h1 > Class-less version< / h1 >
< h2 > For wild HTML purists!< / h2 >
< / hgroup >
2023-04-09 10:50:09 +07:00
< p > Pico provides a < code > .classless< / code > version (< a href = "https://codesandbox.io/s/github/picocss/examples/tree/master/v1-classless" > example< / a > ).< / p >
2021-12-19 09:50:55 +07:00
< p > In this version, < code > < < b > header< / b > > < / code > , < code > < < b > main< / b > > < / code > , and < code > < < b > footer< / b > > < / code > act as < a href = "./containers.html" > containers< / a > to define a centered or a fluid viewport.< / p >
2022-10-02 16:45:28 +07:00
< pre > < code > < em > // Containers< / em >
< b > body< / b > > < b > header< / b > ,
< b > body< / b > > < b > main< / b > ,
< b > body< / b > > < b > footer< / b > {
< em > …< / em >
}
< / code > < / pre >
2021-12-19 09:50:55 +07:00
< p > < strong > Usage:< / strong > < / p >
< p > Use the default < code > .classless< / code > version if you need centered viewports:< / p >
< pre > < code > < < b > link< / b > < i > rel< / i > =< u > "stylesheet< / u > " < i > href< / i > =< u > "css/pico.classless.min.css"< / u > > < / code > < / pre >
< p > Or use the < code > .fluid.classless< / code > version if you need a fluid container:< / p >
< pre > < code > < < b > link< / b > < i > rel< / i > =< u > "stylesheet< / u > " < i > href< / i > =< u > "css/pico.fluid.classless.min.css"< / u > > < / code > < / pre >
2023-04-08 12:38:51 +07:00
< p > These < code > .classless< / code > versions are also available on < a href = "https://www.jsdelivr.com/package/npm/@picocss/pico" > jsDelivr CDN< / a > :< / p >
2021-12-19 09:50:55 +07:00
< pre > < code > < em > // Centered viewport< / em >
2023-04-08 12:38:51 +07:00
< < b > link< / b > < i > rel< / i > =< u > "stylesheet"< / u > < i > href< / i > =< u > "https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.classless.min.css"< / u > >
2021-12-19 09:50:55 +07:00
< / code > < / pre >
< pre > < code > < em > // Fluid viewport< / em >
2023-04-08 12:38:51 +07:00
< < b > link< / b > < i > rel< / i > =< u > "stylesheet"< / u > < i > href< / i > =< u > "https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.fluid.classless.min.css"< / u > >
2021-12-19 09:50:55 +07:00
< / code > < / pre >
2022-10-02 16:45:28 +07:00
< p > If you need to customize the default parent (< code > < < b > body< / b > > < / code > ) for < code > < < b > header< / b > > < / code > , < code > < < b > main< / b > > < / code > , and < code > < < b > footer< / b > > < / code > , you can recompile Pico by defining another CSS selector.< / p >
2022-10-02 20:01:31 +07:00
< 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 >
2022-10-02 16:45:28 +07:00
< pre > < code > < em > /* Custom Class-less version for React */< / em >
< em > // Set the root element< / em >
< i > $semantic-root-element< / i > : < u > "#root"< / u > ;
< em > // Enable < header> , < main> , < footer> inside $semantic-root-element as containers< / em >
< i > $enable-semantic-container< / i > : < u > true< / u > ;
< em > // Enable .classes< / em >
< i > $enable-classes< / i > : < u > false< / u > ;
< em > // Import Pico< / em >
< b > @import< / b > < u > "@picocss/pico/scss/pico"< / u > ;< / code > < / pre >
2022-10-03 09:05:14 +07:00
< p > The code above will compile Pico with the containers defined like this:< / p >
2022-10-02 16:45:28 +07:00
< pre > < code > < em > // Containers< / em > < / em >
< i > #root< / i > > < b > header< / b > ,
< i > #root< / i > > < b > main< / b > ,
< i > #root< / i > > < b > footer< / b > {
< em > …< / em >
}
< / code > < / pre >
2022-10-03 09:05:14 +07:00
< / section >
2021-12-19 09:50:55 +07:00
${require('./_footer.html')}
< / div >
< / main >
< script src = "js/commons.min.js" > < / script >
< / body >
< / html >
