Today I Learned - Rocky Kev

TIL Higher Bootstrap screen resolutions

POSTED ON:

TAGS: webdev bootstrap

Top 6 Desktop Screen Resolutions (via Statcounter)
(as of 2020-06-27)

Why are bootstrap breakpoints so low?

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);

Instead, use these breakpoints.

/* set the overriding variables */
$grid-breakpoints: (
  xxxs: 0,
  xxs: 320px,
  xs: 568px,
  sm: 667px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1440px,
  xxxl: 1600px
);

With this method, we've added the new grid breakpoints, and ensured these new breakpoints work everywhere in Bootstrap including the grid, responsive utilities for spacing, display, flexbox, alignment, positioning, etc...

via Stackoverflow

Related TILs

Tagged: webdev

TIL Content sectioning

Content sectioning or landmarks, like sidebar, content, footer. You know, like better names.

TIL php-fpm

PHP runs as a separated service when using PHP-FPM. By using this PHP version as language interpreter, requests are processed through a TCP/IP socket; so that the Nginx web server only handles the HTTP requests and PHP-FPM interprets the PHP code. The fact of having two separate services is key for increasing efficiency.

TIL Considering Device Obsolescence with web development

I'm incredibly guilty of pushing to build for the latest tech. For good reason too - you can write less code, use more native functions, and things are just more likely to work.