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.
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: