Implement Sass

[Mica]

Switch the stylesheet source from css to sass and integrate the metalsmith sass plugin. Then start converting the css to scss.

[Pat David]

I'm not 100% sure about this, and it's not for any extremely concrete reasons. :)

The css is relatively straightforward as it is, would we gain much moving to sass given the added complexity of implementation? (I know the answer is probably yes, but I can't help but ask).

[Pat David]

Just spitballing here. I'm sure my original intention was a basic breakdown like:

• pixls.css
  A master stylesheet that will span the entire site
• blogposts.css
  Specifically for blog posting
• articles.css
  Specifically for articles

[Mica]

I think that being able to nest selectors is worth the complexity of sass by itself, but you'll also get variables.

When we get there, you can clone my fork of the website and check it out, and if it is too complicated, then just don't merge it.

On June 9, 2016 6:51:39 AM PDT, Pat David [e-mail] wrote:

I'm not 100% sure about this, and it's not for any extremely concrete
reasons. :)

The css is relatively straightforward as it is, would we gain much
moving to sass given the added complexity of implementation? (I know
the answer is probably yes, but I can't help but ask).

---

You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub:
#11 (comment)

[Mica]

I'm going to start on some commits to implement SASS.

My plan is as such:

1. Get metalsmith-sass installed
2. Make a master styles.sass file
3. Load all existing css files into the master styles.sass file
4. Edit all the templates to point at the master styles.sass file
5. Convert existing CSS to SASS
6. Refactor SASS

At the end, you can still have all the separate files you'd like, but SASS will condense them all down into one stylesheet when the site is built; this should help reduce HTTP requests as well.

How does that sound?

[Pat David]

It sounds scary, and new, and unfamiliar territory to me (I'm only half kidding).
I know it might make sense, though I'm still loathe to add another dependency in the toolchain...

If it helps, when I was up late building things initially, I was using a general set of styles for major things (grid, normalize). Then I was thinking of a separate set of styles based on general page breakdown (mostly, articles and blogposts). Each of the static pages I considered having their own styling as needed depending on what they were going to look like (about, software, article/blog index pages).

I think articles and blogposts can be merged to have identical styles between them for sure.

Just let me know what you need me to do! (I'm trying to get an update blog post out at the moment, but I'll try to do whatever you need).

[Mica]

I hope the following points assuage your nerves:

• there is a C implementation (libsass)
• bootstrap and foundation both use sass
• the metalsmith plugin is maintained by the core maintainer
• it will make the templates easier to maintain
• it will increase readability in the current stylesheets by using nested selectors

[Pat David]

No need to assuage my fears - I'm just being a crotchety old man that's afraid of change. :)

[Mica]

I think you're right, the blog and article templates will need to be merged; they have some overlapping classes such that when you load both into the same page, nothing looks right.

[Pat David]

As soon as I can clear some time I'll start cleaning up the classes between those two types of pages (it'll likely make the transition and consolidation in sass smoother for you).

[Mica]

@patdavid Before you take the time to merge the blog and article css, check out my sass branch, (git clone -b sass [e-mail]:paperdigits/website.git website-sass) and build it. The blog stylesheet is not being loaded, but the blog pages still look good.

I think you should still merge article and blog css, since there were a few things in them that I wasn't sure what it does.

[Pat David]

Awesome, will do. I'm just having a hard time clearing some time. :)

[Pat David]

@paperdigits should I just start working from your branch and porting any necessary bits and pieces that may be missing?

[Mica]

You can do that, but it doesn't matter since I haven't changed any of the CSS files.

On June 29, 2016 6:24:24 AM PDT, Pat David [e-mail] wrote:

@paperdigits should I just start working from your branch and porting
any necessary bits and pieces that may be missing?

---

You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub:
#11 (comment)

[Pat David]

Just pushed a new branch, sass that includes the stuff that @paperdigits already did and also includes refactored articles.css and blogpost.css into the style.scss file.

Also, we've got backstopjs working for visual regression testing. I'll add the how-to for using it on the README file.

[Mica]

Awesome thanks Pat! I will take a look at the new branch this weekend.

On August 12, 2016 1:07:19 PM PDT, Pat David [e-mail] wrote:

Just pushed a new branch, sass that includes the stuff that
@paperdigits already did and also includes refactored articles.css
and blogpost.css into the style.scss file.

Also, we've got backstopjs working for visual
regression testing. I'll add the how-to for using it on the README
file.

You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub:
#11 (comment)

[Pat David]

