Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/franciscop/picnic
:handbag: A beautiful CSS library to kickstart your projects
https://github.com/franciscop/picnic
Last synced: 25 days ago
JSON representation
:handbag: A beautiful CSS library to kickstart your projects
- Host: GitHub
- URL: https://github.com/franciscop/picnic
- Owner: franciscop
- License: mit
- Created: 2014-09-03T17:49:15.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2023-07-15T16:13:47.000Z (over 1 year ago)
- Last Synced: 2024-05-28T15:57:47.591Z (5 months ago)
- Language: CSS
- Homepage: http://picnicss.com/
- Size: 2.73 MB
- Stars: 3,780
- Watchers: 97
- Forks: 224
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- Awesome-CSS-Resources - picnic:
- fucking-awesome-css-frameworks - Repo
- awesome-css-frameworks - Repo
- starred-awesome - picnic - :handbag: A beautiful CSS library to kickstart your projects (CSS)
README
# Picnic CSS
Unpack your meal and get coding. An invasive CSS library to get your style started. [Official webpage](https://picnicss.com) (with live demo/test).
## Getting started
There are many ways of using Picnic CSS in your projects. Here a brief introduction of the recommended two methods:
### CDN - just give me the file
Use [Picnic CSS in the CDN jsDelivr](http://www.jsdelivr.com/#!picnicss) for linking to the static file.
### Bower - to personalize Picnic
To install Picnic with bower just write this in your terminal (you'll need bower installed):
```
bower install picnic
```
Then, to use it within your scss development cycle, just do:
```scss
// Here go any variables you want to overwrite
$picnic-primary: #faa;
// Now import picnic and a couple of plugins
@import 'BOWER_PATH/picnic/src/picnic';
@import 'BOWER_PATH/picnic/plugins/nav/plugin';
@import 'BOWER_PATH/picnic/plugins/modal/plugin';
```
### NPM
Just do
```bash
npm install picnic --save
```
To add it to your repository. Then you can include it straight from your css like:
```css
@import "../node_modules/picnic/picnic.min.css";
```
Thanks to [chadoh](https://github.com/chadoh) for helping me in publishing it in NPM and for the instructions.
### Other ways
You can always download the latest minimized version from github, clone the repository or download it. Or clone it: `git clone https://github.com/franciscop/picnic.git`
## Wait, *invasive*?
Many libraries rely upon adding classes to your already existing HTML elements, resulting in bloated code like `Hey`. It would be easier if the buttons knew they are, well, *buttons*. Crazy eh?
This setup works neatly for newly created projects or for pages that you have to build quick from scratch. It also allows for a much more intuitive extension of base elements.
## Browser support IE11+
Bug reports and fixes only for IE11+. With IE8- usage [dropping *fast*](https://ux.stackexchange.com/questions/64250/do-websites-still-have-to-support-internet-explorer-8-and-below/#64361) and with IE9 and IE10 usage even below their older mate, it is time to start thinking about not supporting them anymore. For others, up to 2 previous versions are expected to be working, and everything that is not is definitely a bug.
## Example usage
After including the stylesheet as indicated in the `Getting started`:
```html
What's your favourite Picnic CSS feature?
Semantic HTML5
Lightweight
Only CSS3
Responsive
Subscribe!
```
If you don't see anything that seems *picnic.css exclusive*, that's because there's nothing, that's the main purpose of Picnic CSS. However, try it out and you'll see a decent example in your browser.
## Advantages
- **Only CSS3** is needed and your **HTML5** stays highly semantic*.
- **Under 10kb** when minimized and gzipped with all plugins.
- **Normalize.css** is used as a base, achieving a solid foundation.
- **Support**: IE 9+ and others. No fancy CSS3 on IE 8.
- **Responsive**: The nav and the grids are responsive.
\* Except for the grids :(
## Disadvantages
- Difficult to drop in an already created project. This is what I meant by *invasive*. This is not within the new scope of the project.
## Alternatives and why I still created Picnic CSS
[Milligram](https://milligram.github.io/): A minimalist CSS framework
[PureCSS](http://purecss.io/): Lightweight, nice package. The thing I would be using if I didn't build Picnic CSS and where I took the inspiration. However, no nice `` out of the box and the non-responsive grid from the CDN feels like a stab on the back.
[Bootstrap](http://getbootstrap.com/): Really comprehensive, but too many files and too heavy for most of the websites. It also relies too much on javascript. Still cannot get the `` right out of the box.
[Min](http://mincss.com/): a tiny, basic css framework. It has great browser support. No `` right, and it's too inexpressive.
## Contributing
You are encouraged to contribute to Picnic CSS. To write a new plugin, just copy one of the existing ones (specially recommend "button") and modify the files. The code must be linted with scss-lint, except the `PropertySortOrder` which is ignored for a better code structure.
## Authors
Created by [Francisco Presencia](https://github.com/FranciscoP). SASS from [Jordan Wallwork](https://github.com/jordanwallwork). Significant fixes from [Alex Galushka](https://github.com/galulex). Tons of help in several parts of the project from [Emilio Coppola](https://github.com/Coppolaemilio).
## Some love
- [Clrs](http://clrs.cc/) the new nice web palette (from HN) used for Picnic CSS.
- [Fontello](http://fontello.com/) an icon library that plays really nice with others.
- [Normalize](http://necolas.github.io/normalize.css/) the foundation of Picnic CSS