{"_id":"449.css","_rev":"5-12b048c591e8737a31f1ae91c32f552a","name":"449.css","dist-tags":{"latest":"1.3.0"},"versions":{"1.0.0":{"name":"449.css","version":"1.0.0","description":"Simple utility helper for css/scss","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/darko-mychi/449.css.git"},"keywords":["css","scss","styling","utility"],"author":{"name":"Michael Darko","email":"mickdd22@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/darko-mychi/449.css/issues"},"homepage":"https://github.com/darko-mychi/449.css#readme","gitHead":"615162f08fc6508c9c62b7347141dcec0ba1214e","_id":"449.css@1.0.0","_nodeVersion":"14.16.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-6G9L6GKt8VsN8Nx7ahNraO7/qy7QyvLTGb6bWWIE1VKX4tTeTG6h0I012dfrsddWUao51iC+EtUodLJsG4dcLw==","shasum":"8d0c1827d3c3ec6dbecec0bf6567cb0eb5ec9dc2","tarball":"https://registry.npmjs.org/449.css/-/449.css-1.0.0.tgz","fileCount":21,"unpackedSize":1505260,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0E0ICRA9TVsSAnZWagAASGIQAIyN0AOcNoEaMVwra2vc\nm4qEqRwIofELhea9rIy6y3s6OI126Q2Y1F7NfmLKzWq4D0v9xk9uGg9p/0mi\nwysmnX65qdTDHxIh16bwS0P+EmtAz/H6zLqZBQsRhxoETS9Eo4w6wQauNjcw\noDAQyB9r4L2BD97gfaWtP4cAUG/8SObo6xd06Zl05WfH+mbDWgDLA3PtMOJA\nTKbUWrn2YiPmMK9+m/Tv9tPGPUrsSQdPHa5nyT/a89lByyN3fz2uCcjciE0m\n8pwL5rwgkxrfJyMcy6ayKrHGXSQeTA5buaSgMDY9R/IpYtprdsafDX4bM0cc\nFlMwuvB5DTiAROWS6cN41Cx0XfMGZyKVliJ35YOwfeDlQMcOpNKDt5TPlUq5\n1YxXKygjvxCLJs1FSDAH5U2XEQhtLrwLnaS5MFNEonWGM6hol2WbazFKYOAh\nW5vuGC3+BJw+BaFQ5BFI9tsjLUr82UCndSRaM4QsXjWBeMni5Q8jMjDTnTQp\nBE4KJ36i99RvnWs6X3cU1OP6EN4RYm42a8tNIr2AT3JLZ+Re0Ni07SYV5dku\nBd/7V1Ieeb6NzLELlF2f5z7eF8B8X0T1qd2XIUWedV2wLHj0TN2pUohiXPm8\nGqTA7ORKPDCnZwgF2gyA0a1r1xgd61TppERnWSuPu9jNx8QY6c5O5iUvESzz\nIqX2\r\n=osOb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTWw/TZYQUy2hyrdjDeuJZ6tMvpCyRy0bYNB5S4/GQ6AIhALeHzX4f3k4wg/QvXg1PAXBI1xsRPLQIjuhQrB+HvCJT"}]},"_npmUser":{"name":"mychi","email":"mickdd22@gmail.com"},"directories":{},"maintainers":[{"name":"mychi","email":"mickdd22@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/449.css_1.0.0_1624263943889_0.7340957774454313"},"_hasShrinkwrap":false},"1.1.0":{"name":"449.css","version":"1.1.0","description":"Simple utility helper for css/scss","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/mychidarko/449.css.git"},"keywords":["css","scss","styling","utility"],"author":{"name":"Michael Darko","email":"mickdd22@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mychidarko/449.css/issues"},"homepage":"https://github.com/mychidarko/449.css#readme","gitHead":"0bb296c591ae769214ef46588a3a689789027a6c","_id":"449.css@1.1.0","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-ANzaYEmEtD8mDNkcriCB/ZBI07CNhNW7Xvl/MU5+tlJM5rN/TG1UUfMTSLQpEhGImPkcYu88YkSc0M2D5H9UeQ==","shasum":"ba01e3be41ec54bee6a6481dd9ae813122e10040","tarball":"https://registry.npmjs.org/449.css/-/449.css-1.1.0.tgz","fileCount":22,"unpackedSize":1513688,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLRMmCRA9TVsSAnZWagAA6jEP/0e++65Koyr0fr0hRKLE\nsYb6wpu3KESUgfQ7NPbV0TN4ic9XUSiiqTrSCkzio0jbTO3Z7DKBdXo+Hpf6\nYjEXPeRyPyZbDEctiIiueu76WrH3QXl8fOUIbcFVAjjNJGVZcJhr0efyC0tL\nDw9n9wN0NKlOVF6y3tmK9AK+DAbeaOyLVFjzUdoEVNeSD6GpGMh4d4trSJRa\nquJqiTIifnuzit24+sDdKGUiYvVq4n/MiEPC8MtoxblpyXfmegGBilyVxy2G\nPYEbf9coPBpmrP2vNfxlRR24XxkfdTw1DWsAQf6BbkFPAjRwcrC9xYz2NlkK\nP7CdTBZad2cRTMhiEyKE18Z30L1oWNvYiZWuFl67fsRbaiInKO3JmkGADMO1\nKf8KBJYdi3aCOsStjDlqkbCcGH9ecHem62ZHYWWgPjCDcPVjWAAxhJKtAzCH\nIauOtiJrtbwy16w+YSvdGIh8BF0hDZqXpToORX/J1plhJa7sIHcy/U0QCgNK\nC3VSBh7ahl3zhMCcxpWy+gr1IX9T+zWYc7IRI+irmNhtN/1gkcuI/Qxvd05N\nZGzygFvwD4/B5/MRyEYid0Msr4dl7s9NbKN0s6biowghHb8XltTHvbQtEbbK\naFJFPPsPdkuN4OyRxyJrQ18ToKH0BVzrxHmMyWbkZF5CwDpROdGvXfT/knJJ\nxbLW\r\n=QIQq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICJ3rtN/NFAP0udZHrKMlvTLcs71ndaiuQGnFmcQSACwAiAmRemyIYVlgvLnx61pmDqDtDwOtvigT8F/BP8oU7MM8A=="}]},"_npmUser":{"name":"mychi","email":"mickdd22@gmail.com"},"directories":{},"maintainers":[{"name":"mychi","email":"mickdd22@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/449.css_1.1.0_1630343974848_0.40397912001618685"},"_hasShrinkwrap":false},"1.2.0":{"name":"449.css","version":"1.2.0","description":"Simple utility helper for css/scss","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/mychidarko/449.css.git"},"keywords":["css","scss","styling","utility"],"author":{"name":"Michael Darko","email":"mickdd22@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mychidarko/449.css/issues"},"homepage":"https://github.com/mychidarko/449.css#readme","gitHead":"291e8a8638a0086ddfaaef5a63bff1cc1a99700b","_id":"449.css@1.2.0","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-Qpuv8uP2v4L63AKZhEZx00C6bIAO9xLpdBsMZp3P8n8f5OnHAE4fTDvsfWG5leGfCjI94AdipnPG4U2WyQXbdg==","shasum":"6e58b6e726ce113db24cfc43bdcdb34f4519cc36","tarball":"https://registry.npmjs.org/449.css/-/449.css-1.2.0.tgz","fileCount":22,"unpackedSize":1598430,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGsS1Y8RgGuQ0GlvQYGFGoCuAxIiA6u69YBdXpq5g0jEAiAMa26ShAVL+fTVwND1lt2/BvgnT4rN+FOTZ2AuFeiTPg=="}]},"_npmUser":{"name":"mychi","email":"mickdd22@gmail.com"},"directories":{},"maintainers":[{"name":"mychi","email":"mickdd22@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/449.css_1.2.0_1633975348872_0.2949799992623843"},"_hasShrinkwrap":false},"1.3.0":{"name":"449.css","version":"1.3.0","description":"Simple utility helper for css/scss","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/mychidarko/449.css.git"},"keywords":["css","scss","styling","utility"],"author":{"name":"Michael Darko","email":"mickdd22@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mychidarko/449.css/issues"},"homepage":"https://github.com/mychidarko/449.css#readme","gitHead":"1052246f4211711b3dbc19b26d518694526e7ed3","_id":"449.css@1.3.0","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-tvUMlTo/n5cVP86xsPkD7XevAaf8pSC42A+MCc2zqiJIqHktl0UObY0IXrNg0cAVT4MkzeelYhhsDdA91C7/UQ==","shasum":"9dcadb559f4c0492d77eb83dbf62450558a8cbf6","tarball":"https://registry.npmjs.org/449.css/-/449.css-1.3.0.tgz","fileCount":22,"unpackedSize":1598432,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuevlCRA9TVsSAnZWagAAIGMP/R4jPefh30jRqSU4gkmi\n0tlZ29O8ByMp6Yx29uXdI1xDKzhNIGXQOltq0fmBK5PUClAERuxU+K5tX9/8\nIFO6NBKafEc59XamnVDNCFR9xPOAM3y36lMwhryK11Vjl78NjknIgJGPxA+h\n/wTZmvQgpeKq4uv9k49sfUmuRmwGLA2wwRIC3I0adPsXMGsxZKM2j49ju+og\nj2s7YhuFPNg6drNCxw5uWn9EHaGxRjz29rgnnv1CpmvOAExTpS/Ugnel7p1W\njcsqXa7EgcA+Rjm1DpCyNpVwaEP71A5DYd//O6VMSGeferDnpJ7rpl8zHI7P\nkgBhHLw1Q4SAmcgYypQWQMdhFqlGWWLfAyWUH2r/27FpnTbpACscLpMJasFx\nr8uh9JcJxzEhBH484UkK6GG6vhzUzdhcEPxC2al6yLlbaWeFCIRN0pKF2uHk\nGMJqGwZlYgQGeB+08r5yA1Xmvzwc/rCnRmL4M3oEOf6rxBUkb6KDDei7GdLC\naSMIrYVsm3/HhVec5UxOyz21ZodPZBjeJGMRbvC3wHVTic3P+j2SAYfHOMvr\nPpsE8IYZm2RgyXtAO5fY9XcMgQR5mkrWeg2TZpM0s9Yii6/gT/cVB10bjjvf\nYxLTzqSkB0z2ykoFTrLS/21+YC9I6hvJ0nsLvxRIPbNRO3hM80cBsyLC6IlB\nkGz+\r\n=vtzG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDw26jkutWxZimOA4M0tBbogZhXfP09G9Xzp0rWwuZl7AiEAmgVxSfyjFoD4+VDVlLRAafaBTKLbZP5FildwTL/wnfc="}]},"_npmUser":{"name":"mychi","email":"mickdd22@gmail.com"},"directories":{},"maintainers":[{"name":"mychi","email":"mickdd22@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/449.css_1.3.0_1633975643485_0.5291951450861521"},"_hasShrinkwrap":false}},"time":{"created":"2021-06-21T08:25:43.889Z","1.0.0":"2021-06-21T08:25:44.089Z","modified":"2022-04-04T10:22:15.844Z","1.1.0":"2021-08-30T17:19:34.998Z","1.2.0":"2021-10-11T18:02:29.053Z","1.3.0":"2021-10-11T18:07:23.621Z"},"maintainers":[{"name":"mychi","email":"mickdd22@gmail.com"}],"description":"Simple utility helper for css/scss","homepage":"https://github.com/mychidarko/449.css#readme","keywords":["css","scss","styling","utility"],"repository":{"type":"git","url":"git+https://github.com/mychidarko/449.css.git"},"author":{"name":"Michael Darko","email":"mickdd22@gmail.com"},"bugs":{"url":"https://github.com/mychidarko/449.css/issues"},"license":"MIT","readme":"# 449 CSS\n\nA CSS \"helper\" created at 4:49 pm🙂🎨\n\n449 takes away the pain of performing basic utility tasks, has helpers for margin-ing, padding-ing, color-ing and some other basic stuff.\n\n## Directory Structure\n\n```bash\nC:.\n├───dist\n└───scss\n```\n\n- **dist** contains raw css files\n- **scss** contains the scss source of 449\n\n## Why use 449?\n\nOther utility libraries come with bloated functionality (features you most likely will never use), others come with pre-built styling and a whole lot more unnneccesities. 449 comes with classes for only the most used css functions like positioning, spacing...\n\nThis means that you can use 449 together with other css libraries like bootstrap, materialize and even other utility libraries like tailwind, and it won't get in the way. That's a promise!\n\n## Installation\n\nYou can quickly install 449 using npm or yarn.\n\n```sh\nyarn add 449.css\n```\n\n```sh\nnpm i 449.css\n```\n\n## Usage\n\nAfter installing 449, you can use the prebuilt css or scss if you want more control and \"power\".\n\n```js\n// import css\nimport \"449.css/dist/449.css\";\n\n// import scss\nimport \"449.css/scss/\";\n\n// you may need to add the index pased on your compiler\nimport \"449.css/scss/index.scss\";\n```\n\nOr in html\n\n```html\n\n```\n\nYou can also import the scss source directly in your own scss\n\n```scss\n@import \"~449.css/scss/\";\n```\n\n### responsiveness\n\n449 doesn't come with a grid system like other libraries do, however, it still comes with grid breakpoints that follow bootstrap's system.\n\n```scss\n$xs: 0;\n$sm: 576px;\n$md: 768px;\n$lg: 992px;\n$xl: 1200px;\n$xxl: 1400px;\n```\n\nThanks to the media breakpoints, you can build responsively, like hiding items on smaller screens, setting a particular height for an item on tab... There are endless possibilities here.\n\nIf you imported the scss source, you should have access to the 449 reponsive mixins which allow you to easily make responsive media queries like this:\n\n```scss\n@include sm-down {\n color: blue;\n}\n```\n\nThis code will only run on screens smaller than `$sm: 576px;`\n\nThe available mixins are:\n\n- xs - 0px to 576px\n- sm-down - 576px down\n- sm - 577px to 768px\n- sm-up - 577px up\n- md-down - 768px down\n- md - 769px to 992px\n- md-up - 769px up\n- lg-down - 992px down\n- lg - 993px to 1200px\n- lg-up - 993px up\n- xl-down - 1400px down\n- xl - 1201px to 1400px\n- xl-up - 1200px up\n- xxl - 1401px up\n\nEven if you won't be using mixins, 449's dimensions are based on these mixins, so you can always refer to them.\n\n### dimensions\n\nDimensions are the basis of 449 css styling. There are a few things to note in terms of sizing:\n\n#### Scales\n\n449 has 2 unique scales for sizing: pixels and percentages. To reference the pixel sizing, use `_` eg: `ml:_1` to give a margin left of `10px`. You can use a number directly for the percentage scale eg: `ml:10` for a margin left of `10%`. Below is the full range of available values for both scales.\n\n- \"-1\": -10px\n- \"-2\": -20px\n- \"-3\": -30px\n- \"-4\": -40px\n- \"-5\": -50px\n- \"-6\": -60px\n- \"-7\": -70px\n- \"-8\": -80px\n- \"-9\": -90px\n- \"-10\": -100px\n- \"0\": 0\n- \"_1\": 10px\n- \"_2\": 20px\n- \"_3\": 30px\n- \"_4\": 40px\n- \"_5\": 50px\n- \"_6\": 60px\n- \"_7\": 70px\n- \"_8\": 80px\n- \"_9\": 90px\n- \"_10\": 100px\n- \"auto\": auto\n- \"10\": 10%\n- \"20\": 20%\n- \"25\": 25%\n- \"30\": 30%\n- \"33\": 33.33%\n- \"40\": 40%\n- \"45\": 45%\n- \"50\": 50%\n- \"60\": 60%\n- \"66\": 66.66%\n- \"70\": 70%\n- \"75\": 75%\n- \"80\": 80%\n- \"90\": 90%\n- \"100\": 100%\n- \"10vh\": 10vh\n- \"25vh\": 25vh\n- \"50vh\": 50vh\n- \"75vh\": 75vh\n- \"100vh\": 100vh\n- \"10vw\": 10vw\n- \"25vw\": 25vw\n- \"50vw\": 50vw\n- \"75vw\": 75vw\n- \"100vw\": 100vw\n\nThe dimensions util comes with classes for setting:\n\n- height (h) eg: `h:100`\n- max height (max-h) eg: `max-h:100`\n- min height (min-h) eg: `min-h:100`\n- width (w) eg: `w:100`\n- max width (max-w) eg: `max-w:100`\n- min width (min-w) eg: `min-w:100`\n\nAs shown in the **responsiveness** section above, you can combine these dimensions with breakpoints like this:\n\n```html\n
...\n```\n\n### margin\n\n449 comes with a margin utility that allows you to easily set margins for your elements. The available classes are:\n\n- margin (m) eg: `m:_1`\n- margin left and right (mx) eg: `mx:_1`\n- margin up and down (my) eg: `my:_1`\n- margin top (mt) eg: `mt:_1`\n- margin bottom (mb) eg: `mb:_1`\n- margin left (ml) eg: `ml:_1`\n- margin right (mr) eg: `mr:_1`\n\nJust as with **dimensions**, you can also combine margins with breakpoints:\n\n```html\n
...\n```\n\n### padding\n\n449 comes with a padding utility that allows you to easily set paddings for your elements. The available classes are:\n\n- padding (p) eg: `p:_1`\n- padding left and right (px) eg: `px:_1`\n- padding up and down (py) eg: `py:_1`\n- padding top (pt) eg: `pt:_1`\n- padding bottom (pb) eg: `pb:_1`\n- padding left (pl) eg: `pl:_1`\n- padding right (pr) eg: `pr:_1`\n\nJust as with **margins**, you can also combine paddings with breakpoints:\n\n```html\n
...\n```\n\n### position\n\nThe position utility allows you to easily set a CSS position on your element. The available classes are:\n\n- `position:relative`\n- `position:absolute`\n- `position:fixed`\n- `position:sticky`\n\nBesides these, you can also set the top, bottom, left and right positions of items on the screen using dimensions. eg:\n\n- `top:_1` (top: 10px)\n- `left:20` (left: 20%)\n\n```html\n
...\n```\n\nJust as with the above utilities, you can also use responsiveness here:\n\n```html\n
...\n
...\n```\n\n### display\n\nThe display utility allows you to set displays for the following:\n\n- none\n- flex\n- ruby\n- block\n- contents\n- grid\n- inline\n- inline-block\n- inline-flex\n- table\n\n```html\n
...\n```\n\n#### flex utility classes\n\nFlex is the most used display class, as such, 449 includes a bunch of helpers for it.\n\nDOCS coming soon...\n\n### cursor\n\nThis is a simple utility for setting the cursor property.\n\neg: `cursor:pointer`. You can use any valid cursor property on `cursor:`\n\n### overflow\n\nFEATURE COMING SOON\n\n### animation\n\nDOCS COMING SOON\n\n### shadow\n\n449 comes with shades of grey ranging from 100 to 900. These greys can be used to set the shadow lightness/darkness. Besides the lightness, shadows also posess a direction and size which can all be set with 449.\n\n- shadow:400 (This sets a default shadow with colour grey-400 #ced4da)\n- shadow-sm for a small shadow\n- shadow-lg for a large shadow\n- shadow-top for a shadow on top\n- shadow-bottom for a lower shadow\n- shadow-left for a left shadow\n- shadow-right for a right shadow\n\nYou can also combine sizes and directions like this:\n\n- shadow-top-sm\n- shadow-right-lg\n\n```html\n
...\n```\n\n### border\n\nFEATURE COMING SOON\n\n### colors\n\nBasically backgrounds and text colours. Eg:\n\n```html\n...\n