Code Monkey home page Code Monkey logo

designkit-header's Introduction

Designkit Header

Install

npm install designkit-header --save

Usage

<header class="header-default header-skin sans">
  <div class="header-brand"><a href="/"><img src="https://cdn.rawgit.com/rightscale/design-kit/master/media/logos/gov-logo.svg" alt="RightScale Governance"/></a></div>
  <div class="header-nav">
    <nav><a href="/">Mark one</a><a href="/">Mark two</a><a href="/">Mark three</a></nav>
  </div>
</header>

The CSS

.header-default {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 46px;
  background-color: #0069CC;
}

.header-default.header-skin {
  background-color: #076CCA;
  background-image: linear-gradient(#076CCA, #065BAC);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.08);
}

.header-default .header-brand {
  float: left;
  padding: 0 15px;
  overflow: hidden;
  color: #fff;
}

.header-default .header-brand a {
  display: block;
  float: left;
  height: 100%;
  padding: 12px 0 9px;
}

.header-default .header-brand img {
  height: 100%;
}

.header-default .header-nav {
  float: right;
  font-size: 13px;
}

.header-default .header-nav a {
  display: block;
  float: left;
  height: 100%;
  padding: .8rem .8rem .8rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: all .1s;
}

.header-default .header-nav a:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

Author

Jason Melgoza

License

MIT

designkit-header's People

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.