stylight-css v1.0.0

stylight

A mini utility scss library based on bootstrap from @censodev with love

Theme

Base theme color

Can be customized in _theme.scss

"white":        #ffffff,
"black":        #000000,
"transparent":  transparent,
"dark":         #343a40,
"primary":      #3f51b5,
"secondary":    #6c757d,
"link":         #000000, 
"faded":        rgba(0, 0, 0, 0.54),
"accent":       #ff4081,

Utilities

Background

Background color

.bg-#{$theme}

<div class="bg-primary">...</div>
<div class="bg-transparent">...</div>

Border

Aspect

top, bottom, left, right

Border

.border-#{$aspect}
.border-#{$aspect}-0

Border radius

.rounded-#{$aspect}
.rounded-#{$aspect}-0

Border color

.border-#{$theme}

<div class="border">...</div>
<div class="border-top">...</div>

Display

.d-none  		{  display:  none  !important;  }
.d-inline  		{  display:  inline  !important;  }
.d-inline-block		{  display:  inline-block  !important;  }
.d-block  		{  display:  block  !important;  }
.d-table  		{  display:  table  !important;  }
.d-table-row		{  display:  table-row  !important;  }
.d-table-cell		{  display:  table-cell  !important;  }
.d-flex  		{  display:  flex  !important;  }
.d-inline-flex		{  display:  inline-flex  !important;  }

Flex

Direction

.flex-row  		{  flex-direction:  row  !important;  }
.flex-column  		{  flex-direction:  column  !important;  }
.flex-row-reverse  	{  flex-direction:  row-reverse  !important;  }
.flex-column-reverse	{  flex-direction:  column-reverse  !important;  }

Wrap

.flex-wrap  		{  flex-wrap:  wrap  !important;  }
.flex-nowrap  		{  flex-wrap:  nowrap  !important;  }
.flex-wrap-reverse  	{  flex-wrap:  wrap-reverse  !important;  }

Justify content

.justify-content-start  	{  justify-content:  flex-start  !important;  }
.justify-content-end  		{  justify-content:  flex-end  !important;  }
.justify-content-center  	{  justify-content:  center  !important;  }
.justify-content-between  	{  justify-content:  space-between  !important;  }
.justify-content-around  	{  justify-content:  space-around  !important;  }

Align items

.align-items-start  	{  align-items:  flex-start  !important;  }
.align-items-end	{  align-items:  flex-end  !important;  }
.align-items-center  	{  align-items:  center  !important;  }
.align-items-baseline  	{  align-items:  baseline  !important;  }
.align-items-stretch  	{  align-items:  stretch  !important;  }

Align content

.align-content-start  	{  align-content:  flex-start  !important;  }
.align-content-end  	{  align-content:  flex-end  !important;  }
.align-content-center  	{  align-content:  center  !important;  }
.align-content-between  {  align-content:  space-between  !important;  }
.align-content-around  	{  align-content:  space-around  !important;  }
.align-content-stretch  {  align-content:  stretch  !important;  }

Align self

.align-self-auto	{  align-self:  auto  !important;  }
.align-self-start	{  align-self:  flex-start  !important;  }
.align-self-end		{  align-self:  flex-end  !important;  }
.align-self-center  	{  align-self:  center  !important;  }
.align-self-baseline  	{  align-self:  baseline  !important;  }
.align-self-stretch  	{  align-self:  stretch  !important;  }

Grow and shrink

.flex-grow-0  	{  flex-grow:  	0;  }
.flex-grow-1  	{  flex-grow:  	1;  }
.flex-shrink-0  {  flex-shrink:	0;  }
.flex-shrink-1  {  flex-shrink:	1;  }

Magic margin

prefix: m ~ margin postfix: null, x, y, t, b, l, r ~ all aspects, left-right, top-bottom, top, bottom, left, right

<div class="d-flex">
	<div class="ml-auto">margin-left: auto</div>
</div>

Position

Position

static, relative, absolute, fixed, stickey

Common

.position-#{$position}

<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>

Fixed top/bottom

Position an element at the top/bottom of the viewport, from edge to edge

<div class="fixed-top">...</div>
<div class="fixed-bottom">...</div>

Sticky top Position an element at the top of the viewport, from edge to edge, but only after scrolling past it

<div class="sticky-top">...</div>

Sizing

Size in 5%, 100% with step 5%

.w-#{$size}
.h-#{$size}

Max size

.mw-#{$size}
.mh-#{$size}

<div class="w-10">width 10%</div>
<div class="h-10">height 10%</div>

<div class="mw-10">max width 10%</div>
<div class="mh-10">max height 10%</div>

Spacing

prefix: m, p ~ margin, padding postfix: null, x, y, t, b, l, r ~ all aspects, left-right, top-bottom, top, bottom, left, right

0: 0,
1: 0.25 rem,
2: 0.5 rem,
3: 1 rem,
4: 1.5 rem,
5: 3 rem

<div class="m-3">margin: 1rem 1rem</div>
<div class="ml-5">margin-left: 3rem</div>
<div class="py-5">padding-top: 3rem; padding-bottom: 3rem</div>

Text

Font size

0: 0,
1: 0.5 rem,
2: 0.75 rem,
3: 1 rem,
4: 1.25 rem,
5: 1.5 rem

<span class="font-size-4">font-size: 1.25rem</span>

Alignment

.text-justify  	{  text-align:  justify  !important;  }
.text-left  	{  text-align:  left  !important;  }
.text-right  	{  text-align:  right  !important;  }
.text-center  	{  text-align:  center  !important;  }

Wrap, Truncate, Break

.text-wrap  	{  white-space:	  normal  !important;  }
.text-nowrap  	{  white-space:	  nowrap  !important;  }
.text-truncate  {  overflow:	  hidden;
		   text-overflow: ellipsis;
		   white-space:	  nowrap;  }
.text-break  	{  word-wrap:  break-word  !important;  }

Transformation

.text-lowercase		{  text-transform:  lowercase  !important;  }
.text-uppercase		{  text-transform:  uppercase  !important;  }
.text-capitalize	{  text-transform:  capitalize  !important;  }

Weight and Italic

.font-weight-light  	{  font-weight: 300 !important;  }
.font-weight-normal  	{  font-weight: 400 !important;  }
.font-weight-bold  	{  font-weight: 700 !important;  }
.font-italic  		{  font-style:  italic  !important;  }

Remove underline on a link

<a href="#" class="text-decoration-none">link</a>

Text color

.text-#{$theme}

<span class="text-primary">...</span>
<span class="text-secondary">...</span>

Media

Magic image

.object-fit-cover  { object-fit:  cover; }

Scroll

Hide scroll

.scroll-hidden  {
	-ms-overflow-style:  none;  /* IE and Edge */
	scrollbar-width:  none;  /* Firefox */

/* Hide scrollbar for Chrome, Safari and Opera */
&::-webkit-scrollbar  {
	display:  none;
}

}