Highlighting of the classless version

+ code cleaning
2025-02-22 00:04:36 -05:00 · 2021-07-02 23:04:17 +07:00 · 2021-07-02 23:04:17 +07:00 · 0c1d8b5972
commit 0c1d8b5972
parent dd534ef6a6
5 changed files with 84 additions and 22 deletions
--- a/README.md
+++ b/README.md
@ -13,44 +13,96 @@
  <a href="https://picocss.com/docs/">Documentation</a>
 </p>

-# Pico.css
+## Pico.css
 [![CSS Gzipped](https://img.badgesize.io/picocss/pico/master/css/pico.min.css?compression=gzip&color=1095c1&label=CSS%20gzipped)](https://unpkg.com/@picocss/pico@latest/css/pico.min.css)
 [![Github release](https://img.shields.io/github/v/release/picocss/pico?color=1095c1&logo=github&logoColor=white)](https://github.com/picocss/pico/releases/latest)
 [![npm version](https://img.shields.io/npm/v/@picocss/pico?color=1095c1)](https://www.npmjs.com/package/@picocss/pico)
 [![License](https://img.shields.io/badge/license-MIT-%231095c1)](https://github.com/picocss/pico/blob/master/LICENSE.md)

+**Class-light and semantic**  
+We use simple native HTML tags as much as possible. Only 6 .classes are used in Pico.

- **Class-light and semantic**: 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.

- **Great styles with just one CSS file**: No dependencies, package manager, external files or JavaScript.
+**Responsive everything**  
+Elegant and consistent adaptatives spacings and typography on all devices.

- **Responsive everything**: Elegant and consistent adaptatives spacings and typography on all devices.
+**Light or Dark mode**  
+Shipped with two beautiful color themes, automatically enabled according to the user preference.

- **Light or Dark mode**: Shipped with two beautiful color themes, automatically enabled according to the user preference.
+## Table of contents
+
+- [Usage](#usage)
+- [Class-less version](#class-less-version)
+- [Examples](#examples)
+- [Documentation](#documentation)
+- [Variations](#variations)
+- [Contributing](#contributing)
+- [Copyright and license](#copyright-and-license)

 ## Usage

 There are 3 ways to get started with pico.css:

-### Install manually
+**Install manually**
+
 [Download Pico](https://github.com/picocss/pico/releases/latest) and link `/css/pico.min.css` in the `<head>` of your website.

 ```html
 <link rel="stylesheet" href="css/pico.min.css">
 ```

-### Install from CDN
+**Install from CDN**
+
 Alternatively, you can use the [unpkg CDN](https://unpkg.com/@picocss/pico@latest/) to link pico.css.

 ```html
 <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
 ```

-### Install with NPM
+**Install with NPM**
+
 ```shell
 npm install @picocss/pico
 ```

+## Class-less version
+
+Pico provide a `.classless` version ([example](https://picocss.com/examples/classless)).  
+In this version, `header`, `main` and `footer` act as container.
+
+Use the default `.classless `version if you need centered viewports:
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css">
+```
+
+Or use the `.fluid.classless` version if you need a fluid container:
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.fluid.classless.min.css">
+```
+
+Then just write pure HTML, and it should look great:
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css">
+    <title>Hello, world!</title>
+  </head>
+  <body>
+    <main>
+      <h1>Hello, world!</h1>
+    </main>
+  </body>
+</html>
+```
+
 ## Examples

 Minimalist templates to discover Pico in action:
@ -97,11 +149,14 @@ All examples are open-sourced in [picocss/examples](https://github.com/picocss/e
 - [Typography](https://picocss.com/docs/#typography)
 - [Buttons](https://picocss.com/docs/#buttons)
 - [Forms](https://picocss.com/docs/#forms)
+- [Tables](https://picocss.com/docs/#tables)
+

 **Components**
 - [Accordions](https://picocss.com/docs/#accordions)
 - [Cards](https://picocss.com/docs/#cards)
 - [Navs](https://picocss.com/docs/#navs)
+- [Progress](https://picocss.com/docs/#progress)
 - [Tooltips](https://picocss.com/docs/#tooltips)

 ## Variations
--- a/css/themes/default.min.css
+++ b/css/themes/default.min.css
--- a/docs/index.html
+++ b/docs/index.html
@ -3,7 +3,7 @@

  <head>
    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <title>Pico.css • Graceful & Minimal CSS design system</title>
    <link rel="shortcut icon" href="img/favicon.ico">
@ -116,7 +116,7 @@
 &lt;<b>html</b> <i>lang</i>=<u>"en"</u>&gt;
  &lt;<b>head</b>&gt;
    &lt;<b>meta</b> <i>charset</i>=<u>"utf-8"</u>&gt;
-    &lt;<b>meta</b> <i>name</i>=<u>"viewport"</u> <i>content</i>=<u>"width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"</u>&gt;
+    &lt;<b>meta</b> <i>name</i>=<u>"viewport"</u> <i>content</i>=<u>"width=device-width, initial-scale=1"</u>&gt;
    &lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>&gt;
    &lt;<b>title</b>>Hello, world!&lt;/<b>title</b>&gt;
  &lt;/<b>head</b>&gt;
@ -200,7 +200,6 @@

            </article>

-
            <p>There are 2 ways to customize your version of Pico.css:</p>
            <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>
@ -275,20 +274,28 @@
            <p>This allows 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>
          </section><!-- ./ Docs: Customization -->

-
          <!-- Docs: Classless -->
          <section id="classless">
            <hgroup>
              <h2>Class-less version</h2>
              <h3>For wild HTML purists!</h3>
            </hgroup>
-            <p>Pico provide a <code>.classless</code> version (<a href="https://picocss.com/examples/classless/">Example</a>).</p>
+            <p>Pico provide a <code>.classless</code> version (<a href="https://picocss.com/examples/classless/">example</a>).</p>
            <p>In this version, <code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code> and <code>&lt;<b>footer</b>&gt;</code> act as <a href="#containers">containers</a> to define a centered or a fluid viewport.</p>
            <p><strong>Usage:</strong></p>
            <p>Use the default <code>.classless</code> version if you need centered viewports:</p>
            <pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet</u>" <i>href</i>=<u>"css/pico.classless.min.css"</u>&gt;</code></pre>
-            <p>Or use the <code>.fluid.classless</code>  version if you need a fluid container:</p>
+            <p>Or use the <code>.fluid.classless</code> version if you need a fluid container:</p>
            <pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet</u>" <i>href</i>=<u>"css/pico.fluid.classless.min.css"</u>&gt;</code></pre>
+            <p>These <code>.classless</code> versions are also available on <a href="https://unpkg.com/@picocss/pico@latest/">unpkg CDN</a>:</p>
+
+<pre><code><em>// Centered viewports</em>
+&lt;<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>&gt;
+
+<em>// Fluid viewports</em>
+&lt;<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>&gt;
+</code></pre>
+
          </section><!-- ./ Docs: Classless -->

          <!-- Docs: Container -->
--- a/scss/themes/default/_dark.scss
+++ b/scss/themes/default/_dark.scss
@ -8,11 +8,11 @@
  // Texts colors
  --color: #{$grey-200};
  --h1-color: #{$grey-50};
-  --h2-color: #{mix($grey-50, $grey-100)};
+  --h2-color: #{mix($grey-100, $grey-50)};
  --h3-color: #{$grey-100};
-  --h4-color: #{mix($grey-100, $grey-200)};
+  --h4-color: #{mix($grey-200, $grey-100)};
  --h5-color: #{$grey-200};
-  --h6-color: #{mix($grey-200, $grey-300)};
+  --h6-color: #{mix($grey-300, $grey-200)};

  // Muted colors
  --muted-color: #{$grey-500};
@ -94,7 +94,7 @@
  --code-tag-color: #{hsl(330, 30%, 50%)};
  --code-property-color: #{hsl(185, 30%, 50%)};
  --code-value-color: #{hsl(40,  10%, 50%)};
-  --code-comment-color: #{mix($grey-600, $grey-700)};
+  --code-comment-color: #{mix($grey-700, $grey-600)};

  // Accordion (<details>)
  --accordion-border-color: var(--muted-border-color);
--- a/scss/themes/default/_light.scss
+++ b/scss/themes/default/_light.scss
@ -38,7 +38,7 @@
  --contrast-inverse: #{$white};

  // Highlighted text (<mark>)
-  --mark-background-color: #{mix($amber-50, $amber-100)};
+  --mark-background-color: #{mix($amber-100, $amber-50)};
  --mark-color: #{mix($grey-900, $amber-900, 75%)};

  // Inserted (<ins>) & Deleted (<ins>)
@ -85,7 +85,7 @@

  // Table
  --table-border-color: var(--muted-border-color);
-  --table-row-stripped-background-color:#{mix($white, $grey-50)};
+  --table-row-stripped-background-color:#{mix($grey-50, $white)};

  // Code
  --code-background-color: #{$grey-50};
@ -106,7 +106,7 @@
  --card-background-color: var(--background-color);
  --card-border-color: var(--muted-border-color);
  --card-box-shadow: 0 0.125rem 1rem #{rgba($grey-900, 0.04)}, 0 0.125rem 2rem #{rgba($grey-900, 0.08)}, 0 0 0 0.0625rem #{rgba($grey-900, 0.024)};
-  --card-sectionning-background-color: #{mix($white, $grey-50, 75%)};
+  --card-sectionning-background-color: #{mix($grey-50, $white, 25%)};

  // Progress
  --progress-background-color: #{$grey-100};