Import GH Gist

Basics

Why?

You have own CSS micro-framework and own methodology to organize Stylesheets into folder structure and you are it in almost every project. Now you can define all of that as GitHub Gists, create one command and when you start project it will create your boilerplate in a blink of an eye.

How?

Form	(gist_url)

As you can se from table above, form of this command is easy, you need to pass URL to Gist inside parenthesis. We are using parenthesis so we can differentiate URL from other commands so before executing commands we can replace on url with special character so we can execute other commands before/after this in sequence.

Parts of command:

Part 1:	(	Indicates start of URL
Part 2:	URL_TO_GIST	eg. https://gist.github.com/re-co/18c7b776fbd20c6d3c1343c04792944c#file-xray-gridguide-css
Part 3:	)	Indicates end of URL

Chain multiple Gists

You can chain multiple easily like shown in example below:

(url-to-gist-1)(url-to-gist-2)(url-to-gist-3)(url-to-gist-4)

Making GitHub Gists

We have covered how this works, now we'll look how to create Gists to take full advantage of this and to see all options what we have at our disposal.

Example of creating Gist

As illustrated above, we can see that we two inputable fields, one is for name and other for an actual code.

Gist name format

Format is name .extension , where .extension can be:

1. .css (imports Gist as Stylesheet)

2. .js (imports Gist as Code block, code goes to Javascript tab of Code block)

3. .php (imports Gist as Code block, code goes to PHP/HTML tab of Code block)

This should be straightforward, cases 2. and 3. don't have more options, so we'll move on the part where you can mark folder where you do you want Stylesheet to be created.

Putting Stylesheet inside desired folder

If you want just to create stylesheet from Gist, you can name it buttons.css, reset.css, crazysheet.css etc.

But, in introduction we have touched term organized and this would be messy way. In order to make organized folder/stylesheet structure we are going to adapt some naming conventions (sounds geeky, let's do it).

1. We are going to use backslash \ to sign where folder name ends and stylesheet name starts.

2. Convention looks like folderName\stylesheetName.css

Case study

In this case study we are want to create a following Folder - Stylesheet structure:

Folders	Stylesheets
reset
	normalize
base
	typography
	spacing
components
	buttons
	modals

In order to achive that we'll create and import following Gists:

• reset\normalize.css

• base\typography.css

• base\spacing.css

• components\buttons.css

• components\modals.css

What if?

Folder name does already exists

Don't worry, it will select it and put stylesheet inside it

Folder name does not already exists

Don't worry, it will create folder if it does not exist already

Stylesheet name exists

You will be asked if you want override existing Stylesheet with content from Gist

Stylesheet name contains not allowed characters

Don't worry, it replace them with '-' so name will be valid.

Does it work with secret Gists

Yes, it works. Secret Gists are not private, they just don't show up in Discover and they're not searchable.