{"_id":"almond.css","_rev":"3-ebb33094c5124adb15f50f37a5e8e2b5","time":{"created":"2023-01-21T04:11:10.944Z","1.1.4":"2023-01-20T03:38:04.873Z","modified":"2023-02-09T04:53:58.125Z","1.2.0":"2023-01-21T04:11:11.120Z","1.2.2":"2023-02-09T04:53:58.017Z"},"name":"almond.css","dist-tags":{"latest":"1.2.2"},"versions":{"1.2.0":{"name":"almond.css","version":"1.2.0","description":"Collection of CSS styles to make simple websites look nicer.","main":"dist/almond.css","scripts":{"build":"npm run build:raw && npm run build:min && npm run build:lite","build:raw":"node-sass src/index.scss dist/almond.css","build:min":"node-sass --output-style compressed src/index.scss dist/almond.min.css","build:lite":"npm run build:lite:raw && npm run build:lite:min","build:lite:raw":"node-sass src/index.lite.scss dist/almond.lite.css","build:lite:min":"node-sass --output-style compressed src/index.lite.scss dist/almond.lite.min.css","test":"cypress run","test:open":"cypress open","watch":"node-sass -w src/index.scss dist/almond.css"},"repository":{"type":"git","url":"git+https://github.com/alvaromontoro/almond.css.git"},"keywords":["css","class-less","styles"],"author":{"name":"Alvaro Montoro","email":"alvaromontoro@gmail.com","url":"https://alvaromontoro.com"},"license":"GPL-3.0-or-later","bugs":{"url":"https://github.com/alvaromontoro/almond.css/issues"},"homepage":"https://github.com/alvaromontoro/almond.css","devDependencies":{"node-sass":"^7.0.3","cypress":"^9.2.0"},"gitHead":"4359b42702e0866bf4775ba9d52eac19c0147844","_id":"almond.css@1.2.0","_nodeVersion":"14.17.5","_npmVersion":"8.6.0","dist":{"integrity":"sha512-C9s5cZvdGPy5s/9iQv0Wm2zr8q0HswVBRMB1H+YOMRQXYZb3ZXvC7X0eoieQ0MI4no4ET3D5taZYI7RI8x7qiQ==","shasum":"250fec90881911026bb21911eae785621fee424c","tarball":"https://registry.npmjs.org/almond.css/-/almond.css-1.2.0.tgz","fileCount":7,"unpackedSize":83463,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEtCv7ZSuxzmuW4cgweNIKxU+qtaT2xjOek5+1fCLjcCAiA/5PQGHgn0h2kWdctGFDrlW5ugv+SQ/dS4mdglwmF1jg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjy2XfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrF8g/5AUSfF0gnz+YLFhjxUwrjyt+rTpplz52GZ8xnWK8bN72Sx1qA\r\n+Tm+iStxe9jtCo751ix1hATG12RNY74fljOTIcx7Naw7/rGQsXpXAXnKSZhx\r\nYG3o0WlrJOh/nGrywWJdxxp1aW0FeY+ZTK1AktibKtgyn9/ki3BAHeiFGhh9\r\nWa2VsEvpRVnOAOjkuExVdYoYO7JeK8otan153/+ky9YiKAC2zAHDlBXlpV4H\r\n44WqjMlTGM9xB9ytH7quM32MY9vAB9Yk1jdnja1MHC2kmEnx96emnXzGhLSv\r\n2SOUqrcqm22rVNDbHZmgv02LbfP177pgK92HFgfWePgS22pM6vVOKWhkzMz9\r\nJ2z6qTogIRxTWk0BCICiVtPp/n/I0ufYLAsAy+KxebSkWF7wDbBINMx42g/k\r\n7zHsI+S77/MXEZMGt8Fu5p4DdbvXCXSlwXhIiRk9aRKqXN/dTGkHiDFSvHfg\r\n7u8Qs+xv9Kjii4i4G4LY+1WEA/8CdYqf7gpj2tYb/2muZaFkMEAkRlttuJ4Z\r\nOCxlCMXWNkbBnuprOoDo1GXMUQmSenJ9aMA6cG3tE3fBvrrZrbixg7rMzDXQ\r\nNXvjm/7WP6lxKsMXrZTdqvkwriEIHtDoZ1Asm6Ta2yDKLt0xazjrhcyk3sqL\r\ndIrf+7kc+HDHM6lSDfosJeiNEOeOenDIP8c=\r\n=0cAt\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alvaromontoro","email":"alvaromontoro@gmail.com"},"directories":{},"maintainers":[{"name":"alvaromontoro","email":"alvaromontoro@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/almond.css_1.2.0_1674274270945_0.09889817728712202"},"_hasShrinkwrap":false},"1.2.2":{"name":"almond.css","version":"1.2.2","description":"Collection of CSS styles to make simple websites look nicer.","main":"dist/almond.css","scripts":{"build":"npm run build:raw && npm run build:min && npm run build:lite","build:raw":"node-sass src/index.scss dist/almond.css","build:min":"node-sass --output-style compressed src/index.scss dist/almond.min.css","build:lite":"npm run build:lite:raw && npm run build:lite:min","build:lite:raw":"node-sass src/index.lite.scss dist/almond.lite.css","build:lite:min":"node-sass --output-style compressed src/index.lite.scss dist/almond.lite.min.css","test":"cypress run","test:open":"cypress open","watch":"node-sass -w src/index.scss dist/almond.css"},"repository":{"type":"git","url":"git+https://github.com/alvaromontoro/almond.css.git"},"keywords":["css","class-less","styles"],"author":{"name":"Alvaro Montoro","email":"alvaromontoro@gmail.com","url":"https://alvaromontoro.com"},"license":"GPL-3.0-or-later","bugs":{"url":"https://github.com/alvaromontoro/almond.css/issues"},"homepage":"https://github.com/alvaromontoro/almond.css","devDependencies":{"cypress":"^9.2.0","husky":"^8.0.3","node-sass":"^7.0.3","save-dev":"^0.0.1-security"},"gitHead":"b6315aa0dc862a5d3ab02902d7be134c394d93e3","_id":"almond.css@1.2.2","_nodeVersion":"14.17.5","_npmVersion":"8.6.0","dist":{"integrity":"sha512-bAOvsWLyJ2sqXWT5VSFI+iLiygCx+aLDcINF3DKWG3A9QmuBoZFnncZ53BIeNh//PT4akrbDfAZRex8idNmuHw==","shasum":"a8133e781d04597b994a9f6efb62088f185f6d2c","tarball":"https://registry.npmjs.org/almond.css/-/almond.css-1.2.2.tgz","fileCount":7,"unpackedSize":84431,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEuD2NtSAX+62ZrzKTCR/P3z/bsgOah+EDx8pR2D//wkAiEAnG/LJmndA+TPlMlFLyxfh7sR5/r8+aN8Wz8YQwCYrho="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5HxmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqK7Q//WhPfsGfVNpt8C9ovFMZSoFsjEk2efvoDMsVaAnyxAkx6/dzN\r\nhM0Qm7XAf5IchZRtg0Lw34WW0MrSdZjQC2lvrswyVFCj93TM20MphtKtojW9\r\nEgZ0Yd6aaLAHASOoiic5JStnWHi/HsOZ0exCK2BrzOZEmLa1XIrb9Jy9vxW7\r\nLLs/Y4PG90KirT7cYzYMGpKvoHtkNiDFX2ol4HJ77Tar21eY7SjfekwFEg4d\r\nnjt++tVjIf/s1+PQlKqBSKkzqmeMc2GEVwWGgMNArbUNDaaWjyCoBuP/nLPv\r\n7GsuVQnzNswVD3a4cX7dRpY31GEA216neQB+Uu8OY92eQHc8Pgmbzi7/GN/F\r\nFIoYO5O8j0S+5Cgzk9CZ/BaRvsYPzXybHLc30X4uy8fpQyZgpG45u926eNZ0\r\nCWtRJrkLsEcdrs4TfTJRdLtDNgLRaQmKwaJrXOLjRktnXnb9Ekk4KFuAdoOn\r\n5VCD6YwLXU7vKmLrcnYaFeN4kw/mL+oLSd/rY4ccHJxwE1wZXqyV+e4QsIgr\r\ntWav9ftf/U6qaAFzXnM9G/SiQJm25dMQw0jnO5vn+PvGLFFWCOCS4fltFPFB\r\no9ccjhpwqwH5klf3igMS/oXzeyI955v8IM19OdaZGP0G0rffBdnn9Ybm2oag\r\npo95oop3RiOAJVI0QeAcEC2ibtAJgXZ46DI=\r\n=ZYKn\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alvaromontoro","email":"alvaromontoro@gmail.com"},"directories":{},"maintainers":[{"name":"alvaromontoro","email":"alvaromontoro@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/almond.css_1.2.2_1675918437821_0.5988760135716589"},"_hasShrinkwrap":false}},"maintainers":[{"name":"alvaromontoro","email":"alvaromontoro@gmail.com"}],"description":"Collection of CSS styles to make simple websites look nicer.","homepage":"https://github.com/alvaromontoro/almond.css","keywords":["css","class-less","styles"],"repository":{"type":"git","url":"git+https://github.com/alvaromontoro/almond.css.git"},"author":{"name":"Alvaro Montoro","email":"alvaromontoro@gmail.com","url":"https://alvaromontoro.com"},"bugs":{"url":"https://github.com/alvaromontoro/almond.css/issues"},"license":"GPL-3.0-or-later","readme":"# Almond.CSS\n\nAlmond.CSS is a collection of class-less CSS styles to make simple websites look better. Almond.CSS helps in two ways: it normalizes the CSS styles to provide similar experience cross-browser, and it spices things a little by adding custom styles (that can be personalized!)\n\nUse the different HTML5 semantic tags on your website, include the library in your project, and let CSS and the browser work their magic. Just combine your HTML and Almond CSS (no JavaScript needed.) You can see a [demo in this repo running](https://alvaromontoro.github.io/almond.css/demo/).\n\nThe main goals of this project are:\n\n- **Use only tags**: no classes or IDs.\n- **Cross-browser compatibility**: look as close as possible in all browsers.\n- **Easily themable**: using CSS variables and HSL colors.\n- **Responsive, accessible, and usable**.\n- **Lightweight**: limit the size to 3KB (gzipped).\n- **Keep it simple** but elegant.\n\n---\n## How to include Almond.CSS in your project\n\n### NPM\n\nAlmond.CSS is available as an npm package to make it easy to install and use on any project. These are the steps to include it in any project (using `npm`):\n\n1. Install the package:\n\n        npm install almond.css\n\n2. Add the import to the app entry point (e.g. in apps created with create-react-app, it would be App.js):\n\n        import \"almond.css/dist/almond.min.js\";\n\n3. Build and start your app\n\n### CDN\n\nThere are CDN services like [jsDelivr](https://www.jsdelivr.com/) or [unpkg](https://unpkg.com), that work with \ngithub and npm libraries, providing a fast and reliable delivery.\n\nYou can include Almond.CSS using the `<link>` tag (**You only need one, not all**):\n\n```html\n<!-- loads all the styles (including icons and images) from jsDelivr -->\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/alvaromontoro/almond.css@latest/dist/almond.min.css\" />\n\n<!-- loads the light version of the library from jsDelivr -->\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/alvaromontoro/almond.css@latest/dist/almond.lite.min.css\" />\n\n<!-- loads all the styles (including icons and images) from unpkg -->\n<link rel=\"stylesheet\" href=\"https://unpkg.com/almond.css@latest/dist/almond.min.css\" />\n\n<!-- loads the light version of the library from unpkg -->\n<link rel=\"stylesheet\" href=\"https://unpkg.com/almond.css@latest/dist/almond.lite.min.css\" />\n```\n\n---\n\n## Theming\n\nWe based the theming on CSS variables and HSL colors. HSL allows to define a color based on three parameters: Hue, Saturation, and Lightness. Provide a primary and secondary colors using HSL, and see the demo page change automatically.\n\nThe default primary color is a dark pale blue, and the default secondary color is a medium gray.\n\nSome values that devs can specify:\n\n| Variable               | Description                                       | Default Value                  |\n| ---------------------- | ------------------------------------------------- | ------------------------------ |\n| `--primaryH`           | Primary color hue value                           | `210`                          |\n| `--primaryS`           | Primary color saturation value                    | `50%`                          |\n| `--primaryL`           | Primary color lightness value                     | `40%`                          |\n| `--primary-bg`         | Primary color background                          | `white`                        |\n| `--secondaryH`         | Secondary color hue value                         | `0`                            |\n| `--secondaryS`         | Secondary color saturation value                  | `0%`                           |\n| `--secondaryL`         | Secondary color lightness value                   | `13%`                          |\n| `--secondary-bg`       | Secondary color background                        | `white`                        |\n| `--font-family`        | Set of fonts for the text                         | `Helvetica, Arial, sans-serif` |\n| `--font-size-root`     | Default font size (root)                          | `16px`                         |\n| `--font-weight-bolder` | Font weight value (bolder text)                   | `700`                          |\n| `--font-weight-bold`   | Font weight value (bold text)                     | `400`                          |\n| `--font-weight-normal` | Font weight value (normal text)                   | `200`                          |\n| `--font-weight-thin`   | Font weight value (thin text)                     | `100`                          |\n| `--line-height`        | Line-height of paragraphs and lists               | `1.75rem`                      |\n| `--heading-margin`     | Margin applied to the headings and heading groups | `1.5rem 0 1rem`                |\n| `--border-radius`      | Border radius                                     | `2px`                          |\n\n### Widgets\n\nBy combining some \"not-too common\" HTML attributes with some CSS variables, we can generate a series of widgets without the need to use JavaScript or HTML classes.\n\nHere is a list of the widgets available at the moment:\n\n- Circular progress bar\n\n\n## Development\n\nHere are the instructions on how to copy the code of this library into your local machine and build it. They use `npm`, but you can run similar commands with `yarn`.\n\nClone the repository:\n\n```\ngit clone https://github.com/alvaromontoro/almond.css.git\n```\n\nEnter the project directory (almond.css):\n\n```\ncd almond.css\n```\n\nInstall the development dependencies:\n\n```\nnpm i\n```\n\nBuild the library by compiling the sass files:\n\n```\nnpm run build\n```\n\nThis will generate four files in the `dist` folder:\n\n- `almond.css`: the raw/readable version of the library\n- `almond.min.css`: a minified version of the library\n- `almond.lite.css`: the light version of the library without icons\n- `almond.lite.min.css`: light minified version\n\nYou can test the library by opening the static HTML file located in the `demo` directory.\n\n---\n\nInstead of having to run the `build` script each time that a change is made, you can add a watch functionality that will generate the `almond.css` file every time there is a change in any of the sass files:\n\n```\nnpm run watch\n```\n\nNotice that only the `almond.css` file (used in the demo html page) will be generated. Once you are ready to build for production, you will have to run the `build` script to generate the light and minified versions described above.","readmeFilename":"README.md"}