An Utility CSS only library. It supports css grid and many more useful css properties.

  • By Pedro Sonzini Astudillo
  • Last update: Dec 11, 2022
  • Comments: 4

RaisinCSS

An Utility CSS only library.

  • Supports CSS Grid (Check grid section)
  • Supports Flexbox
  • Totally open to customization
  • Skeleton and utility based tool
  • Lightweight and easy to use

Table of contents

How to contribute

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.

How to use

Add this to the <head> tag:

<link href="https://cdn.jsdelivr.net/gh/tretapey/rai[email protected]/raisin.min.css" rel="stylesheet"/>

or import it in your css:

@import "https://cdn.jsdelivr.net/gh/tretapey/[email protected]/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.

DOCS

Breakpoints

  • sm: 576px and up
  • md: 768px and up
  • lg: 992px and up
  • xl: 1200px and up

Utils

Display

We can set the display property as follows:

  • .display-block
  • .display-inline-block
  • .display-inline
  • .display-table
  • .display-table-row
  • .display-table-cell
  • .display-none

Note: 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

  • .float-right
  • .float-left
  • .float-none
  • .clearfix

or:

  • .sm:float-right
  • .md:float-left
  • .lg:float-none
  • .xl:clearfix

Overflow

  • .overflow-auto
  • .overflow-hidden
  • .overflow-visible
  • .overflow-x-auto
  • .overflow-x-hidden
  • .overflow-x-visible
  • .overflow-y-auto
  • .overflow-y-hidden
  • .overflow-y-visible

or:

  • .sm:overflow-auto
  • .md:overflow-hidden
  • .lg:overflow-x-none
  • .xl:overflow-y-scroll

Cursor

  • .cursor-default
  • .cursor-grab
  • .cursor-pointer
  • .cursor-move
  • .cursor-not-allowed
  • .cursor-progress
  • .cursor-help
  • .cursor-crosshair

Position

  • .static
  • .fixed
  • .absolute
  • .relative
  • .sticky

or:

  • .sm:static
  • .md:fixed
  • .lg:absolute
  • .xl:relative
  • .md:sticky

Positioning

We 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.

Visibility

  • .visible
  • .hidden

or:

  • .sm.visible
  • .md.hidden

Opacity

  • .opacity-0 -> opacity: 0
  • .opacity-25 -> opacity: 0.25
  • .opacity-50 -> opacity: 0.5
  • .opacity-75 -> opacity: 0.75
  • .opacity-100 -> opacity: 1

or:

  • .sm:opacity-0
  • .md:opacity-75

Z-index

  • .z-0
  • .z-10
  • .z-15
  • .z-20
  • .z-25
  • .z-30
  • .z-35
  • .z-40
  • .z-45
  • .z-50
  • .z-auto

or:

  • .sm:z-0
  • .md:z-10
  • .lg:z-25
  • .xl:z-auto

Margin

  • .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: 3rem

We 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-auto

Or use the x and y margins:

  • .mx-{0 to 12}
  • .my-{0 to 12}
  • .mx-auto
  • .my-auto

And we can use any breakpoint prefix, i.e:

  • .sm:m-4
  • .md:mb-12
  • .lg:mx-auto
  • .xl:mr-0

Padding

  • .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: 3rem

We 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}rem

Or 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

Width

  • .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: auto

or

  • .sm:w-1/2
  • .md:w-3/4
  • .lg:w-full
  • .xl:w-auto

Height

  • .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: auto

or

  • .sm:h-1/2
  • .md:h-3/4
  • .lg:h-full
  • .xl:h-auto

Font

Setting font-family:

  • .font-sans
  • .font-serif
  • .font-mono

Setting font-style:

  • .font-italic
  • .font-roman
  • .font-antialiased

Setting font-weight:

  • .font-thin //200
  • .font-light //300
  • .font-normal //400
  • .font-medium //500
  • .font-bold //700
  • .font-bolder //800

Setting 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 //3rem

We 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

  • .text-center
  • .text-left
  • .text-right
  • .text-justify
  • .text-underline
  • .text-overline
  • .text-line-through
  • .text-capitalize
  • .text-uppercase
  • .text-lowercase

or

  • sm:text-center
  • md:text-underline
  • lg:text-uppercase
  • xl:text-justify

Background

We can set background attachment:

  • .bg-fixed -> background-attachment: fixed
  • .bg-local -> background-attachment: local
  • .bg-scroll -> background-attachment: scroll

