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

• Alignment
• Card
• Color
• Display
• Font
• Gride
• Position
• Spacing

🔖 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