2019-11-27 18:35:19 +07:00
<!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
2021-07-02 23:04:17 +07:00
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
2019-11-27 18:35:19 +07:00
< meta name = "description" content = "" >
< title > Pico.css • Graceful & Minimal CSS design system< / title >
2021-07-10 10:47:57 +07:00
< link rel = "shortcut icon" href = "https://picocss.com/favicon.ico" >
2019-11-27 18:35:19 +07:00
< link rel = "stylesheet" href = "../css/pico.min.css" >
< link rel = "stylesheet" href = "css/pico.docs.min.css" >
< / head >
< body >
<!-- Nav -->
< nav class = "container-fluid" >
< ul >
< li >
2019-11-28 21:51:58 +07:00
< a href = "https://picocss.com" aria-label = "Back home" >
2020-10-27 11:19:44 +07:00
< svg aria-hidden = "true" focusable = "false" role = "img" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 1000 1000" height = "56px" >
2019-11-27 18:35:19 +07:00
< path fill = "currentColor" d = "M633.43 429.23c0 118.38-49.76 184.72-138.87 184.72-53 0-92.04-25.37-108.62-67.32h-2.6v203.12H250V249.7h133.67v64.72h2.28c17.24-43.9 55.3-69.92 107-69.92 90.4 0 140.48 66.02 140.48 184.73zm-136.6 0c0-49.76-22.1-81.96-56.9-81.96s-56.9 32.2-57.24 82.28c.33 50.4 22.1 81.63 57.24 81.63 35.12 0 56.9-31.87 56.9-81.95zM682.5 547.5c0-37.32 30.18-67.5 67.5-67.5s67.5 30.18 67.5 67.5S787.32 615 750 615s-67.5-30.18-67.5-67.5z" / >
< / svg >
< / a >
< / li >
< li > Documentation< / li >
< / ul >
< ul >
2019-12-08 10:35:18 +07:00
< li > < a href = "https://picocss.com#examples" class = "secondary" > Examples< / a > < / li >
2019-11-27 18:35:19 +07:00
< li > < a href = "#docs" class = "secondary" > Docs< / a > < / li >
< li >
2019-11-30 12:43:20 +07:00
< a href = "https://github.com/picocss/pico" class = "contrast" aria-label = "Pico GitHub repository" >
2020-10-27 11:19:44 +07:00
< svg aria-hidden = "true" focusable = "false" role = "img" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 496 512" height = "16px" >
2019-11-27 18:35:19 +07:00
< path fill = "currentColor" d = "M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" > < / path >
< / svg >
< / a >
< / li >
< / ul >
< / nav > <!-- ./ Nav -->
<!-- Main -->
2019-12-02 12:42:25 +07:00
< main class = "container" id = "docs" >
2019-11-27 18:35:19 +07:00
<!-- Aside -->
2019-12-02 12:42:25 +07:00
< aside >
2019-11-27 18:35:19 +07:00
< nav >
< h1 > Documentation< / h1 >
< details open >
< summary > Getting started< / summary >
< ul >
< li > < a href = "#start" class = "secondary" > Usage< / a > < / li >
< li > < a href = "#themes" class = "secondary" > Themes< / a > < / li >
< li > < a href = "#customization" class = "secondary" > Customization< / a > < / li >
< li > < a href = "#classless" class = "secondary" > Class-less version< / a > < / li >
< / ul >
< / details >
< details open >
< summary > Layout< / summary >
< ul >
< li > < a href = "#containers" class = "secondary" > Containers< / a > < / li >
< li > < a href = "#grids" class = "secondary" > Grids< / a > < / li >
< li > < a href = "#scroller" class = "secondary" > Horizontal scroller< / a > < / li >
< / ul >
< / details >
< details open >
< summary > Elements< / summary >
< ul >
< li > < a href = "#typography" class = "secondary" > Typography< / a > < / li >
< li > < a href = "#buttons" class = "secondary" > Buttons< / a > < / li >
< li > < a href = "#forms" class = "secondary" > Forms< / a > < / li >
2020-09-29 13:15:05 +07:00
< li > < a href = "#tables" class = "secondary" > Tables< / a > < / li >
2019-11-27 18:35:19 +07:00
< / ul >
< / details >
< details open >
< summary > Components< / summary >
< ul >
< li > < a href = "#accordions" class = "secondary" > Accordions< / a > < / li >
< li > < a href = "#cards" class = "secondary" > Cards< / a > < / li >
< li > < a href = "#navs" class = "secondary" > Navs< / a > < / li >
2020-09-30 10:28:06 +07:00
< li > < a href = "#progress" class = "secondary" > Progress< / a > < / li >
2021-07-17 15:19:19 +07:00
< / ul >
< / details >
< details open >
< summary > Utilities< / summary >
< ul >
< li > < a href = "#loading" class = "secondary" > Loading< / a > < / li >
2019-11-27 18:35:19 +07:00
< li > < a href = "#tooltips" class = "secondary" > Tooltips< / a > < / li >
< / ul >
< / details >
2019-12-11 08:46:32 +07:00
< details open >
2019-11-27 18:35:19 +07:00
< summary > Extend< / summary >
< ul >
< li >
2019-12-02 12:42:25 +07:00
< a href = "#love" class = "secondary" > We love .classes< / a >
2019-11-27 18:35:19 +07:00
< / li >
< / ul >
< / details >
< / nav >
< / aside > <!-- ./ Aside -->
<!-- Document -->
< div role = "document" >
<!-- Docs: Start -->
< section id = "start" >
< hgroup >
< h2 > Usage< / h2 >
2019-11-28 21:51:58 +07:00
< h3 > Work without package manager or dependencies 🙂!< / h3 >
2019-11-27 18:35:19 +07:00
< / hgroup >
2019-12-11 15:07:21 +07:00
< p > There are 3 ways to get started with pico.css:< / p >
< h4 > Install manually< / h4 >
2021-07-17 15:19:19 +07:00
< p > < a href = "https://github.com/picocss/pico/archive/refs/heads/master.zip" > Download Pico< / a > and link < code > /css/pico.min.css< / code > in the < code > < < b > head< / b > > < / code > of your website.< / p >
2019-11-27 18:35:19 +07:00
< pre > < code > < < b > link< / b > < i > rel< / i > =< u > "stylesheet"< / u > < i > href< / i > =< u > "css/pico.min.css"< / u > > < / code > < / pre >
2019-12-11 15:07:21 +07:00
< h4 > Install from CDN< / h4 >
2021-07-18 10:35:59 +07:00
< p > Alternatively, you can use < a href = "https://unpkg.com/@picocss/pico@latest/" > unpkg CDN< / a > to link pico.css< / p >
2019-12-11 15:07:21 +07:00
< pre > < code > < < b > link< / b > < i > rel< / i > =< u > "stylesheet"< / u > < i > href< / i > =< u > "https://unpkg.com/@picocss/pico@latest/css/pico.min.css"< / u > > < / code > < / pre >
< h4 > Install with NPM< / h4 >
< pre > < code > < b > npm< / b > < i > install< / i > < u > @picocss/pico< / u > < / code > < / pre >
2020-09-29 13:15:05 +07:00
< p > Starter HTML template:< / p >
2019-11-28 07:20:36 +07:00
2019-12-01 16:35:38 +07:00
< pre > < code > < em > < !doctype html> < / em >
2019-11-28 07:20:36 +07:00
< < b > html< / b > < i > lang< / i > =< u > "en"< / u > >
< < b > head< / b > >
< < b > meta< / b > < i > charset< / i > =< u > "utf-8"< / u > >
2021-07-02 23:04:17 +07:00
< < b > meta< / b > < i > name< / i > =< u > "viewport"< / u > < i > content< / i > =< u > "width=device-width, initial-scale=1"< / u > >
2019-11-28 07:20:36 +07:00
< < b > link< / b > < i > rel< / i > =< u > "stylesheet"< / u > < i > href< / i > =< u > "css/pico.min.css"< / u > >
< < b > title< / b > >Hello, world!< /< b > title< / b > >
< /< b > head< / b > >
< < b > body< / b > >
< < b > main< / b > < i > class< / i > =< u > "container"< / u > >
< < b > h1< / b > > Hello, world!< /< b > h1< / b > >
< /< b > main< / b > >
< /< b > body< / b > >
< /< b > html< / b > > < / code > < / pre >
2019-11-30 12:43:20 +07:00
2019-11-27 18:35:19 +07:00
< / section > <!-- ./ Docs: Start -->
<!-- Docs: Themes -->
< section id = "themes" >
< hgroup >
2019-11-28 07:20:36 +07:00
< h2 > Themes< / h2 >
2021-07-10 10:47:57 +07:00
< h3 > Pico is shipped with 2 consistent themes: Light & Dark.< / h3 >
2019-11-27 18:35:19 +07:00
< / hgroup >
2021-07-10 10:47:57 +07:00
< p > The Light theme is used by default. The Dark theme is automatically enabled if the user has dark mode enabled < code > < i > prefers-color-scheme< / i > : < u > dark< / u > < / code > < / p >
2019-12-10 11:14:24 +07:00
< article aria-label = "Theme switcher" >
2021-07-24 11:56:46 +07:00
< button class = "contrast theme-switcher" > …< / button >
2019-11-30 12:43:20 +07:00
< / article >
2020-09-29 08:38:35 +07:00
< p > Themes can be forced on document level < code > < < b > html< / b > < i > data-theme< / i > =< u > "light"< / u > > < / code > or on any HTML element < code > < < b > article< / b > < i > data-theme< / i > =< u > "dark"< / u > > < / code > < / p >
2020-10-28 08:12:49 +07:00
< article data-theme = "light" aria-label = "Forced light theme example" >
2019-11-27 18:35:19 +07:00
< h4 > Light theme< / h4 >
2019-12-08 10:35:18 +07:00
< form class = "grid" >
2019-12-10 11:14:24 +07:00
< input type = "text" name = "login" placeholder = "Login" aria-label = "Login" autocomplete = "nickname" required >
< input type = "password" name = "password" placeholder = "Password" aria-label = "Password" autocomplete = "current-password" required >
2020-09-29 15:01:44 +07:00
< button type = "submit" aria-label = "Example button" onclick = "event.preventDefault()" > Login< / button >
2019-12-08 10:35:18 +07:00
< / form >
2019-11-27 18:35:19 +07:00
< pre > < code > < < b > article< / b > < i > data-theme< / i > =< u > "light"< / u > >
2021-07-24 11:56:46 +07:00
…
2019-11-27 18:35:19 +07:00
< /< b > article< / b > > < / code > < / pre >
< / article >
2020-10-28 08:12:49 +07:00
< article data-theme = "dark" aria-label = "Forced dark theme example" >
2019-11-27 18:35:19 +07:00
< h4 > Dark theme< / h4 >
2019-12-08 10:35:18 +07:00
< form class = "grid" >
2019-12-10 11:14:24 +07:00
< input type = "text" name = "login" placeholder = "Login" aria-label = "Login" autocomplete = "nickname" required >
< input type = "password" name = "password" placeholder = "Password" aria-label = "Password" autocomplete = "current-password" required >
2020-09-29 15:01:44 +07:00
< button type = "submit" aria-label = "Example button" onclick = "event.preventDefault()" > Login< / button >
2019-12-08 10:35:18 +07:00
< / form >
2019-11-27 18:35:19 +07:00
< pre > < code > < < b > article< / b > < i > data-theme< / i > =< u > "dark"< / u > >
2021-07-24 11:56:46 +07:00
…
2019-11-27 18:35:19 +07:00
< /< b > article< / b > > < / code > < / pre >
< / article >
< / section > <!-- ./ Themes -->
<!-- Docs: Customization -->
< section id = "customization" >
< hgroup >
< h2 > Customization< / h2 >
2019-11-28 21:51:58 +07:00
< h3 > You can customize themes with SCSS or you can simply edit the CSS variables.< / h3 >
2019-11-27 18:35:19 +07:00
< / hgroup >
2020-09-29 12:23:53 +07:00
< p > Example: < strong > pick a color!< / strong > < / p >
2020-10-28 08:12:49 +07:00
< article data-theme = "generated" aria-label = "Generated theme example" >
2019-11-27 18:35:19 +07:00
< h4 > < span class = "name" > Custom theme< / span > < / h4 >
2019-12-08 10:35:18 +07:00
< form >
2019-12-10 11:14:24 +07:00
< div class = "grid" >
< input type = "text" name = "login" placeholder = "Login" aria-label = "Login" autocomplete = "nickname" required >
< input type = "password" name = "password" placeholder = "Password" aria-label = "Password" autocomplete = "current-password" required >
2020-09-29 15:01:44 +07:00
< button type = "submit" aria-label = "Example button" onclick = "event.preventDefault()" > Login< / button >
2019-12-10 11:14:24 +07:00
< / div >
2019-12-08 10:35:18 +07:00
< fieldset >
< label for = "remember" >
2021-07-10 10:47:57 +07:00
< input type = "checkbox" role = "switch" id = "remember" name = "remember" checked >
2019-12-08 10:35:18 +07:00
Remember me
< / label >
< / fieldset >
< / form >
2019-11-27 18:35:19 +07:00
2021-07-02 16:54:41 +07:00
< pre > < code > < em > // Simplified example< / em >
< b > :root< / b > {
2021-07-24 11:56:46 +07:00
< i > --primary< / i > : < u class = "c600" > …< / u > ;
2021-07-02 16:54:41 +07:00
}
< / code > < / pre >
2020-09-29 12:23:53 +07:00
2021-07-02 16:54:41 +07:00
< / article >
< p > There are 2 ways to customize your version of Pico.css:< / p >
2020-09-29 12:23:53 +07:00
< h4 > Overriding CSS variables< / h4 >
< p > All Pico's styles and colors are set with < em > CSS custom properties< / em > (variables). Just override the CSS variables to customize your version of Pico.< / p >
2019-11-27 18:35:19 +07:00
2020-09-29 10:54:26 +07:00
< pre > < code > < em > /* < span class = "name" > < / span > Light scheme (Default) */
2019-12-01 16:35:38 +07:00
/* Can be forced with data-theme="light" */< / em >
2019-11-27 18:35:19 +07:00
< b > [data-theme=< u > "light"< / u > ]< / b > ,
< b > :root:not([data-theme=< u > "dark"< / u > ])< / b > {
2021-07-24 11:56:46 +07:00
< i > --primary< / i > : < u class = "c600" > …< / u > ;
< i > --primary-hover< / i > : < u class = "c700" > …< / u > ;
< i > --primary-focus< / i > : < u class = "c600-outline-light" > …< / u > ;
< i > --primary-inverse< / i > : < u class = "inverse" > …< / u > ;
2019-11-27 18:35:19 +07:00
}
2020-09-29 10:54:26 +07:00
< em > /* < span class = "name" > < / span > Dark scheme (Auto) */
2019-12-01 16:35:38 +07:00
/* Automatically enabled if user has Dark mode enabled */< / em >
2019-11-27 18:35:19 +07:00
< i > @media< / i > only < b > screen< / b > and < b > (prefers-color-scheme: < u > dark< / u > )< / b > {
2020-09-29 12:23:53 +07:00
< b > :root:not([data-theme=< u > "light"< / u > ])< / b > {
2021-07-24 11:56:46 +07:00
< i > --primary< / i > : < u class = "c600" > …< / u > ;
< i > --primary-hover< / i > : < u class = "c500" > …< / u > ;
< i > --primary-focus< / i > : < u class = "c600-outline-dark" > …< / u > ;
< i > --primary-inverse< / i > : < u class = "inverse" > …< / u > ;
2020-09-29 12:23:53 +07:00
}
2019-11-27 18:35:19 +07:00
}
2020-09-29 10:54:26 +07:00
< em > /* < span class = "name" > < / span > Dark scheme (Forced) */
2019-12-01 16:35:38 +07:00
/* Enabled if forced with data-theme="dark" */< / em >
2020-09-29 12:23:53 +07:00
< b > [data-theme=< u > "dark"< / u > ]< / b > {
2021-07-24 11:56:46 +07:00
< i > --primary< / i > : < u class = "c600" > …< / u > ;
< i > --primary-hover< / i > : < u class = "c500" > …< / u > ;
< i > --primary-focus< / i > : < u class = "c600-outline-dark" > …< / u > ;
< i > --primary-inverse< / i > : < u class = "inverse" > …< / u > ;
2020-09-29 12:23:53 +07:00
}
< em > /* < span class = "name" > < / span > (Common styles) */< / em >
< b > :root< / b > {
2021-07-02 16:54:41 +07:00
< i > --form-element-active-border-color< / i > : < u > var< / u > (< i > --primary< / i > );
2021-07-02 22:18:14 +07:00
< i > --form-element-focus-color< / i > : < u > var< / u > (< i > --primary-focus< / i > );
2021-07-02 16:54:41 +07:00
< i > --switch-color< / i > : < u > var< / u > (< i > --primary-inverse< / i > );
2021-07-02 22:18:14 +07:00
< i > --switch-checked-background-color< / i > : < u > var< / u > (< i > --primary< / i > );
2020-09-29 12:23:53 +07:00
}
< / code > < / pre >
2021-07-02 16:54:41 +07:00
< p > You can find all the CSS variables used in the default theme here: < a href = "https://github.com/picocss/pico/blob/master/css/themes/default.css" > css/themes/default.css< / a > < / p >
< h4 > Importing Pico SASS library< / h4 >
2021-07-10 10:47:57 +07:00
< p > It is recommended to customize Pico by importing SASS source files into your project. This way you can keep Pico up to date without conflicts since Pico code and your custom code are separated.< / p >
2021-07-02 16:54:41 +07:00
< p > Compile the SASS file to CSS to get a custom version of Pico.< / p >
< pre > < code > < em > /* Custom < span class = "name" > < / span > version */< / em >
< em > // Override default variables< / em >
2021-07-24 11:56:46 +07:00
< i > $primary-500< / i > : < u class = "c500" > …< / u > ;
< i > $primary-600< / i > : < u class = "c600" > …< / u > ;
< i > $primary-700< / i > : < u class = "c700" > …< / u > ;
2021-07-02 16:54:41 +07:00
< em > // Import full Pico source code< / em >
< b > @import< / b > < u > "path/pico"< / u > ;< / code > < / pre >
2021-07-10 10:47:57 +07:00
< p > Alternatively, you can create a custom theme and import it into your project with the components you need.< / p >
2021-07-02 16:54:41 +07:00
< pre > < code > < em > /* Custom < span class = "name" > < / span > version */< / em >
< em > // Custom theme< / em >
< b > @import< / b > < u > "path/themes/custom"< / u > ;
< em > // Import needed components< / em >
< b > @import< / b > < u > "path/layout/document"< / u > ;
< b > @import< / b > < u > "path/layout/sectioning"< / u > ;
2021-07-24 11:56:46 +07:00
< em > …< / em >
2021-07-02 16:54:41 +07:00
< / code > < / pre >
2021-07-10 10:47:57 +07:00
< p > This allows you to create a lighter version with only the components that are useful to you. Example here: < a href = "https://github.com/picocss/pico/blob/master/scss/pico.slim.scss" > scss/pico.slim.scss< / a > .< / p >
2019-11-27 18:35:19 +07:00
< / section > <!-- ./ Docs: Customization -->
<!-- Docs: Classless -->
< section id = "classless" >
< hgroup >
< h2 > Class-less version< / h2 >
2019-11-30 12:43:20 +07:00
< h3 > For wild HTML purists!< / h3 >
2019-11-27 18:35:19 +07:00
< / hgroup >
2021-07-10 10:47:57 +07:00
< p > Pico provides a < code > .classless< / code > version (< a href = "https://picocss.com/examples/classless/" > example< / a > ).< / p >
< 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" > containers< / a > to define a centered or a fluid viewport.< / p >
2019-11-27 18:35:19 +07:00
< p > < strong > Usage:< / strong > < / p >
< p > Use the default < code > .classless< / code > version if you need centered viewports:< / p >
2019-12-08 10:35:18 +07:00
< pre > < code > < < b > link< / b > < i > rel< / i > =< u > "stylesheet< / u > " < i > href< / i > =< u > "css/pico.classless.min.css"< / u > > < / code > < / pre >
2021-07-02 23:04:17 +07:00
< p > Or use the < code > .fluid.classless< / code > version if you need a fluid container:< / p >
2019-12-08 10:35:18 +07:00
< pre > < code > < < b > link< / b > < i > rel< / i > =< u > "stylesheet< / u > " < i > href< / i > =< u > "css/pico.fluid.classless.min.css"< / u > > < / code > < / pre >
2021-07-02 23:04:17 +07:00
< p > These < code > .classless< / code > versions are also available on < a href = "https://unpkg.com/@picocss/pico@latest/" > unpkg CDN< / a > :< / p >
2021-07-03 11:18:07 +07:00
< pre > < code > < em > // Centered viewport< / em >
2021-07-02 23:04:17 +07:00
< < b > link< / b > < i > rel< / i > =< u > "stylesheet"< / u > < i > href< / i > =< u > "https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css"< / u > >
2021-07-03 11:18:07 +07:00
< / code > < / pre >
2021-07-02 23:04:17 +07:00
2021-07-03 11:18:07 +07:00
< pre > < code > < em > // Fluid viewport< / em >
2021-07-02 23:04:17 +07:00
< < b > link< / b > < i > rel< / i > =< u > "stylesheet"< / u > < i > href< / i > =< u > "https://unpkg.com/@picocss/pico@latest/css/pico.fluid.classless.min.css"< / u > >
< / code > < / pre >
2019-11-27 18:35:19 +07:00
< / section > <!-- ./ Docs: Classless -->
<!-- Docs: Container -->
< section id = "containers" >
< hgroup >
< h2 > Containers< / h2 >
2019-11-28 21:51:58 +07:00
< h3 >
< code > .container< / code > enable a centered viewport.< br >
2020-10-28 08:27:26 +07:00
< code > .container-fluid< / code > enable a < code > < u > 100%< / u > < / code > layout.
2019-11-28 21:51:58 +07:00
< / h3 >
2019-11-27 18:35:19 +07:00
< / hgroup >
< pre > < code > < < b > body< / b > >
< < b > main< / b > < i > class< / i > =< u > "container"< / u > > < /< b > main< / b > >
< /< b > body< / b > > < / code > < / pre >
2021-07-03 11:18:07 +07:00
< p > Pico use the same breakpoints and viewports sizes as < a href = "https://getbootstrap.com/docs/5.0/layout/breakpoints/#available-breakpoints" > Bootstrap< / a > .< / p >
2019-11-27 18:35:19 +07:00
< figure >
2020-09-29 13:15:05 +07:00
< table role = "grid" >
2019-11-27 18:35:19 +07:00
< thead >
< tr >
< th > Device< / th >
< th > Extra small< / th >
< th > Small< / th >
< th > Medium< / th >
< th > Large< / th >
< th > Extra large< / th >
< / tr >
< / thead >
< tbody >
< tr >
< th > Breakpoint< / th >
2021-07-03 11:18:07 +07:00
< td > < 576< small > px< / small > < / td >
< td > ≥576< small > px< / small > < / td >
< td > ≥768< small > px< / small > < / td >
< td > ≥992< small > px< / small > < / td >
< td > ≥1200< small > px< / small > < / td >
2019-11-27 18:35:19 +07:00
< / tr >
< tr >
< th > Viewport< / th >
2021-07-03 11:18:07 +07:00
< td > 100< small > %< / small > < / td >
< td > 540< small > px< / small > < / td >
< td > 720< small > px< / small > < / td >
< td > 960< small > px< / small > < / td >
< td > 1140< small > px< / small > < / td >
2019-11-27 18:35:19 +07:00
< / tr >
< / tbody >
< / table >
< / figure >
2020-09-29 08:38:35 +07:00
< p > < code > < < b > header< / b > > < / code > , < code > < < b > main< / b > > < / code > and < code > < < b > footer< / b > > < / code > as direct childs of < code > < < b > body< / b > > < / code > provide a responsive vertical < code > < i > padding< / i > < / code > < / p >
2019-12-08 10:35:18 +07:00
< p > < code > < < b > section< / b > > < / code > provide a responsive < code > < i > margin-bottom< / i > < / code > to separate your sections.< / p >
2019-11-27 18:35:19 +07:00
< / section > <!-- ./ Docs: Container -->
<!-- Docs: Grid -->
< section id = "grids" >
< hgroup >
< h2 > Grids< / h2 >
2019-11-28 21:51:58 +07:00
< h3 > < code > .grid< / code > enable a minimal grid system with auto-layout columns.< / h3 >
2019-11-27 18:35:19 +07:00
< / hgroup >
2019-12-10 11:14:24 +07:00
< article aria-label = "Grid example" >
< div class = "grid" >
2019-11-27 18:35:19 +07:00
< div > 1< / div >
< div > 2< / div >
< div > 3< / div >
< div > 4< / div >
2019-12-10 11:14:24 +07:00
< / div >
2019-11-27 18:35:19 +07:00
2019-12-10 11:14:24 +07:00
< pre > < code > < < b > div< / b > < i > class< / i > =< u > "grid"< / u > >
2019-11-27 18:35:19 +07:00
< < b > div< / b > > 1< /< b > div< / b > >
< < b > div< / b > > 2< /< b > div< / b > >
< < b > div< / b > > 3< /< b > div< / b > >
< < b > div< / b > > 4< /< b > div< / b > >
2019-12-10 11:14:24 +07:00
< /< b > div< / b > > < / code > < / pre >
2019-11-27 18:35:19 +07:00
< / article >
2020-09-29 08:38:35 +07:00
< p > Columns intentionally collapses below large devices < code > (< u > 992px< / u > )< / code > < / p >
2020-09-25 09:48:13 +07:00
< p > To go further, discover how to < a href = "https://picocss.com/examples/bootstrap-grid/" > merge Pico with the Bootstrap grid system< / a > .< / p >
2019-11-30 12:43:20 +07:00
< details >
< summary >
2020-10-27 11:19:44 +07:00
< svg aria-hidden = "true" focusable = "false" role = "img" xmlns = "http://www.w3.org/2000/svg" height = "16px" viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" >
2019-11-30 12:43:20 +07:00
< circle cx = "12" cy = "12" r = "10" > < / circle >
< line x1 = "12" y1 = "16" x2 = "12" y2 = "12" > < / line >
< line x1 = "12" y1 = "8" x2 = "12.01" y2 = "8" > < / line >
< / svg >
More about grids
< / summary >
< p > As Pico focus on native HTML elements, we kept this grid system very minimalist.< / p >
2020-09-25 09:48:13 +07:00
< p > A full 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 >
2019-12-02 12:42:25 +07:00
< p > If you need a quick way to prototyping or build a complex layouts, you can look about < strong > Flexbox grid layouts< / strong > . For example: < a href = "https://getbootstrap.com/docs/4.2/getting-started/contents/" > Bootstrap Grid System only< / a > or < a href = "http://flexboxgrid.com/" > Flexbox Grid< / a > .< / p >
< p > If you need a light and custom grid, you can look about < 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 >
2019-11-30 12:43:20 +07:00
< p > Alternatively you can < a href = "https://learncssgrid.com/" > Learn about CSS Grid< / a > .< / p >
< / details >
2019-11-27 18:35:19 +07:00
< / section > <!-- ./ Docs: Grid -->
<!-- Docs: Horizontal scroller -->
< section id = "scroller" >
< hgroup >
< h2 > Horizontal scroller< / h2 >
2021-07-10 10:47:57 +07:00
< h3 > < code > < < b > figure< / b > > < / code > acts as a container to make any content scrollable horizontally.< / h3 >
2019-11-27 18:35:19 +07:00
< / hgroup >
2021-07-10 10:47:57 +07:00
< p > Useful to have responsive < code > < < b > table< / b > > < / code > < / p >
2019-11-27 18:35:19 +07:00
< figure >
2020-09-29 13:15:05 +07:00
< table role = "grid" >
2019-11-27 18:35:19 +07:00
< thead >
< tr >
< th scope = "col" > #< / th >
< th scope = "col" > Heading< / th >
< th scope = "col" > Heading< / th >
< th scope = "col" > Heading< / th >
< th scope = "col" > Heading< / th >
< th scope = "col" > Heading< / th >
< th scope = "col" > Heading< / th >
< th scope = "col" > Heading< / th >
2020-09-11 23:24:13 +07:00
< th scope = "col" > Heading< / th >
< th scope = "col" > Heading< / th >
2019-11-27 18:35:19 +07:00
< / tr >
< / thead >
< tbody >
< tr >
< th scope = "row" > 1< / th >
< td > Cell< / td >
< td > Cell< / td >
< td > Cell< / td >
< td > Cell< / td >
< td > Cell< / td >
< td > Cell< / td >
< td > Cell< / td >
2020-09-11 23:24:13 +07:00
< td > Cell< / td >
< td > Cell< / td >
2019-11-27 18:35:19 +07:00
< / tr >
< tr >
< th scope = "row" > 2< / th >
< td > Cell< / td >
< td > Cell< / td >
< td > Cell< / td >
< td > Cell< / td >
< td > Cell< / td >
< td > Cell< / td >
< td > Cell< / td >
2020-09-11 23:24:13 +07:00
< td > Cell< / td >
< td > Cell< / td >
2019-11-27 18:35:19 +07:00
< / tr >
< tr >
< th scope = "row" > 3< / th >
< td > Cell< / td >
< td > Cell< / td >
< td > Cell< / td >
< td > Cell< / td >
< td > Cell< / td >
< td > Cell< / td >
< td > Cell< / td >
2020-09-11 23:24:13 +07:00
< td > Cell< / td >
< td > Cell< / td >
2019-11-27 18:35:19 +07:00
< / tr >
< / tbody >
< / table >
< / figure >
< pre > < code > < < b > figure< / b > >
< < b > table< / b > >
2021-07-24 11:56:46 +07:00
…
2019-11-27 18:35:19 +07:00
< /< b > table< / b > >
< /< b > figure< / b > > < / code > < / pre >
< / section > <!-- ./ Docs: Horizontal scroller -->
<!-- Docs: Typography -->
< section id = "typography" >
< hgroup >
< h2 > Typography< / h2 >
2021-07-03 11:18:07 +07:00
< h3 > All typographic elements are responsives, allowing text to scale gracefully across devices and viewports.< / h3 >
2019-11-27 18:35:19 +07:00
< / hgroup >
< figure >
2020-09-29 13:15:05 +07:00
< table role = "grid" >
2019-11-27 18:35:19 +07:00
< thead >
< tr >
< th > Device< / th >
< th > Extra small< / th >
< th > Small< / th >
< th > Medium< / th >
< th > Large< / th >
< th > Extra large< / th >
< / tr >
< / thead >
< tbody >
< tr >
2019-11-28 21:51:58 +07:00
< th > Base font< / th >
2021-07-03 11:18:07 +07:00
< td > 16< small > px< / small > < / td >
< td > 17< small > px< / small > < / td >
< td > 18< small > px< / small > < / td >
< td > 19< small > px< / small > < / td >
< td > 20< small > px< / small > < / td >
< / tr >
< tr >
< th > < code > < < b > h1< / b > > < / code > < / th >
< td > 32< small > px< / small > < / td >
< td > 34< small > px< / small > < / td >
< td > 36< small > px< / small > < / td >
< td > 38< small > px< / small > < / td >
< td > 40< small > px< / small > < / td >
2019-11-28 21:51:58 +07:00
< / tr >
< tr >
2021-07-03 11:18:07 +07:00
< th > < code > < < b > h2< / b > > < / code > < / th >
< td > 28< small > px< / small > < / td >
< td > 29< small > px< / small > < / td >
2021-07-10 10:47:57 +07:00
< td > 31< small > .5px< / small > < / td >
2021-07-03 11:18:07 +07:00
< td > 33< small > .25px< / small > < / td >
< td > 35< small > px< / small > < / td >
2019-11-28 21:51:58 +07:00
< / tr >
< tr >
2021-07-03 11:18:07 +07:00
< th > < code > < < b > h3< / b > > < / code > < / th >
< td > 24< small > px< / small > < / td >
< td > 25< small > .5px< / small > < / td >
< td > 27< small > px< / small > < / td >
< td > 28< small > .5px< / small > < / td >
< td > 30< small > px< / small > < / td >
2019-11-28 21:51:58 +07:00
< / tr >
< tr >
2021-07-03 11:18:07 +07:00
< th > < code > < < b > h4< / b > > < / code > < / th >
< td > 20< small > px< / small > < / td >
< td > 21< small > .25px< / small > < / td >
< td > 22< small > .5px< / small > < / td >
< td > 23< small > .75px< / small > < / td >
< td > 25< small > px< / small > < / td >
2019-11-28 21:51:58 +07:00
< / tr >
< tr >
2021-07-03 11:18:07 +07:00
< th > < code > < < b > h5< / b > > < / code > < / th >
< td > 18< small > px< / small > < / td >
< td > 19< small > .125px< / small > < / td >
< td > 20< small > .25px< / small > < / td >
< td > 21< small > .375px< / small > < / td >
< td > 22< small > .5px< / small > < / td >
2019-11-28 21:51:58 +07:00
< / tr >
< tr >
2021-07-03 11:18:07 +07:00
< th > < code > < < b > h6< / b > > < / code > < / th >
< td > 16< small > px< / small > < / td >
< td > 17< small > px< / small > < / td >
< td > 18< small > px< / small > < / td >
< td > 19< small > px< / small > < / td >
< td > 20< small > px< / small > < / td >
2019-11-28 21:51:58 +07:00
< / tr >
< tr >
2021-07-03 11:18:07 +07:00
< th > < code > < < b > small< / b > > < / code > < / th >
< td > 14< small > px< / small > < / td >
< td > 14< small > .875px< / small > < / td >
< td > 15< small > .75px< / small > < / td >
< td > 16< small > .625px< / small > < / td >
< td > 27< small > .5px< / small > < / td >
2019-11-27 18:35:19 +07:00
< / tr >
< / tbody >
< / table >
< / figure >
< p > Headings:< / p >
2019-12-10 11:14:24 +07:00
< article aria-label = "Headings examples" >
2019-11-28 21:51:58 +07:00
< h1 > Heading 1< / h1 >
< h2 > Heading 2< / h2 >
< h3 > Heading 3< / h3 >
< h4 > Heading 4< / h4 >
< h5 > Heading 5< / h5 >
< h6 > Heading 6< / h6 >
< pre > < code > < < b > h1< / b > > Heading 1< /< b > h1< / b > >
2019-11-27 18:35:19 +07:00
< < b > h2< / b > > Heading 2< /< b > h2< / b > >
< < b > h3< / b > > Heading 3< /< b > h3< / b > >
< < b > h4< / b > > Heading 4< /< b > h4< / b > >
< < b > h5< / b > > Heading 5< /< b > h5< / b > >
2020-09-29 13:15:05 +07:00
< < b > h6< / b > > Heading 6< /< b > h6< / b > > < / code > < / pre >
2019-11-27 18:35:19 +07:00
< / article >
2021-07-02 16:54:41 +07:00
< p > Inside a < code > < < b > hgroup< / b > > < / code > all < code > < i > margin-bottom< / i > < / code > are collapsed and the < code > :last-child< / code > is muted.< / p >
2019-12-10 11:14:24 +07:00
< article aria-label = "Hgroup example" >
2019-11-27 18:35:19 +07:00
< hgroup >
< h2 > Heading 2< / h2 >
2019-11-28 21:51:58 +07:00
< h3 > Subtitle for heading 2< / h3 >
2019-11-27 18:35:19 +07:00
< / hgroup >
< pre > < code > < < b > hgroup< / b > >
< < b > h2< / b > > Heading 2< /< b > h2< / b > >
2019-11-28 21:51:58 +07:00
< < b > h3< / b > > Subtitle for heading 2< /< b > h3< / b > >
2019-11-27 18:35:19 +07:00
< < b > hgroup< / b > > < / code > < / pre >
< / article >
< p > Inline text elements:< / p >
2020-09-23 12:59:50 +07:00
< article aria-label = "Inline text examples" >
2019-11-27 18:35:19 +07:00
< div class = "grid" >
< div >
< p > < abbr title = "Abbreviation" > Abbr.< / abbr > < code > abbr< / code > < / p >
< p > < strong > Bold< / strong > < code > strong< / code > < code > b< / code > < / p >
< p > < em > Italic< / em > < code > i< / code > < code > em< / code > < code > cite< / code > < / p >
< p > < del > Deleted< / del > < code > del< / code > < / p >
< p > < ins > Inserted< / ins > < code > ins< / code > < / p >
< p > < kbd > Ctrl + S< / kbd > < code > kbd< / code > < / p >
< / div >
< div >
< p > < mark > Highlighted< / mark > < code > mark< / code > < / p >
< p > < s > Strikethrough< / s > < code > s< / code > < / p >
< p > < small > Small < / small > < code > small< / code > < / p >
< p > Text < sub > Sub< / sub > < code > sub< / code > < / p >
< p > Text < sup > Sup< / sup > < code > sup< / code > < / p >
< p > < u > Underline< / u > < code > u< / code > < / p >
< / div >
< / div >
< / article >
2019-11-30 12:43:20 +07:00
< p > Links come with < code > .secondary< / code > and < code > .contrast< / code > styles.< / p >
2019-12-10 11:14:24 +07:00
< article aria-label = "Links examples" >
2019-12-08 13:25:46 +07:00
< a href = "#" onclick = "event.preventDefault()" > Primary< / a > < br >
< a href = "#" onclick = "event.preventDefault()" class = "secondary" > Secondary< / a > < br >
< a href = "#" onclick = "event.preventDefault()" class = "contrast" > Contrast< / a > < br >
2019-11-30 12:43:20 +07:00
< pre > < code > < < b > a< / b > < i > href< / i > =< u > "#"< / u > > Primary< /< b > a< / b > >
< < b > a< / b > < i > href< / i > =< u > "#"< / u > < i > class< / i > =< u > "secondary"< / u > > Secondary< /< b > a< / b > >
< < b > a< / b > < i > href< / i > =< u > "#"< / u > < i > class< / i > =< u > "contrast"< / u > > Contrast< /< b > a< / b > > < / code > < / pre >
2020-09-29 13:15:05 +07:00
< / article >
< p > Blockquote:< / p >
2020-10-28 08:12:49 +07:00
< article aria-label = "Blockquote example" >
2020-09-29 13:15:05 +07:00
< blockquote >
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."
< footer >
< cite > - Phasellus eget lacinia< / cite >
< / footer >
< / blockquote >
< pre > < code > < < b > blockquote< / b > >
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."
< < b > footer< / b > >
< < b > cite< / b > > - Phasellus eget lacinia< /< b > cite< / b > >
< /< b > footer< / b > >
< /< b > blockquote< / b > > < / code > < / pre >
2019-11-30 12:43:20 +07:00
< / article >
2019-11-27 18:35:19 +07:00
< / section > <!-- ./ Docs: Typography -->
<!-- Docs: Button -->
< section id = "buttons" >
< hgroup >
< h2 > Buttons< / h2 >
2019-11-28 21:51:58 +07:00
< h3 > The essential button in pure HTML, without < code > .classes< / code > for the default style.< / h3 >
2019-11-27 18:35:19 +07:00
< / hgroup >
2020-10-28 08:12:49 +07:00
< article aria-label = "Button example" >
< button aria-label = "Button" > Button< / button >
2019-11-27 18:35:19 +07:00
< input type = "submit" >
< pre > < code > < < b > button< / b > > Button< /< b > button< / b > >
< < b > input< / b > < i > type< / i > =< u > "submit"< / u > > < / code > < / pre >
< / article >
< p > Buttons are < code > < i > width< / i > : < u > 100%< / u > ;< / code > by default. Use < code > < < b > a< / b > < i > role< / i > =< u > "button"> < / u > < / code > if you need an inline element.< / p >
2019-12-10 11:14:24 +07:00
< article aria-label = "Inline buttons examples" >
2019-12-08 13:25:46 +07:00
< a href = "#" onclick = "event.preventDefault()" role = "button" > Link< / a >
< a href = "#" onclick = "event.preventDefault()" role = "button" > Link< / a >
2019-11-27 18:35:19 +07:00
< pre > < code > < < b > a< / b > < i > href< / i > =< u > "#"< / u > < i > role< / i > =< u > "button"< / u > > Link< /< b > a< / b > >
< < b > a< / b > < i > href< / i > =< u > "#"< / u > < i > role< / i > =< u > "button"< / u > > Link< /< b > a< / b > > < / code > < / pre >
< / article >
2019-11-30 12:43:20 +07:00
< p > Buttons come with < code > .secondary< / code > and < code > .contrast< / code > styles.< / p >
2019-12-10 11:14:24 +07:00
< article aria-label = "Buttons styles examples" >
2019-12-08 13:25:46 +07:00
< a href = "#" onclick = "event.preventDefault()" role = "button" class = "secondary" > Secondary< / a >
< a href = "#" onclick = "event.preventDefault()" role = "button" class = "contrast" > Contrast< / a >
2019-11-27 18:35:19 +07:00
2019-11-30 12:43:20 +07:00
< pre > < code > < < b > a< / b > < i > href< / i > =< u > "#"< / u > < i > role< / i > =< u > "button"< / u > < i > class< / i > =< u > "secondary"< / u > > Secondary< /< b > a< / b > >
< < b > a< / b > < i > href< / i > =< u > "#"< / u > < i > role< / i > =< u > "button"< / u > < i > class< / i > =< u > "contrast"< / u > > Contrast< /< b > a< / b > > < / code > < / pre >
2019-11-27 18:35:19 +07:00
< / article >
2019-11-30 12:43:20 +07:00
< p > And a classic < code > .outline< / code > variant.< / p >
2019-12-10 11:14:24 +07:00
< article aria-label = "Outline style examples" >
2019-12-08 13:25:46 +07:00
< a href = "#" onclick = "event.preventDefault()" role = "button" class = "outline" > Primary< / a >
< a href = "#" onclick = "event.preventDefault()" role = "button" class = "secondary outline" > Secondary< / a >
< a href = "#" onclick = "event.preventDefault()" role = "button" class = "contrast outline" > Contrast< / a >
2019-11-30 12:43:20 +07:00
< pre > < code > < < b > a< / b > < i > href< / i > =< u > "#"< / u > < i > role< / i > =< u > "button"< / u > < i > class< / i > =< u > "outline"< / u > > Primary< /< b > a< / b > >
< < b > a< / b > < i > href< / i > =< u > "#"< / u > < i > role< / i > =< u > "button"< / u > < i > class< / i > =< u > "secondary outline"< / u > > Secondary< /< b > a< / b > >
< < b > a< / b > < i > href< / i > =< u > "#"< / u > < i > role< / i > =< u > "button"< / u > < i > class< / i > =< u > "contrast outline"< / u > > Contrast< /< b > a< / b > > < / code > < / pre >
2019-11-27 18:35:19 +07:00
< / article >
< / section > <!-- ./ Docs: Button -->
<!-- Docs: Form -->
< section id = "forms" >
< hgroup >
< h2 > Forms< / h2 >
2021-07-10 10:47:57 +07:00
< h3 > All form elements are in pure semantic HTML and fully responsive, allowing forms to scale gracefully across devices and viewports.< / h3 >
2019-11-27 18:35:19 +07:00
< / hgroup >
2021-07-10 10:47:57 +07:00
< p > Inputs are < code > < i > width< / i > : < u > 100%< / u > ;< / code > by default. You can use < code > .grid< / code > inside a form.< / p >
< p > All natives form elements are fully customizable and themable with CSS variables.< / p >
2019-12-10 11:14:24 +07:00
< article aria-label = "Form example" >
2019-11-27 18:35:19 +07:00
< form >
2019-12-10 11:14:24 +07:00
< div class = "grid" >
2019-12-08 10:35:18 +07:00
< label for = "firstname" >
First name
< input type = "text" id = "firstname" name = "firstname" placeholder = "First name" required >
< / label >
< label for = "lastname" >
Last name
< input type = "text" id = "lastname" name = "lastname" placeholder = "Last name" required >
< / label >
2019-12-10 11:14:24 +07:00
< / div >
2019-11-27 18:35:19 +07:00
< label for = "email" > Email address< / label >
< input type = "email" id = "email" name = "email" placeholder = "Email address" required >
< small > We'll never share your email with anyone else.< / small >
2020-09-29 15:01:44 +07:00
< button type = "submit" aria-label = "Example button" onclick = "event.preventDefault()" > Submit< / button >
2019-11-27 18:35:19 +07:00
< / form >
2019-12-10 14:56:52 +07:00
< pre > < code > < < b > form< / b > >
2019-11-27 18:35:19 +07:00
2019-12-01 16:35:38 +07:00
< em > < !-- Grid --> < / em >
2019-12-10 11:14:24 +07:00
< < b > div< / b > < i > class< / i > =< u > "grid"< / u > >
2019-11-27 18:35:19 +07:00
2019-12-08 10:35:18 +07:00
< em > < !-- Markup example 1: input is inside label --> < / em >
< < b > label< / b > < i > for< / i > =< u > "firstname"< / u > >
First name
< < b > input< / b > < i > type< / i > =< u > "text"< / u > < i > id< / i > =< u > "firstname"< / u > < i > name< / i > =< u > "firstname"< / u > < i > placeholder< / i > =< u > "First name"< / u > < i > required< / i > >
< /< b > label< / b > >
< < b > label< / b > < i > for< / i > =< u > "lastname"< / u > >
Last name
< < b > input< / b > < i > type< / i > =< u > "text"< / u > < i > id< / i > =< u > "lastname"< / u > < i > name< / i > =< u > "lastname"< / u > < i > placeholder< / i > =< u > "Last name"< / u > < i > required< / i > >
< /< b > label< / b > >
2019-11-27 18:35:19 +07:00
2019-12-10 11:14:24 +07:00
< /< b > div< / b > >
2019-11-27 18:35:19 +07:00
2019-12-01 16:35:38 +07:00
< em > < !-- Markup example 2: input is after label --> < / em >
2019-11-27 18:35:19 +07:00
< < b > label< / b > < i > for< / i > =< u > "email"< / u > > Email address< /< b > label< / b > >
< < b > input< / b > < i > type< / i > =< u > "email"< / u > < i > id< / i > =< u > "email"< / u > < i > name< / i > =< u > "email"< / u > < i > placeholder< / i > =< u > "Email address"< / u > < i > required< / i > >
< < b > small< / b > > We'll never share your email with anyone else.< /< b > small< / b > >
2019-12-01 16:35:38 +07:00
< em > < !-- Button --> < / em >
2019-11-27 18:35:19 +07:00
< < b > button< / b > < i > type< / i > =< u > "submit"< / u > > Submit< /< b > button< / b > >
< /< b > form< / b > > < / code > < / pre >
< / article >
< p > Disabled and validation states:< / p >
2019-12-10 11:14:24 +07:00
< article aria-label = "Validation states examples" >
2019-12-08 10:35:18 +07:00
< form class = "grid" >
2020-10-27 12:25:53 +07:00
< input type = "text" placeholder = "Valid" aria-label = "Valid" aria-invalid = "false" >
< input type = "text" placeholder = "Invalid" aria-label = "Invalid" aria-invalid = "true" >
2019-12-08 10:35:18 +07:00
< input type = "text" placeholder = "Disabled" aria-label = "Disabled" disabled >
< input type = "text" value = "Readonly" aria-label = "Readonly" readonly >
2019-11-27 18:35:19 +07:00
< / form >
2020-10-27 12:25:53 +07:00
< pre > < code > < < b > input< / b > < i > type< / i > =< u > "text"< / u > < i > placeholder< / i > =< u > "Valid"< / u > < i > aria-invalid< / i > =< u > "false"< / u > >
< < b > input< / b > < i > type< / i > =< u > "text"< / u > < i > placeholder< / i > =< u > "Invalid"< / u > < i > aria-invalid< / i > =< u > "true"< / u > >
2019-11-27 18:35:19 +07:00
< < b > input< / b > < i > type< / i > =< u > "text"< / u > < i > placeholder< / i > =< u > "Disabled"< / u > < i > disabled< / i > >
< < b > input< / b > < i > type< / i > =< u > "text"< / u > < i > value< / i > =< u > "Readonly"< / u > < i > readonly< / i > > < / code > < / pre >
< / article >
< p > < code > < < b > fieldset< / b > > < / code > are unstyled and act as a container for radios and checkboxes providing a consistent < code > < i > margin-bottom< / i > < / code > for the set.< / p >
< p > < code > < i > role< / i > =< u > "switch"< / u > < / code > on a < code > < i > type< / i > =< u > "checkbox"< / u > < / code > enable a custom switch.< / p >
2019-12-10 11:14:24 +07:00
< article aria-label = "Select, radios, checkboxes, switch examples" >
2021-07-03 11:18:07 +07:00
< label for = "fruit" > Fruit< / label >
< select id = "fruit" required >
2021-07-24 11:56:46 +07:00
< option value = "" selected > Select a fruit…< / option >
2021-07-03 11:18:07 +07:00
< option > Banana< / option >
< option > Watermelon< / option >
< option > Apple< / option >
< option > Orange< / option >
2021-07-05 15:23:58 +07:00
< option > Mango< / option >
2019-11-27 18:35:19 +07:00
< / select >
< fieldset >
2021-07-03 11:18:07 +07:00
< legend > Size< / legend >
< label for = "small" >
< input type = "radio" id = "small" name = "size" value = "small" checked >
Small
2019-11-27 18:35:19 +07:00
< / label >
2021-07-03 11:18:07 +07:00
< label for = "medium" >
< input type = "radio" id = "medium" name = "size" value = "medium" >
Medium
2019-11-27 18:35:19 +07:00
< / label >
2021-07-03 11:18:07 +07:00
< label for = "large" >
< input type = "radio" id = "large" name = "size" value = "large" >
Large
2019-11-27 18:35:19 +07:00
< / label >
< / fieldset >
< fieldset >
< label for = "terms" >
< input type = "checkbox" id = "terms" name = "terms" >
I agree to the Terms and Conditions
< / label >
< / fieldset >
< fieldset >
< label for = "switch" >
2021-07-10 10:47:57 +07:00
< input type = "checkbox" id = "switch" name = "switch" role = "switch" >
2019-11-27 18:35:19 +07:00
Publish on my profile
< / label >
< / fieldset >
2019-12-01 16:35:38 +07:00
< pre > < code > < em > < !-- Select --> < / em >
2021-07-03 11:18:07 +07:00
< < b > label< / b > < i > for< / i > =< u > "fruit"< / u > > Fruit< /< b > label< / b > >
< < b > select< / b > < i > id< / i > =< u > "fruit"< / u > < i > required< / i > >
2021-07-24 11:56:46 +07:00
< < b > option< / b > < i > value< / i > =< u > ""< / u > < i > selected< / i > > Select a fruit…< /< b > option< / b > >
< < b > option< / b > > …< /< b > option< / b > >
2019-11-27 18:35:19 +07:00
< /< b > select< / b > >
2019-12-01 16:35:38 +07:00
< em > < !-- Radios --> < / em >
2019-11-27 18:35:19 +07:00
< < b > fieldset< / b > >
2021-07-03 11:18:07 +07:00
< < b > legend< / b > > Size< /< b > legend< / b > >
< < b > label< / b > < i > for< / i > =< u > "small"< / u > >
< < b > input< / b > < i > type< / i > =< u > "radio"< / u > < i > id< / i > =< u > "small"< / u > < i > name< / i > =< u > "size"< / u > < i > value< / i > =< u > "small"< / u > < i > checked< / i > >
Small
2019-11-27 18:35:19 +07:00
< /< b > label< / b > >
2021-07-03 11:18:07 +07:00
< < b > label< / b > < i > for< / i > =< u > "medium"< / u > >
< < b > input< / b > < i > type< / i > =< u > "radio"< / u > < i > id< / i > =< u > "medium"< / u > < i > name< / i > =< u > "size"< / u > < i > value< / i > =< u > "medium"< / u > >
Medium
2019-11-27 18:35:19 +07:00
< /< b > label< / b > >
2021-07-03 11:18:07 +07:00
< < b > label< / b > < i > for< / i > =< u > "large"< / u > >
< < b > input< / b > < i > type< / i > =< u > "radio"< / u > < i > id< / i > =< u > "large"< / u > < i > name< / i > =< u > "size"< / u > < i > value< / i > =< u > "large"< / u > >
Large
2019-11-27 18:35:19 +07:00
< /< b > label< / b > >
< /< b > fieldset< / b > >
2019-12-01 16:35:38 +07:00
< em > < !-- Checkbox --> < / em >
2019-11-27 18:35:19 +07:00
< < b > fieldset< / b > >
< < b > label< / b > < i > for< / i > =< u > "terms"< / u > >
< < b > input< / b > < i > type< / i > =< u > "checkbox"< / u > < i > id< / i > =< u > "terms"< / u > < i > name< / i > =< u > "terms"< / u > >
I agree to the Terms and Conditions
< /< b > label< / b > >
< /< b > fieldset< / b > >
2019-12-01 16:35:38 +07:00
< em > < !-- Switch --> < / em >
2019-11-27 18:35:19 +07:00
< < b > fieldset< / b > >
< < b > label< / b > < i > for< / i > =< u > "switch"< / u > >
< < b > input< / b > < i > type< / i > =< u > "checkbox"< / u > < i > id< / i > =< u > "switch"< / u > < i > name< / i > =< u > "switch"< / u > < i > role< / i > =< u > "switch"< / u > >
Publish on my profile
< /< b > label< / b > >
< /< b > fieldset< / b > > < / code > < / pre >
< / article >
2020-10-28 08:27:26 +07:00
< p > You can change a checkbox to indeterminate state by setting the < code > < i > indeterminate< / i > < / code > property to < code > < u > true< / u > < / code > < / p >
2020-10-28 08:12:49 +07:00
< article aria-label = "Indeterminate checkbox example" >
2020-10-28 08:30:37 +07:00
< label for = "indeterminate-checkbox" >
2020-10-28 08:27:26 +07:00
< input type = "checkbox" id = "indeterminate-checkbox" name = "indeterminate-checkbox" >
2020-10-01 09:57:21 +07:00
Select all
< / label >
2020-10-28 08:12:49 +07:00
< script > document . getElementById ( 'indeterminate-checkbox' ) . indeterminate = true ; < / script >
2020-10-28 08:27:26 +07:00
< pre > < code > < < b > script< / b > >
< i > document< / i > .< b > getElementById< / b > (< u > 'indeterminate-checkbox'< / u > ).< i > indeterminate< / i > = < u > true< / u > ;
< /< b > script< / b > > < / code > < / pre >
2020-10-01 09:57:21 +07:00
< / article >
< p > Others input types:< / p >
< article aria-label = "File browser, range slider, date, time, color examples" >
< label for = "file" > File browser
< input type = "file" id = "file" name = "file" >
< / label >
< label for = "range" > Range slider
< input type = "range" min = "0" max = "100" value = "50" id = "range" name = "range" >
< / label >
< label for = "date" > Date
< input type = "date" id = "date" name = "date" >
< / label >
< label for = "time" > Time
< input type = "time" id = "time" name = "time" >
< / label >
< label for = "color" > Color
< input type = "color" id = "color" name = "color" value = "#0eaaaa" >
< / label >
< pre > < code > < em > < !-- File browser --> < / em >
< < b > label< / b > < i > for< / i > =< u > "file"< / u > > File browser
< < b > input< / b > < i > type< / i > =< u > "file"< / u > < i > id< / i > =< u > "file"< / u > < i > name< / i > =< u > "file"< / u > >
< /< b > label< / b > >
< em > < !-- Range slider --> < / em >
< < b > label< / b > < i > for< / i > =< u > "range"< / u > > Range slider
< < b > input< / b > < i > type< / i > =< u > "range"< / u > < i > min< / i > =< u > "0"< / u > < i > max< / i > =< u > "100"< / u > < i > value< / i > =< u > "50"< / u > < i > id< / i > =< u > "range"< / u > < i > name< / i > =< u > "range"< / u > >
< /< b > label< / b > >
< em > < !-- Date --> < / em >
< < b > label< / b > < i > for< / i > =< u > "date"< / u > > Date
2020-10-28 08:30:37 +07:00
< < b > input< / b > < i > type< / i > =< u > "date"< / u > < i > id< / i > =< u > "date"< / u > < i > name< / i > =< u > "date"< / u > >
2020-10-01 09:57:21 +07:00
< /< b > label< / b > >
< em > < !-- Time --> < / em >
< < b > label< / b > < i > for< / i > =< u > "time"< / u > > Time
< < b > input< / b > < i > type< / i > =< u > "time"< / u > < i > id< / i > =< u > "time"< / u > < i > name< / i > =< u > "time"< / u > >
< /< b > label< / b > >
< em > < !-- Color --> < / em >
< < b > label< / b > < i > for< / i > =< u > "color"< / u > > Color
< < b > input< / b > < i > type< / i > =< u > "color"< / u > < i > id< / i > =< u > "color"< / u > < i > name< / i > =< u > "color"< / u > < i > value< / i > =< u > "#0eaaaa"< / u > >
< /< b > label< / b > > < / code > < / pre >
< / article >
2019-11-27 18:35:19 +07:00
< / section > <!-- ./ Docs: Form -->
2020-09-29 13:15:05 +07:00
<!-- Docs: Tables -->
< section id = "tables" >
< hgroup >
< h2 > Tables< / h2 >
< h3 > Default styles for tables without < code > .classes< / code > < / h3 >
< / hgroup >
< figure >
< table >
< thead >
< tr >
< th scope = "col" > #< / th >
< th scope = "col" > Heading< / th >
< th scope = "col" > Heading< / th >
< th scope = "col" > Heading< / th >
< th scope = "col" > Heading< / th >
< th scope = "col" > Heading< / th >
< / tr >
< / thead >
< tbody >
< tr >
< th scope = "row" > 1< / th >
< td > Cell< / td >
< td > Cell< / td >
< td > Cell< / td >
< td > Cell< / td >
< td > Cell< / td >
< / tr >
< tr >
< th scope = "row" > 2< / th >
< td > Cell< / td >
< td > Cell< / td >
< td > Cell< / td >
< td > Cell< / td >
< td > Cell< / td >
< / tr >
< tr >
< th scope = "row" > 3< / th >
< td > Cell< / td >
< td > Cell< / td >
< td > Cell< / td >
< td > Cell< / td >
< td > Cell< / td >
< / tr >
< / tbody >
< / table >
< / figure >
< pre > < code > < < b > table< / b > >
< < b > thead< / b > >
< < b > tr< / b > >
< < b > th< / b > < i > scope< / i > =< u > "col"< / u > > #< /< b > th< / b > >
2020-10-28 08:33:02 +07:00
< < b > th< / b > < i > scope< / i > =< u > "col"< / u > > Heading< /< b > th< / b > >
2020-09-29 13:15:05 +07:00
< < b > th< / b > < i > scope< / i > =< u > "col"< / u > > Heading< /< b > th< / b > >
< < b > th< / b > < i > scope< / i > =< u > "col"< / u > > Heading< /< b > th< / b > >
< /< b > tr< / b > >
< /< b > thead< / b > >
< < b > tbody< / b > >
< < b > tr< / b > >
< < b > th< / b > < i > scope< / i > =< u > "row"< / u > >1< /< b > th< / b > >
< < b > td< / b > >Cell< /< b > td< / b > >
< < b > td< / b > >Cell< /< b > td< / b > >
< < b > td< / b > >Cell< /< b > td< / b > >
< /< b > tr< / b > >
< /< b > tbody< / b > >
< /< b > table< / b > > < / code > < / pre >
< p > < code > < i > role< / i > =< u > "grid"< / u > < / code > enable striped rows.< / p >
< figure >
< table role = "grid" >
< thead >
< tr >
< th scope = "col" > #< / th >
< th scope = "col" > Heading< / th >
< th scope = "col" > Heading< / th >
< th scope = "col" > Heading< / th >
< th scope = "col" > Heading< / th >
< th scope = "col" > Heading< / th >
< / tr >
< / thead >
< tbody >
< tr >
< th scope = "row" > 1< / th >
< td > Cell< / td >
< td > Cell< / td >
< td > Cell< / td >
< td > Cell< / td >
< td > Cell< / td >
< / tr >
< tr >
< th scope = "row" > 2< / th >
< td > Cell< / td >
< td > Cell< / td >
< td > Cell< / td >
< td > Cell< / td >
< td > Cell< / td >
< / tr >
< tr >
< th scope = "row" > 3< / th >
< td > Cell< / td >
< td > Cell< / td >
< td > Cell< / td >
< td > Cell< / td >
< td > Cell< / td >
< / tr >
< / tbody >
< / table >
< / figure >
< pre > < code > < < b > table< / b > < i > role< / i > =< u > "grid"< / u > >
2021-07-24 11:56:46 +07:00
< em > …< / em >
2020-09-29 13:15:05 +07:00
< /< b > table< / b > > < / code > < / pre >
< / section > <!-- ./ Docs: Tables -->
2019-11-27 18:35:19 +07:00
<!-- Docs: Accordions -->
< section id = "accordions" >
< hgroup >
< h2 > Accordions< / h2 >
2019-11-28 21:51:58 +07:00
< h3 > Toggle sections of content in pure HTML, without JavaScript.< / h3 >
2019-11-27 18:35:19 +07:00
< / hgroup >
2019-12-10 11:14:24 +07:00
< article aria-label = "Accordions examples" >
2019-11-27 18:35:19 +07:00
< details >
< summary > Collapsible elements 1< / summary >
< p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit amet, congue turpis.< / p >
< / details >
2019-11-30 12:43:20 +07:00
< details open >
2019-11-27 18:35:19 +07:00
< summary > Collapsible elements 2< / summary >
< ul >
< li > Vestibulum id elit quis massa interdum sodales.< / li >
< li > Nunc quis eros vel odio pretium tincidunt nec quis neque.< / li >
< li > Quisque sed eros non eros ornare elementum.< / li >
< li > Cras sed libero aliquet, porta dolor quis, dapibus ipsum.< / li >
< / ul >
< / details >
< pre > < code > < < b > details< / b > >
< < b > summary< / b > > Collapsible elements 1< /< b > summary< / b > >
2021-07-24 11:56:46 +07:00
< < b > p< / b > > …< /< b > p< / b > >
2019-11-27 18:35:19 +07:00
< /< b > details< / b > >
2019-12-02 12:42:25 +07:00
< < b > details< / b > < i > open< / i > >
2019-11-27 18:35:19 +07:00
< < b > summary< / b > > Collapsible elements 2< /< b > summary< / b > >
< < b > ul< / b > >
2021-07-24 11:56:46 +07:00
< < b > li< / b > > …< /< b > li< / b > >
< < b > li< / b > > …< /< b > li< / b > >
2019-11-27 18:35:19 +07:00
< /< b > ul< / b > >
< /< b > details< / b > > < / code > < / pre >
< / article >
< / section > <!-- ./ Docs: Accordions -->
<!-- Docs: Cards -->
< section id = "cards" >
< hgroup >
< h2 > Cards< / h2 >
2021-07-03 11:18:07 +07:00
< h3 > A flexible container with graceful spacings across devices and viewports.< / h3 >
2019-11-27 18:35:19 +07:00
< / hgroup >
2019-12-10 11:14:24 +07:00
< article aria-label = "Card example" >
2019-11-27 18:35:19 +07:00
I'm a card!
< / article >
2019-12-02 12:42:25 +07:00
< pre > < code > < < b > article< / b > > I'm a card!< /< b > article< / b > > < / code > < / pre >
2019-12-01 16:35:38 +07:00
< p > You can use < code > < < b > header< / b > > < / code > and footer < code > < < b > footer< / b > > < / code > inside < code > < < b > article< / b > > < / code > < / p >
2019-12-10 11:14:24 +07:00
< article aria-label = "Card sectioning example" >
2020-11-14 21:13:25 +00:00
< header > Header< / header >
2019-12-01 16:35:38 +07:00
Body
2019-12-02 12:42:25 +07:00
< footer > Footer< / footer >
2019-12-01 16:35:38 +07:00
< / article >
< pre > < code > < < b > article< / b > >
2020-11-14 21:13:25 +00:00
< < b > header< / b > > Header< /< b > header< / b > >
2019-12-01 16:35:38 +07:00
Body
2019-12-02 12:42:25 +07:00
< < b > footer< / b > > Footer< /< b > footer< / b > >
2019-12-01 16:35:38 +07:00
< /< b > article< / b > > < / code > < / pre >
2019-11-27 18:35:19 +07:00
< / section > <!-- ./ Docs: Card -->
<!-- Docs: Navs -->
< section id = "navs" >
< hgroup >
< h2 > Navs< / h2 >
2019-11-28 21:51:58 +07:00
< h3 > The essential navbar component in pure semantic HTML.< / h3 >
2019-11-27 18:35:19 +07:00
< / hgroup >
2019-12-10 11:14:24 +07:00
< article aria-label = "Nav example" >
2019-11-27 18:35:19 +07:00
< nav >
< ul >
< li > < strong > Brand< / strong > < / li >
< / ul >
< ul >
2019-12-08 13:25:46 +07:00
< li > < a href = "#" onclick = "event.preventDefault()" > Link< / a > < / li >
< li > < a href = "#" onclick = "event.preventDefault()" > Link< / a > < / li >
< li > < a href = "#" onclick = "event.preventDefault()" > Link< / a > < / li >
2019-11-27 18:35:19 +07:00
< / ul >
< / nav >
< pre > < code > < < b > nav< / b > >
< < b > ul< / b > >
< < b > li< / b > > < < b > strong< / b > > Brand< /< b > strong< / b > > < /< b > li< / b > >
< /< b > ul< / b > >
< < b > ul< / b > >
< < b > li< / b > > < < b > a< / b > < i > href< / i > =< u > "#"< / u > > Link< /< b > a< / b > > < /< b > li< / b > >
< < b > li< / b > > < < b > a< / b > < i > href< / i > =< u > "#"< / u > > Link< /< b > a< / b > > < /< b > li< / b > >
< < b > li< / b > > < < b > a< / b > < i > href< / i > =< u > "#"< / u > > Link< /< b > a< / b > > < /< b > li< / b > >
< /< b > ul< / b > >
< /< b > nav< / b > > < / code > < / pre >
< / article >
< p > < code > < < b > ul< / b > > < / code > are automatically distributed horizontally.< / p >
< p > < code > < < b > li< / b > > < / code > are unstyled and inlined.< / p >
2019-12-10 11:14:24 +07:00
< article aria-label = "Nav example" >
2019-11-27 18:35:19 +07:00
< nav >
< ul >
< li >
2019-12-08 13:25:46 +07:00
< a href = "#" onclick = "event.preventDefault()" class = "secondary" aria-label = "Menu" >
2020-10-27 11:19:44 +07:00
< svg aria-hidden = "true" focusable = "false" role = "img" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" height = "16px" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" >
2019-11-27 18:35:19 +07:00
< line x1 = "3" y1 = "12" x2 = "21" y2 = "12" >
< / line > < line x1 = "3" y1 = "6" x2 = "21" y2 = "6" >
< / line > < line x1 = "3" y1 = "18" x2 = "21" y2 = "18" >
< / line >
< / svg >
< / a >
< / li >
< / ul >
< ul >
< li > < strong > Brand< / strong > < / li >
< / ul >
< ul >
< li >
2019-12-08 13:25:46 +07:00
< a href = "#" onclick = "event.preventDefault()" class = "secondary" aria-label = "Twitter" >
2020-10-27 11:19:44 +07:00
< svg aria-hidden = "true" focusable = "false" role = "img" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" height = "16px" fill = "currentColor" stroke = "none" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" >
2019-11-27 18:35:19 +07:00
< path d = "M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" > < / path >
< / svg >
< / a >
< / li >
< / ul >
< / nav >
< pre > < code > < < b > nav< / b > >
< < b > ul< / b > >
2021-07-24 11:56:46 +07:00
< < b > li< / b > > < < b > a< / b > < i > href< / i > =< u > "#"< / u > < i > class< / i > =< u > "secondary"< / u > > …< /< b > a< / b > > < /< b > li< / b > >
2019-11-27 18:35:19 +07:00
< /< b > ul< / b > >
< < b > ul< / b > >
< < b > li< / b > > < < b > strong< / b > > Brand< /< b > strong< / b > > < /< b > li< / b > >
< /< b > ul< / b > >
< < b > ul< / b > >
2021-07-24 11:56:46 +07:00
< < b > li< / b > > < < b > a< / b > < i > href< / i > =< u > "#"< / u > < i > class< / i > =< u > "secondary"< / u > > …< /< b > a< / b > > < /< b > li< / b > >
2019-11-27 18:35:19 +07:00
< /< b > ul< / b > >
< /< b > nav< / b > > < / code > < / pre >
< / article >
< p > Inside < code > < < b > aside< / b > > < / code > , navs are stacked vertically.< / p >
2019-12-10 11:14:24 +07:00
< article aria-label = "Vertical nav example" >
2019-11-27 18:35:19 +07:00
< aside >
< nav >
< ul >
2019-12-08 13:25:46 +07:00
< li > < a href = "#" onclick = "event.preventDefault()" > Link< / a > < / li >
< li > < a href = "#" onclick = "event.preventDefault()" > Link< / a > < / li >
< li > < a href = "#" onclick = "event.preventDefault()" > Link< / a > < / li >
2019-11-27 18:35:19 +07:00
< / ul >
< / nav >
< / aside >
< pre > < code > < < b > aside< / b > >
< < b > nav< / b > >
< < b > ul< / b > >
< < b > li< / b > > < < b > a< / b > < i > href< / i > =< u > "#"< / u > > Link< /< b > a< / b > > < /< b > li< / b > >
< < b > li< / b > > < < b > a< / b > < i > href< / i > =< u > "#"< / u > > Link< /< b > a< / b > > < /< b > li< / b > >
< < b > li< / b > > < < b > a< / b > < i > href< / i > =< u > "#"< / u > > Link< /< b > a< / b > > < /< b > li< / b > >
< /< b > ul< / b > >
< /< b > nav< / b > >
< /< b > aside< / b > > < / code > < / pre >
< / article >
< / section > <!-- ./ Docs: Nav -->
2020-09-30 10:28:06 +07:00
<!-- Docs: Progress -->
< section id = "progress" >
< hgroup >
< h2 > Progress< / h2 >
< h3 > Progress bar element in pure HTML, without JavaScript.< / h3 >
< / hgroup >
2020-10-28 08:12:49 +07:00
< article aria-label = "Progress bar example" >
2020-09-30 10:28:06 +07:00
< progress value = "25" max = "100" > < / progress >
2020-10-28 08:12:49 +07:00
< pre > < code > < < b > progress< / b > < i > value< / i > =< u > "25< / u > " < i > max< / i > =< u > "100"< / u > > < /< b > progress< / b > > < / code > < / pre >
< / article >
2020-10-28 08:27:26 +07:00
< p > You can change a progress bar to indeterminate state by setting the < code > < i > indeterminate< / i > < / code > property to < code > < u > true< / u > < / code > < / p >
2020-10-28 08:12:49 +07:00
< article aria-label = "Indeterminate progress bar example" >
< progress id = "indeterminate-progress" > < / progress >
< script > document . getElementById ( 'indeterminate-progress' ) . indeterminate = true ; < / script >
2020-10-28 08:27:26 +07:00
< pre > < code > < < b > script< / b > >
< i > document< / i > .< b > getElementById< / b > (< u > 'indeterminate-progress'< / u > ).< i > indeterminate< / i > = < u > true< / u > ;
< /< b > script< / b > > < / code > < / pre >
2020-09-30 10:28:06 +07:00
< / article >
< / section > <!-- ./ Docs: Progress -->
2021-07-17 15:19:19 +07:00
<!-- Docs: Loading -->
< section id = "loading" >
< hgroup >
< h2 > Loading< / h2 >
< h3 > < code > < i > aria-busy< / i > =< u > "true"< / u > < / code > enable a loading indicator.< / h3 >
< / hgroup >
< article aria-label = "Loading buttons example" >
2021-07-24 11:56:46 +07:00
< button aria-busy = "true" > Please wait…< / button >
2021-07-17 15:19:19 +07:00
< button aria-busy = "true" class = "secondary" > < / button >
2021-07-24 11:56:46 +07:00
< pre > < code > < < b > button< / b > < i > aria-busy< / i > =< u > "true"< / u > > Please wait…< /< b > button< / b > >
2021-07-17 15:19:19 +07:00
< < b > button< / b > < i > aria-busy< / i > =< u > "true"< / u > < i > class< / i > =< u > "secondary"< / u > > < /< b > button< / b > > < / code > < / pre >
< / article >
< p > It can be applied to any block:< / p >
< article aria-busy = "true" > < / article >
< pre > < code > < < b > article< / b > < i > aria-busy< / i > =< u > "true"< / u > > < /< b > article< / b > > < / code > < / pre >
< p > Or any text element:< / p >
< article aria-label = "Loading paragraph example" >
2021-07-24 11:56:46 +07:00
< a href = "#" aria-busy = "true" onclick = "event.preventDefault()" > Generating link, please wait…< / a >
< pre > < code > < < b > a< / b > < i > href< / i > =< u > "#"< / u > < i > aria-busy< / i > =< u > "true"< / u > > Generating link, please wait…< /< b > a< / b > > < / code > < / pre >
2021-07-17 15:19:19 +07:00
< / article >
< / section > <!-- ./ Docs: Loading -->
2019-11-27 18:35:19 +07:00
<!-- Docs: Tooltips -->
< section id = "tooltips" >
< hgroup >
< h2 > Tooltips< / h2 >
2019-11-28 21:51:58 +07:00
< h3 > Enable tooltips everywhere in pure HTML, without JavaScript.< / h3 >
2019-11-27 18:35:19 +07:00
< / hgroup >
2019-12-10 11:14:24 +07:00
< article aria-label = "Tooltips examples" >
2019-12-08 13:25:46 +07:00
< p > Tooltip on a < a href = "#" onclick = "event.preventDefault()" data-tooltip = "Tooltip" > link< / a > < / p >
2019-11-27 18:35:19 +07:00
< p > Tooltip on < em data-tooltip = "Tooltip" > inline element< / em > < / p >
2019-11-28 21:51:58 +07:00
< p > < button data-tooltip = "Tooltip" aria-label = "Example button" > Tooltip on a button< / button > < / p >
2019-11-27 18:35:19 +07:00
< pre > < code > < < b > p< / b > > Tooltip on a < < b > a< / b > < i > href< / i > =< u > "#"< / u > < i > data-tooltip< / i > =< u > "Tooltip"< / u > > link< /< b > a< / b > > < /< b > p< / b > >
< < b > p< / b > > Tooltip on < < b > em< / b > < i > data-tooltip< / i > =< u > "Tooltip"< / u > > inline element< /< b > em< / b > > < /< b > p< / b > >
2019-11-28 07:20:36 +07:00
< < b > p< / b > > < < b > button< / b > < i > data-tooltip< / i > =< u > "Tooltip"< / u > > Tooltip on a button< /< b > button< / b > > < /< b > p< / b > > < / code > < / pre >
2019-11-27 18:35:19 +07:00
< / article >
2020-09-30 10:28:06 +07:00
< / section > <!-- ./ Docs: Tooltips -->
2019-11-27 18:35:19 +07:00
<!-- Love -->
< section id = "love" >
2019-12-02 12:42:25 +07:00
< h2 > We love < code > .classes< / code > < / h2 >
2020-09-29 08:38:35 +07:00
< p > As a starting point, Pico chose to be as neutral and semantic as possible using very few < code > .classes< / code > < / p >
2021-07-10 10:47:57 +07:00
< p > But of course, < code > .classes< / code > are not a bad practice at all.< / p >
2019-11-27 18:35:19 +07:00
< p > Feel free to use < em > modifiers< / em > .< / p >
2019-12-10 11:14:24 +07:00
< div data-theme = "valid" >
2019-12-08 10:35:18 +07:00
< pre > < code > < < b > button< / b > < i > class< / i > =< u > "warning"< / u > > Action< /< b > button< / b > > < br > < / code > < / pre >
2019-12-10 11:14:24 +07:00
< / div >
2019-12-02 12:42:25 +07:00
< p > Just try to keep your HTML clean and semantic to keep the Pico spirit.< / p >
2019-12-10 11:14:24 +07:00
< div data-theme = "invalid" >
2019-12-08 10:35:18 +07:00
< pre > < code > < < b > button< / b > < i > class< / i > =< u > "button-red margin-large padding-medium"< / u > > Action< /< b > button< / b > > < br > < / code > < / pre >
2019-12-10 11:14:24 +07:00
< / div >
2019-11-27 18:35:19 +07:00
< / section > <!-- ./ Love -->
<!-- Footer -->
< footer >
2019-12-08 10:35:18 +07:00
< hr >
< p >
< small >
2020-10-01 09:57:21 +07:00
Openly inspired by < a href = "https://getbootstrap.com/" class = "secondary" > Bootstrap< / a > , < a href = "https://www.cssbed.com/" class = "secondary" > CSS Bed< / a > , < a href = "https://necolas.github.io/normalize.css/" class = "secondary" > Normalize< / a > , < a href = "https://csstools.github.io/sanitize.css/" class = "secondary" > Sanitize< / a > , < a href = "https://picturepan2.github.io/spectre/" class = "secondary" > Spectre< / a > & < a href = " https://kbrsh.github.io/wing/" class = "secondary" > Wing< / a > < br >
2019-12-08 10:35:18 +07:00
Licensed under the < a href = "https://github.com/picocss/pico/blob/master/LICENSE.md" class = "secondary" > MIT License< / a > < br >
< / small >
< / p >
2019-11-27 18:35:19 +07:00
< / footer > <!-- ./ Footer -->
2019-11-28 07:20:36 +07:00
< / div > <!-- ./ Document -->
2019-11-27 18:35:19 +07:00
< / main > <!-- ./ Main -->
2019-11-28 07:20:36 +07:00
<!-- JavaScript -->
2021-07-10 10:47:57 +07:00
< script src = "js/pico.docs.min.js" > < / script >
2019-11-27 18:35:19 +07:00
< / body >
< / html >
