![\"ui-design\"/](\"./resources/ui-design.png\")
\n \n\n \n \n \n
\n \n ![](\"https://img.shields.io/npm/dt/ui-design.svg\")
\n \n \n \n \n \n
![](\"https://img.shields.io/npm/v/ui-design.svg\")
\n \n \n ![](\"https://img.shields.io/badge/license-MIT-blue.svg\"){kind=icon}
\n \n
\nThis helper set is useful to build layout or canvas presentation, it do not include pre build component and provide fundamental css rules.\n
\n\n___\n\n## Installation\n\n```bash\nnpm install ui-design\n```\n\n*scss*\n\n```scss\n@import \"~ui-design/src/index.scss\";\n```\n\n*css*\n\n```css\n@import \"./node_modules/ui-design/dist/ui-design.css\";\n```\n\n*html*\n\n```html\n\n```\n___\n\n## Features\n\n* [Alignment](#align)\n* [Card](##card)\n* [Color](#color)\n* [Display](#display)\n* [Font](#font)\n* [Gride](#gride)\n* [Position](#position)\n* [Spacing](#spacing)\n\n___\n\n\n\n## 🔖 Align\n\n* `flex-[start|center|end]-[start|center|end][-[sm|md|lg|xl]]`\n\n```html\n\n Align center horizontally and vertically\n
\n```\n\n* `left|center|right|justify[-[sm|md|lg|xl]]`\n\n```html\n\n Align center or left on small screen\n
\n```\n\n* `v-[middle|top|bottom][-[sm|md|lg|xl]]`\n\n```html\n\n Align middle or top on small screen\n
\n```\n\n___\n\n\n\n## 🔖 Card\n\n`card-[0-24]`\n\n```html\n\n Card with box shadow 7\n
\n```\n\n___\n\n\n\n## 🔖 Color\n\n* `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]`\n\n```html\n\n Color indigo 50\n
\n```\n\n* `brown|grey|blue-grey-[50|100|200|300|400|500|600|700|800|900]`\n\n```html\n\n Color grey 50\n
\n```\n\n* `hover-[color]`\n\n```html\n\n Color indigo 50 on hover\n
\n```\n\n* `bg-[color]`\n\n```html\n\n Background indigo 50\n
\n```\n\n* `bg-hover-[color]`\n\n```html\n\n Background indigo 50 on hover\n
\n```\n\n___\n\n\n\n## 🔖 Display\n\n* `flex|block|inline|inline-block|none[-[sm|md|lg|xl]]`\n\n```html\nDisplay none or block on small screen
\n```\n\n* `inline-block[-[sm|md|lg|xl]] fix[-[sm|md|lg|xl]]`\n\n```html\nDisplay inline-block on small screen
\n```\n\n___\n\n\n\n## 🔖 Font\n\n* `font[-[sm|md|lg|xl]]-[1-6][-[25|5|75]]`\n\n```html\n\n Font size 1 or 2.25 rem on small screen\n
\n```\n\n* `[roboto|segoe|georgia|monospace]`\n\n```html\n\n Font family segoe\n
\n```\n\n* `font-[thin|extra-light|light|normal|medium|semi-bold|bold|extra-bold|black]`\n\n```html\n\n Font weight thin\n
\n```\n\n* `hyphens|word-break|txt-scroll|ellipsis`\n\n```html\n\n Font cesure hyphens\n
\n```\n\n* `pointer|initial`\n\n```html\n\n Cursor pointer\n
\n```\n\n___\n\n\n\n## 🔖 Gride\n\n* `w|flex-w|w-auto|w-min|w-max|vw|flex-vw|vw-min|vw-max[-[sm|md|lg|xl]][1-12]`\n\n```html\n\n Width 100% or 50% on small screen\n
\n```\n\n* `h|h-auto|h-min|h-max|vh|flex-vh|vh-min|vh-max[-[sm|md|lg|xl]][1-12]`\n\n```html\n\n Height 100% or 50% on small screen\n
\n```\n\n___\n\n\n\n## 🔖 Position\n\n* `z-[1-10]`\n\n```html\n\n Z index 9\n
\n```\n\n* `overflow[-[x|y]]-[auto|hidden|scroll]`\n\n```html\n\n Overflow x hidden\n
\n```\n\n* `static|relative|absolute|fixed[-[sm|md|lg|xl]]`\n\n```html\n\n Position absolute or relative on small screen\n
\n```\n\n* `left|top|right|bottom[-[sm|md|lg|xl]]-[1-12]`\n\n```html\n\n Left 0% or 50% on small screen\n
\n```\n\n___\n\n\n\n## 🔖 Spacing\n\n* `wrap|nowrap[-[sm|md|lg|xl]]`\n\n```html\n\n Flex wrap or no wrap on small screen\n
\n```\n\n* `grow|nogrow[-[sm|md|lg|xl]]`\n\n```html\n\n Flex grow or no grow on small screen\n
\n```\n\n* `shrink|noshrink[-[sm|md|lg|xl]]`\n\n```html\n\n Flex shrink or no shrink on small screen\n
\n```\n\n* `offset[-[r|t|b]][-[sm|md|lg|xl]]-[1-12]`\n\n```html\n\n Offset left 50% or 100% on small screen\n
\n```\n\n* `m|ml|mt|mr|mb[-[sm|md|lg|xl]]-[1-12]`\n\n```html\n\n Margin .5em or 1em on small screen\n
\n```\n\n* `p|pl|pt|pr|pb[-[sm|md|lg|xl]]-[1-12]`\n\n```html\n\n Padding .5em or 1em on small screen\n
\n```\n\n* `box[-[sm|md|lg|xl]]`\n\n```html\n\n Border box on small screen\n
\n```\n\n___\n\n## 🎫 License\nThis project is licensed under the [MIT](LICENSE) License\n\n\n\n\n","maintainers":[{"name":"seeren","email":"consultant@seeren.fr"}],"time":{"modified":"2022-06-28T03:15:25.918Z","created":"2017-11-02T17:24:36.351Z","1.0.1":"2017-11-02T17:24:36.351Z","1.0.2":"2017-11-02T17:29:50.285Z","1.0.3":"2017-11-02T18:32:58.461Z","1.0.4":"2017-11-02T21:08:33.767Z","1.0.5":"2017-12-16T03:06:14.317Z","1.0.7":"2017-12-16T21:27:17.283Z","1.0.8":"2017-12-25T14:13:44.637Z","1.0.9":"2017-12-29T23:54:46.181Z","1.0.10":"2018-01-12T11:54:18.038Z","1.0.11":"2018-01-18T21:00:38.613Z","2.1.0":"2018-04-14T18:55:10.722Z","2.1.1":"2018-05-03T02:21:56.097Z","2.1.2":"2018-07-14T18:59:33.591Z","2.1.3":"2018-07-15T16:32:03.441Z","2.1.4":"2018-07-15T16:42:10.016Z","2.1.5":"2020-05-02T09:40:01.494Z","2.2.0":"2020-05-03T14:23:52.189Z","2.2.1":"2020-05-03T16:22:31.919Z","2.2.2":"2020-05-03T18:06:42.178Z","2.2.3":"2020-05-03T21:52:27.279Z","2.3.0":"2020-05-12T09:07:28.098Z","2.3.1":"2020-05-12T09:25:28.997Z","2.4.1":"2020-10-06T21:29:17.590Z","3.0.0":"2021-11-27T23:35:43.739Z"},"keywords":["html","css","helper"],"author":{"name":"Cyril Ichti"},"license":"MIT","readmeFilename":"README.md"}