Вёрстка (HTML/CSS) - компонентная вёрстка
=========================================

 

**Компонентная верстка** - создание малых и независимых компонентов, которые
могут быть применены в разных местах. Многократно используемый
компонент CSS может размещаться в различных частях дерева DOM и не требует
использования только определенных типов элементов.

Компоненты должны иметь все необходимое для определенной части пользовательского
интерфейса и фокусироваться на одном элементе. Каждый компонент должен быть
изолирован, то есть он должен быть независим от других компонентов.

 

Примеры компонентов html/css:

 

1 Navbar with dropdown:
-----------------------

 

**html:**

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<nav id="nav">
	<ul class="main-nav">
		<li>
			<a href="#">Main-item 01</a>
			<ul class="dropdown">
				<li><a href="#">Sub-item 01</a></li>
				<li><a href="#">Sub-item 02</a></li>
				<li><a href="#">Sub-item 03</a></li>
				<li><a href="#">Sub-item 04</a></li>
			</ul>
		</li>
		<li><a href="#">Main-item 02</a></li>
		<li><a href="#">Main-item 03</a></li>
		<li><a href="#">Main-item 04</a></li>
	</ul>
</nav>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 

**css:**

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
.main-nav {
	font-size: 0;
	line-height: 0;
	border-right: 2px solid #fff;
}

.main-nav>li {
	position: relative;
	display: inline-block;
	vertical-align: top;
	font-size: 16px;
	line-height: 1;
	border-left: 2px solid #fff;
}

.main-nav>li:hover .dropdown {
	opacity: 1;
	visibility: visible;
}


.main-nav>li:hover >a {
	color: #fff;
	background: #14141f;
}

.main-nav>li>a {
	display: block;
	color: #fff;
	padding: 20px 30px;
	transition: background .5s ease;
}

.main-nav a:hover {
	color: #fff;
	background: #14141f;
}

.dropdown {
	position: absolute;
	z-index: 10;
	left: 0;
	top: 100%;
	width: 100%;
	background: #f2f2f2;
	border: 2px solid #fff;
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s ease;
}

.dropdown>li {
	border-bottom: 1px solid #fff;
}

.dropdown>li:last-child {
	border-bottom: 0;
}

.dropdown>li>a {
	display: block;
	padding: 10px 15px;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 

2 Fade gallery:
---------------

 

**html:**

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div class="gallery">
	<div class="slideset">
		<div class="slide active">
			<img src="images/img-slide01.jpg" alt="slide">
		</div>
		<div class="slide">
			<img src="images/img-slide01.jpg" alt="slide">
		</div>
		<div class="slide">
			<img src="images/img-slide01.jpg" alt="slide">
		</div>
		<div class="slide">
			<img src="images/img-slide01.jpg" alt="slide">
		</div>
	</div>
</div>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 

**css:**

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
.gallery {
	position: relative;
}

.gallery .slide {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.gallery .slide.active {
	position: relative;
	z-index: 2;
	opacity: 1;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 

3 Open/close:
-------------

 

**html:**

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div class="collapse-wrap active">
    <div class="collapse-head">
	<button type="button" class="opener">Open info</button>
    </div>
    <div class="collapse-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    </div>
</div>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 

**css:**

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
.collapse-wrap .collapse-body {
	display: none;
}

.collapse-wrap.active .collapse-body {
	display: block;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 

 

4 Forms:
--------

 

**html:**

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<form action="#" class="form-wrap">
	<div class="form-col">
		<input type="text" placeholder="Name">
	</div>
	<div class="form-col">
		<input type="email" placeholder="Email">
	</div>
	<div class="form-col">
		<input type="password" placeholder="Password">
	</div>
	<button type="submit">Submit</button>
</form>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 

**css:**

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
.form-wrap .form-col {
	margin-bottom: 15px;
}

.form-wrap input {
	display: inline-block;
	vertical-align: top;
	width: 100%;
	border: 1px solid #000;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~