Requirements: nodeJS and Grunt or Gulp

Step 1 – Install NPM Packages

In the same directory as your gruntfile.js or gulpfile.js, open a command window and run the following commands to get all the packages you will need.

npm install node-neat
npm install node-bourbon

Step 2 – Move over all necessary files to your desired directory

Aftering running the npm install lines above, I moved all of the Bourbon and Neat SASS files to a more desired folder location.

Original locations:
/node_modules/node-bourbon/node_modules/bourbon/app/assets/stylesheets
and
/node_modules/node-neat/node_modules/bourbon-neat/app/assets/stylesheets

My desired locations:
/styles/scss/vendor/bourbon/assets/stylesheets
and
/styles/scss/vendor/bourbon/assets/stylesheets

Step 3 – Import Bourbon

Inside your main sass file (mine is styles.scss), import the following files:

@import "vendor/bourbon/assets/stylesheets/bourbon.scss";
@import "vendor/neat/assets/stylesheets/bourbon.scss";

You can verify that your installation is correct by going into a SASS file and trying something like:

div {
	@include linear-gradient(red, black);
}

This should give your div a linear-gradient background color of red and black.

Problem: When you navigate to a page on your website, you’d like for the appropriate main navigation menu item to show as active.

HTML: The HTML you’ll want to use can be a simple unordered list, with UL LI A elements.

CSS: If you’re going for a horizontal navigation menu, you’ll need to float or display: inline the LI elements. You’ll want to style the active/selected state, as well as the hover state, at the very least. Consider styling the font, colors, etc. to your liking.

jQuery: The code will cycle through each link in your menu, and then compare the href attribute to the location/path of the page you’re on. If the href and the path of the page are matched, then the code will add a class name to the element.

Demo: This demo will not show the ‘is-selected’ class on any of the nav links. This is because we cannot navigate to any of the linked pages in the nav since this is just a demo via CodePen.io

See the Pen Nav menu – active class name by Cindy Lee (@cindylee) on CodePen.

Here is a simple jQuery accordion that uses a text link as the trigger.

HTML: Here is the html

CSS: This is some generic CSS styling for the accordion.

jQuery:

Demo: Here is a demo of accordion in CodePen.io

See the Pen jQuery – Accordion by Cindy Lee (@cindylee) on CodePen.

HTML:

jQuery:

See the Pen Clear an input value on click focus by Cindy Lee (@cindylee) on CodePen.

The Problem: You want to center a div without setting a width on it because you have text being pulled in dynamically. The length of the text may be out of your control. For example, this could be for a CMS (Content Management System) and the user is entering in an unknown amount of text in the field. So you want to have it expand AND stay centered.

HTML:

CSS:

Explanation:
So what’s happening is that you’re containing the content you want to center in two divs, an outer div and an inner div. You float both divs so that their widths automatically shrink or expand to fit your content. Then, you relatively position the outer div with it’s right edge in the center of the container. Finally, then, you relatively position the inner div in the opposite direction by half of its own width. So, when you inspect the element, you’ll see that they are, basically, overlapping each other. That will center the content in the container it’s in. (tightcss.com)

In your navigation menu, you would like to dynamically add an “active” class to each menu item when you’re on the corresponding pages so you can style those menu items.

 

HTML:

 

Javascript:

Javascript code:

HTML:

Example:
Please click here.