Skip to content

Instantly share code, notes, and snippets.

@DotCoyote
Created September 29, 2016 10:38
Show Gist options
  • Save DotCoyote/4deafb5c8498802876ba0a68e88dbe93 to your computer and use it in GitHub Desktop.
Save DotCoyote/4deafb5c8498802876ba0a68e88dbe93 to your computer and use it in GitHub Desktop.
Atomic BEM Header Example
<!-- Header Bar -->
<header class="e-header">
<!-- Header Top -->
<div class="e-header__top">
<!-- Logo -->
<a href="index.html" class="e-header__logo">
<img src="img/logo.svg" alt="companyLogo">
</a>
<!-- /Logo -->
<!-- Meta Navigation -->
<div class="e-header__tools">
<div class="e-btn-group">
<a href="" class="e-btn e-btn--ghost">Anmelden</a>
<a href="" class="e-btn e-btn--primary">Regsitrieren</a>
</div>
</div>
<!-- /Meta Navigation -->
<!-- Search -->
<div class="e-header__search e-search">
<input type="search" placeholder="Suchbegriff..." class="e-search__input">
<button type="submit" class="e-search__submit">Suchen</button>
</div>
<!-- /Search -->
</div>
<!-- /Header Top -->
<!-- Main Navigation -->
<nav class="e-nav">
<ul>
<li><a href="#">Startseite</a></li>
<li><a href="#">Über uns</a></li>
<li><a href="#">Leistungen</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
<!-- /Main Navigation -->
</header>
<!-- /Header Bar -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment