markup/05_examples.md

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