Sleeck

Lightweight css framework that makes the first step for you, by some essentials:

• Grid system.
• Simple elements reset.
• Typography.
• Useful classes (flexbox - spacing - display - text).

Installation

• Via npm:

npm install sleeck

then import sleeck.css / sleeck.min.css to the main file of your project.

• Via source:

Just download the sleeck.css / sleeck.min.css from dist folder.

then import sleeck.css / sleeck.min.css to the main file of your project.

Usage

Note:

All classes are available for all screens (xxl - xl - lg - md -sm).

Display:

CSS	Class
display: block	d-block
display: inline	d-inline
display: inline-block	d-inline-block
display: flex	d-flex
display: inline-flex	d-inline-flex
display: grid	d-grid
display: inline-grid	d-inline-grid
display: none	d-none

Flexbox:

CSS	Class
flex-direction: row column...	flex-direction-row
flex-wrap: wrap nowrap...	flex-wrap-wrap
justify-content: center...	justify-content-center
align-items: center...	align-items-center
align-content: center...	align-content-center
align-self: center...	align-self-center
order: 1 2...	order-1

Spacing:

margin and padding values are in rem unit.

the range is 0rem,0.1rem,0.2rem....4.8rem,4.9rem,5rem

CSS	Class
margin: 0	m-0
margin: 0 0.1rem	mx-1
margin: 0.2rem 0	my-2
margin-top: 4.8rem	mt-48
margin-bottom: 4.9rem	mb-49
margin-left: 5rem	ml-50
margin-right: auto	mr-auto
padding: 0	p-0
padding: 0 0.1rem	px-1
padding: 0.2rem 0	py-2
padding-top: 4.8rem	pt-48
padding-bottom: 4.9rem	pb-49
padding-left: 5rem	pl-50
padding-right: auto	pr-auto

Text:

CSS	Class
text-align: center,start...	text-align-center
text-transform: none,uppercase...	text-transform-uppercase
text-wrap: wrap,nowrap	text-wrap-wrap
word-wrap: normal,break-word	word-wrap-break-word

Grid System:

Columns are 12

xs	sm	md	lg	xl	xxl
col-	col-sm-	col-md-	col-lg-	col-xl-	col-xxl-

Example:

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">
    1
    </div>
    <div class="col-12 col-md-6 col-lg-4">
    2
    </div>
    <div class="col-12 col-md-6 col-lg-4">
    3
    </div>
  </div>
</div>