Docs
Search…
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
\ - 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
Folder name does not already exists
Stylesheet name exists
Stylesheet name contains not allowed characters
Does it work with secret Gists
Last modified 3mo ago