mirror of
https://github.com/picocss/pico.git
synced 2025-04-21 17:16:14 -04:00
Lucas Larroche
GitHub
commit
0534acfa8d
35 changed files with 53 additions and 52 deletions
BIN
.github/examples.jpg
vendored
Normal file
BIN
.github/examples.jpg
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
1
.github/logo.svg
vendored
Normal file
1
.github/logo.svg
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><path d="M0 0h1000v1000H0z" fill="#1b2a32"/><path 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" fill="#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 555 B |
38
README.md
38
README.md
|
|
@ -1,6 +1,6 @@
|
|||
<p align="center">
|
||||
<a href="https://picocss.com/">
|
||||
<img src="https://picocss.com/img/logo.svg" width="64" height="64">
|
||||
<img src=".github/logo.svg" width="64" height="64">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
|
|
@ -52,7 +52,7 @@ There are 4 ways to get started with Pico CSS:
|
|||
|
||||
**Install manually**
|
||||
|
||||
[Download Pico](https://github.com/picocss/pico/archive/refs/heads/master.zip) and link `/css/pico.min.css` in the `<head>` of your website.
|
||||
[Download Pico](https://github.com/picocss/pico/archive/refs/tags/v1.5.9.zip) and link `/css/pico.min.css` in the `<head>` of your website.
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="css/pico.min.css">
|
||||
|
|
@ -119,31 +119,31 @@ Then just write pure HTML, and it should look great:
|
|||
|
||||
Minimalist templates to discover Pico in action:
|
||||
|
||||
[](https://picocss.com/#examples)
|
||||
[](https://picocss.com/#examples)
|
||||
|
||||
- **[Preview](https://picocss.com/examples/preview/)**
|
||||
A starter example with all elements and components used in Pico
|
||||
- **[Preview](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-preview)**
|
||||
A starter example with most of the Pico components and styles.
|
||||
|
||||
- **[Right-to-left (RTL) preview](https://picocss.com/examples/preview-rtl/)**
|
||||
A starter example in Arabic with all the elements and components used in Pico
|
||||
- **[Right-to-left (RTL) preview](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-preview-rtl)**
|
||||
A starter example in Arabic with most of the Pico components and styles.
|
||||
|
||||
- **[Class-less](https://picocss.com/examples/classless/)**
|
||||
Just a pure semantic HTML markup, without `.classes`
|
||||
- **[Classless](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-classless)**
|
||||
A pure semantic HTML markup, without `.classes`.
|
||||
|
||||
- **[Basic template](https://picocss.com/examples/basic-template/)**
|
||||
A basic custom template for Pico using only CSS custom properties (variables)
|
||||
- **[Basic template](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-basic-template)**
|
||||
A basic custom template for Pico using only CSS custom properties (variables).
|
||||
|
||||
- **[Company](https://picocss.com/examples/company/)**
|
||||
A classic company or blog layout with a sidebar
|
||||
- **[Company](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-company)**
|
||||
A classic company or blog layout with a sidebar.
|
||||
|
||||
- **[Google Amp](https://picocss.com/examples/google-amp/)**
|
||||
A simple layout for Google Amp, with inlined CSS
|
||||
- **[Google Amp](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-google-amp)**
|
||||
A simple layout for Google Amp, with inlined CSS.
|
||||
|
||||
- **[Sign in](https://picocss.com/examples/sign-in/)**
|
||||
A minimalist layout for Login pages
|
||||
- **[Sign in](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-sign-in)**
|
||||
A minimalist layout for Login pages.
|
||||
|
||||
- **[Pico + Bootstrap grid system](https://picocss.com/examples/bootstrap-grid/)**
|
||||
Custom CSS build with the Bootstrap grid system to manage complex grid layouts in Pico
|
||||
- **[Pico + Bootstrap grid system](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-bootstrap-grid)**
|
||||
Custom CSS build with the Bootstrap grid system to manage complex grid layouts in Pico.
|
||||
|
||||
All examples are open-sourced in [picocss/examples](https://github.com/picocss/examples).
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@charset "UTF-8";
|
||||
/*!
|
||||
* Pico CSS v1.5.8 (https://picocss.com)
|
||||
* Pico CSS v1.5.9 (https://picocss.com)
|
||||
* Copyright 2019-2023 - Licensed under MIT
|
||||
*/
|
||||
/**
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
2
css/pico.classless.min.css
vendored
2
css/pico.classless.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,6 @@
|
|||
@charset "UTF-8";
|
||||
/*!
|
||||
* Pico CSS v1.5.8 (https://picocss.com)
|
||||
* Pico CSS v1.5.9 (https://picocss.com)
|
||||
* Copyright 2019-2023 - Licensed under MIT
|
||||
*/
|
||||
/**
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,6 @@
|
|||
@charset "UTF-8";
|
||||
/*!
|
||||
* Pico CSS v1.5.8 (https://picocss.com)
|
||||
* Pico CSS v1.5.9 (https://picocss.com)
|
||||
* Copyright 2019-2023 - Licensed under MIT
|
||||
*/
|
||||
/**
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
2
css/pico.fluid.classless.min.css
vendored
2
css/pico.fluid.classless.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
css/pico.min.css
vendored
2
css/pico.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,5 +1,5 @@
|
|||
/*!
|
||||
* Pico CSS v1.5.8 (https://picocss.com)
|
||||
* Pico CSS v1.5.9 (https://picocss.com)
|
||||
* Copyright 2019-2023 - Licensed under MIT
|
||||
*
|
||||
* Slim version example
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
2
css/pico.slim.min.css
vendored
2
css/pico.slim.min.css
vendored
|
|
@ -1,5 +1,5 @@
|
|||
/*!
|
||||
* Pico CSS v1.5.8 (https://picocss.com)
|
||||
* Pico CSS v1.5.9 (https://picocss.com)
|
||||
* Copyright 2019-2023 - Licensed under MIT
|
||||
*
|
||||
* Slim version example
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -56,4 +56,4 @@
|
|||
<b>@import</b> <u>"@picocss/pico/scss/pico/layout/document"</u>;
|
||||
<b>@import</b> <u>"@picocss/pico/scss/pico/layout/sectioning"</u>;
|
||||
<em>…</em>
|
||||
</code></pre><p>Compiling a custom SASS version 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></section><footer><hr><p><small>Code licensed <a href="https://github.com/picocss/pico/blob/master/LICENSE.md" class="secondary">MIT</a></small></p></footer></div></main><script src="js/commons.min.js"></script><script src="js/customization.min.js"></script></body></html>
|
||||
</code></pre><p>Compiling a custom SASS version allows you to create a lighter version with only the components that are useful to you.</p></section><footer><hr><p><small>Code licensed <a href="https://github.com/picocss/pico/blob/master/LICENSE.md" class="secondary">MIT</a></small></p></footer></div></main><script src="js/commons.min.js"></script><script src="js/customization.min.js"></script></body></html>
|
||||
|
|
@ -3,4 +3,4 @@
|
|||
<<b>div</b>>2</<b>div</b>>
|
||||
<<b>div</b>>3</<b>div</b>>
|
||||
<<b>div</b>>4</<b>div</b>>
|
||||
</<b>div</b>></code></pre></footer></article><p>Columns intentionally collapses below large devices <code>(<u>992px</u>)</code></p><p>To go further, discover how to <a href="https://picocss.com/examples/bootstrap-grid/">merge Pico with the Bootstrap grid system</a>.</p><details><summary><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"><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 focuses on native HTML elements, we kept this grid system very minimalist.</p><p>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.</p><p>If you need a quick way to prototyping or build a complex layout, you can look at <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 at <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><p>Alternatively, you can <a href="https://learncssgrid.com/">learn about CSS Grid</a>.</p></details></section><footer><hr><p><small>Code licensed <a href="https://github.com/picocss/pico/blob/master/LICENSE.md" class="secondary">MIT</a></small></p></footer></div></main><script src="js/commons.min.js"></script><script src="js/grid.min.js"></script></body></html>
|
||||
</<b>div</b>></code></pre></footer></article><p>Columns intentionally collapses below large devices <code>(<u>992px</u>)</code></p><p>To go further, discover how to <a href="https://codesandbox.io/s/github/picocss/examples/tree/master/v1-bootstrap-grid">merge Pico with the Bootstrap grid system</a>.</p><details><summary><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"><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 focuses on native HTML elements, we kept this grid system very minimalist.</p><p>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.</p><p>If you need a quick way to prototyping or build a complex layout, you can look at <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 at <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><p>Alternatively, you can <a href="https://learncssgrid.com/">learn about CSS Grid</a>.</p></details></section><footer><hr><p><small>Code licensed <a href="https://github.com/picocss/pico/blob/master/LICENSE.md" class="secondary">MIT</a></small></p></footer></div></main><script src="js/commons.min.js"></script><script src="js/grid.min.js"></script></body></html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -62,7 +62,7 @@
|
|||
</<b>a</b>>
|
||||
</<b>footer</b>>
|
||||
</<b>article</b>>
|
||||
</<b>dialog</b>></code></pre></footer></article><p>Pico does not include JavaScript code. You will need to implement your JS to interact with modals.</p><p>As a starting point, you can look at the JavaScript used in this documentation: <a href="https://github.com/picocss/pico/blob/master/docs/js/modal.js">js/modal.js</a>.</p><p>To make a modal appear, add the <code><i>open</i></code> attribute to the <code><<b>dialog</b>></code> container.</p><pre><code><em><!-- Open modal--></em>
|
||||
</<b>dialog</b>></code></pre></footer></article><p>Pico does not include JavaScript code. You will need to implement your JS to interact with modals.</p><p>As a starting point, you can look at this example: <a href="https://github.com/picocss/examples/blob/master/v1-preview/js/modal.js">modal.js</a>.</p><p>To make a modal appear, add the <code><i>open</i></code> attribute to the <code><<b>dialog</b>></code> container.</p><pre><code><em><!-- Open modal--></em>
|
||||
<<b>dialog</b> <i>open</i>>
|
||||
<<b>article</b>>
|
||||
<em>…</em>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -20,7 +20,7 @@
|
|||
<h1>Class-less version</h1>
|
||||
<h2>For wild HTML purists!</h2>
|
||||
</hgroup>
|
||||
<p>Pico provides a <code>.classless</code> version (<a href="https://picocss.com/examples/classless/">example</a>).</p>
|
||||
<p>Pico provides a <code>.classless</code> version (<a href="https://codesandbox.io/s/github/picocss/examples/tree/master/v1-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.html">containers</a> to define a centered or a fluid viewport.</p>
|
||||
|
||||
<pre><code><em>// Containers</em>
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@
|
|||
<em>…</em>
|
||||
</code></pre>
|
||||
|
||||
<p>Compiling a custom SASS version 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>
|
||||
<p>Compiling a custom SASS version allows you to create a lighter version with only the components that are useful to you.</p>
|
||||
</section>
|
||||
|
||||
${require('./_footer.html')}
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
</footer>
|
||||
</article>
|
||||
<p>Columns intentionally collapses below large devices <code>(<u>992px</u>)</code></p>
|
||||
<p>To go further, discover how to <a href="https://picocss.com/examples/bootstrap-grid/">merge Pico with the Bootstrap grid system</a>.</p>
|
||||
<p>To go further, discover how to <a href="https://codesandbox.io/s/github/picocss/examples/tree/master/v1-bootstrap-grid">merge Pico with the Bootstrap grid system</a>.</p>
|
||||
<details>
|
||||
<summary>
|
||||
<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">
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
</hgroup>
|
||||
<p>There are 4 ways to get started with Pico CSS:</p>
|
||||
<h3>Install manually</h3>
|
||||
<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>
|
||||
<p><a href="https://github.com/picocss/pico/archive/refs/tags/v1.5.9.zip">Download Pico</a> and link <code>/css/pico.min.css</code> in the <code><<b>head</b>></code> of your website.</p>
|
||||
<pre><code><<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>></code></pre>
|
||||
<h3>Install from CDN</h3>
|
||||
<p>Alternatively, you can use <a href="https://www.jsdelivr.com/package/npm/@picocss/pico">jsDelivr CDN</a> to link pico.css</p>
|
||||
|
|
|
|||
|
|
@ -138,7 +138,7 @@
|
|||
</article>
|
||||
|
||||
<p>Pico does not include JavaScript code. You will need to implement your JS to interact with modals.</p>
|
||||
<p>As a starting point, you can look at the JavaScript used in this documentation: <a href="https://github.com/picocss/pico/blob/master/docs/js/modal.js">js/modal.js</a>.</p>
|
||||
<p>As a starting point, you can look at this example: <a href="https://github.com/picocss/examples/blob/master/v1-preview/js/modal.js">modal.js</a>.</p>
|
||||
<p>To make a modal appear, add the <code><i>open</i></code> attribute to the <code><<b>dialog</b></u>></code> container.</p>
|
||||
|
||||
<pre><code><em><!-- Open modal--></em>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<h1>RTL</h1>
|
||||
<h2>Support for right-to-left text in Pico.</h2>
|
||||
</hgroup>
|
||||
<p>To enable RTL in Pico you need to set <code><i>dir</i>=<u>"rtl"</u></code>on the <code><<b>html</b>></code> element (<a href="https://picocss.com/examples/preview-rtl/">example</a>).</p>
|
||||
<p>To enable RTL in Pico you need to set <code><i>dir</i>=<u>"rtl"</u></code>on the <code><<b>html</b>></code> element (<a href="https://codesandbox.io/s/github/picocss/examples/tree/master/v1-preview-rtl">example</a>).</p>
|
||||
|
||||
<pre><code><em><!doctype html></em>
|
||||
<<b>html</b> <i>dir</i>=<u>"rtl"</u> <i>lang</i>=<u>"ar"</u>>
|
||||
|
|
|
|||
4
package-lock.json
generated
4
package-lock.json
generated
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "@picocss/pico",
|
||||
"version": "1.5.8",
|
||||
"version": "1.5.9",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "@picocss/pico",
|
||||
"version": "1.5.8",
|
||||
"version": "1.5.9",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.21.0",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@picocss/pico",
|
||||
"version": "1.5.8",
|
||||
"version": "1.5.9",
|
||||
"description": "Minimal CSS Framework for semantic HTML",
|
||||
"author": "Lucas Larroche",
|
||||
"main": "css/pico.min.css",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/*!
|
||||
* Pico CSS v1.5.8 (https://picocss.com)
|
||||
* Pico CSS v1.5.9 (https://picocss.com)
|
||||
* Copyright 2019-2023 - Licensed under MIT
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/*!
|
||||
* Pico CSS v1.5.8 (https://picocss.com)
|
||||
* Pico CSS v1.5.9 (https://picocss.com)
|
||||
* Copyright 2019-2023 - Licensed under MIT
|
||||
*
|
||||
* Slim version example
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue