3.0.0 • Published 4 years ago

ui-design v3.0.0

Weekly downloads
3
License
MIT
Repository
-
Last release
4 years ago


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

3.0.0

4 years ago

2.4.1

5 years ago

2.3.0

5 years ago

2.3.1

5 years ago

2.2.3

5 years ago

2.2.2

5 years ago

2.2.1

5 years ago

2.2.0

5 years ago

2.1.5

5 years ago

2.1.4

7 years ago

2.1.3

7 years ago

2.1.2

7 years ago

2.1.1

7 years ago

2.1.0

7 years ago

1.0.11

7 years ago

1.0.10

7 years ago

1.0.9

8 years ago

1.0.8

8 years ago

1.0.7

8 years ago

1.0.5

8 years ago

1.0.4

8 years ago

1.0.3

8 years ago

1.0.2

8 years ago

1.0.1

8 years ago