An Utility CSS only library. It supports css grid and many more useful css properties.
An Utility CSS only library.
Fork 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.
To generate the css files run the command npm install && npm run build this will generate the following files; raisin.css, raisin.css.map, raisin.min.css, raisin.min.css.map.
To generate the css files run the command yarn && yarn run build this will generate the following files; raisin.css, raisin.css.map, raisin.min.css, raisin.min.css.map.
Add this to the <head> tag:
<link href="https://cdn.jsdelivr.net/gh/tretapey/raisincss@1.1.0/raisin.min.css" rel="stylesheet"/>
or import it in your css:
@import "https://cdn.jsdelivr.net/gh/tretapey/raisincss@1.1.0/raisin.min.css";
or install it via npm:
npm install raisincss --save
or if you prefer yarn:
yarn add raisincss
Also, you can download the file raisin.min.css (or an uncompressed version raisin.css) directly from this repo and add it manually.
If you want to customize for your own use feel free to fork or download this repo, the .scss files has everything you need.
sm: 576px and upmd: 768px and uplg: 992px and upxl: 1200px and upWe can set the display property as follows:
.display-block.display-inline-block.display-inline.display-table.display-table-row.display-table-cell.display-noneNote: Flex display in a different section
Also, we can use the breakpoints prefixes, i.e:
.sm:display-none.md:display-block.lg:display-inline.xl:display-table.float-right.float-left.float-none.clearfixor:
.sm:float-right.md:float-left.lg:float-none.xl:clearfix.overflow-auto.overflow-hidden.overflow-visible.overflow-x-auto.overflow-x-hidden.overflow-x-visible.overflow-y-auto.overflow-y-hidden.overflow-y-visibleor:
.sm:overflow-auto.md:overflow-hidden.lg:overflow-x-none.xl:overflow-y-scroll.cursor-default.cursor-grab.cursor-pointer.cursor-move.cursor-not-allowed.cursor-progress.cursor-help.cursor-crosshair.static.fixed.absolute.relative.stickyor:
.sm:static.md:fixed.lg:absolute.xl:relative.md:stickyWe can set any positioning property from 0 to 50 with any measure we like as follows:
.left-{ 0 | 5 | 10 | 15 | ... | 50 }-{ px | vw | rem | em | vh | % }.right-{ 0 | 5 | 10 | 15 | ... | 50 }-{ px | vw | rem | em | vh | % }.top-{ 0 | 5 | 10 | 15 | ... | 50 }-{ px | vw | rem | em | vh | % }.bottom-{ 0 | 5 | 10 | 15 | ... | 50 }-{ px | vw | rem | em | vh | % }or:
.sm:left-{ 0 | 5 | 10 | 15 | ... | 50 }-{ px | vw | rem | em | vh | % }.md:right-{ 0 | 5 | 10 | 15 | ... | 50 }-{ px | vw | rem | em | vh | % }.lg:top-{ 0 | 5 | 10 | 15 | ... | 50 }-{ px | vw | rem | em | vh | % }.xl:bottom-{ 0 | 5 | 10 | 15 | ... | 50 }-{ px | vw | rem | em | vh | % }If we don't define a measure, then it will use pixels.
.visible.hiddenor:
.sm.visible.md.hidden.opacity-0 -> opacity: 0.opacity-25 -> opacity: 0.25.opacity-50 -> opacity: 0.5.opacity-75 -> opacity: 0.75.opacity-100 -> opacity: 1or:
.sm:opacity-0.md:opacity-75.z-0.z-10.z-15.z-20.z-25.z-30.z-35.z-40.z-45.z-50.z-autoor:
.sm:z-0.md:z-10.lg:z-25.xl:z-auto.m-0 -> margin: 0rem.m-1 -> margin: 0.25rem.m-2 -> margin: 0.5rem.m-3 -> margin: 0.75rem.m-4 -> margin: 1rem.m-5 -> margin: 1.25rem.m-6 -> margin: 1.5rem.m-7 -> margin: 1.75rem.m-8 -> margin: 2rem.m-9 -> margin: 2.25rem.m-10 -> margin: 2.5rem.m-11 -> margin: 2.75rem.m-12 -> margin: 3remWe can also use top, right, bottom and left margins:
.mt-{0 to 12} -> margin-top: {0 to 3}rem.mr-{0 to 12} -> margin-right: {0 to 3}rem.mb-{0 to 12} -> margin-bottom: {0 to 3}rem.ml-{0 to 12} -> margin-left: {0 to 3}rem.ml-auto.mr-autoOr use the x and y margins:
.mx-{0 to 12}.my-{0 to 12}.mx-auto.my-autoAnd we can use any breakpoint prefix, i.e:
.sm:m-4.md:mb-12.lg:mx-auto.xl:mr-0.p-0 -> padding: 0rem.p-1 -> padding: 0.25rem.p-2 -> padding: 0.5rem.p-3 -> padding: 0.75rem.p-4 -> padding: 1rem.p-5 -> padding: 1.25rem.p-6 -> padding: 1.5rem.p-7 -> padding: 1.75rem.p-8 -> padding: 2rem.p-9 -> padding: 2.25rem.p-10 -> padding: 2.5rem.p-11 -> padding: 2.75rem.p-12 -> padding: 3remWe can also use top, right, bottom and left paddings:
.pt-{0 to 12} -> padding-top: {0 to 3}rem.pr-{0 to 12} -> padding-right: {0 to 3}rem.pb-{0 to 12} -> padding-bottom: {0 to 3}rem.pl-{0 to 12} -> padding-left: {0 to 3}remOr use the x and y paddings:
.px-{0 to 12}.py-{0 to 12}And we can use any breakpoint prefix, i.e:
.sm:p-4.md:pb-12.lg:px-2.xl:pr-0.w-0 -> width: 0.w-1/2 -> width: 50%.w-1/3 -> width: 33.33333%.w-2/3 -> width: 66.66667%.w-1/4 -> width: 25%.w-3/4 -> width: 75%.w-1/5 -> width: 20%.w-2/5 -> width: 40%.w-3/5 -> width: 60%.w-4/5 -> width: 80%.w-1/6 -> width: 16.66667%.w-full -> width: 100%.w-screen -> width: 100vw.w-auto -> width: autoor
.sm:w-1/2.md:w-3/4.lg:w-full.xl:w-auto.h-0 -> height: 0.h-1/2 -> height: 50%.h-1/3 -> height: 33.33333%.h-2/3 -> height: 66.66667%.h-1/4 -> height: 25%.h-3/4 -> height: 75%.h-1/5 -> height: 20%.h-2/5 -> height: 40%.h-3/5 -> height: 60%.h-4/5 -> height: 80%.h-1/6 -> height: 16.66667%.h-full -> height: 100%.h-screen -> height: 100vh.h-auto -> height: autoor
.sm:h-1/2.md:h-3/4.lg:h-full.xl:h-autoSetting font-family:
.font-sans.font-serif.font-monoSetting font-style:
.font-italic.font-roman.font-antialiasedSetting font-weight:
.font-thin //200.font-light //300.font-normal //400.font-medium //500.font-bold //700.font-bolder //800Setting font-size:
.font-xs //.75rem.font-sm //.875rem.font-base //1rem.font-lg //1.125rem.font-xl //1.25rem.font-2xl //1.5rem.font-3xl //1.875rem.font-4xl //2.25rem.font-5xl //3remWe can use breackpoint prefixes on this classes also (except font-family), i.e:
.sm:font-italic.md:font-thin.lg:font-xs.xl:font-bolder.text-center.text-left.text-right.text-justify.text-underline.text-overline.text-line-through.text-capitalize.text-uppercase.text-lowercaseor
sm:text-centermd:text-underlinelg:text-uppercasexl:text-justifyWe can set background attachment:
.bg-fixed -> background-attachment: fixed.bg-local -> background-attachment: local.bg-scroll -> background-attachment: scrollBackground position:
.bg-center.bg-top.bg-right.bg-bottom.bg-left.bg-right-top.bg-right-bottom.bg-left-top.bg-left-bottomAnd background repeat:
.bg-repeat.bg-no-repeat.bg-repeat-x.bg-repeat-yAnd background size:
.bg-auto.bg-cover.bg-containAnd all this classes can be prefixed with a proper breakpoint, i.e:
.sm:bg-center.md:bg-no-repeat.lg:bg-fixed.xl:bg-coverFor border property the options are:
.border.border-top.border-right.border-bottom.border-left.border-solid.border-dotted.border-dashed.border-noneWe can set breakpoints for this classes also:
.sm:border.md:border-top.lg:border-bottom.xl:border-noneBy default the border width will be of 1px, we can change that till 6px adding:
.border-width-{1 to 6}Also, we can change the border radius adding:
.border-radius-sm -> border-radius: 0.125rem.border-radius-md -> border-radius: 0.25rem.border-radius-lg -> border-radius: 0.5rem.border-radius-full -> border-radius: 50%.border-radius-pill -> border-radius: 50remThe box-shadow property is base on the material design elevation pattern, the values are:
.shadow-1.shadow-2.shadow-3.shadow-4.shadow-5We can use breakpoints as well:
.sm:shadow-1.md:shadow-2.lg:shadow-4.xl:shadow-5.list-unstyled.list-outside -> list-style-position: outside.list-inside -> list-style-position: inside.list-disc -> list-style-type: disc.list-circle -> list-style-type: circle.list-square -> list-style-type: square.list-decimal -> list-style-type: decimal (1, 2, 3).list-lower-alpha -> list-style-type: lower-alpha (a, b, c).list-upper-alpha -> list-style-type: upper-alpha (A, B, C).list-lower-roman -> list-style-type: lower-roman (i, ii, iii).list-upper-roman -> list-style-type: upper-roman (I, II, III)We can use breakpoints:
.sm:list-unstyled.md:list-outside.lg:list-inside.xl:list-discWe can add a padding ratio to any element:
.ratio-21by9 -> ::before -> padding-top: 42.857143%.ratio-16by9 -> ::before -> padding-top: 56.25%.ratio-4by3 -> ::before -> padding-top: 75%.ratio-1by1 -> ::before -> padding-top: 100%Any element with the .container class will be centered on screen; with each breakpoint the container goes:
sm: 540px max width;md: 720px max width;lg: 960px max width;xl: 1140px max width;Using the .container-fluid class the element will go 100% width.
Adding the class .grid to any element will add the display:grid property to it.
We can use grid on each breakpoint adding the prefix:
sm:grid
md:grid
lg:grid
xl:grid
By 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:
.has-{1 to 12}-columns or.has-{1 to 12}-rowsNote: Each columns or row will be 1fr sized. i.e:
<div class="my-element grid has-12-columns has-4-rows"></div>
Will have this css properties:
.my-element {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(4, 1fr);
}
We also can add the proper breakpoints:
.sm:has-{1 to 12}-columns or.sm:has-{1 to 12}-rows or.md:has-{1 to 12}-columns or.md:has-{1 to 12}-rows and so.We can also use this classes on a .grid element:
.justify-items-{start | end | center | stretch}.align-items-{start | end | center | stretch}.justify-content-{start | end | center | stretch | space-around | space-between | space-evenly}.align-content-{start | end | center | stretch | space-around | space-between | space-evenly}.auto-flow-{row | column}Also, we can add a fixed gap between columns and rows in the grid:
.column-gap-{5 | 10 | 15 | 20... | 60}.row-gap-{5 | 10 | 15 | 20... | 60}It will add the number indicated in pixels, i.e: .column-gap-35 will add a 35px gap between the grid columns.
Any of this classes listed above can be used with a breakpoint prefix, i.e:
.sm:justify-items-center
.md:align-items-center
.lg:justify-content-center
.xl:align-content-center
.md:auto-flow-row
.sm:column-gap-5
.md:row-gap-20
Any items inside the grid will be auto positioned, we can use this classes on a grid item to change that`:
.column-start-{1 to 12}
.column-end-{1 to 12}
.column-span-{1 to 12}
.row-start-{1 to 12}
.row-end-{1 to 12}
.row-span-{1 to 12}
Also, we can use on any grid item:
.justify-self-{start | end | center | stretch}.align-self-{start | end | center | stretch}And we can add any breakpoint prefix, i.e:
.sm:justify-self-center.md:align-self-endHere an example of a layout grid:
<div
class="container
md:grid
has-12-columns
has-4-rows
column-gap-10
lg:column-gap-15
row-gap-10
justify-items-stretch"
style="height:80vh"
>
<div
class="header
column-start-1
column-span-12
row-span-1"
style="background:red; min-height: 100px"
></div>
<div
class="main
column-start-4
column-end-12
row-span-2"
style="background:green; min-height: 100px"
></div>
<div
class="aside
column-start-1
row-start-2
column-span-3
row-span-2"
style="background:blue; min-height: 100px"
></div>
<div
class="footer
column-start-1
column-end-12
row-start-4"
style="background:yellow; min-height: 100px"
></div>
</div>
We can use .flex to set 'display:flex' on an element. Also, we can set this property on each breakpoint:
.sm:flex.md:flex.lg:flex.xl:flexWe an use this other classes on that element:
.flex-row -> flex-direction:row.flex-column -> flex-direction:column.flex-row-reverse -> flex-direction:row-reverse.flex-column-reverse -> flex-direction:column-reverse.flex-wrap.flex-wrap-reverse.flex-nowrap.justify-start -> justify-content: flex-start.justify-end -> justify-content: flex-end.justify-center -> justify-content: center.justify-between -> justify-content: space-between.justify-around -> justify-content: space-around.justify-evenly -> justify-content: space-evenly.items-start -> align-items: flex-start.items-end -> align-items: flex-end.items-center -> align-items: center.items-baseline -> align-items: baseline.items-stretch -> align-items: stretch.content-start -> align-content: flex-start.content-end -> align-content: flex-end.content-center -> align-content: center.content-stretch -> align-content: stretch.content-between -> align-content: space-between.content-around -> align-content: space-aroundAnd of course we can use any of this classes with a proper breakpoint prefix, i.e:
.sm:justify-start.md:content-around.lg:flex-wrap.xl:items-endItems inside .flex can use:
.self-start -> align-self: flex-start.self-end -> align-self: flex-end.self-center -> align-self: center.self-baseline -> align-self: baseline.self-stretch -> align-self: stretchAnd we can use breakpoints prefixes also, i.e:
.sm:self-start -> align-self: flex-start.md:self-end -> align-self: flex-end.lg:self-center -> align-self: center.xl:self-baseline -> align-self: baselineFAQs
An Utility CSS only library. It supports css grid and many more useful css properties.
We found that raisincss demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PEP 770 proposes adding SBOM support to Python packages to improve transparency and catch hidden non-Python dependencies that security tools often miss.
Security News
Socket CEO Feross Aboukhadijeh discusses open source security challenges, including zero-day attacks and supply chain risks, on the Cyber Security Council podcast.
Security News
Research
Socket researchers uncover how threat actors weaponize Out-of-Band Application Security Testing (OAST) techniques across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.