#css

CSS Menu/Nav Hamburger Animation

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:

https://gist.github.com/davidsword/3ca3347ae8cf763a3a7bf89270ff340f

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

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:

https://gist.github.com/davidsword/c39ff32da9aa3f256513a7dcc79ff237

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

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 imho, has better code.

Basically, this layout has a max-width 1,175 px (I’ve set those bounds with red lines in #goal for reference, 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:

https://gist.github.com/davidsword/e2d6588d55a2f69b498e356f006e23c5

Use LESSCSS Client Side While Developing WordPress Theme

I write in LESSCSS because I find it’s nesting so much eaiser to read. While creating a theme, I never compile during, it’s too annoying, instead I have a on/off toggle for using .LESS file or .CSS file.

https://gist.github.com/davidsword/a3760b1ae2e00802c677ea2a66132f08

In the snippet I made the toggle WP_DEBUG, which should be on while you develop, but if you’re developing in a network it’s eaiser to use a global veriable from functions.php

Furthermore if you are using LESSCSS and are developing/maintaining a lot of WordPress themes, I highly suggest making a shortcut for LESSCSS in bash:

https://gist.github.com/davidsword/71e290a3afd296e841bca3f33099d5e2

So all you have to do is type less when you’re in the theme directory. If you’re not comfortable with terminal, I’ve written about a PHP LESSCSS Compiler.

Compile LESS with Coda

Coda 2 doesn’t compile Less natively – as nice as it would be. There’s a plugin that does it, however at time of writing this, it doesn’t work for me (El Capitan PB2 / 2.5.11) and crashes the app.

When you’re working with shared hosting, where it’s nearly impossible to do anything to the server, it makes working with server-side Less kind of a pain. Here’s a way I found to automatically compile Less server-side after saving the file while using Coda 2.

In your remote site, have the following:

https://gist.github.com/davidsword/693c2e32f2a4a94ca05410a5631d7047

In lessc.inc.php copy/paste the contents from github.com/leafo/lessphp/

In lessc.php add:

https://gist.github.com/davidsword/c62651e91f85a978cbafce092a964364

Coda 2 has a handy default feature that refreshes your split preview window every time you save your split view file. We’ll take advantage of this making the preview window compile the newly saved /style.less file.

Simply split your /style.less page with a preview window set to the /lessc.php file on your server. Every time you save the .less file, Coda 2 will auto-execute the PHP Less compiler. Ta’da! Now hitting cmd+s on the keyboard uploads your Less file and compiles it.

Note: This isn’t the best way to compile, but it’s great if you’re working off of cheap shared hosting, or having to do something quick.

Much More Modern & Micro Mobile Menu

Watch carefully – at department stores, restaurants, arenas, on the bus – you’ll notice something. Something alarming. Every single freaking person is on a smart phone. Yes, everyone. Jess got a text from her Grandma yesterday. Her Grandma! If your website isn’t responsive, easy, and quick to use on a mobile phone that all of these people have, you’re doing something wrong.

I’ve used a few different ways of creating off-canvas navigations, making the website feel more like an app where the navigation is hidden “behind” the current viewport, and the active screen is animated, sliding out of the way. I like this, I do, but it’s cumbersome – it often requires modernizer, lots of jQuery window calculations and event binding, CSS animations, and lots more. Typically it calls for building a second navigation, which defeats the “responsive” idea. Adding on, it’s no longer the norm of popular apps to have off-canvas sliders, it’s not a good direction.

Things are changing, getting simpler, and cleaner. Myself, I’m on a minimal binge – in both design and code, so I’ve written a new, much smaller and simpler responsive navigation:

The HTML

https://gist.github.com/davidsword/5158dca143293ef72ddb4b2d279cde30

The CSS

https://gist.github.com/davidsword/94ba84eea2854445f3843b5673ad17ca

Copy/paste this and it looks like crap, so lets focus on the functionality of it here.

The desktop and mobile nav are differentiated by our @media query.
Normal desktop looks like a normal nav, when we’re less than 960px wide, we’re display a label as a navigation drawer, which when clicked, alters the input’s :checked pseudo element and determines the visibility / drawer status of nav.

It doesn’t get much more simpler than this for a responsive navigation.

How To Make A Responsive Site

Every since the tablet boom in the last two or so years, responsive design is the only way to make sites.

As an owner of a tablet and heavy web user, it makes a world of difference on my impression of a site (and thus a company/organization) when you visit a site that’s responsive. It’s butt hurt going to (a) a full size site where you have to awkwardly zoom-in, wait for 9000 things to load, and awkwardly scroll down in a straight line with the article. Worse than loading an unresponsive full size site on a tablet is a site detecting the large iPad to be a “mobile” device, thus redirecting you to a plain-text-2005-mobile site with images no bigger than your pinky finger nail, and no visual interest at all, and no care into textography for large-mobile devices.

Responsive design is easy, and for reference here’s the framework for detecting the screen size:

https://gist.github.com/davidsword/d9babb72324354f79f884ca082770e21

I found using CSS was enough, but sometimes loading bigger images and extra things is a pain, so you can use some basic Javascript to detect the size and change things up.

https://gist.github.com/davidsword/86f4d4625c9b9020042b6072c57e6ad2

To make sure the viewport is the width of the device, HTML meta tag is used:

https://gist.github.com/davidsword/583f41be62fcd8f09e5431fb96aa2163

On a foot note, to further enhance the responsive experience, optimizing the site for the visitors screen-size, I use tools like LazyLoad to ensure the site loads speedy on slower 3/4G connections, Swipey for scrolling horizontal images, and Off-canvas-navigation easy app-like navigation.