Although I was hired as the "AWS Lambda expert", I've been helping out on the frontend JavaScript side of things because, eh, they need it. Lol. In this post I'm going to describe the approach that I introduced at my current job which is working quite nicely...
Setting Up The Less Variables
The key here in making the code very nice and easy to read / work with is the less variables. Although regular css does have "custom properties" nowadays, we were already using the Less preprocessor so I figured I'd define them as less variables (and shoutout to all the Sass users out there. The advice in this post will work equally well if you are using sass or less). So, what we want to do first is set up our "device width breakpoints", ie. the screen width at which point your site changes from one device layout to another. In this example situation let's suppose that we want to display the mobile phone layout for any screen with a width less than 768px. We'll show the view for a tablet-optimized site for screens between 768px and 1024px, and then we'll use css styles for a desktop layout on anything wider than 1024px.
@desktop-min-width: 1024px; @phone-max-width: 768px; @desktop: ~"only screen and (min-width: @{desktop-min-width})"; @tablet: ~"only screen and (min-width: @{phone-max-width}) and (max-width: @{desktop-min-width}"; @phone: ~"only screen and (max-width: @{phone-max-width})";
The variables above may seem a bit scary and foreign with the tildas and quotes, but it's really just a way of escaping strings in less.
Using The Less Variables
When you set up your variables in the way I've shown above, all you need to do is put "@media", the device specific variable, and some curly braces anywhere in your less file, and the stuff inside of those curly braces will only we executed if it's running in a window that corresponds to the device size. I think it will make a lot more sense if we just look at an example (Note- the highlighting may look a bit weird because my code highlighter doesn't recognize less so it's trying to highlight it as regular css and showing syntax errors, but rest assured that this is legitimate less code that will work!).
body { display: relative; @media @phone { background-color: deeppink; } @media @tablet, @desktop { background-color: #0000FF; } }
In the less code above I'm styling the body tag from our html markup. I'm setting "display: relative;" outside of the @media tags so it will be applied always, regardless of the browser window width. Then we use the @media query, followed by the @phone less variable, and what happens in the end is that when the browser is small the body has a pink background. Then, when you stretch the screen to to a width of 769px (or more) the background turns blue. I have the example with @tablet and @desktop to show that if you want to apply the exact same styles for two or more devices sizes then you are able to avoid duplication by separating them by commas.
Anonymous Shoutout
Disclaimer- I didn't come up with this myself. I wanted to find a nice, readable way to manage our css and still support these vastly different three designs for a site being built at work. I stumbled across this method in a stack overflow answer, changed some things to fit the specs of our specific situation, and have been liking it a lot ever since I integrated it. Unfortunately, I can't find the original SO post anymore, but still I must give a shoutout to that generous soul who original dropped the knowledge into my proverbial cereal bowl of coding knowledge (wait, what?).
You Should Use It Bc, Well, It's ​Awesome
I always said that this site was, "a place for people to obtain the wisdom of Jim", and in this post you're getting some serious wisdom! :) The things I've showed you here are pretty basic and fundamental, but this could be the foundations of how you think about your site across different devices, different screens. Along with proper centering and using css units that adjust to the window, this could be critical to having a good "responsive design". All you have to do is take this knowledge and run with it. So go forth, and use these tips to make your site even more awesome! ;)
RSS Feed