Overview

Layout elements are just made to help you build layouts. Containers, Navmenu, Banner and a new way to use Flexbox, with classes.

Containers

Containers are the most basic layout element, he just apply a 10px padding to your elements to get start quickly building your app.

Neptuno has two types of containers: default container and container compressed.

Note: Padding of 10px applied.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam saepe deleniti nihil, possimus alias delectus tempora inventore dolorum molestias officiis architecto aut consectetur minima distinctio soluta dolor ipsa nulla atque. 

 <div class="container" >
	<!-- Content here -->
 </div>

Compressed Container

Compress all text of elements, change class="container" to class="compressed".

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam saepe deleniti nihil, possimus alias delectus tempora inventore dolorum molestias officiis architecto aut consectetur minima distinctio soluta dolor ipsa nulla atque.

Navmenu

A customizable and responsive navmenu build only with pure CSS and is mobile friendly.

<nav class="menu">
	<label for="target" class="icon-bar">
		<span></span>
	</label>
	<input type="checkbox" id="target">
	<ul class="menu-items" role="navigation">
		<li class="active"><a href="#" role="menuitem">Home</a></li>
		<li><a href="#" role="menuitem">Components</a></li>
		<li><a href="#" role="menuitem">Interface</a></li>
		<li><a href="#" role="menuitem">Forms</a></li>
		<li><a href="#" role="menuitem">Docs</a></li>
	</ul>
</nav>

Fixed

Add class="fixed" to make a fixed navmenu.

Shadow

Add class="shadow-1" to add shadow in navmenu.

<nav class="menu shadow-1">
	...
</nav>

Responsive

add class="responsive" to make a responsive menu.

Sidenav

Add class="sidenav" to make a sidenav menu.

<nav class="menu responsive sidenav">
	<input type="checkbox" id="target">
	<label for="target" class="icon-bar">
		<span></span>
	</label>
	<ul class="menu-items" role="navigation">
		<li class="active"><a href="#" role="menuitem">Link 1</a></li>
		<li><a href="#" role="menuitem">Link 2</a></li>
		<li><a href="#" role="menuitem">Link 3</a></li>
	</ul>
</nav>

Customize

You can customize navmenu using this selectors.

nav.menu {
	background-color: #f5f5f5;
	--gray: #909090;
}

ul.menu-items li.active {
	background-color: var(--gray);
}

ul.menu-items li:not(.active) > a {
	color: #000;
}

ul.menu-items li:hover,
ul.menu-items li:hover a {
	background-color: var(--gray);
}

ul.menu-items li:hover a {
	color: #fff;
}

Example:

Banner

<div class="banner">
	<h1 class="title">My Banner</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit dignissimos ab, repudiandae earum facere, aliquam neque quis nostrum sint nihil ullam corrupti hic voluptate optio et nemo, cum quae modi.</p>
	<div class="group">
		<button class="btn has-effect">Click here</button>
	</div>
</div>

Customize

Use this selectors to customize banner

.banner {
	background: #f5f5f5;
}

.banner > .title {
	color: #777;
}

Issues

Bug or features request? Open an Issue