mirror of
https://github.com/picocss/pico.git
synced 2025-02-22 00:04:36 -05:00
Create README
This commit is contained in:
parent
c6754b98f2
commit
e1935ae833
59
README.md
59
README.md
@ -0,0 +1,59 @@
|
||||
|
||||
<a href="https://picocss.com/">
|
||||
<img src="docs/img/logo.svg" width="64" height="64">
|
||||
</a>
|
||||
|
||||
# Pico.css
|
||||
|
||||
**Graceful & Minimal CSS design system in pure semantic HTML.**
|
||||
Elegant styles for all natives HTML elements without `.classes` and dark mode automatically enabled.
|
||||
|
||||
`5.6 KB` minified and gzipped
|
||||
|
||||
- **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.
|
||||
- **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.
|
||||
|
||||
## Usage
|
||||
|
||||
[Download Pico](https://github.com/picocss/pico/archive/v1.0.0.zip) and link `/css/pico.min.css` in the `<head>` of your website.
|
||||
|
||||
``<link rel="stylesheet" href="css/pico.min.css">``
|
||||
|
||||
## Examples
|
||||
|
||||
- [**Class-less**](https://picocss.com/examples/classless/): Just a pure semantic HTML markup, without `.classes`
|
||||
- [**Company**](https://picocss.com/examples/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.
|
||||
- [**Sign in**](https://picocss.com/examples/sign-in/): A minimalist layout for Login pages.
|
||||
|
||||
## Documentation
|
||||
|
||||
**Getting started**
|
||||
- [Usage](https://picocss.com/docs/#start)
|
||||
- [Themes](https://picocss.com/docs/#themes)
|
||||
- [Customization](https://picocss.com/docs/#customization)
|
||||
- [Class-less version](https://picocss.com/docs/#classless)
|
||||
|
||||
**Layout**
|
||||
- [Containers](https://picocss.com/docs/#containers)
|
||||
- [Grids](https://picocss.com/docs/#grids)
|
||||
- [Horizontal scroller](https://picocss.com/docs/#scroller)
|
||||
|
||||
**Elements**
|
||||
- [Typography](https://picocss.com/docs/#typography)
|
||||
- [Buttons](https://picocss.com/docs/#buttons)
|
||||
- [Forms](https://picocss.com/docs/#forms)
|
||||
|
||||
**Components**
|
||||
- [Accordions](https://picocss.com/docs/#accordions)
|
||||
- [Cards](https://picocss.com/docs/#cards)
|
||||
- [Navs](https://picocss.com/docs/#navs)
|
||||
- [Tooltips](https://picocss.com/docs/#tooltips)
|
||||
|
||||
## Copyright and license
|
||||
- Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md)
|
||||
- Openly inspired by [Bootstrap](https://github.com/twbs/bootstrap) ([MIT](https://github.com/twbs/bootstrap/blob/master/LICENSE)), [Spectre](https://github.com/picturepan2/spectre) ([MIT](https://github.com/picturepan2/spectre/blob/master/LICENSE)), [Wing](https://github.com/kbrsh/wing/) ([MIT](https://github.com/kbrsh/wing/blob/master/LICENSE)), [CSS Bed](https://github.com/ubershmekel/cssbed) & [Normalize](https://github.com/necolas/normalize.css/) ([MIT](https://github.com/necolas/normalize.css/blob/master/LICENSE.md))
|
||||
- Library icons by [Feather](https://github.com/feathericons/feather) ([MIT](https://github.com/feathericons/feather/blob/master/LICENSE))
|
||||
- Website icons by [Font Awesome](https://github.com/FortAwesome/Font-Awesome) ([CC BY 4.0](https://fontawesome.com/license/free))
|
1
docs/img/logo.svg
Normal file
1
docs/img/logo.svg
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 |
@ -101,7 +101,7 @@
|
||||
</hgroup>
|
||||
<p>1. Download Pico:</p>
|
||||
<p>
|
||||
<a href="https://github.com/picocss/pico/archive/master.zip" role="button">
|
||||
<a href="https://github.com/picocss/pico/archive/v1.0.0.zip" role="button">
|
||||
Download pico.css
|
||||
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="0.66rem">
|
||||
<path fill="currentColor" d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"></path>
|
||||
|
Loading…
x
Reference in New Issue
Block a user