I realized I had prematurely deleted some branches before I commited, so I lost a ton of work. :(

otoh, I stayed up tonight and (hopefully) got it sorted out. It should be fine now (fingers crossed).

[Mica]

I don't see the backstopjs stuff in there, did you mean to not push it? Or was it lost when you deleted the branch?

If you need what you had before, I should have it in my local repo. I pulled all the stuff from our session Wednesday after you left.

On August 12, 2016 9:10:43 PM PDT, Pat David [e-mail] wrote:

I realized I had prematurely deleted some branches before I commited,
so I lost a ton of work. :(

otoh, I stayed up tonight and (hopefully) got it sorted out. It should
be fine now (fingers crossed).

You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub:
#11 (comment)

[Pat David]

I added the backstop directory to the .gitignore to keep the repo from ballooning in size. I did make sure it was all ok, though.

I was also testing against the live site for some things if needed. I really need to document this process. :)

[Mica]

How's the stylesheet merging coming along @patdavid ?

[Pat David]

I'm back in a place where I can spend some time poking at it some more right now.

[Pat David]

Ok, I've just pushed integration of topnav.css and push-menu.css into style.scss and checked that there's no regressions. Everything looks good so far.

There should only be article.css and blogpost.css to refactor and include into style.scss. Or at the very least to combine similar rules from each into style.scss and leave only unique rules in place until we decide how best to combine them.

[Mica]

Awesome, I'll have a look tonight and see if I can do anything!

On September 8, 2016 1:51:36 PM PDT, Pat David [e-mail] wrote:

Ok, I've just pushed integration of topnav.css and push-menu.css
into style.scss and checked that there's no regressions. Everything
looks good so far.

There should only be article.css and blogpost.css to refactor and
include into style.scss. Or at the very least to combine similar
rules from each into style.scss and leave only unique rules in place
until we decide how best to combine them.

You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub:
#11 (comment)

[Mica]

If I'm looking at the right thing, both article.css and blogpost.css are both empty files.

Is github lying to me?

On September 8, 2016 1:51:36 PM PDT, Pat David [e-mail] wrote:

Ok, I've just pushed integration of topnav.css and push-menu.css
into style.scss and checked that there's no regressions. Everything
looks good so far.

There should only be article.css and blogpost.css to refactor and
include into style.scss. Or at the very least to combine similar
rules from each into style.scss and leave only unique rules in place
until we decide how best to combine them.

You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub:
#11 (comment)

[Pat David]

odd. checking...

[Pat David]

Actually, it appears I must have modified these previously! (commit 244549a)

[Pat David]

I'd say try commenting out the article.css and blogpost.css and see if any regressions creep in with backstop. If not we can start refactoring the style.scss to clean things up.

[Mica]

I'll check that out tonight!

On September 8, 2016 2:50:13 PM PDT, Pat David [e-mail] wrote:

I'd say try commenting out the article.css and blogpost.css and see
if any regressions creep in with backstop. If not we can start
refactoring the style.scss to clean things up.

You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub:
#11 (comment)

[Pat David]

Ok, I think things have been migrated fully in the sass branch (honestly, I think it's been migrated for a while now). A such, I'd like to be able to merge sass and master. I'm going to test and double check things this week and if everything looks ok, I'll merge. Almost there @paperdigits! ;)

[Mica]

Awesome! I have ideas ready to go!

On October 8, 2016 11:40:39 AM PDT, Pat David [e-mail] wrote:

Ok, I think things have been migrated fully in the sass branch
(honestly, I think it's been migrated for a while now). A such, I'd
like to be able to merge sass and master. I'm going to test and
double check things this week and if everything looks ok, I'll merge.
Almost there @paperdigits! ;)

You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub:
#11 (comment)

[Pat David]

I am about to close this. I've merged the sass branch into master and the world didn't end. Please pull and have a look if you get a moment to double check behind me. If all looks good I'll close this and we can start refactoring styles.scss.

[Mica]

Awesome! I will try and have a look tomorrow or this weekend; its been crazy, leaving/starting a new job this week. Sorry for the delay!

On October 12, 2016 11:35:43 AM PDT, Pat David [e-mail] wrote:

I am about to close this. I've merged the sass branch into master
and the world didn't end. Please pull and have a look if you get a
moment to double check behind me. If all looks good I'll close this
and we can start refactoring styles.scss.

You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub:
#11 (comment)

[Pat David]

No sweat! Hope the new job is working out ok (pun sort of intended)!
On Wed, Oct 12, 2016 at 2:39 PM Mica [e-mail] wrote:

Awesome! I will try and have a look tomorrow or this weekend; its been
crazy, leaving/starting a new job this week. Sorry for the delay!

On October 12, 2016 11:35:43 AM PDT, Pat David [e-mail]
wrote:

I am about to close this. I've merged the sass branch into master
and the world didn't end. Please pull and have a look if you get a
moment to double check behind me. If all looks good I'll close this
and we can start refactoring styles.scss.

You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub:
#11 (comment)

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
#11 (comment), or mute
the thread
https://github.com/notifications/unsubscribe-auth/ACpnMHb_x-4B4o7CAhJqdqnyy0sng8Dzks5qzTeIgaJpZM4IxjjQ
.

[Mica]

I would agree with you that the world has not ended. This looks good. We can refactor styles.scss!