LRDC Style Guide

This guide is to get you up and running with the LRDC Style Guide.

The Set-Up section will help you install tools that streamline the process of using our style guide.

The Installation section will help you get the style guide running locally on your computer.

The Usage section will tell you what how to use style guide.

The About section will tell you what your forked files do.

Set-Up

The Set-Up section will ensure that all necessary software is installed for you to properly use the LRDC Style Guide. The following steps are listed in chronological order. If you already have a certain software installed, skip ahead to the next step.

1. Xcode 🔗

Xcode includes everything developers need to create great applications for Mac, iPhone, iPad, Apple TV, and Apple Watch. Xcode provides developers a unified workflow for user interface design, coding, testing, and debugging. The Xcode IDE combined with the Swift programming language make developing apps easier and more fun than ever before.

1. Download and install XCode9

Resources

Apple Developer Documentation
Description from Apple

2. Git + GitHub 🔗

GitHub is a development platform inspired by the way you work. From open source to business, you can host and review code, manage projects, and build software alongside millions of other developers.

1. Set up Git and authenticate with GitHub

Resources

Getting Started - Git Basics Github Guides
Description from Github

3. Homebrew 🔗

Homebrew is a great tool for web developers. First, it makes removing Node very easy (otherwise you have to crawl through your file system and delete a bunch of files manually). Second, it greatly simplfies the installation of other useful packages like Git, Ruby, or the very useful wget utility.

1. Paste this into a Terminal prompt:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Resources

Homebrew Documentation
Description from Treehouse blog

4. Node + NPM 🔗

NPM is a package manager for JavaScript and the world's largest software registry. Discover packages of reusable code — and assemble them in powerful new ways.

1. Enter brew install node into a Terminal prompt.
2. To check the install, enter node -v; npm -v. You should see two numbers print out which are the versions for node and npm respectively.

Resources

npmjs Documentation
Description from npmjs

5. Gulp 🔗

gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

1. Enter npm install -global gulp-cli into a Terminal prompt.
2. To check the install, enter gulp -v. You should see a number print out which is the version for gulp.

Resources

gulpjs Documentation
Description from gulpjs

Installation

In order to contribute to the LRDC Style Guide and experiment with it locally on your computer, you will need to fork this repository.

1. Fork Repository

1. Follow Github's Fork a Repo instructions.

Your forked file structure should look like this:

lrdc-style-guide/
├── .gitignore
├── docs/
|   ├── index.html
|   └── style.css
├── gulpfile.js
├── package.json
├── readme.md
└── style-guide/
    ├── css/
    |   └── style.css
    ├── fonts/
    ├── images/
    ├── index.html
    ├── js/
    └── scss/
        ├── base/
        |   ├── color.scss
        |   ├── elevation.scss
        |   └── typography.scss
        └── index.scss

2. NPM Install

npm install will create a node_modules/ folder and install the dependencies listed in the package.json file.

1. Open a Terminal prompt and navigate to the lrcd-style-guide/ folder.
2. Enter npm install into the Terminal prompt.
3. Your lrdc-style-guide/ folder should now contain the node_modules/ folder.

3. You're ready to start styling!

You now have 2 new folders inside of the lrdc-style-guide/ folder.
These are the .git/ + node_modules/ folders.

Your forked file structure should look like this after following steps 1 + 2 of the Local section:

lrdc-style-guide/
├── .git/
|   └── ...
├── .gitignore
├── docs/
|   ├── index.html
|   └── style.css
├── gulpfile.js
├── node_modules/
|   └── ...
├── package.json
├── readme.md
└── style-guide/
    ├── css/
    |   └── style.css
    ├── fonts/
    ├── images/
    ├── index.html
    ├── js/
    └── scss/
        ├── base/
        |   ├── color.scss
        |   ├── elevation.scss
        |   └── typography.scss
        └── index.scss

Usage

A lot of behind-the-scenes processing occurs when to simplify the process of using the LRDC Style Guide. You'll want to make sure you initiate the gulp tasks by following the Usage instructions.

1. Start-Up

Before you begin to edit your files, running the gulp.watch task will automatically compile your scss files into a single css file and refresh your browser upon saving any edits. You will want to follow this step everytime you use this style guide.

1. Open a Terminal prompt and navigate to the lrdc-style-guide/ folder.
2. Enter gulp watch into the Terminal prompt.

2. Style Away!

The index.html file in the lrdc-style-guide/ folder should have automatically opened in your browser.
As you save your changes to *.scss files, your browser will automatically refresh to display the changes.

• For styling, the only files you should edit are the *.scss files in the /style-guide/scss/ folder.
• For content, the only file you should edit is the index.html file in the lrdc-style-guide/ folder.

About

If you want to know more about what the files in your forked LRDC Style Guide repository do, you can find out below!

.git

.gitignore

docs/

gulpfile.js

node_modules/

package.json

readme.md

style-guide/