@matej.cupka/css-core

v1.6.0

Published

3 years ago

CSS Core for web projects

Downloads

0High
0Medium
0Low

matejcupka

CSS Core

CSS Core is a CSS framework including some basic classes for web projects.

Most classes that use px values are converted to rem units with 16px as base font size.

Installation

Install using npm

You can install this package with npm by using this command:

npm i @cupka-matej/css-core

After installing package you can import source .scss files or compiled .css files into your webpage.

Install using CDN

You can also install this package by using CDN by adding tag for the module you want to include to your <head> element:

<link rel="stylesheet" href="https://unpkg.com/@matej.cupka/[email protected]/css/__MODULE__.min.css">

Browsing modules

You can browser module files at:

https://unpkg.com/browse/@matej.cupka/[email protected]/css/

List of modules

background

Include classes for background properties.

ba-X - Apply background-attachment of X
bp-X-Y - Apply background-position of X Y
br-X - Apply background-repeat of X
bs-X - Apply background-size of X

border-radius

Include classes for border-radius properties (range: 0 to 64).

br-X - Apply border-radius of Xpx
br-tl-X - Apply border-radius-top-left of Xpx
br-tr-X - Apply border-radius-top-right of Xpx
br-bl-X - Apply border-radius-bottom-left of Xpx
br-br-X - Apply border-radius-right of Xpx

cursor

Include classes for cursor property.

cursor-X - Apply X cursor

dimension

Include classes for element dimensions (range: 0 to 100).

Width classes:

w-X-px - Apply width of Xpx
w-X-rem - Apply width of Xrem
w-X-vw - Apply width of Xvw
w-X-per - Apply width of X%
w-min-X-px - Apply min-width of Xpx
w-min-X-rem - Apply min-width of Xrem
w-min-X-vw - Apply min-width of Xvw
w-min-X-per - Apply min-width of X%
w-max-X-px - Apply max-width of Xpx
w-max-X-rem - Apply max-width of Xrem
w-max-X-vw - Apply max-width of Xvw
w-max-X-per - Apply max-width of X%

Height classes:

h-X-px - Apply height of Xpx
h-X-rem - Apply height of Xrem
h-X-vh - Apply height of Xvh
h-X-per - Apply height of X%
h-min-X-px - Apply min-height of Xpx
h-min-X-rem - Apply min-height of Xrem
h-min-X-vh - Apply min-height of Xvh
h-min-X-per - Apply min-height of X%
h-max-X-px - Apply max-height of Xpx
h-max-X-rem - Apply max-height of Xrem
h-max-X-vh - Apply max-height of Xvh
h-max-X-per - Apply max-height of X%

flex

Include classes for some flex classes.

flex-grow-X - Apply flex-grow of X (range: 0 to 3)
flex-shrink-X - Apply flex-shrink of X (range: 0 to 3)
flex-basis-X - Apply flex-basis of X (values: 0, auto)
flex-align-items-X - Apply align-items of X
flex-justify-content-X - Apply justify-content of X

font

Include classes for font styling.

truncate-text - Apply properties required for truncating text
tt-X - Apply text-transform of X
fw-X - Apply font-weight of X (values: 300, 400, 500, 600, 700)
fs-X - Apply font-size of X (range: 6 to 64)
ta-X - Apply text-align of X
lh-X - Apply line-height of X (range: 6 to 64)
ws-X - Apply white-space of X
wb-X - Apply word-break of X

margin-padding

Include classes for element margin (range: -64 to 64) & padding (range: 0 to 64).

Margin classes:

m-X - Apply margin of Xpx
ml-X - Apply margin-left of Xpx
mr-X - Apply margin-right of Xpx
mt-X - Apply margin-top of Xpx
mb-X - Apply margin-bottom of Xpx
mh-X - Apply margin-top & margin-bottom of Xpx
mv-X - Apply margin-left & margin-right of Xpx

Padding classes:

p-X - Apply padding of Xpx
pl-X - Apply padding-left of Xpx
pr-X - Apply padding-right of Xpx
pt-X - Apply padding-top of Xpx
pb-X - Apply padding-bottom of Xpx
ph-X - Apply padding-top & padding-bottom of Xpx
pv-X - Apply padding-left & padding-right of Xpx

miscellaneous

Includes some miscellaneous classes.

hide - Apply various properties for hiding element
absolute - Apply position of absolute
relative - Apply position of relative
fixed - Apply position of fixed
d-X - Apply display of X
content-box - Apply box-sizing of content-box
border-box - Apply box-sizing of border-box
ol-reset, ul-reset - Apply reset of margin & padding to ol and ul elements respectively

overflow

Include classes for overflow properties.

o-Z - Apply overflow of Z
o-x-Z - Apply overflow-x of Z
o-y-Z - Apply overflow-y of Z

transform

Include classes for transform property.

rotate-X - Apply transform of rotate(Xdeg) (range: 0, 10, 20... 350)
scale-Z - Apply transform of scale(Z) (range: 0 to 2.5 in increments of 0.05)
scale-x-Z - Apply transform of scaleX(Z) (range: 0 to 2.5 in increments of 0.05)
scale-y-Z - Apply transform of scaleY(Z) (range: 0 to 2.5 in increments of 0.05)