{"id":13398848,"url":"https://github.com/franciscop/picnic","last_synced_at":"2025-12-12T03:48:45.971Z","repository":{"id":20355828,"uuid":"23630882","full_name":"franciscop/picnic","owner":"franciscop","description":":handbag: A beautiful CSS library to kickstart your projects","archived":false,"fork":false,"pushed_at":"2024-10-03T17:55:24.000Z","size":2928,"stargazers_count":3867,"open_issues_count":16,"forks_count":224,"subscribers_count":95,"default_branch":"master","last_synced_at":"2025-05-13T13:46:33.621Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://picnicss.com/","language":"CSS","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/franciscop.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"custom":"https://www.paypal.me/franciscopresencia/19"}},"created_at":"2014-09-03T17:49:15.000Z","updated_at":"2025-05-10T07:10:23.000Z","dependencies_parsed_at":"2022-07-17T03:49:27.513Z","dependency_job_id":"56d7cb2e-c8c5-4fd8-b021-f0be36892ffc","html_url":"https://github.com/franciscop/picnic","commit_stats":null,"previous_names":["picnicss/picnic"],"tags_count":50,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/franciscop%2Fpicnic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/franciscop%2Fpicnic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/franciscop%2Fpicnic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/franciscop%2Fpicnic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/franciscop","download_url":"https://codeload.github.com/franciscop/picnic/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254149977,"owners_count":22022852,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T19:00:32.182Z","updated_at":"2025-12-12T03:48:40.931Z","avatar_url":"https://github.com/franciscop.png","language":"CSS","funding_links":["https://www.paypal.me/franciscopresencia/19"],"categories":["CSS","Very Lightweight","Frameworks / Resources"],"sub_categories":["P"],"readme":"# Picnic CSS\n\nUnpack your meal and get coding. An invasive CSS library to get your style started. [Official webpage](https://picnicss.com) (with live demo/test). \n\n\n## Getting started\n\nThere are many ways of using Picnic CSS in your projects. Here a brief introduction of the recommended two methods:\n\n\n### CDN - just give me the file\n\nUse [Picnic CSS in the CDN jsDelivr](http://www.jsdelivr.com/#!picnicss) for linking to the static file.\n\n\n### Bower - to personalize Picnic\n\nTo install Picnic with bower just write this in your terminal (you'll need bower installed):\n\n```\nbower install picnic\n```\n\nThen, to use it within your scss development cycle, just do:\n\n```scss\n// Here go any variables you want to overwrite\n$picnic-primary: #faa;\n\n// Now import picnic and a couple of plugins\n@import 'BOWER_PATH/picnic/src/picnic';\n@import 'BOWER_PATH/picnic/plugins/nav/plugin';\n@import 'BOWER_PATH/picnic/plugins/modal/plugin';\n```\n\n\n### NPM\n\nJust do\n\n```bash\nnpm install picnic --save\n```\n\nTo add it to your repository. Then you can include it straight from your css like:\n\n```css\n@import \"../node_modules/picnic/picnic.min.css\";\n```\n\nThanks to [chadoh](https://github.com/chadoh) for helping me in publishing it in NPM and for the instructions.\n\n\n\n### Other ways\n\nYou 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`\n\n\n\n## Wait, *invasive*?\n\nMany libraries rely upon adding classes to your already existing HTML elements, resulting in bloated code like `\u003cbutton class=\"btn btn-primary\"\u003eHey\u003c/button\u003e`. It would be easier if the buttons knew they are, well, *buttons*. Crazy eh?\n\nThis 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.\n\n\n\n## Browser support IE11+\n\nBug 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.\n\n\n\n## Example usage\n\nAfter including the stylesheet as indicated in the `Getting started`:\n\n```html\n\u003cform\u003e\n  What's your favourite Picnic CSS feature?\n\n  \u003clabel\u003e\n    \u003cselect name=\"feature\"\u003e\n      \u003coption value=\"semantic\"\u003e    Semantic HTML5 \u003c/option\u003e\n      \u003coption value=\"lightweight\"\u003e Lightweight    \u003c/option\u003e\n      \u003coption value=\"css3\"\u003e        Only CSS3      \u003c/option\u003e\n      \u003coption value=\"responsive\"\u003e  Responsive     \u003c/option\u003e\n    \u003c/select\u003e\n  \u003c/label\u003e\n\n  \u003cinput type=\"email\" placeholder=\"Email to receive updates\"\u003e\n\n  \u003cbutton class=\"primary\"\u003e Subscribe! \u003c/button\u003e\n\u003c/form\u003e\n```\n\nIf 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.\n\n\n\n## Advantages\n\n- **Only CSS3** is needed and your **HTML5** stays highly semantic*.\n\n- **Under 10kb** when minimized and gzipped with all plugins.\n\n- **Normalize.css** is used as a base, achieving a solid foundation.\n\n- **Support**: IE 9+ and others. No fancy CSS3 on IE 8.\n\n- **Responsive**: The nav and the grids are responsive.\n\n\n\\* Except for the grids :(\n\n\n\n## Disadvantages\n\n- 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.\n\n\n\n## Alternatives and why I still created Picnic CSS\n\n[Milligram](https://milligram.github.io/): A minimalist CSS framework\n\n[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 `\u003cselect\u003e` out of the box and the non-responsive grid from the CDN feels like a stab on the back.\n\n[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 `\u003cselect\u003e` right out of the box.\n\n[Min](http://mincss.com/): a tiny, basic css framework. It has great browser support. No `\u003cselect\u003e` right, and it's too inexpressive.\n\n\n\n## Contributing\n\nYou 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.\n\n\n\n## Authors\n\nCreated 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).\n\n\n\n## Some love\n\n- [Clrs](http://clrs.cc/) the new nice web palette (from HN) used for Picnic CSS.\n\n- [Fontello](http://fontello.com/) an icon library that plays really nice with others.\n\n- [Normalize](http://necolas.github.io/normalize.css/) the foundation of Picnic CSS\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffranciscop%2Fpicnic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffranciscop%2Fpicnic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffranciscop%2Fpicnic/lists"}