Sticky Buttons Within A Section

Common practices for sticking elements weren’t working for me: position: sticky and stickybits. I didn’t want to use jQuery either, normally I’d reach to use waypoints.inview. So I wrote my own in vanilla Javascript.

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.

https://codepen.io/davidsword/pen/OEZMay

This is a great feature for section-specific call to actions.

Atom – RemoteFTP More Visual Indicator

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.

CSS Menu/Nav Hamburger Animation

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

Make Height Match Dynamic Width To Create Dynamic Squares CSS

This is a fix I’ve got running in my image gallery. The height of the image’s are dynamic- the square images would make the boxes square themselves, but during load, their containers height is 0 and you get a really chalky and ugly load staggering. Running a fix in Javascript fires too late, and I don’t want to hide everything until JS can get to it, so CSS is the fix; finding the dynamic width and making that the height:

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.

Flexbox Layout – Sidebar & Content Fixed With Fluid Backgrounds

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: