kareemkibue/k2-media

A collection of CSS3 media queries curated for use in SASS and JavaScript (css-in-js)

K2-Media

A small library containing a collection of CSS3 media queries curated for use in SASS, and JavaScript (React, React/Typescript or any CSS-in-JS implementation).

The breakpoints used are based on the post "Media Queries for Standard Devices" by CSS Tricks.

Table of Contents

• Getting Started
• How to use
  • React/JavaScript (media, mediaIos, respond)
  • SASS
• Changelog

Getting Started

Install via npm:

npm install k2-media --save

Alternatively via yarn:

yarn add k2-media

How to use

React/JavaScript

1. Use media (Object: IMedia) for set breakpoints

   Popular breakpoints covered media (IMedia):

   Name	Breakpoint (px)	Devices
   screenMd	< 1200px	Smaller PCS & laptops
   tablet	< 1025px (<=1024px)	iPads, 8"+ Android Tablets
   screenSm	< 992px	Small tablets
   screenXs	< 768px (<=767px)	iPad Portrait, Standard mobile phones

   Tablet only breakpoints under media: IMedia:

   Name	Breakpoint (px)	Devices
   allTablets	< 1281px (>169 dpi)	All tablets (and smartphones) irrespective of viewport width. Unlike tablet this takes the DPI into consideration
   tabletLandscape	< 1025px (<=1024px)	All tablets (and smartphones) in landscape orientation
   tabletPortrait	< 768px	All tablets (and smartphones) in portrait orientation

   Less common breakpoints covered under media: IMedia:

   Name	Breakpoint (px)	Devices
   screenLg	> 1200px	Standard PCs, laptops
   screenXxs	< 481px	Smaller mobile phone screens
   screenXxs	< 481px	Smaller mobile phone screens
   screenXxs	< 481px	Smaller mobile phone screens

   import { media } from 'k2-media';
   
   /* in css */
   `
   width: 20%;
   
   ${ media.screenMd }{
       width: 25%;
   }
   
   ${ media.tablet }{
       width: 33%;
   }
   
   ${ media.screenSm }{
       width: 50%;
   }
   
   ${ media.screenXs }{
       width: 100%;
   }
   `
   

2. For greater flexibility, use respondMax: Function, respondMin: Function or respond: Function

• respondMax( maxWidth: string )

  import { respondMax } from 'k2-media';
  
  /* in css */
  `
  background: #f0f0f0;
  
  ${ respondMax('1000px') }{
      background: #f7f7f7;
  }
  `
  

• respondMin( minWidth: string )

  import { respondMin } from 'k2-media';
  
  /* in css */
  `
  background: #f0f0f0;
  
  ${ respondMin('550px') }{
      background: #f7f7f7;
  }
  `
  

• respond( minWidth: string, maxWidth: string )

  import { respond } from 'k2-media';
  
  /* in css */
  `
  background: #f0f0f0;
  
  /* styles will only be applied within these 2 breakpoints */
  ${ respond('500px','1000px') }{
      background: #f7f7f7;
  }
  `
  

3. Use IMediaIos (Object: IMediaIos) for iOs only breakpoints (iOs Safari compatible)

   Name	Breakpoint (px)	Devices
   iPad	> 767px && <1024px	all iPads (landscape or portrait)
   iPadLandscape	> 767px && <1024px	all iPads (landscape)
   iPadPortrait	> 767px && <1024px	all iPads (portrait)
   iPadFirst	> 767px && <1024px	1st Gen iPads, non-retina (landscape or portrait)
   iPadFirstLandscape	> 767px && <1024px	1st Gen iPads, non-retina (landscape)
   iPadFirstPotrait	> 767px && <1024px	1st Gen iPads, non-retina (portrait)
   iPadFirstPotrait	> 767px && <1024px	1st Gen iPads, non-retina (portrait)
   iPadMini	> 767px && <1024px	iPadMini (landscape or portrait)
   iPadMiniLandscape	> 767px && <1024px	iPadMini (landscape)
   iPadMiniPortrait	> 767px && <1024px	iPadMini (portrait)
   iPadRetina	> 767px && <1024px	iPad, retina screen (landscape or portrait)
   iPadRetinaLandscape	> 767px && <1024px	iPad, retina screen (landscape)
   iPadRetinaPortrait	> 767px && <1024px	iPad, retina screen (portrait)
   iPhone	>= 320px && <481px	all iPhones (landscape or portrait)
   iPhoneFirst	>= 320px && <481px	1st Gen iPhone (landscape or portrait)
   iPhoneFirstLandscape	>= 320px && <481px	1st Gen iPhone (landscape)
   iPhoneFirstPortrait	>= 320px && <481px	1st Gen iPhone (portrait)
   iPhone4	>= 320px && <480px	iPhone4 (landscape or portrait)
   iPhone5	>= 320px && <568px	iPhone5 (landscape or portrait)
   iPhone5Landscape	>= 320px && <568px	iPhone5 (landscape)
   iPhone5Portrait	>= 320px && <568px	iPhone5 (portrait)
   iPhone6	> 375px && <667px	iPhone6 (landscape or portrait)
   iPhone6Landscape	> 375px && <667px	iPhone6 (landscape)
   iPhone6Portrait	> 375px && <667px	iPhone6 (portrait)
   iPhone6Plus	> 414px && <736px	iPhone6 Plus (landscape or portrait)
   iPhone6PlusLandscape	> 414px && <736px	iPhone6 Plus (landscape)
   iPhone6PlusPortrait	> 414px && <736px	iPhone6 Plus (portrait)

   import { mediaIos } from 'k2-media';
   
   /* in css */
   `
   display: flex;
       ${ mediaIos.screenMd }{
           display: inline-flex;
       }
   `
   

SASS

TBD

Changelog

Version 0.4.0

• 📝 Added docs

k2-media's Issues

Sample issue

Sample issue 3

Add viewport as an enum

Sampel issue 2

Rename repo

Update docs

• Some tas