sharpetronics/pico
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-02-22 00:04:36 -05:00
Code Issues Projects Releases Wiki Activity
pico/README.md

116 lines
4.8 KiB
Markdown
Raw Normal View History

Readme layout
2020-08-08 11:11:38 +07:00
<p align="center">
<a href="https://picocss.com/">
<img src="https://picocss.com/img/logo.svg" width="64" height="64">
</a>
</p>
Create README
2019-12-09 15:14:26 +07:00
Readme layout
2020-08-08 11:11:38 +07:00
<h3 align="center">Pico.css</h3>
Create README
2019-12-09 15:14:26 +07:00
Readme layout
2020-08-08 11:11:38 +07:00
<p align="center">
<strong>Graceful & Minimal CSS design system in pure semantic HTML.</strong><br>
Minor Release (v1.0.5) - Helper (<small>) for <select> and <textarea> - Better rollover for a.contrast
2020-08-08 11:33:55 +07:00
Elegant styles for all natives HTML elements without <code>.classes</code> and dark mode automatically enabled.<br><br>
Readme layout
2020-08-08 11:11:38 +07:00
<a href="https://picocss.com/#examples">Examples</a> ·
<a href="https://picocss.com/docs/">Documentation</a>
</p>
Create README
2019-12-09 15:14:26 +07:00
Readme layout
2020-08-08 11:11:38 +07:00
# Pico.css
Update README.md
2020-09-12 11:59:21 +07:00
[![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)
Create README
2019-12-09 15:14:26 +07:00
- **Class-light and semantic**: we use simple native HTML tags as much as possible. Only 6 .classes are used in Pico.
Add examples
2020-09-25 09:48:13 +07:00
Create README
2019-12-09 15:14:26 +07:00
- **Great styles with just one CSS file**: No dependencies, package manager, external files or JavaScript.
Add examples
2020-09-25 09:48:13 +07:00
Create README
2019-12-09 15:14:26 +07:00
- **Responsive everything**: Elegant and consistent adaptatives spacings and typography on all devices.
Add examples
2020-09-25 09:48:13 +07:00
Create README
2019-12-09 15:14:26 +07:00
- **Light or Dark mode**: Shipped with two beautiful color themes, automatically enabled according to the user preference.
## Usage
Update NPM and add unpkg CDN
2019-12-11 15:07:21 +07:00
There are 3 ways to get started with pico.css:
### Install manually
Update README.md
2020-09-12 11:59:21 +07:00
[Download Pico](https://github.com/picocss/pico/releases/latest) and link `/css/pico.min.css` in the `<head>` of your website.
Create README
2019-12-09 15:14:26 +07:00
Update version
2019-12-11 09:13:13 +07:00
```html
<link rel="stylesheet" href="css/pico.min.css">
```
Create README
2019-12-09 15:14:26 +07:00
Update NPM and add unpkg CDN
2019-12-11 15:07:21 +07:00
### 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
```shell
npm install @picocss/pico
```
Create README
2019-12-09 15:14:26 +07:00
## Examples
Add examples
2020-09-25 09:48:13 +07:00
[![Examples](https://picocss.com/img/examples.jpg)](https://picocss.com/#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
- **[Form elements](https://picocss.com/examples/form-elements/)**
Semantic HTML form markup, without any `.classes` or `JavaScript`
- **[Bootstrap grid system](https://picocss.com/examples/bootstrap-grid/)**
Custom CSS build with the Bootstrap grid system to manage complex grid layouts in Pico
Add examples
2020-08-08 11:03:00 +07:00
Add examples
2020-09-25 09:48:13 +07:00
All examples are open-sourced in [picocss/examples](https://github.com/picocss/examples).
Create README
2019-12-09 15:14:26 +07:00
## 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
JS: Fix generated code for .grid
2019-12-10 17:55:03 +07:00
Create README
2019-12-09 15:14:26 +07:00
- Licensed under the [MIT License](https://github.com/picocss/pico/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))
Update README.md
2020-09-12 11:59:21 +07:00
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))
- [Sanitize](https://csstools.github.io/sanitize.css/) ([CC0 1.0](https://github.com/csstools/sanitize.css/blob/master/LICENSE.md))
Reference in New Issue Copy Permalink