--- # 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) ## 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 |