components

Вёрстка (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;
}

---

• Быстрый старт