3.1.0 • Published 4 years ago
@lcf.vs/css-ui v3.1.0
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
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
License
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
3.1.0
4 years ago
3.0.4
4 years ago
3.0.7
4 years ago
3.0.3
4 years ago
3.0.2
4 years ago
3.0.1
4 years ago
3.0.0
4 years ago
2.4.4
4 years ago
2.4.3
5 years ago
2.4.2
6 years ago
2.4.0
6 years ago
2.3.0
6 years ago
2.2.9
6 years ago
2.2.8
6 years ago
2.2.7
6 years ago
2.2.6
6 years ago
2.2.5
6 years ago
2.2.4
6 years ago
2.2.3
6 years ago
2.2.2
6 years ago
2.2.1
6 years ago
2.2.0
6 years ago
2.1.4
6 years ago
2.1.3
6 years ago
2.0.7
6 years ago
2.0.6
6 years ago
2.0.5
6 years ago
2.0.4
6 years ago
2.0.2
6 years ago
1.5.3
6 years ago
1.5.2
6 years ago
1.5.1
6 years ago
1.5.0
6 years ago
1.4.0
6 years ago
1.3.3
6 years ago
1.3.2
6 years ago
1.3.1
6 years ago
1.3.0
6 years ago
1.2.0
6 years ago
1.1.0
6 years ago
1.0.9
6 years ago
1.0.8
6 years ago
1.0.4
6 years ago
1.0.3
6 years ago
1.0.2
6 years ago
1.0.0
6 years ago