{"id":33219460,"url":"https://github.com/tretapey/raisincss","last_synced_at":"2026-01-14T12:01:08.736Z","repository":{"id":46120702,"uuid":"168170002","full_name":"tretapey/raisincss","owner":"tretapey","description":"An Utility CSS only library. It supports css grid and many more useful css properties.","archived":false,"fork":false,"pushed_at":"2024-06-16T10:30:17.000Z","size":560,"stargazers_count":119,"open_issues_count":5,"forks_count":12,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-11-21T08:03:21.669Z","etag":null,"topics":["css","css-grid","library","open-source","raisincss","scss","utilities"],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"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/tretapey.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-01-29T14:39:10.000Z","updated_at":"2025-11-10T06:43:19.000Z","dependencies_parsed_at":"2023-01-20T00:15:24.878Z","dependency_job_id":null,"html_url":"https://github.com/tretapey/raisincss","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/tretapey/raisincss","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tretapey%2Fraisincss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tretapey%2Fraisincss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tretapey%2Fraisincss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tretapey%2Fraisincss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tretapey","download_url":"https://codeload.github.com/tretapey/raisincss/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tretapey%2Fraisincss/sbom","scorecard":{"id":898163,"data":{"date":"2025-08-11","repo":{"name":"github.com/tretapey/raisincss","commit":"79e4994d4de20f21ab23f56498b4796c726ba485"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.4,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":0,"reason":"Found 2/26 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":9,"reason":"1 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 6 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-24T14:31:14.592Z","repository_id":46120702,"created_at":"2025-08-24T14:31:14.592Z","updated_at":"2025-08-24T14:31:14.592Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28419272,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-14T10:47:48.104Z","status":"ssl_error","status_checked_at":"2026-01-14T10:46:19.031Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["css","css-grid","library","open-source","raisincss","scss","utilities"],"created_at":"2025-11-16T14:00:26.352Z","updated_at":"2026-01-14T12:01:08.730Z","avatar_url":"https://github.com/tretapey.png","language":"CSS","funding_links":[],"categories":["CSS library"],"sub_categories":[],"readme":"# RaisinCSS\n\nAn Utility CSS only library.\n\n- Supports CSS Grid (Check grid section)\n- Supports Flexbox\n- Totally open to customization\n- Skeleton and utility based tool\n- Lightweight and easy to use\n\n### Table of contents\n\n- [How to contribute](#how-to-contribute)\n- [How to use](#how-to-use)\n- [DOCS](#docs)\n  - [Breakpoints](#breakpoints)\n  - [Utils](#utils)\n    - [Display](#display)\n    - [Float](#float)\n    - [Overflow](#overflow)\n    - [Cursor](#cursor)\n    - [Position](#position)\n    - [Positioning](#positioning)\n    - [Visibility](#visibility)\n    - [Opacity](#opacity)\n    - [Z-index](#z-index)\n    - [Margin](#margin)\n    - [Padding](#padding)\n    - [Width](#width)\n    - [Height](#height)\n    - [Font](#font)\n    - [Text](#text)\n    - [Background](#background)\n    - [Border](#border)\n    - [Shadow](#shadow)\n    - [List](#list)\n    - [Ratio](#ratio)\n  - [Container](#container)\n  - [Grid](#grid)\n  - [Flex](#flex)\n- [Sites using RaisinCSS](#sites-using-raisincss)\n\n## How to contribute\n\nFork this repo and send a pull request with your proposed changes. Make sure you update docs as well if your changes need to be documented.\n\nWith NPM: To generate the css files run the command `npm install \u0026\u0026 npm run build` this will generate the following files; `raisin.css`, `raisin.css.map`, `raisin.min.css`, `raisin.min.css.map`.\n\nWith Yarn: To generate the css files run the command `yarn \u0026\u0026 yarn run build` this will generate the following files; `raisin.css`, `raisin.css.map`, `raisin.min.css`, `raisin.min.css.map`.\n\n## How to use\n\nAdd this to the `\u003chead\u003e` tag:\n\n```html\n\u003clink href=\"https://cdn.jsdelivr.net/gh/tretapey/raisincss@1.1.1/raisin.min.css\" rel=\"stylesheet\"/\u003e\n```\n\nor import it in your css:\n\n```css \n@import \"https://cdn.jsdelivr.net/gh/tretapey/raisincss@1.1.1/raisin.min.css\";\n```\n\nor install it via npm:\n\n```npm install raisincss --save``` \n\nor if you prefer yarn:\n\n```yarn add raisincss```\n\nAlso, you can download the file `raisin.min.css` (or an uncompressed version `raisin.css`) directly from this repo and add it manually.\n\nIf you want to customize for your own use feel free to fork or download this repo, the `.scss` files has everything you need.\n\n## DOCS\n\n### Breakpoints\n\n- `sm`: 576px and up\n- `md`: 768px and up\n- `lg`: 992px and up\n- `xl`: 1200px and up\n\n### Utils\n\n#### Display\n\nWe can set the display property as follows:\n\n- `.display-block`\n- `.display-inline-block`\n- `.display-inline`\n- `.display-table`\n- `.display-table-row`\n- `.display-table-cell`\n- `.display-none`\n\nNote: Flex display in a different section\n\nAlso, we can use the breakpoints prefixes, i.e:\n\n- `.sm:display-none`\n- `.md:display-block`\n- `.lg:display-inline`\n- `.xl:display-table`\n\n#### Float\n\n- `.float-right`\n- `.float-left`\n- `.float-none`\n- `.clearfix`\n\nor:\n\n- `.sm:float-right`\n- `.md:float-left`\n- `.lg:float-none`\n- `.xl:clearfix`\n\n#### Overflow\n\n- `.overflow-auto`\n- `.overflow-hidden`\n- `.overflow-visible`\n- `.overflow-x-auto`\n- `.overflow-x-hidden`\n- `.overflow-x-visible`\n- `.overflow-y-auto`\n- `.overflow-y-hidden`\n- `.overflow-y-visible`\n\nor:\n\n- `.sm:overflow-auto`\n- `.md:overflow-hidden`\n- `.lg:overflow-x-none`\n- `.xl:overflow-y-scroll`\n\n#### Cursor\n\n- `.cursor-default`\n- `.cursor-grab`\n- `.cursor-pointer`\n- `.cursor-move`\n- `.cursor-not-allowed`\n- `.cursor-progress`\n- `.cursor-help`\n- `.cursor-crosshair`\n\n#### Position\n\n- `.static`\n- `.fixed`\n- `.absolute`\n- `.relative`\n- `.sticky`\n\nor:\n\n- `.sm:static`\n- `.md:fixed`\n- `.lg:absolute`\n- `.xl:relative`\n- `.md:sticky`\n\n#### Positioning\n\nWe can set any positioning property from 0 to 50 with any measure we like as follows:\n\n- `.left-{ 0 | 5 | 10 | 15 | ... | 50 }-{ px | vw | rem | em | vh | % }`\n- `.right-{ 0 | 5 | 10 | 15 | ... | 50 }-{ px | vw | rem | em | vh | % }`\n- `.top-{ 0 | 5 | 10 | 15 | ... | 50 }-{ px | vw | rem | em | vh | % }`\n- `.bottom-{ 0 | 5 | 10 | 15 | ... | 50 }-{ px | vw | rem | em | vh | % }`\n\nor:\n\n- `.sm:left-{ 0 | 5 | 10 | 15 | ... | 50 }-{ px | vw | rem | em | vh | % }`\n- `.md:right-{ 0 | 5 | 10 | 15 | ... | 50 }-{ px | vw | rem | em | vh | % }`\n- `.lg:top-{ 0 | 5 | 10 | 15 | ... | 50 }-{ px | vw | rem | em | vh | % }`\n- `.xl:bottom-{ 0 | 5 | 10 | 15 | ... | 50 }-{ px | vw | rem | em | vh | % }`\n\nIf we don't define a measure, then it will use pixels.\n\n#### Visibility\n\n- `.visible`\n- `.hidden`\n\nor:\n\n- `.sm.visible`\n- `.md.hidden`\n\n#### Opacity\n\n- `.opacity-0` -\u003e `opacity: 0`\n- `.opacity-25` -\u003e `opacity: 0.25`\n- `.opacity-50` -\u003e `opacity: 0.5`\n- `.opacity-75` -\u003e `opacity: 0.75`\n- `.opacity-100` -\u003e `opacity: 1`\n\nor:\n\n- `.sm:opacity-0`\n- `.md:opacity-75`\n\n#### Z-index\n\n- `.z-0`\n- `.z-10`\n- `.z-15`\n- `.z-20`\n- `.z-25`\n- `.z-30`\n- `.z-35`\n- `.z-40`\n- `.z-45`\n- `.z-50`\n- `.z-auto`\n\nor:\n\n- `.sm:z-0`\n- `.md:z-10`\n- `.lg:z-25`\n- `.xl:z-auto`\n\n#### Margin\n\n- `.m-0` -\u003e `margin: 0rem`\n- `.m-1` -\u003e `margin: 0.25rem`\n- `.m-2` -\u003e `margin: 0.5rem`\n- `.m-3` -\u003e `margin: 0.75rem`\n- `.m-4` -\u003e `margin: 1rem`\n- `.m-5` -\u003e `margin: 1.25rem`\n- `.m-6` -\u003e `margin: 1.5rem`\n- `.m-7` -\u003e `margin: 1.75rem`\n- `.m-8` -\u003e `margin: 2rem`\n- `.m-9` -\u003e `margin: 2.25rem`\n- `.m-10` -\u003e `margin: 2.5rem`\n- `.m-11` -\u003e `margin: 2.75rem`\n- `.m-12` -\u003e `margin: 3rem`\n\nWe can also use top, right, bottom and left margins:\n\n- `.mt-{0 to 12}` -\u003e `margin-top: {0 to 3}rem`\n- `.mr-{0 to 12}` -\u003e `margin-right: {0 to 3}rem`\n- `.mb-{0 to 12}` -\u003e `margin-bottom: {0 to 3}rem`\n- `.ml-{0 to 12}` -\u003e `margin-left: {0 to 3}rem`\n- `.ml-auto`\n- `.mr-auto`\n\nOr use the x and y margins:\n\n- `.mx-{0 to 12}`\n- `.my-{0 to 12}`\n- `.mx-auto`\n- `.my-auto`\n\nAnd we can use any breakpoint prefix, i.e:\n\n- `.sm:m-4`\n- `.md:mb-12`\n- `.lg:mx-auto`\n- `.xl:mr-0`\n\n#### Padding\n\n- `.p-0` -\u003e `padding: 0rem`\n- `.p-1` -\u003e `padding: 0.25rem`\n- `.p-2` -\u003e `padding: 0.5rem`\n- `.p-3` -\u003e `padding: 0.75rem`\n- `.p-4` -\u003e `padding: 1rem`\n- `.p-5` -\u003e `padding: 1.25rem`\n- `.p-6` -\u003e `padding: 1.5rem`\n- `.p-7` -\u003e `padding: 1.75rem`\n- `.p-8` -\u003e `padding: 2rem`\n- `.p-9` -\u003e `padding: 2.25rem`\n- `.p-10` -\u003e `padding: 2.5rem`\n- `.p-11` -\u003e `padding: 2.75rem`\n- `.p-12` -\u003e `padding: 3rem`\n\nWe can also use top, right, bottom and left paddings:\n\n- `.pt-{0 to 12}` -\u003e `padding-top: {0 to 3}rem`\n- `.pr-{0 to 12}` -\u003e `padding-right: {0 to 3}rem`\n- `.pb-{0 to 12}` -\u003e `padding-bottom: {0 to 3}rem`\n- `.pl-{0 to 12}` -\u003e `padding-left: {0 to 3}rem`\n\nOr use the x and y paddings:\n\n- `.px-{0 to 12}`\n- `.py-{0 to 12}`\n\nAnd we can use any breakpoint prefix, i.e:\n\n- `.sm:p-4`\n- `.md:pb-12`\n- `.lg:px-2`\n- `.xl:pr-0`\n\n#### Width\n\n- `.w-0` -\u003e `width: 0`\n- `.w-1/2` -\u003e `width: 50%`\n- `.w-1/3` -\u003e `width: 33.33333%`\n- `.w-2/3` -\u003e `width: 66.66667%`\n- `.w-1/4` -\u003e `width: 25%`\n- `.w-3/4` -\u003e `width: 75%`\n- `.w-1/5` -\u003e `width: 20%`\n- `.w-2/5` -\u003e `width: 40%`\n- `.w-3/5` -\u003e `width: 60%`\n- `.w-4/5` -\u003e `width: 80%`\n- `.w-1/6` -\u003e `width: 16.66667%`\n- `.w-full` -\u003e `width: 100%`\n- `.w-screen` -\u003e `width: 100vw`\n- `.w-auto` -\u003e `width: auto`\n\nor\n\n- `.sm:w-1/2`\n- `.md:w-3/4`\n- `.lg:w-full`\n- `.xl:w-auto`\n\n#### Height\n\n- `.h-0` -\u003e `height: 0`\n- `.h-1/2` -\u003e `height: 50%`\n- `.h-1/3` -\u003e `height: 33.33333%`\n- `.h-2/3` -\u003e `height: 66.66667%`\n- `.h-1/4` -\u003e `height: 25%`\n- `.h-3/4` -\u003e `height: 75%`\n- `.h-1/5` -\u003e `height: 20%`\n- `.h-2/5` -\u003e `height: 40%`\n- `.h-3/5` -\u003e `height: 60%`\n- `.h-4/5` -\u003e `height: 80%`\n- `.h-1/6` -\u003e `height: 16.66667%`\n- `.h-full` -\u003e `height: 100%`\n- `.h-screen` -\u003e `height: 100vh`\n- `.h-auto` -\u003e `height: auto`\n\nor\n\n- `.sm:h-1/2`\n- `.md:h-3/4`\n- `.lg:h-full`\n- `.xl:h-auto`\n\n#### Font\n\nSetting font-family:\n\n- `.font-sans`\n- `.font-serif`\n- `.font-mono`\n\nSetting font-style:\n\n- `.font-italic`\n- `.font-roman`\n- `.font-antialiased`\n\nSetting font-weight:\n\n- `.font-thin` //200\n- `.font-light` //300\n- `.font-normal` //400\n- `.font-medium` //500\n- `.font-bold` //700\n- `.font-bolder` //800\n\nSetting font-size:\n\n- `.font-xs` //.75rem\n- `.font-sm` //.875rem\n- `.font-base` //1rem\n- `.font-lg` //1.125rem\n- `.font-xl` //1.25rem\n- `.font-2xl` //1.5rem\n- `.font-3xl` //1.875rem\n- `.font-4xl` //2.25rem\n- `.font-5xl` //3rem\n\nWe can use breackpoint prefixes on this classes also (except font-family), i.e:\n\n- `.sm:font-italic`\n- `.md:font-thin`\n- `.lg:font-xs`\n- `.xl:font-bolder`\n\n#### Text\n\n- `.text-center`\n- `.text-left`\n- `.text-right`\n- `.text-justify`\n- `.text-underline`\n- `.text-overline`\n- `.text-line-through`\n- `.text-capitalize`\n- `.text-uppercase`\n- `.text-lowercase`\n\nor\n\n- `sm:text-center`\n- `md:text-underline`\n- `lg:text-uppercase`\n- `xl:text-justify`\n\n#### Background\n\nWe can set background attachment:\n\n- `.bg-fixed` -\u003e `background-attachment: fixed`\n- `.bg-local` -\u003e `background-attachment: local`\n- `.bg-scroll` -\u003e `background-attachment: scroll`\n\nBackground position:\n\n- `.bg-center`\n- `.bg-top`\n- `.bg-right`\n- `.bg-bottom`\n- `.bg-left`\n- `.bg-right-top`\n- `.bg-right-bottom`\n- `.bg-left-top`\n- `.bg-left-bottom`\n\nAnd background repeat:\n\n- `.bg-repeat`\n- `.bg-no-repeat`\n- `.bg-repeat-x`\n- `.bg-repeat-y`\n\nAnd background size:\n\n- `.bg-auto`\n- `.bg-cover`\n- `.bg-contain`\n\nAnd all this classes can be prefixed with a proper breakpoint, i.e:\n\n- `.sm:bg-center`\n- `.md:bg-no-repeat`\n- `.lg:bg-fixed`\n- `.xl:bg-cover`\n\n#### Border\n\nFor border property the options are:\n\n- `.border`\n- `.border-top`\n- `.border-right`\n- `.border-bottom`\n- `.border-left`\n- `.border-solid`\n- `.border-dotted`\n- `.border-dashed`\n- `.border-none`\n\nWe can set breakpoints for this classes also:\n\n- `.sm:border`\n- `.md:border-top`\n- `.lg:border-bottom`\n- `.xl:border-none`\n\nBy default the border width will be of 1px, we can change that till 6px adding:\n\n- `.border-width-{1 to 6}`\n\nAlso, we can change the border radius adding:\n\n- `.border-radius-sm` -\u003e `border-radius: 0.125rem`\n- `.border-radius-md` -\u003e `border-radius: 0.25rem`\n- `.border-radius-lg` -\u003e `border-radius: 0.5rem`\n- `.border-radius-full` -\u003e `border-radius: 50%`\n- `.border-radius-pill` -\u003e `border-radius: 50rem`\n\n#### Shadow\n\nThe box-shadow property is base on the material design elevation pattern, the values are:\n\n- `.shadow-1`\n- `.shadow-2`\n- `.shadow-3`\n- `.shadow-4`\n- `.shadow-5`\n\nWe can use breakpoints as well:\n\n- `.sm:shadow-1`\n- `.md:shadow-2`\n- `.lg:shadow-4`\n- `.xl:shadow-5`\n\n#### List\n\n- `.list-unstyled`\n- `.list-outside` -\u003e `list-style-position: outside`\n- `.list-inside` -\u003e `list-style-position: inside`\n- `.list-disc` -\u003e `list-style-type: disc`\n- `.list-circle` -\u003e `list-style-type: circle`\n- `.list-square` -\u003e `list-style-type: square`\n- `.list-decimal` -\u003e `list-style-type: decimal` (1, 2, 3)\n- `.list-lower-alpha` -\u003e `list-style-type: lower-alpha` (a, b, c)\n- `.list-upper-alpha` -\u003e `list-style-type: upper-alpha` (A, B, C)\n- `.list-lower-roman` -\u003e `list-style-type: lower-roman` (i, ii, iii)\n- `.list-upper-roman` -\u003e `list-style-type: upper-roman` (I, II, III)\n\nWe can use breakpoints:\n\n- `.sm:list-unstyled`\n- `.md:list-outside`\n- `.lg:list-inside`\n- `.xl:list-disc`\n\n#### Ratio\n\nWe can add a padding ratio to any element:\n\n- `.ratio-21by9` -\u003e `::before -\u003e padding-top: 42.857143%`\n- `.ratio-16by9` -\u003e `::before -\u003e padding-top: 56.25%`\n- `.ratio-4by3` -\u003e `::before -\u003e padding-top: 75%`\n- `.ratio-1by1` -\u003e `::before -\u003e padding-top: 100%`\n\n### Container\n\nAny element with the `.container` class will be centered on screen; with each breakpoint the container goes:\n\n- `sm`: 540px max width;\n- `md`: 720px max width;\n- `lg`: 960px max width;\n- `xl`: 1140px max width;\n\nUsing the `.container-fluid` class the element will go 100% width.\n\n### Grid\n\nAdding the class `.grid` to any element will add the `display:grid` property to it.\n\nWe can use grid on each breakpoint adding the prefix:\n\n`sm:grid`\n`md:grid`\n`lg:grid`\n`xl:grid`\n\nBy default we are adding `grid-template-columns:auto` and `grid-template-rows:auto` to a `.grid` element. For setting the columns and rows to the grid we can add:\n\n- `.has-{1 to 12}-columns` or\n- `.has-{1 to 12}-rows`\n\nNote: Each columns or row will be `1fr` sized. i.e:\n\n```html\n\u003cdiv class=\"my-element grid has-12-columns has-4-rows\"\u003e\u003c/div\u003e\n```\n\nWill have this css properties:\n\n```css\n.my-element {\n  display: grid;\n  grid-template-columns: repeat(12, 1fr);\n  grid-template-rows: repeat(4, 1fr);\n}\n```\n\nWe also can add the proper breakpoints:\n\n- `.sm:has-{1 to 12}-columns` or\n- `.sm:has-{1 to 12}-rows` or\n- `.md:has-{1 to 12}-columns` or\n- `.md:has-{1 to 12}-rows` and so.\n\nWe can also use this classes on a `.grid` element:\n\n- `.justify-items-{start | end | center | stretch}`\n- `.align-items-{start | end | center | stretch}`\n- `.justify-content-{start | end | center | stretch | space-around | space-between | space-evenly}`\n- `.align-content-{start | end | center | stretch | space-around | space-between | space-evenly}`\n- `.auto-flow-{row | column}`\n\nAlso, we can add a fixed gap between columns and rows in the grid:\n\n- `.column-gap-{5 | 10 | 15 | 20... | 60}`\n- `.row-gap-{5 | 10 | 15 | 20... | 60}`\n\nIt will add the number indicated in pixels, i.e: `.column-gap-35` will add a `35px` gap between the grid columns.\n\nAny of this classes listed above can be used with a breakpoint prefix, i.e:\n\n- `.sm:justify-items-center`\n- `.md:align-items-center`\n- `.lg:justify-content-center`\n- `.xl:align-content-center`\n- `.md:auto-flow-row`\n\n- `.sm:column-gap-5`\n- `.md:row-gap-20`\n\nAny items inside the grid will be auto positioned, we can use this classes on a grid item to change that`:\n\n- `.column-start-{1 to 12}`\n- `.column-end-{1 to 12}`\n- `.column-span-{1 to 12}`\n\n- `.row-start-{1 to 12}`\n- `.row-end-{1 to 12}`\n- `.row-span-{1 to 12}`\n\nAlso, we can use on any grid item:\n\n- `.justify-self-{start | end | center | stretch}`\n- `.align-self-{start | end | center | stretch}`\n\nAnd we can add any breakpoint prefix, i.e:\n\n- `.sm:justify-self-center`\n- `.md:align-self-end`\n\nHere an example of a layout grid:\n\n```html\n\u003cdiv\n  class=\"container \n    md:grid \n    has-12-columns \n    has-4-rows\n    column-gap-10 \n    lg:column-gap-15 \n    row-gap-10 \n    justify-items-stretch\"\n  style=\"height:80vh\"\n\u003e\n  \u003cdiv\n    class=\"header \n      column-start-1 \n      column-span-12 \n      row-span-1\"\n    style=\"background:red; min-height: 100px\"\n  \u003e\u003c/div\u003e\n  \u003cdiv\n    class=\"main \n      column-start-4 \n      column-end-12 \n      row-span-2\"\n    style=\"background:green; min-height: 100px\"\n  \u003e\u003c/div\u003e\n  \u003cdiv\n    class=\"aside \n      column-start-1 \n      row-start-2\n      column-span-3 \n      row-span-2\"\n    style=\"background:blue; min-height: 100px\"\n  \u003e\u003c/div\u003e\n  \u003cdiv\n    class=\"footer \n      column-start-1 \n      column-end-12 \n      row-start-4\"\n    style=\"background:yellow; min-height: 100px\"\n  \u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Flex\n\nWe can use `.flex` to set 'display:flex' on an element. Also, we can set this property on each breakpoint:\n\n- `.sm:flex`\n- `.md:flex`\n- `.lg:flex`\n- `.xl:flex`\n\nWe an use this other classes on that element:\n\n##### direction\n\n- `.flex-row` -\u003e `flex-direction:row`\n- `.flex-column` -\u003e `flex-direction:column`\n- `.flex-row-reverse` -\u003e `flex-direction:row-reverse`\n- `.flex-column-reverse` -\u003e `flex-direction:column-reverse`\n\n##### wraping\n\n- `.flex-wrap`\n- `.flex-wrap-reverse`\n- `.flex-nowrap`\n\n##### justify\n\n- `.justify-start` -\u003e `justify-content: flex-start`\n- `.justify-end` -\u003e `justify-content: flex-end`\n- `.justify-center` -\u003e `justify-content: center`\n- `.justify-between` -\u003e `justify-content: space-between`\n- `.justify-around` -\u003e `justify-content: space-around`\n- `.justify-evenly` -\u003e `justify-content: space-evenly`\n\n##### items align\n\n- `.items-start` -\u003e `align-items: flex-start`\n- `.items-end` -\u003e `align-items: flex-end`\n- `.items-center` -\u003e `align-items: center`\n- `.items-baseline` -\u003e `align-items: baseline`\n- `.items-stretch` -\u003e `align-items: stretch`\n\n##### content align\n\n- `.content-start` -\u003e `align-content: flex-start`\n- `.content-end` -\u003e `align-content: flex-end`\n- `.content-center` -\u003e `align-content: center`\n- `.content-stretch` -\u003e `align-content: stretch`\n- `.content-between` -\u003e `align-content: space-between`\n- `.content-around` -\u003e `align-content: space-around`\n\nAnd of course we can use any of this classes with a proper breakpoint prefix, i.e:\n\n- `.sm:justify-start`\n- `.md:content-around`\n- `.lg:flex-wrap`\n- `.xl:items-end`\n\nItems inside `.flex` can use:\n\n- `.self-start` -\u003e `align-self: flex-start`\n- `.self-end` -\u003e `align-self: flex-end`\n- `.self-center` -\u003e `align-self: center`\n- `.self-baseline` -\u003e `align-self: baseline`\n- `.self-stretch` -\u003e `align-self: stretch`\n\nAnd we can use breakpoints prefixes also, i.e:\n\n- `.sm:self-start` -\u003e `align-self: flex-start`\n- `.md:self-end` -\u003e `align-self: flex-end`\n- `.lg:self-center` -\u003e `align-self: center`\n- `.xl:self-baseline` -\u003e `align-self: baseline`\n\n\n### Sites using RaisinCSS\n\n- [https://cracss.com/](https://cracss.com/) \n- [https://au-dela.ca/](https://au-dela.ca/) \n- [https://www.vengaglobal.com/](https://www.vengaglobal.com/) \n- [https://workday.vengaglobal.com/](https://workday.vengaglobal.com/) \n- [https://edyahn.com/](https://edyahn.com/) \n- [https://raisin.dev/](https://raisin.dev/) \n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftretapey%2Fraisincss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftretapey%2Fraisincss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftretapey%2Fraisincss/lists"}