Responsive CSS Boilerplate Code
Responsive design is king. When you start figuring out how to approach a project's code with responsive design in mind it becomes so much easier.
Decisions are made more intuitively, and the code you write is lighter and more intuitive.
One of my very few gripes with Beaver Builder is that by default (as of version 1.8) it doesn't have very good responsive design settings. Sizes are based on pixels. There's a desktop-first approach with their code and very little control over the other breakpoints.
So I created this block of CSS (below) which I can copy paste into every project I start working on.
/* ###########Small Only########### */
@media screen and (max-width: 768px){
}/* ###########END of Small Only########### */
/* ###########Small & up####################################### */
/* ###########END of Small & up################################# */
/* ###########Medium & up########### */
@media screen and (min-width: 768px){
}/* ###########END of Medium & up########### */
/* ###########Large & up########### */
@media screen and (min-width: 992px){
}/* ###########End of Large & up########### */
/* ######### X-Large & up############# */
@media screen and (min-width: 1100px){
}/* ######### End of X-Large & up############# */
/* ##########Super Large & Up ############ */
@media screen and (min-width: 1200px){
}/* ########## End of Super Large & Up ############ */
/* ########## Small & Down ################################## */
@media (max-width: 768px){
}/* ########## End of Small & Down ####################### */
/* ########## Medium & Down ############ */
@media (max-width: 992px){
h2{font-size:30px;}
h3{font-size:20px;}
}/* ########## End of Medium & Down ############ */
/* ########## Large & Down ############ */
@media (min-width: 1100px){
}/* ########## End of Large & Down ############ */
/* ########## Super Large & Down ############ */
@media (min-width: 1280px){
}/* ########## End of Super Large & Down ############ */
What Does It Do?
By itself absolutely nothing. All it does is provide a nicely laid out series of breakpoints which revolve around the Beaver Builder default breakpoints.
The idea is that you can slot your code into any spot that makes sense.
Min width? Max width?
When approaching with a 'mobile first' design principle, you should start at the "Small and Up" section. and then add your code to each section as your viewport gets larger.
So for 'Small & up' - it technically will have ALL the styles of your website that you absolutely need. Typography base, base colours. You don't really need to put any hover effects here, because only medium & up devices will really need it.
Min width will display the css as long as the browser width is AT LEAST the specified pixels. The reason this is the priority for mobile first design is because unless it is that width, it won't even process that css. Thus a faster website & one that doesn't need to look at code it cant use.
Max width conversely will be rendered on any device. Even the mobile phone with a sluggish tiny processor will have to go through all max-width css and apply it. That's why it's more for strict coding boundaries.
How To Use It?
Simply copy paste the code into your CSS file and start working!
I recommend starting at the 'Small & Up' section (you'll notice there aren't any breakpoints for it).
Then adding CSS rules to override when necessary on larger devices.
IF you run into a situation where it takes less code to use a Max-Width media query then use it, but take caution using them frequently.
If doing it correctly, the most code should be found in the "Small & Up", and the "Medium & Up".
Good luck and hope you find this useful! Responsive design changes the way you think about the web - once you get the hang of it - it's an absolute blast!