1.0.0 • Published 3 years 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.
![Semanticss v1.0.0.22]("https://graphical_assets/semanticss-svg.svg "npm.io")
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
3 years ago