Mobile first component helper

Usage no npm install needed!

<script type="module">
  import uiDesign from 'https://cdn.skypack.dev/ui-design';



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.


npm install ui-design


@import "~ui-design/src/index.scss";


@import "./node_modules/ui-design/dist/ui-design.css";


<link rel="stylesheet" href="./node_modules/ui-design/dist/ui-design.css">


🔖 Align

  • flex-[start|center|end]-[start|center|end][-[sm|md|lg|xl]]
<p class="flex-center-center">
  Align center horizontally and vertically
  • left|center|right|justify[-[sm|md|lg|xl]]
<p class="center left-sm">
  Align center or left on small screen
  • v-[middle|top|bottom][-[sm|md|lg|xl]]
<p class="v-middle v-top-sm">
  Align middle or top on small screen

🔖 Card


<p class="card-7">
  Card with box shadow 7

🔖 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
  • brown|grey|blue-grey-[50|100|200|300|400|500|600|700|800|900]
<p class="grey-50">
  Color grey 50
  • hover-[color]
<p class="hover-indigo-50">
  Color indigo 50 on hover
  • bg-[color]
<p class="bg-indigo-50">
  Background indigo 50
  • bg-hover-[color]
<p class="bg-hover-indigo-50">
  Background indigo 50 on hover

🔖 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
  • [roboto|segoe|georgia|monospace]
<p class="segoe">
  Font family segoe
  • font-[thin|extra-light|light|normal|medium|semi-bold|bold|extra-bold|black]
<p class="font-thin">
  Font weight thin
  • hyphens|word-break|txt-scroll|ellipsis
<p class="hyphens">
  Font cesure hyphens
  • pointer|initial
<p class="pointer">
  Cursor pointer

🔖 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
  • 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

🔖 Position

  • z-[1-10]
<p class="z-9">
  Z index 9
  • overflow[-[x|y]]-[auto|hidden|scroll]
<p class="overflow-x-hidden">
  Overflow x hidden
  • static|relative|absolute|fixed[-[sm|md|lg|xl]]
<p class="absolute relative-sm">
  Position absolute or relative on small screen
  • left|top|right|bottom[-[sm|md|lg|xl]]-[1-12]
<p class="left-0 left-sm-6">
  Left 0% or 50% on small screen

🔖 Spacing

  • wrap|nowrap[-[sm|md|lg|xl]]
<p class="flex wrap nowrap-sm">
  Flex wrap or no wrap on small screen
  • grow|nogrow[-[sm|md|lg|xl]]
<p class="flex grow nogrow-sm">
  Flex grow or no grow on small screen
  • shrink|noshrink[-[sm|md|lg|xl]]
<p class="flex shrink noshrink-sm">
  Flex shrink or no shrink on small screen
  • 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
  • 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|pl|pt|pr|pb[-[sm|md|lg|xl]]-[1-12]
<p class="p-4 p-sm-8">
  Padding .5em or 1em on small screen
  • box[-[sm|md|lg|xl]]
<p class="box-sm">
  Border box on small screen

🎫 License

This project is licensed under the MIT License