README
Material and Mobile First Helper
This helper set is useful to build layout or canvas presentation, it do not include pre build component and provide fundamental css rules.
Installation
npm install ui-design
scss
@import "~ui-design/src/index.scss";
css
@import "./node_modules/ui-design/dist/ui-design.css";
html
<link rel="stylesheet" href="./node_modules/ui-design/dist/ui-design.css">
Features
🔖 Align
flex-[start|center|end]-[start|center|end][-[sm|md|lg|xl]]
<p class="flex-center-center">
Align center horizontally and vertically
</p>
left|center|right|justify[-[sm|md|lg|xl]]
<p class="center left-sm">
Align center or left on small screen
</p>
v-[middle|top|bottom][-[sm|md|lg|xl]]
<p class="v-middle v-top-sm">
Align middle or top on small screen
</p>
🔖 Card
card-[0-24]
<p class="card-7">
Card with box shadow 7
</p>
🔖 Color
red|pink|purple|deep-purple|indigo|blue|light-blue|cyan|teal|green|light-green|lime|yellow|amber|orange|deep-orange-[50|100|200|300|400|500|600|700|800|900|a100|a200|a400|a700]
<p class="indigo-50">
Color indigo 50
</p>
brown|grey|blue-grey-[50|100|200|300|400|500|600|700|800|900]
<p class="grey-50">
Color grey 50
</p>
hover-[color]
<p class="hover-indigo-50">
Color indigo 50 on hover
</p>
bg-[color]
<p class="bg-indigo-50">
Background indigo 50
</p>
bg-hover-[color]
<p class="bg-hover-indigo-50">
Background indigo 50 on hover
</p>
🔖 Display
flex|block|inline|inline-block|none[-[sm|md|lg|xl]]
<p class="none block-sm">Display none or block on small screen</p>
inline-block[-[sm|md|lg|xl]] fix[-[sm|md|lg|xl]]
<p class="inline-block-sm">Display inline-block on small screen</p>
🔖 Font
font[-[sm|md|lg|xl]]-[1-6][-[25|5|75]]
<p class="font-1 font-sm-2-25">
Font size 1 or 2.25 rem on small screen
</p>
[roboto|segoe|georgia|monospace]
<p class="segoe">
Font family segoe
</p>
font-[thin|extra-light|light|normal|medium|semi-bold|bold|extra-bold|black]
<p class="font-thin">
Font weight thin
</p>
hyphens|word-break|txt-scroll|ellipsis
<p class="hyphens">
Font cesure hyphens
</p>
pointer|initial
<p class="pointer">
Cursor pointer
</p>
🔖 Gride
w|flex-w|w-auto|w-min|w-max|vw|flex-vw|vw-min|vw-max[-[sm|md|lg|xl]][1-12]
<p class="w-12 w-6-sm">
Width 100% or 50% on small screen
</p>
h|h-auto|h-min|h-max|vh|flex-vh|vh-min|vh-max[-[sm|md|lg|xl]][1-12]
<p class="h-12 h-6-sm">
Height 100% or 50% on small screen
</p>
🔖 Position
z-[1-10]
<p class="z-9">
Z index 9
</p>
overflow[-[x|y]]-[auto|hidden|scroll]
<p class="overflow-x-hidden">
Overflow x hidden
</p>
static|relative|absolute|fixed[-[sm|md|lg|xl]]
<p class="absolute relative-sm">
Position absolute or relative on small screen
</p>
left|top|right|bottom[-[sm|md|lg|xl]]-[1-12]
<p class="left-0 left-sm-6">
Left 0% or 50% on small screen
</p>
🔖 Spacing
wrap|nowrap[-[sm|md|lg|xl]]
<p class="flex wrap nowrap-sm">
Flex wrap or no wrap on small screen
</p>
grow|nogrow[-[sm|md|lg|xl]]
<p class="flex grow nogrow-sm">
Flex grow or no grow on small screen
</p>
shrink|noshrink[-[sm|md|lg|xl]]
<p class="flex shrink noshrink-sm">
Flex shrink or no shrink on small screen
</p>
offset[-[r|t|b]][-[sm|md|lg|xl]]-[1-12]
<p class="offset-6 offset-sm-12">
Offset left 50% or 100% on small screen
</p>
m|ml|mt|mr|mb[-[sm|md|lg|xl]]-[1-12]
<p class="m-4 m-sm-8">
Margin .5em or 1em on small screen
</p>
p|pl|pt|pr|pb[-[sm|md|lg|xl]]-[1-12]
<p class="p-4 p-sm-8">
Padding .5em or 1em on small screen
</p>
box[-[sm|md|lg|xl]]
<p class="box-sm">
Border box on small screen
</p>
🎫 License
This project is licensed under the MIT License