Sass Mixin Library

Sass Mixin Library is a simple, lightweight, yet powerful mixin library for Sass.

Download (zip)

HOW-TO-USE

Copy the _mixins.scss file and mixins directory to your project. Add the following to your core file or file in which you want mixins to be added:

@import "mixins";

EXAMPLES

Each mixin file located in the mixins directory contains documentation on how-to include the mixin.

Example of implementation can also be found in test.scss.

WordPress .htaccess Yeoman Generator

Yeoman Generator to generate a WordPress .htaccess file.

INSTALL

npm install -g generator-wordpress-htaccess

USAGE

yo wordpress-htaccess

If you generate the .htaccess file in a directory that is not the directory where your WordPress installed, you will need to move the .htaccess file.

mv .htaccess /path/to/wordpress

base.css

base.css is a collection of CSS for HTML / HTML5 tags and attributes.

The purpose of base.css is to standardize CSS for commonly used HTML tags and attributes. You could use it as is, but should be used as a “base” for your website’s CSS or as a part of a front-end framework you are using. It allows you to build your website’s or web app’s styling faster, as there is no need to rewrite typical CSS for HTML tags and attributes.

Download (zip)

Features

Here are the main features of base.css:

  • Only 5KB in size unminified and 4KB minified;
  • Contains typical HTML / HTML5 tags and attributes, which are regularly used or missed in CSS coding;
  • HTML5 ready; and
  • Correct common browser inconsistencies.

Install using Bower

bower install base-css

Travel Bloggers Network Facebook Group

Travel Bloggers Network Facebook Group is a closed Facebook Group where Facebook members can discuss how to create, build, grow and tweak their travel blogs.

Posts can be anything technical that helps you grow your travel blog and include travel writing, WordPress and Ghost development, web design and development, social media, SEO and performance optimization.

Visit Group

Center Align Bootstrap Nav Pills

This tutorial will show you how to center align nav pills in Bootstrap.

HTML

<div class="centered-pills">
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>
</div>

CSS

.centered-pills { text-align: center } 
.centered-pills ul.nav-pills { display: inline-block }
.centered-pills li { display: inline } 
.centered-pills a { float: left } 
* html .centered-pills ul.nav-pills, *+html .centered-pills ul.nav-pills { display: inline }
* ```

Link Hover Underline Gradient

Apply a gradient to the underline of your links when hovered.

HTML

<a href="#">Pellentesque habitant morbi</a>

CSS

a {
  position: relative;
  padding-bottom: 2px;
  text-decoration: none;
}
a:hover::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 0;
  height: 1px;
  width: 100%;
  background: #444;
  background: linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
 }