1.0.0 • Published 1 year ago
semanticss v1.0.0
Semanticss v1.0.0.22(tm)
Lightweight CSS3 framework mainly focused on typography responsiveness, and aesthetic looks as well as full customizing flexibility.
Preset utilitie and component classes
Utilities | Description |
---|---|
fs--200 | roughly 13.5 px font-size can grow or shrink accordingly to device |
fs--100 | roughly 15.5 px font-size can grow or shrink accordingly to device |
fs-base | roughly 20 px font-size can grow or shrink accordingly to device |
fs-100 | roughly 24.2 px font-size can grow or shrink accordingly to device |
fs-200 | roughly 27.5 px font-size can grow or shrink accordingly to device |
fs-300 | roughly 31.5 px font-size can grow or shrink accordingly to device |
fs-400 | roughly 50.5 px font-size can grow or shrink accordingly to device |
fs-500 | roughly 70 px font-size can grow or shrink accordingly to device |
--------- | ----------- |
m--200 or m--2 | roughly 13.5 px margin can grow or shrink accordingly to device |
m--100 or m--1 | roughly 15.5 px margin can grow or shrink accordingly to device |
m-base | roughly 20 px margin can grow or shrink accordingly to device |
m-100 or m-1 | roughly 24.2 px margin can grow or shrink accordingly to device |
m-200 or m-2 | roughly 27.5 px margin can grow or shrink accordingly to device |
m-300 or m-3 | roughly 31.5 px margin can grow or shrink accordingly to device |
m-400 or m-4 | roughly 50.5 px margin can grow or shrink accordingly to device |
m-500 or m-5 | roughly 70 px margin can grow or shrink accordingly to device |
m-600 or m-6 | roughly 82 px margin can grow or shrink accordingly to device |
m-700 or m-7 | roughly 90 px margin can grow or shrink accordingly to device |
--------- | ------------ |
mtop-base | roughly 20 px margin-top can grow or shrink accordingly to device |
mtop-100 or mt-1 | roughly 24.2 px margin-top can grow or shrink accordingly to device |
mtop-200 or mt-2 | roughly 27.5 px margin-top can grow or shrink accordingly to device |
mtop-300 or mt-3 | roughly 31.5 px margin-top can grow or shrink accordingly to device |
mtop-400 or mt-4 | roughly 50.5 px margin-top can grow or shrink accordingly to device |
mtop-500 or mt-5 | roughly 70 px margin-top can grow or shrink accordingly to device |
mtop-600 or mt-6 | roughly 82 px margin-top can grow or shrink accordingly to device |
mtop-700 or mt-7 | roughly 90 px margin-top can grow or shrink accordingly to device |
--------- | ------------ |
mbottom-base | roughly 20 px margin-bottom can grow or shrink accordingly to device |
mbottom-100 or mb-1 | roughly 24.2 px margin-bottom can grow or shrink accordingly to device |
mbottom-200 or mb-2 | roughly 27.5 px margin-bottom can grow or shrink accordingly to device |
mbottom-300 or mb-3 | roughly 31.5 px margin-bottom can grow or shrink accordingly to device |
mbottom-400 or mb-4 | roughly 50.5 px margin-bottom can grow or shrink accordingly to device |
mbottom-500 or mb-5 | roughly 70 px margin-bottom can grow or shrink accordingly to device |
mbottom-600 or mb-6 | roughly 82 px margin-bottom can grow or shrink accordingly to device |
mbottom-700 or mb-7 | roughly 90 px margin-bottom can grow or shrink accordingly to device |
--------- | ------------ |
mleft-base | roughly 20 px margin-left can grow or shrink accordingly to device |
mleft-100 or ml-1 | roughly 24.2 px margin-left can grow or shrink accordingly to device |
mleft-200 or ml-2 | roughly 27.5 px margin-left can grow or shrink accordingly to device |
mleft-300 or ml-3 | roughly 31.5 px margin-left can grow or shrink accordingly to device |
mleft-400 or ml-4 | roughly 50.5 px margin-left can grow or shrink accordingly to device |
mleft-500 or ml-5 | roughly 70 px margin-left can grow or shrink accordingly to device |
mleft-600 or ml-6 | roughly 82 px margin-left can grow or shrink accordingly to device |
mleft-700 or ml-7 | roughly 90 px margin-left can grow or shrink accordingly to device |
--------- | ------------ |
mright-base | roughly 20 px margin-right can grow or shrink accordingly to device |
mright-100 or mr-1 | roughly 24.2 px margin-right can grow or shrink accordingly to device |
mright-200 or mr-2 | roughly 27.5 px margin-right can grow or shrink accordingly to device |
mright-300 or mr-3 | roughly 31.5 px margin-right can grow or shrink accordingly to device |
mright-400 or mr-4 | roughly 50.5 px margin-right can grow or shrink accordingly to device |
mright-500 or mr-5 | roughly 70 px margin-right can grow or shrink accordingly to device |
mright-600 or mr-6 | roughly 82 px margin-right can grow or shrink accordingly to device |
mright-700 or mr-7 | roughly 90 px margin-right can grow or shrink accordingly to device |
--------- | ------------ |
minline-base | roughly 20 px margin-inline can grow or shrink accordingly to device |
minline-100 or mi-1 | roughly 24.2 px margin-inline can grow or shrink accordingly to device |
minline-200 or mi-2 | roughly 27.5 px margin-inline can grow or shrink accordingly to device |
minline-300 or mi-3 | roughly 31.5 px margin-inline can grow or shrink accordingly to device |
minline-400 or mi-4 | roughly 50.5 px margin-inline can grow or shrink accordingly to device |
minline-500 or mi-5 | roughly 70 px margin-inline can grow or shrink accordingly to device |
minline-600 or mi-6 | roughly 82 px margin-inline can grow or shrink accordingly to device |
minline-700 or mi-7 | roughly 90 px margin-inline can grow or shrink accordingly to device |
--------- | ------------ |
mblock-base | roughly 20 px margin-block can grow or shrink accordingly to device |
mblock-100 or mbl-1 | roughly 24.2 px margin-block can grow or shrink accordingly to device |
mblock-200 or mbl-2 | roughly 27.5 px margin-block can grow or shrink accordingly to device |
mblock-300 or mbl-3 | roughly 31.5 px margin-block can grow or shrink accordingly to device |
mblock-400 or mbl-4 | roughly 50.5 px margin-block can grow or shrink accordingly to device |
mblock-500 or mbl-5 | roughly 70 px margin-block can grow or shrink accordingly to device |
mblock-600 or mbl-6 | roughly 82 px margin-block can grow or shrink accordingly to device |
mblock-700 or mbl-7 | roughly 90 px margin-block can grow or shrink accordingly to device |
--------- | ----------- |
p--200 or p--2 | roughly 13.5 px padding can grow or shrink accordingly to device |
p--100 or p--1 | roughly 15.5 px padding can grow or shrink accordingly to device |
p-base | roughly 20 px padding can grow or shrink accordingly to device |
p-100 or p-1 | roughly 24.2 px padding can grow or shrink accordingly to device |
p-200 or p-2 | roughly 27.5 px padding can grow or shrink accordingly to device |
p-300 or p-3 | roughly 31.5 px padding can grow or shrink accordingly to device |
p-400 or p-4 | roughly 50.5 px padding can grow or shrink accordingly to device |
p-500 or p-5 | roughly 70 px padding can grow or shrink accordingly to device |
p-600 or p-6 | roughly 82 px padding can grow or shrink accordingly to device |
p-700 or p-7 | roughly 70 px padding can grow or shrink accordingly to device |
--------- | ------------ |
ptop-base | roughly 20 px padding-top can grow or shrink accordingly to device |
ptop-100 or pt-1 | roughly 24.2 px padding-top can grow or shrink accordingly to device |
ptop-200 or pt-2 | roughly 27.5 px padding-top can grow or shrink accordingly to device |
ptop-300 or pt-3 | roughly 31.5 px padding-top can grow or shrink accordingly to device |
ptop-400 or pt-4 | roughly 50.5 px padding-top can grow or shrink accordingly to device |
ptop-500 or pt-5 | roughly 70 px padding-top can grow or shrink accordingly to device |
ptop-600 or pt-6 | roughly 82 px padding-top can grow or shrink accordingly to device |
ptop-700 or pt-7 | roughly 70 px padding-top can grow or shrink accordingly to device |
--------- | ------------ |
pbottom-base | roughly 20 px padding-bottom can grow or shrink accordingly to device |
pbottom-100 or pb-1 | roughly 24.2 px padding-bottom can grow or shrink accordingly to device |
pbottom-200 or pb-2 | roughly 27.5 px padding-bottom can grow or shrink accordingly to device |
pbottom-300 or pb-3 | roughly 31.5 px padding-bottom can grow or shrink accordingly to device |
pbottom-400 or pb-4 | roughly 50.5 px padding-bottom can grow or shrink accordingly to device |
pbottom-500 or pb-5 | roughly 70 px padding-bottom can grow or shrink accordingly to device |
pbottom-600 or pb-6 | roughly 82 px padding-bottom can grow or shrink accordingly to device |
pbottom-700 or pb-7 | roughly 70 px padding-bottom can grow or shrink accordingly to device |
--------- | ------------ |
pleft-base | roughly 20 px padding-left can grow or shrink accordingly to device |
pleft-100 or pl-1 | roughly 24.2 px padding-left can grow or shrink accordingly to device |
pleft-200 or pl-2 | roughly 27.5 px padding-left can grow or shrink accordingly to device |
pleft-300 or pl-3 | roughly 31.5 px padding-left can grow or shrink accordingly to device |
pleft-400 or pl-4 | roughly 50.5 px padding-left can grow or shrink accordingly to device |
pleft-500 or pl-5 | roughly 70 px padding-left can grow or shrink accordingly to device |
pleft-600 or pl-6 | roughly 82 px padding-left can grow or shrink accordingly to device |
pleft-700 or pl-7 | roughly 70 px padding-left can grow or shrink accordingly to device |
--------- | ------------ |
pright-base | roughly 20 px padding-right can grow or shrink accordingly to device |
pright-100 or pr-1 | roughly 24.2 px padding-right can grow or shrink accordingly to device |
pright-200 or pr-2 | roughly 27.5 px padding-right can grow or shrink accordingly to device |
pright-300 or pr-3 | roughly 31.5 px padding-right can grow or shrink accordingly to device |
pright-400 or pr-4 | roughly 50.5 px padding-right can grow or shrink accordingly to device |
pright-500 or pr-5 | roughly 70 px padding-right can grow or shrink accordingly to device |
pright-600 or pr-6 | roughly 82 px padding-right can grow or shrink accordingly to device |
pright-700 or pr-7 | roughly 70 px padding-right can grow or shrink accordingly to device |
--------- | ------------ |
pinline-base | roughly 20 px padding-inline can grow or shrink accordingly to device |
pinline-100 or pi-1 | roughly 24.2 px padding-inline can grow or shrink accordingly to device |
pinline-200 or pi-2 | roughly 27.5 px padding-inline can grow or shrink accordingly to device |
pinline-300 or pi-3 | roughly 31.5 px padding-inline can grow or shrink accordingly to device |
pinline-400 or pi-4 | roughly 50.5 px padding-inline can grow or shrink accordingly to device |
pinline-500 or pi-5 | roughly 70 px padding-inline can grow or shrink accordingly to device |
pinline-600 or pi-6 | roughly 82 px padding-inline can grow or shrink accordingly to device |
pinline-700 or pi-7 | roughly 70 px padding-inline can grow or shrink accordingly to device |
--------- | ------------ |
pblock-base | roughly 20 px padding-block can grow or shrink accordingly to device |
pblock-100 or pbl-1 | roughly 24.2 px padding-block can grow or shrink accordingly to device |
pblock-200 or pbl-2 | roughly 27.5 px padding-block can grow or shrink accordingly to device |
pblock-300 or pbl-3 | roughly 31.5 px padding-block can grow or shrink accordingly to device |
pblock-400 or pbl-4 | roughly 50.5 px padding-block can grow or shrink accordingly to device |
pblock-500 or pbl-5 | roughly 70 px padding-block can grow or shrink accordingly to device |
pblock-600 or pbl-6 | roughly 82 px padding-block can grow or shrink accordingly to device |
pblock-700 or pbl-7 | roughly 70 px padding-block can grow or shrink accordingly to device |
Components | Description |
---|---|
h1, h2, h3 | assumed to be main or title headings and set to have Serif font family |
h4, h5, h6, p, small | assumed to be secondary or paragraph headings and set to have Sans-serif font family |
button | background color, on hover shadow, background color change effects been applied |
1.0.0
1 year ago