@lcf.vs/css-ui

A pure CSS base to make a responsive user interface

Stats

StarsIssuesVersionUpdatedCreatedSize
@lcf.vs/css-ui
703.1.0a year ago3 years agoMinified + gzip package size for @lcf.vs/css-ui in KB

Readme

css-ui

npm Downloads

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

Install

Using NPM

npm install @lcf.vs/css-ui --prefix site-dir/assets/css

Using a CDN

<link href="https://unpkg.com/@lcf.vs/css-ui@3.0.7/css-ui.min.css" media="screen" rel="stylesheet" /> 
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <title>Basic layout - css-ui</title>
        <link href="assets/css/variables.css" media="screen" rel="stylesheet" />
        <link href="https://unpkg.com/@lcf.vs/css-ui@3.0.7/css-ui.min.css" media="screen" rel="stylesheet" />
        <link href="https://unpkg.com/@lcf.vs/css-ui@3.0.7/components/menu/mini/mini.min.css" media="screen" rel="stylesheet" />
        <link href="https://unpkg.com/@lcf.vs/css-ui@3.0.7/components/header/popdown/popdown.min.css" media="screen" rel="stylesheet" />
        <link href="assets/css/style.css" media="screen" rel="stylesheet" />
        <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" />
    </head>
    <body>
        <header>
            <h1>css-ui</h1>
        </header>
        <main>
            <h1>css-ui basic layout</h1>
            <section>
                <h1>Section title</h1>
                <p>Section content</p>
            </section>
        </main>
        <nav>
            <!--googleoff: anchor-->
            <a href="javascript:" tabindex="1">☰</a>
            <a href="javascript:" tabindex="-1">⬅</a>
            <!--googleon: anchor-->
            <ol>
                <li><a href="/">Home</a></li>
            </ol>
        </nav>
    </body>
</html>

Variables

: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

License

MIT

Contributions

A special thanks to 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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.