Import GH Gist



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.


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:
Part 3:
Indicates end of URL

Chain multiple Gists

You can chain multiple easily like shown in example below:

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. 1.
    .css (imports Gist as Stylesheet)
  2. 2.
    .js (imports Gist as Code block, code goes to Javascript tab of Code block)
  3. 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. 1.
    We are going to use backslash \ to sign where folder name ends and stylesheet name starts.
  2. 2.
    Convention looks like folderName\stylesheetName.css

Case study

In this case study we are want to create a following Folder - Stylesheet structure:
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
Folder name does not already exists
Stylesheet name exists
Stylesheet name contains not allowed characters
Does it work with secret Gists
Copy link
On this page
Chain multiple Gists
Making GitHub Gists
Gist name format
Putting Stylesheet inside desired folder
Case study
What if?