Skip to main content

Code Snippets

October 30, 2020
CSSHTMLJavascript
A collection of useful code snippets.
Table of Contents

Intro​

This is just a collection of useful code snippets that I find myself looking for repeatedly.

CSS​

Media Breakpoints​

⚠️ When using these breakpoints, comment out or remove any breakpoints that are not actively being used to prevent unexpected behavior.

/* Extra small devices (phones, 640px and down) */
 @media only screen and (max-width: 640px) {}

 /* Small devices (portrait tablets and large phones, 640px and up) */
 @media only screen and (min-width: 640px) {}
 
 /* Medium devices (landscape tablets, 768px and up) */
 @media only screen and (min-width: 768px) {}
 
 /* Large devices (laptops/desktops, 1024px and up) */
 @media only screen and (min-width: 1024px) {}
 
 /* Extra large devices (large laptops and desktops, 1280px and up) */
 @media only screen and (min-width: 1280px) {}

In reality using all of these breakpoints is going to be uncommon, because grid and flexbox make layouts so flexible now. I will typically just create two layouts for each project, with a breakpoint at 1024px, and then possibly fine-tune some individual objects from there. Therefore practically your breakpoint code would look like the following.

/* ************************************** */
/* ----- MEDIA BREAKPOINTS-- ------------ */
/* ************************************** */

/* DEFAULT/MOBILE BEHAVIOR */



/* DESKTOP BEHAVIOR */
/* Large devices (laptops/desktops, 1024px and up) */
@media only screen and (min-width: 1024px) {

}

So that everything is mobile by default, and then the layout changes that need to happen for desktop go in the large devices section. A practical example of that would be shifting the menu for mobile devices. Some basic code for that would go in like this.

/* ************************************** */
/* ----- MEDIA BREAKPOINTS-- ------------ */
/* ************************************** */

/* DEFAULT/MOBILE BEHAVIOR */
/* Hide Desktop Menu until 1024px */
.desktop-menu {
  display: none;
}


/* DESKTOP BEHAVIOR */
/* Large devices (laptops/desktops, 1024px and up) */
@media only screen and (min-width: 1024px) {

/* Hide Mobile Menu Icon on Desktop */  
  .mobile-menu-icon {
    display: none;
  }
  .desktop-menu {
    display: flex;
    flex-direction: column;
  }
}

Note that the desktop menu must be explicitly shown with a display property because it was previously hidden.

Comments

Recent Work

Basalt

basalt.software

Free desktop AI Chat client, designed for developers and businesses. Unlocks advanced model settings only available in the API. Includes quality of life features like custom syntax highlighting.

Learn More

BidBear

bidbear.io

Bidbear is a report automation tool. It downloads Amazon Seller and Advertising reports, daily, to a private database. It then merges and formats the data into beautiful, on demand, exportable performance reports.

Learn More