CSS Media Query Helpers – screen.css


Author: rohit-chouhan
Views Total: 118 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>
See also  Custom Accessible Tooltip with Html5 and CSS

Leave a Reply

Your email address will not be published. Required fields are marked *