{"_id":"0-plume-css","_rev":"1-21023e1c6983407ac5f1bebe87211512","name":"0-plume-css","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"0-plume-css","version":"0.0.1","description":"A tiny framework for sass/css artisans","main":"index.js","scripts":{"build":"npm run build-sass && sass --no-source-map --style=compressed src/scss/plume.scss dist/css/plume.min.css && npm run build-autoprefix","build-autoprefix":"postcss --use autoprefixer --no-map false --output dist/css/plume.min.css dist/css/plume.min.css","build-sass":"sass --source-map-urls=relative src/scss/plume.scss dist/css/plume.css","prod":"npm run build","dev":"npm run build-sass && sass --watch --no-source-map src/scss/plume.scss dist/css/plume.css"},"keywords":["css","sass","framework","responsive","plume"],"author":{"name":"okyn","email":"0kyn.dev@gmail.com"},"license":"MIT","devDependencies":{"autoprefixer":"^10.2.5","postcss-cli":"^8.3.1","sass":"^1.32.13"},"browserslist":[">0.1%","last 3 versions","Firefox ESR"],"gitHead":"366eb1943df58006c38b668dec086337f1804606","_id":"0-plume-css@0.0.1","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-JPNVDYml2UQeFCLboCHuTvJxGRwTsyq2EUYyXIcBtdPgPrRo1cVCFKSEp3TEAGxR1tiRuohUBbuOfExByl8NoA==","shasum":"12be828f058666c8cc2fb438ac24a58558a407f4","tarball":"https://registry.npmjs.org/0-plume-css/-/0-plume-css-0.0.1.tgz","fileCount":18,"unpackedSize":27051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyOR7CRA9TVsSAnZWagAAW/MP/1I+oQtnpN7w5rm5jew2\nfMZjTCwnK3VX8tN2dg4QyrYTzJ94p8HaDAXvQu581g7vq/o94YTPKgCA7lcE\nov25cC1jOrIGUOps2fGsSRhIUn6AKRYeAFIpVDU7UT2/6BE16TPSXrIITUXx\nc8m094OasLpFRtP10KoTDisDgF0uXP6LdfR6zMEYZ+tho/sPyrmv+0qEViKh\nYgBh3cd4BHvm1nhNckiefoK02tLt6G8Msb8j6NAVV7Y+6vc52hsqPvjBJWUs\nXVGHKJ1E9Kyi3wdFs2h65w+2ZV7gt4SP7UAFmhWN2RIpefOnoaX3OPY9ABjc\nc3Zo0BFNBhksz0Dy2yqIhUusNR64BBJQlGM9WA3IhXfV3hsTf7uyoXOiaUjG\nlmAl21wXOQMMx84sXeboS5UY5rky446YDu76k2zgQ7Zd6ZiaAj0uPTMaWz23\ndsYoOGCASQeoL28eQT5dlcR5ClMTxw7YB7bdPVF7SlYrRira4Q0OCs/0XHU2\nzklFqvCIlIxhNnfvYSPKx2+fdYShfYWHBczc4NzEAzWcrZ0c9MewPL32oVvK\noS6gny7bS9+vw6JQTENe704axxpyt7Vi+estBt2qHrhG3bJoiypZHX9BftCO\nZLR6dF0LHuvx0A29G3PcUuabSnb9bClU5pXuySBzZ+R8kXtVYWYG7xYUjyZd\ntyOv\r\n=e/JU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDezvsLVf9Q9S0JLC4ksE+deueeWe6+hE3mQdI4p4zOiAiEA9iapT3BR0xE48+5NJCF43J73ZyKop29TNd073ZmcU2I="}]},"_npmUser":{"name":"okn","email":"0kyn.dev@gmail.com"},"directories":{},"maintainers":[{"name":"okn","email":"0kyn.dev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/0-plume-css_0.0.1_1623778426941_0.9058588893242594"},"_hasShrinkwrap":false}},"time":{"created":"2021-06-15T17:33:46.941Z","0.0.1":"2021-06-15T17:33:47.081Z","modified":"2022-04-04T10:06:14.698Z"},"maintainers":[{"name":"okn","email":"0kyn.dev@gmail.com"}],"description":"A tiny framework for sass/css artisans","keywords":["css","sass","framework","responsive","plume"],"author":{"name":"okyn","email":"0kyn.dev@gmail.com"},"license":"MIT","readme":"# Plume CSS - a tiny framework for css artisans\r\n\r\n## Introduction\r\n\r\nThe goal of this library is to get a base that include a grid system, some helpers and the maximum of compatibilities with old scool browsers.\r\n\r\n## Quick start\r\n\r\n* Include from jsDelivr CDN\r\n```html\r\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/0kyn/plume-css/dist/css/plume.min.css\">\r\n```\r\n\r\n## Development\r\n* Clone the repository\r\n```sh\r\ngit clone https://github.com/0kyn/plume-css.git my-project \r\n```\r\n\r\n```sh\r\ncd my-project \r\n```\r\n\r\n* Watching for changes\r\n```sh\r\nnpm run dev \r\n```\r\n\r\n## Production\r\n\r\nBuild assets for production  \r\n```sh\r\nnpm run prod \r\n```\r\n\r\n## Docs\r\nPlume CSS is mobile first, breakpoints are defined as Bootstrap ones :\r\n```css\r\n/* Small devices (landscape phones, 576px and up) */\r\n@media (min-width: 576px) { ... }\r\n\r\n/* Medium devices (tablets, 768px and up) */\r\n@media (min-width: 768px) { ... }\r\n\r\n/* Large devices (desktops, 992px and up) */\r\n@media (min-width: 992px) { ... }\r\n\r\n/* Extra large devices (large desktops, 1200px and up) */\r\n@media (min-width: 1200px) { ... }\r\n```\r\n\r\n### Grid system (12 columns) works in the same way\r\n\r\n```html\r\n<div class=\"plume-grid\">\r\n  <div class=\"row\">\r\n    <div class=\"col-6\">50%</div>\r\n    <div class=\"col-6\">50%</div>\r\n  </div>\r\n\r\n  <div class=\"row\">\r\n    <div class=\"col-3\">25%</div>\r\n    <!-- 75% -->\r\n    <div class=\"col-9\">\r\n      <div class=\"row\">\r\n        <div class=\"col-6\">50% of 75%</div>\r\n        <div class=\"col-6\">50% of 75%</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"row\">\r\n    <div class=\"col-12 col-xl-4\">mobile->100% - laptop(>1200px)->25%</div>\r\n    <div class=\"col-12 col-xl-4\">mobile->100% - laptop(>1200px)->25%</div>\r\n    <div class=\"col-12 col-xl-4\">mobile->100% - laptop(>1200px)->25%</div>\r\n  </div>\r\n</div>\r\n```\r\n> This grid system is based on `float` that makes it compatible with old browsers.\r\n\r\n### Helpers\r\n- center a single column in a row\r\n```html\r\n<div class=\"row\">\r\n  <div class=\"col-4 col-center\">~33.3% centered column</div>\r\n</div>\r\n```\r\n\r\n- hide a column at a specific breakpoint\r\n```html\r\n<div class=\"row\">\r\n  <div class=\"col-12 hide-xl\">column hidden on laptop(>1200px)</div>\r\n</div>\r\n```\r\n\r\n- show a column only for a specific breakpoint\r\n```html\r\n<div class=\"row\">\r\n  <div class=\"col-12 show-xl\">column only visible on laptop(>1200px)</div>\r\n</div>\r\n```\r\n\r\n- miscellaneous  \r\nYou'll find various helpers in `src/scss/base/helpers.scss`","readmeFilename":"README.md"}