# css-ui [![npm](https://img.shields.io/npm/v/@lcf.vs/css-ui.svg?style=plastic)](https://www.npmjs.com/package/@lcf.vs/css-ui) [![Downloads](https://img.shields.io/npm/dt/@lcf.vs/css-ui.svg?style=plastic)](https://www.npmjs.com/package/@lcf.vs/css-ui) A pure CSS base to make a responsive user interface. * Accessible * Flexible * Classes/ids non-dependant * No JavaScript required * No non-semantic tags * No hacks * No browser specific media queries * Easy to install [Demo](https://lcfvs.github.io/css-ui/) ## Install ### Using NPM `npm install @lcf.vs/css-ui --prefix site-dir/assets/css` ### Using a CDN ```html ``` ```html Basic layout - css-ui

css-ui

css-ui basic layout

Section title

Section content

``` ## Variables ```css :root { --css-ui--bg: /* rgba(245, 245, 255, 1) */; --css-ui--font: /* OpenSans, "Lucida Sans Unicode", "Lucida Grande", sans-serif */; --css-ui--padding: /* .5em */; --css-ui--contents-width: /* 20em */; --css-ui--header-bg: /* rgba(204, 204, 255, 1) */; --css-ui--header-height: /* 3em */; --css-ui--header--popdown-color: /* rgba(245, 245, 255, 1) */; --css-ui--header--popdown-width: /* 15em */; --css-ui--header--popdown-counter-color: /* rgba(255, 255, 255, .8) */; --css-ui--header--popdown-counter-bg: /* rgba(255, 0, 0, 1) */; --css-ui--header--popdown-counter-font-size: /* .8em */; --css-ui--header--popdown-counter-padding: /* .3em */; --css-ui--header--popdown-item-bg: /* rgba(255, 255, 181, 1) */; --css-ui--menu--bg: /* rgba(0, 0, 34, 1) */; --css-ui--menu--border: /* .063em solid rgba(255, 255, 255, .3) */; --css-ui--menu--color: /* rgba(204, 204, 255, 1) */; --css-ui--menu--icon-font: /* FontAwesome5Free */; --css-ui--menu--icon-size: /* 3em */; --css-ui--menu--height: /* 100% */; --css-ui--menu--overlay-bg: /* rgba(0, 0, 0, .3) */; --css-ui--menu--width: /* 15em */; } ``` ## Components [Components](./components/#readme) ## License [MIT](https://github.com/Lcfvs/css-ui/blob/master/licence.md) ## Contributions A special thanks to [ascito](https://github.com/ascito) for some improvements. =) ## Compatibility * PC * Firefox * Chrome * Edge * Opera * Yandex * Mobile * Firefox * Chrome * Safari * Samsung * UC Browser * Mac * Firefox * Safari * Chrome * Opera All the compatibility tests are made on [](https://www.browserstack.com)