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
npm install @lcf.vs/css-ui --prefix site-dir/assets/css
<link href="https://cdn.rawgit.com/Lcfvs/css-ui/2.2.0/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/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>
<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>
<main>
<h1>css-ui basic layout</h1>
<section>
<h1>Section title</h1>
<p>Section content</p>
</section>
</main>
</body>
</html>
<link href="https://cdn.rawgit.com/Lcfvs/css-ui/2.2.3/css-ui/components/menu/mini.min.css" media="screen" rel="stylesheet" />
<link href="https://cdn.rawgit.com/Lcfvs/css-ui/2.2.3/css-ui/components/menu/expanded.min.css" media="screen" rel="stylesheet" />
<link href="https://cdn.rawgit.com/Lcfvs/css-ui/2.2.3/css-ui/components/header/popdown.min.css" media="screen" rel="stylesheet" />
A special thanks to ascito for some improvements. =)
-
PC
- Firefox
- Chrome
- IE 10+
- Edge
- Opera
- Yandex
-
Mobile
- Firefox
- Chrome
- Safari
- Samsung
- UC Browser
-
Mac
- Firefox
- Safari
- Chrome
- Opera