Keeping your CSS Dry with Tachyons

.navbar-default {
background-color: #f8f8f8;
border-color: #e7e7e7;
}
.navbar-default .navbar-brand {
color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #5e5e5e;
background-color: transparent;
}
.navbar-default .navbar-text {
color: #777;
}
.navbar-default .navbar-nav > li > a {
color: #777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #333;
background-color: transparent;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #555;
background-color: #e7e7e7;
}
.navbar-default .navbar-nav > .disabled > a,
.navbar-default .navbar-nav > .disabled > a:hover,
.navbar-default .navbar-nav > .disabled > a:focus {
color: #ccc;
background-color: transparent;
}
.navbar-default .navbar-toggle {
border-color: #ddd;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #ddd;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #888;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #e7e7e7;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #555;
background-color: #e7e7e7;
}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #777;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #333;
background-color: transparent;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #555;
background-color: #e7e7e7;
}
.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
color: #ccc;
background-color: transparent;
}
}
.navbar-default .navbar-link {
color: #777;
}
.navbar-default .navbar-link:hover {
color: #333;
}
.navbar-default .btn-link {
color: #777;
}
.navbar-default .btn-link:hover,
.navbar-default .btn-link:focus {
color: #333;
}
.navbar-default .btn-link[disabled]:hover,
fieldset[disabled] .navbar-default .btn-link:hover,
.navbar-default .btn-link[disabled]:focus,
fieldset[disabled] .navbar-default .btn-link:focus {
color: #ccc;
}
.navbar-default .dropdown-menu a {
background-color: gray;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
background-color: gray;
}

Using A Small Library like Tachyons Instead

Let’s say you want to build your own custom button using Tachyons that doesn’t look like the generic Bootstrap button. The process is very different. Much like AngularJS took a lot of the focus back into HTML itself, adding in the ability to describe behavior and logic directly within HTML through the use of directives and expressions, Tachyons allows you to control the appearance of individual HTML elements by adding a bunch of classes to them.

Adding a Button

Building a Custom Button using the Tachyons CSS Library
<a class=”” href=”#”>Click Me</a>
<a class=”pa2 bg-light-gray” href=”#”>Click Me</a>
Button Step 1
<a class=”pa2 bg-light-gray link” href=”#”>Click Me</a>
Button Step 2
<a class=”pa2 bg-light-gray link ba” href=”#”>Click Me</a>
Button Step 3
<a class=”pa2 bg-light-gray link ba bw2” href=”#”>Click Me</a>
Button Step 4
<a class=”pa2 bg-light-gray link ba bw1” href=”#”>Click Me</a>
Button Step 5
<a class=”pa2 bg-light-gray link ba bw1 bg-hover-moon-gray” href=”#”>Click Me</a>
Button Step 6
<a class=”pa2 bg-light-gray link ba bw1 bg-hover-moon-gray black” href=”#”>Click Me</a>
Button Step 7
<a class=”pa2 bg-light-gray link ba bw1 bg-hover-moon-gray black br3” href=”#”>Click Me</a>
Button Step 8
$primary-color: blue;
.primary-color, .focus-primary-color:focus, .hover-primary-color:hover { color: $primary-color; }
.bg-primary-color, .bg-focus-primary-color:focus, .bg-hover-primary-color:hover { background-color: $primary-color; }
.b--primary-color { border-color: $primary-color; }

Worth Checking Out

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store