A complete media query framework for CSS, to apply specific properties in specific screen

Related tags

Learning resource css mobile framework media screen
Overview



A complete media query framework for CSS, to apply specific properties in specific screen
Note: Size of every media query is `50px, 100px, 150px, 200px, 250px ....... 2500px`

CDN

All-in-one

This is all-in-one CSS, its may make your site slow, We recommanded to use single css for each class. see below.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rohit-chouhan/screen.css/dist/screen.css" type="text/css"/>

For Single

screen-max-show-hide.css, screen-min-show-hide.css, screen-max-color.css,screen-min-color.css,screen-max-font-size.css, screen-min-font-size.css, screen-max-height-width.css, screen-min-height-width.css

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rohit-chouhan/screen.css/dist/<css-file-here>" type="text/css"/>

Usage

Always use type with dash scope (max or min) in the last of class with size, -max300, -min600.

{class}{type}
hide-{type}{width-size}
<!-- example for max -->
hide-max900
<!-- example for min -->
hide-min900

Classes for Hide & Show

Class Example Description
hide-{type}{width} hide-max600 hide specific content
show-{type}{width} show-min600 show specific content

Classes for Color

Class Example Description
fcolor-{color} fcolor-red-max400 Color the font
bcolor-{color} bcolor-red-max400 Color on Background

Classes for Size

All size will denotes as pixel (px) only. font max size is 854px. height-width max size is 1193px.

Class Example Description
fsize-{size} fsize-20-max700 Resize font
height-{size} height-400-min400 Resize Height of elements
weight-{size} width-300-max400 Resize Width of elements

Note

In the first version this framework is only have classes for show & hide, font-color, font-size, height, width, background, text-align, align-contents, align-items.

Create an issue if you want more feature or any property, thank you.

Created by Rohit Chouhan

You might also like...

Zenload - "Load couple loaders and apply transform one-by-one

Zenload Load couple loaders and apply transforms one-by-one. Install npm i zenload -g How to use? With env vairable ZENLOAD: NODE_OPTIONS='"--loader

Jan 25, 2022

Sorting visualizer to introduce students to different sorting algorithms, how they work, and how to apply them

sorting-visualizer Sorting visualizer to introduce students to different sorting algorithms, how they work, and how to apply them Iteration 1 Demo: ht

Nov 14, 2022

Ready to manipulate partitions file? Create a custom partition, apply custom security system, hide the partition and share your hidden data on the www

Ready to manipulate partitions file? Create a custom partition, apply custom security system, hide the partition and share your hidden data on the www

Paranoia đź’Š Ready to manipulate partitions file? Create a custom partition, apply custom security system, hide the partition and share your hidden dat

Dec 29, 2022

Apply IPO From Multiple Meroshare Accounts at Once.

Apply IPO From Multiple Meroshare Accounts at Once.

⚙️ HamroShare : Batch IPO Applier HamroShare is a minimal web-application that lets you apply for IPOs from multiple meroshare accounts at once. Note:

Nov 15, 2022

🌗 1 line of code to apply auto dark / light theme and support custom theme for your website. Super fast and lightweight theme library.

themes.js A super lightweight and fast Theme library with auto system color scheme detection in JavaScript. Features Auto detect Dark / Light mode by

Nov 29, 2022

Apply version control to databases from within a Node.js application.

Node Flyway Apply version control to databases from within a Node.js application. Uses Flyway for database version control, schema evolution and migra

Sep 6, 2022

Interactive To Do List, draggable tasks, optimized for desktop and mobile screen sizes. It reserves data in local storage. Built with HTML, CSS, and JavaScript.

To Do List Interactive daily To-Do List Built With Major languages: html, css, javascript Frameworks: Technologies used: Webpack Live Demo Live Demo L

Aug 4, 2022

Instagram.css - Complete set of Instagram filters in pure CSS

Instagram.css Instagram.css - Pure CSS Instagram filters. You can add all these Instagram-like filters to your photos with using CSS only. Thanks to t

Dec 30, 2022

A package to toggle properties of your HTML tags.

A package to toggle properties of your HTML tags.

Toggler A package(atleast the code) to toggle properties of tags. I mostly use toggle classes while making a switch theme method, button interaction e

Jan 9, 2022
Releases(latest)
Owner
Rohit Chouhan
Software/JavaScript Engineer Deloitte
Rohit Chouhan
GitHub
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Social-Media-Dashboard - RESPONSIVE Dashboard for social media created with JS, HTML and CSS and with the ability to switch between DARK THEME and LIGHT THEME

Social Media Dashboard Projeto feito com base no desafio do site Front End Mento

Israel Lima 1 Feb 3, 2022
A simple query builder, it will helps to develop DSL query for Elasticsearch

Elasticsearch Dynamic Query Builder A simple query builder, it will helps to develop DSL query for elasticsearch Installation You can start it from np

Hashemi Rafsan 4 Nov 20, 2022
A social media platform aimed to capture the essence of all popular, existing social media platforms

Social Fuel Reimagining Social Media, step by step ?? About A social media platform aimed to capture the essence of all popular, existing social media

HariHaran 6 Feb 12, 2022
A JavaScript library to apply light-dark theme in web pages with the help of css variables

Theme Changer The simplest JavaScript library to apply light - dark theme in your website. First Check Out One Example How to use Files index.html sty

Abinash Karmakar 8 Dec 20, 2022
CSS only library to apply color filters.

filters.css CSS only library to apply color filters. See the full documentation Features Only CSS. No JavaScript! ~1KB minified and gzipped! Supports

Jitender Bansal 340 Dec 17, 2022
Extract CSS custom properties and a JavaScript config from Drupal's theme breakpoints

Drupal breakpoints to CSS To eliminate the need for different places for breakpoints and only maintain a single source of truth for those, this node_m

Factorial 4 Nov 21, 2022
In this project, I built a to-do list app, which is inspired by the minimalist website. Build withHTML/CSS & JavaScript best practices: Correct use of tags, elements, properties and syntax.

Webpack Exercise In this project, I built a to-do list app, which is inspired by the minimalist website. Built With HTML/CSS & JavaScript best practic

Vanessa Oliveros 3 Oct 11, 2022
It is a simple yet powerful to do list app in which you can add daily to-do tasks.you can edit, remove, check it to change its status to complete or not complete. it would save all the data and changes in local storage and track your daily tasks whether you have completed them or not.Built with vanilla JavaScript

To Do list - minimalist It is a simple yet powerful to do list app in which you can add daily to-do tasks. it would save all the data and changes in l

Zuhaib Amjad 5 Oct 9, 2022