diff --git a/.gitignore b/.gitignore
index 4555f533..b42c05a9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,4 @@
*.DS_Store
TODO.md
-prepros-6.config
+prepros.config
test.html
diff --git a/README.md b/README.md
index bdd38cde..96cb1d04 100644
--- a/README.md
+++ b/README.md
@@ -23,10 +23,10 @@
We use simple native HTML tags as much as possible. Only 6 .classes are used in Pico.
**Great styles with just one CSS file**
-No dependencies, package manager, external files or JavaScript.
+No dependencies, package manager, external files, or JavaScript.
**Responsive everything**
-Elegant and consistent adaptatives spacings and typography on all devices.
+Elegant and consistent adaptative spacings and typography on all devices.
**Light or Dark mode**
Shipped with two beautiful color themes, automatically enabled according to the user preference.
@@ -73,7 +73,7 @@ Pico provide a `.classless` version ([example](https://picocss.com/examples/clas
In this version, `header`, `main` and `footer` act as container.
-Use the default `.classless `version if you need centered viewports:
+Use the default `.classless` version if you need centered viewports:
```html
Pico.css • Graceful & Minimal CSS design system
-
Themes
- Pico is shipped with 2 consistents themes: Light & Dark.
+ Pico is shipped with 2 consistent themes: Light & Dark.
- The Light theme is used by default. The Dark theme is automatically enabled if user has dark mode enabled prefers-color-scheme : 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
...
@@ -186,7 +186,7 @@
-
@@ -194,7 +194,7 @@
// Simplified example
:root {
- --primary : ... ;
+ --primary : ... ;
}
You can find all the CSS variables used in the default theme here: css/themes/default.css
Importing Pico SASS library
- It is recommended to customize Pico by importing SASS source files in your project. This way you can keep Pico up to date without conflicts since Pico code and your custom code are separated.
+ 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.
Compile the SASS file to CSS to get a custom version of Pico.
/* Custom version */
@@ -258,7 +258,7 @@
// Import full Pico source code
@import "path/pico" ;Alternatively, you can create a custom theme and import it in your project with the components you need.
+ Alternatively, you can create a custom theme and import it into your project with the components you need.
/* Custom version */
@@ -271,7 +271,7 @@
...
This allows to create a lighter version with only the components that are useful to you. Example here: scss/pico.slim.scss .
+ This allows you to create a lighter version with only the components that are useful to you. Example here: scss/pico.slim.scss .
@@ -280,8 +280,8 @@
Class-less version
For wild HTML purists!
- Pico provide a .classless version (example ).
- In this version, <header >, <main > and <footer > act as containers to define a centered or a fluid viewport.
+ Pico provides a .classless version (example ).
+ In this version, <header >, <main >, and <footer > act as containers to define a centered or a fluid viewport.
Usage:
Use the default .classless version if you need centered viewports:
<link rel ="stylesheet " href ="css/pico.classless.min.css" >
diff --git a/docs/js/pico.docs.js b/docs/js/pico.docs.js
index 8e7d610d..7f656894 100644
--- a/docs/js/pico.docs.js
+++ b/docs/js/pico.docs.js
@@ -1,13 +1,35 @@
-/*!
+/*
* Add some magic to Pico docs
*
* Pico.css - https://picocss.com
* Copyright 2019-2021 - Licensed under MIT
*/
-// @append src/aside.js
-// @append src/theme-switcher.js
-// @append src/grid.js
-// @append src/color-picker.js
-// @append src/most-visible.js
-// @append src/scrollspy.js
+// Imports
+import { aside } from './src/aside.js';
+import { themeSwitcher } from './src/theme-switcher.js';
+import { materialDesignColors } from './src/material-design-colors.js';
+import { colorPicker } from './src/color-picker.js';
+import { grid } from './src/grid.js';
+import { scrollspy } from './src/scrollspy.js';
+
+// Aside initial state
+aside.init();
+
+// Theme switcher
+themeSwitcher.addButton({
+ tag: 'BUTTON',
+ class: 'contrast switcher theme-switcher',
+ target: 'body',
+});
+themeSwitcher.init();
+
+// Color Picker
+colorPicker.colors = materialDesignColors;
+colorPicker.init();
+
+// Grid Interaction
+grid.init();
+
+// Scrollspy
+scrollspy.init();
diff --git a/docs/js/pico.docs.min.js b/docs/js/pico.docs.min.js
index cfaffb92..62e56c43 100644
--- a/docs/js/pico.docs.min.js
+++ b/docs/js/pico.docs.min.js
@@ -1 +1 @@
-!function(){if(window.matchMedia("(min-width: 992px)").matches){var e=document.querySelector("aside nav"),t=document.querySelectorAll("aside details");if(e.clientHeight