Author: | rohit-chouhan |
---|---|
Views Total: | 145 views |
Official Page: | Go to website |
Last Update: | July 21, 2021 |
License: | MIT |
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>