Enable Front Matter for style.css

[regulationsgov]

To make it easier for different organizations to customize this project, maybe the styles.css could be processed to allow replacement of colors and maybe some image.

This diff is a good example of changing out a key color for tailoring to a new organization.
https://github.com/GSA/sam_api/commit/5cb8faeedbc80b0c50bcc6fd4ea54081509b2c22#diff-a16a51aaea7dc21d3202074fc7228024

Something along these lines:

---
accentColor1: "#09c"

---
.header {
    border-bottom: 4px solid {{ page.accentColor1 }};
    width: 100%;
    background-color: #fff;
    /*position: fixed;*/
    top: 0;
    z-index: 99999;
}

[meiqimichelle]

Interesting! I didn't know you could do that with Jekyll front matter in a stylesheet. Good point about pulling out variables to make the switch-out easier. A thought: if we are going to start down this path, though, we may want to take advantage of GitHub's upgrade to Jekyll 2.2.0 and its automatic Sass parsing. Could separate out variables as is standard in Sass and set the template that way.

[shawnjohnson]

Great point about Saas. Now that I looked up what it is, it seems like an ideal fit. Looks like we could change the imports to take advantage of the preprocessing as well.

Does it still make sense to have the style.scss in the "static" folder? Once it's processed it is static I suppose?

---
---

$nav-color: #09c;

@import 'normalize';
@import 'fonts';

...

nav li:hover {
     color: #75787b;
+    border-left: 4px solid $nav-color;
     background-color: transparent;
     border-bottom: 1px solid #d0d0ce;
     padding-left: 0;

 nav li:active {
     color: #75787b;
+    border-left: 4px solid $nav-color;
     background-color: transparent;
     border-bottom: 1px solid #d0d0ce;
     padding-left: 0;

[regulationsgov]

I could make this a pull request, but I think there are a few other issues to address first, like #5.

https://github.com/regulationsgov/regulationsgov.github.io/commit/887b213a4e86bd70e2e736e49acaaf7d7e904334

[meiqimichelle]

I'd like to see styles.scss in the static folder (since yeah, like you say it gets processed into styles.css through Jekyll) and then a _sass folder for all the partials. Ideally, styles.scss should just be @includes and then in the _sass folder we could have:

• _base.scss for default styles from this template
• _custom.scss blank slot for people to add their own styles
• _variables.scss default variables with slots for people to change them
• _anythingelse.scss whatever other files we need/want

To have the partials in a sub-folder, we will need to add
sass:
sass_dir: static/_sass
to the config.

I don't have time today to do a pull request, but hopefully next week! This is great stuff -- cleaning up our template, it'll be so beautiful 😢

[shawnjohnson]

Where do you see these fitting?

• fonts.css
• for-ie-only.css
• normalize.css