diff --git a/README.md b/README.md index 19c43306..70fb65ee 100644 --- a/README.md +++ b/README.md @@ -19,6 +19,7 @@ [![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. - **Great styles with just one CSS file**: No dependencies, package manager, external files or JavaScript. @@ -54,7 +55,7 @@ npm install @picocss/pico Minimalist templates to discover Pico in action: -[![Examples](https://picocss.com/img/examples.jpg?version=1.2.0)](https://picocss.com/#examples) +[![Examples](https://picocss.com/img/examples.jpg)](https://picocss.com/#examples) - **[Preview](https://picocss.com/examples/preview/)** A starter example with all elements and components used in Pico @@ -96,15 +97,24 @@ 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 + +| Variation | Minified CSS | Source | Example | +|:-----|:-----|:-----|:-----| +| Default | [![CSS Gzipped](https://img.badgesize.io/picocss/pico/master/css/pico.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://unpkg.com/@picocss/pico@latest/css/pico.min.css) | [pico.scss](https://github.com/picocss/pico/blob/master/scss/pico.scss) | [Preview](https://picocss.com/examples/preview/) | +| Classless
(Centered viewports) | [![CSS Gzipped](https://img.badgesize.io/picocss/pico/master/css/pico.classless.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css) | [pico.classless.scss](https://github.com/picocss/pico/blob/master/scss/pico.classless.scss) | [Classless](https://picocss.com/examples/classless/) | +| Classless
(Fluid container) | [![CSS Gzipped](https://img.badgesize.io/picocss/pico/master/css/pico.fluid.classless.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://unpkg.com/@picocss/pico@latest/css/pico.fluid.classless.min.css) | [pico.fluid.classless.scss](https://github.com/picocss/pico/blob/master/scss/pico.fluid.classless.scss) | - | +| Slim | [![CSS Gzipped](https://img.badgesize.io/picocss/pico/master/css/pico.slim.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://unpkg.com/@picocss/pico@latest/css/pico.slim.min.css) | [pico.slim.scss](https://github.com/picocss/pico/blob/master/scss/pico.slim.scss) | - | +| Google Amp | [![CSS Gzipped](https://img.badgesize.io/picocss/examples/master/google-amp/css/pico.google-amp.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://github.com/picocss/examples/blob/master/google-amp/css/pico.google-amp.min.css) | [pico.google-amp.scss](https://github.com/picocss/examples/blob/master/google-amp/scss/pico.google-amp.scss) | [Google Amp](https://picocss.com/examples/google-amp/) | +| Pico + Bootstrap grid system | [![CSS Gzipped](https://img.badgesize.io/picocss/examples/master/bootstrap-grid/css/pico-bootstrap-grid.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://github.com/picocss/examples/blob/master/bootstrap-grid/css/pico-bootstrap-grid.min.css) | [pico-bootstrap-grid.scss](https://github.com/picocss/examples/blob/master/bootstrap-grid/scss/pico-bootstrap-grid.scss) | [Bootstrap grid system](https://picocss.com/examples/bootstrap-grid/) | + ## Copyright and license Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md).