Toggle sections of content in pure HTML, without JavaScript.
Collapsible elements 1
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.
Collapsible elements 2
Vestibulum id elit quis massa interdum sodales.
Nunc quis eros vel odio pretium tincidunt nec quis neque.
Quisque sed eros non eros ornare elementum.
Cras sed libero aliquet, porta dolor quis, dapibus ipsum.
\ No newline at end of file
diff --git a/docs/buttons.html b/docs/buttons.html
new file mode 100644
index 00000000..50c59c84
--- /dev/null
+++ b/docs/buttons.html
@@ -0,0 +1,6 @@
+Buttons • Pico.css
Buttons
The essential button in pure HTML, without .classes for the default style.
Buttons are width: 100%; by default. Use <arole="button"> if you need an inline element.
\ No newline at end of file
diff --git a/docs/cards.html b/docs/cards.html
new file mode 100644
index 00000000..77c9c86e
--- /dev/null
+++ b/docs/cards.html
@@ -0,0 +1,5 @@
+Cards • Pico.css
Cards
A flexible container with graceful spacings across devices and viewports.
I'm a card!
<article>I'm a card!</article>
You can use <header> and footer <footer> inside <article>
HeaderBody
<article>
+ <header>Header</header>
+ Body
+ <footer>Footer</footer>
+</article>
\ No newline at end of file
diff --git a/docs/classless.html b/docs/classless.html
new file mode 100644
index 00000000..febe8ab1
--- /dev/null
+++ b/docs/classless.html
@@ -0,0 +1,5 @@
+Class-less version • Pico.css
You can customize themes with SCSS or, you can edit the CSS variables.
Example: pick a color!
Custom theme
There are 2 ways to customize your version of Pico.css:
Overriding CSS variables
All Pico's styles and colors are set with CSS custom properties (variables). Just override the CSS variables to customize your version of Pico.
/* Light scheme (Default) */
+/* Can be forced with data-theme="light" */
+[data-theme="light"],
+:root:not([data-theme="dark"]) {
+ --primary: …;
+ --primary-hover: …;
+ --primary-focus: …;
+ --primary-inverse: …;
+}
+
+/* Dark scheme (Auto) */
+/* Automatically enabled if user has Dark mode enabled */
+@media only screen and (prefers-color-scheme: dark) {
+ :root:not([data-theme="light"]) {
+ --primary: …;
+ --primary-hover: …;
+ --primary-focus: …;
+ --primary-inverse: …;
+ }
+}
+
+/* Dark scheme (Forced) */
+/* Enabled if forced with data-theme="dark" */
+[data-theme="dark"] {
+ --primary: …;
+ --primary-hover: …;
+ --primary-focus: …;
+ --primary-inverse: …;
+}
+
+/* (Common styles) */
+:root {
+ --form-element-active-border-color: var(--primary);
+ --form-element-focus-color: var(--primary-focus);
+ --switch-color: var(--primary-inverse);
+ --switch-checked-background-color: var(--primary);
+}
+
You can find all the CSS variables used in the default theme here: css/themes/default.css
Importing Pico SASS library
We recommend customizing 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.
Compile the SASS file to CSS to get a custom version of Pico.
Compiling a custom SASS version allows you to create a lighter version with only the components that are useful to you. Example here: scss/pico.slim.scss.
\ No newline at end of file
diff --git a/docs/forms.html b/docs/forms.html
new file mode 100644
index 00000000..a8bd5be2
--- /dev/null
+++ b/docs/forms.html
@@ -0,0 +1,93 @@
+Forms • Pico.css
Forms
All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports.
Inputs are width: 100%; by default. You can use .grid inside a form.
All natives form elements are fully customizable and themeable with CSS variables.
Disabled and validation states:
<fieldset> is unstyled and acts as a container for radios and checkboxes, providing a consistent margin-bottom for the set.
role="switch" on a type="checkbox" enable a custom switch.
You can change a checkbox to an indeterminate state by setting the indeterminate property to true
Others input types:
\ No newline at end of file
diff --git a/docs/grid.html b/docs/grid.html
new file mode 100644
index 00000000..7984f77b
--- /dev/null
+++ b/docs/grid.html
@@ -0,0 +1,6 @@
+Grid • Pico.css
Grid
.grid enable a minimal grid system with auto-layout columns.
1
2
3
4
Columns intentionally collapses below large devices (992px)
As Pico focuses on native HTML elements, we kept this grid system very minimalist.
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.
If you need a quick way to prototyping or build a complex layout, you can look at Flexbox grid layouts. For example, Bootstrap Grid System only or Flexbox Grid.
Pico is shipped with 2 consistent themes: Light & Dark.
-
-
The Light theme is used by default. The Dark theme is automatically enabled if the user has dark mode enabled prefers-color-scheme: dark
-
-
-
-
Themes can be forced on document level <htmldata-theme="light"> or on any HTML element <articledata-theme="dark">
-
-
Light theme
-
-
-
-
-
Dark theme
-
-
-
-
-
-
-
-
-
Customization
-
You can customize themes with SCSS or, you can edit the CSS variables.
-
-
Example: pick a color!
-
-
-
Custom theme
-
-
-
-
There are 2 ways to customize your version of Pico.css:
-
Overriding CSS variables
-
All Pico's styles and colors are set with CSS custom properties (variables). Just override the CSS variables to customize your version of Pico.
-
-
/* Light scheme (Default) */
-/* Can be forced with data-theme="light" */
-[data-theme="light"],
-:root:not([data-theme="dark"]) {
- --primary: …;
- --primary-hover: …;
- --primary-focus: …;
- --primary-inverse: …;
-}
-
-/* Dark scheme (Auto) */
-/* Automatically enabled if user has Dark mode enabled */
-@media only screen and (prefers-color-scheme: dark) {
- :root:not([data-theme="light"]) {
- --primary: …;
- --primary-hover: …;
- --primary-focus: …;
- --primary-inverse: …;
- }
-}
-
-/* Dark scheme (Forced) */
-/* Enabled if forced with data-theme="dark" */
-[data-theme="dark"] {
- --primary: …;
- --primary-hover: …;
- --primary-focus: …;
- --primary-inverse: …;
-}
-
-/* (Common styles) */
-:root {
- --form-element-active-border-color: var(--primary);
- --form-element-focus-color: var(--primary-focus);
- --switch-color: var(--primary-inverse);
- --switch-checked-background-color: var(--primary);
-}
-
-
-
You can find all the CSS variables used in the default theme here: css/themes/default.css
-
Importing Pico SASS library
-
We recommend customizing 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.
-
Compile the SASS file to CSS to get a custom version of Pico.
Compiling a custom SASS version allows you to create a lighter version with only the components that are useful to you. Example here: scss/pico.slim.scss.
As Pico focuses on native HTML elements, we kept this grid system very minimalist.
-
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.
-
If you need a quick way to prototyping or build a complex layout, you can look at Flexbox grid layouts. For example, Bootstrap Grid System only or Flexbox Grid.
Toggle sections of content in pure HTML, without JavaScript.
-
-
-
- Collapsible elements 1
-
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.
-
-
- Collapsible elements 2
-
-
Vestibulum id elit quis massa interdum sodales.
-
Nunc quis eros vel odio pretium tincidunt nec quis neque.
-
Quisque sed eros non eros ornare elementum.
-
Cras sed libero aliquet, porta dolor quis, dapibus ipsum.
-
-
-
-
-
-
-
-
-
-
Cards
-
A flexible container with graceful spacings across devices and viewports.
-
-
- I'm a card!
-
-
<article>I'm a card!</article>
-
You can use <header> and footer <footer> inside <article>
-
- Header
- Body
-
-
-
-
<article>
- <header>Header</header>
- Body
- <footer>Footer</footer>
-</article>
-
-
-
-
-
-
-
Navs
-
The essential navbar component in pure semantic HTML.
-
-
-
-
-
-
<ul> are automatically distributed horizontally.
-
<li> are unstyled and inlined.
-
-
-
-
-
Inside <aside>, navs are stacked vertically.
-
-
-
-
-
-
-
-
-
-
Progress
-
Progress bar element in pure HTML, without JavaScript.
-
-
-
-
-
-
You can change a progress bar to an indeterminate state by setting the indeterminate property to true