CSS Media Query Helpers – screen.css

Category: CSS & CSS3 , Recommended | July 21, 2021
Author: rohit-chouhan
Views Total: 63 views
Official Page: Go to website
Last Update: July 21, 2021
License: MIT

Preview:

CSS Media Query Helpers – screen.css

Description:

The screen.css library provides a set of media query helpers for showing, hiding, colonizing, positioning, and resizing elements based on the screen size.

How to use it:

1. To get started, include the screen.css stylesheet on the page.

// All-in-one
<link rel="stylesheet" href="dist/screen.css" />

// Or...

<link rel="stylesheet" href="dist/screen-max-align.css" />
<link rel="stylesheet" href="dist/screen-min-align.css" />

<link rel="stylesheet" href="dist/screen-max-color.css" />
<link rel="stylesheet" href="dist/screen-min-color.css" />

<link rel="stylesheet" href="dist/screen-max-font-size.css" />
<link rel="stylesheet" href="dist/screen-min-font-size.css" />

<link rel="stylesheet" href="dist/screen-max-height-width.css" />
<link rel="stylesheet" href="dist/screen-min-height-width.css" />

<link rel="stylesheet" href="dist/screen-max-show-hide.css" />
<link rel="stylesheet" href="dist/screen-min-show-hide.css" />

2. Alignment content. The breakpoint can be 50, 100, 150, 200, 250, …

  • text-align-left-min{breakpoint}
  • text-align-left-max{breakpoint}
  • text-align-right-min{breakpoint}
  • text-align-right-max{breakpoint}
  • text-align-center-min{breakpoint}
  • text-align-center-max{breakpoint}
  • items-align-left-min{breakpoint}
  • items-align-left-max{breakpoint}
  • items-align-right-min{breakpoint}
  • items-align-right-max{breakpoint}
  • items-align-center-min{breakpoint}
  • items-align-center-max{breakpoint}
  • content-align-left-min{breakpoint}
  • content-align-left-max{breakpoint}
  • content-align-right-min{breakpoint}
  • content-align-right-max{breakpoint}
  • content-align-center-min{breakpoint}
  • content-align-center-max{breakpoint}
<p class="text-align-left-min750">Resize The Window To See The Magic</p>

3. Set text & background colors. The breakpoint can be 50, 100, 150, 200, 250, …

  • fcolor-{color}-min{breakpoint}
  • fcolor-{color}-max{breakpoint}
  • bcolor-{color}-min{breakpoint}
  • bcolor-{color}-max{breakpoint}
<p class="fcolor-red-min750">Resize The Window To See The Magic</p>

4. Adjust the font size. The breakpoint can be 50, 100, 150, 200, 250, …

  • fsize-{sizeInPx}-min{breakpoint}
  • fsize-{sizeInPx}-max{breakpoint}
<p class="fsize-40-min750">Resize The Window To See The Magic</p>

5. Set the height/width of a block element. The breakpoint can be 50, 100, 150, 200, 250, …

<div class="height-400-min750">Resize The Window To See The Magic</div>

6. Show/hide your content. The breakpoint can be 50, 100, 150, 200, 250, …

  • show-min{breakpoint}
  • show-max{breakpoint}
  • hide-min{breakpoint}
  • hide-max{breakpoint}
<p class="hide-min750">Resize The Window To See The Magic</p>

You Might Be Interested In:


Leave a Reply