The nice part is it was much easier to do a sticky bottom. Scroll to element, bottom of viewport hits bottom of to-be-stuck element, and carries it down until the end of its parent element.
Really enjoying using Atom now (instead of Panic Coda). The ability to customize and hack is just, mind blowing.
Right out the gate this became useful. Not keeping tree view open, knowing if RemoteFTP was connected was slightly annoying – there is a setting within RemoteFTP to show icons in the status bar, but visually, it did nothing.
Tiny amount of LESSCSS in my stylesheet gave me some very obvious icons.
While finally buying a Keurig today, I (oddly) decided to do my research on my phone instead of desktop, and also (oddly) decided to go to Keurig.ca instead of my normal stomping ground of Amazon.ca. While there, I was distracted in a nerdy daze by the animation they added to their hamburger navigation, immediatly stoped everything and went to code it myself.
A very polished touch to a now very common element:
I used CSS3 var for easy line weight changing. Playing around with EASE also gives the button much more life. (It took two cups of coffee to write and refine that).
Found from a thread in stack overflow, I hope this helps someone else:
Yeah that’s it, a pseudo element can take on the dynamic height based on the dynamic width.
At the time of writing this, this is what I currently have built my site on. It’s inspired by Twenty Fifteen’s layout, but in my humble opinion, uses better CSS logic for similar results.
Basically, this layout has a max-width 1,175 px (I’ve set those bounds with red lines in #goal for reference only, it doesn’t actually contribute), however the sidebar and main content areas are still edge-to-edge flex – and the ratio remains the same.
I’ve never really got into flex box, but it’s amazing. I quickly found flex-bias and this will keep the boxes in the same ratio, we then house an inner container to relate to our fixed max-width. And, well the code will explain better: