CSS Media Query Helpers – screen.css

Preview:

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>