Background position:

  • .bg-center
  • .bg-top
  • .bg-right
  • .bg-bottom
  • .bg-left
  • .bg-right-top
  • .bg-right-bottom
  • .bg-left-top
  • .bg-left-bottom

And background repeat:

  • .bg-repeat
  • .bg-no-repeat
  • .bg-repeat-x
  • .bg-repeat-y

And background size:

  • .bg-auto
  • .bg-cover
  • .bg-contain

And all this classes can be prefixed with a proper breakpoint, i.e:

  • .sm:bg-center
  • .md:bg-no-repeat
  • .lg:bg-fixed
  • .xl:bg-cover

Border

For border property the options are:

  • .border
  • .border-top
  • .border-right
  • .border-bottom
  • .border-left
  • .border-solid
  • .border-dotted
  • .border-dashed
  • .border-none

We can set breakpoints for this classes also:

  • .sm:border
  • .md:border-top
  • .lg:border-bottom
  • .xl:border-none

By 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: 50rem

Shadow

The box-shadow property is base on the material design elevation pattern, the values are:

  • .shadow-1
  • .shadow-2
  • .shadow-3
  • .shadow-4
  • .shadow-5

We can use breakpoints as well:

  • .sm:shadow-1
  • .md:shadow-2
  • .lg:shadow-4
  • .xl:shadow-5

List

  • .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-disc

Ratio

We 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%

Container

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.

Grid

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}-rows

Note: 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-end

Here 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>

Flex

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:flex

We an use this other classes on that element:

direction
  • .flex-row -> flex-direction:row
  • .flex-column -> flex-direction:column
  • .flex-row-reverse -> flex-direction:row-reverse
  • .flex-column-reverse -> flex-direction:column-reverse
wraping
  • .flex-wrap
  • .flex-wrap-reverse
  • .flex-nowrap
justify
  • .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 align
  • .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 align
  • .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-around

And 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-end

Items 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: stretch

And 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: baseline

Sites using RaisinCSS

Github

https://github.com/tretapey/raisincss

Comments(4)

  • 1

    Bump glob-parent from 5.1.0 to 5.1.2

    Bumps glob-parent from 5.1.0 to 5.1.2.

    Release notes

    Sourced from glob-parent's releases.

    v5.1.2

    Bug Fixes

    v5.1.1

    Bug Fixes

    Changelog

    Sourced from glob-parent's changelog.

    5.1.2 (2021-03-06)

    Bug Fixes

    6.0.0 (2021-05-03)

    ⚠ BREAKING CHANGES

    • Correct mishandled escaped path separators (#34)
    • upgrade scaffold, dropping node <10 support

    Bug Fixes

    • Correct mishandled escaped path separators (#34) (32f6d52), closes #32

    Miscellaneous Chores

    • upgrade scaffold, dropping node <10 support (e83d0c5)

    5.1.1 (2021-01-27)

    Bug Fixes

    Commits
    • eb2c439 chore: update changelog
    • 12bcb6c chore: release 5.1.2
    • f923116 fix: eliminate ReDoS (#36)
    • 0b014a7 chore: add JSDoc returns information (#33)
    • 2b24ebd chore: generate initial changelog
    • 9b6e874 chore: release 5.1.1
    • 749c35e ci: try wrapping the JOB_ID in a string
    • 5d39def ci: attempt to switch to published coveralls
    • 0b5b37f ci: put the npm step back in for only Windows
    • 473f5d8 ci: update azure build images
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 2

    Positioning (left, top, right, bottom)

    Positioning

    We 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.

  • 3

    Mismatch between grid and flex for align-items

    Flex uses items-center [1] [2] while Grid uses align-items-center [3]. I think both should use align-items- as prefix, because just items- doesn't make it clear whether it's align-items or justify-items.

    We stumbled upon this while using align-items-center and changing it to align-items-baseline, because align-items-baseline doesn't exist in the Grid version, just as items-baseline from Flex.

    Additionally, the Grid version should probably use a variable map instead of hardcoding start, end, center, stretch like Flex does.

  • 4

    Any code improvement is welcome

    This library is using SCSS. I don't consider my self an expert in SASS/SCSS so there are plenty sections where the code can be improved with functions, mixins, etc.

    Any suggestion will be welcomed to make the code more readable and performant.

Popular Tag

Related