Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

hidden.less — responsive visibility classnames

npm version bower version FOSSA Status

Responsive classnames generator for hidding some HTML depending on media breakpoints.

Installation

Compiled from CDN
https://unpkg.com/hidden.less@0.0.1/hidden.css
https://unpkg.com/hidden.less@0.0.1/hidden.min.css
https://unpkg.com/hidden.less@0.0.1/hidden.min.css.map

NPM
npm install hidden.less --save-dev

Bower
bower install hidden.less --save

How it works

.hidden-from-*

Hides content from selected breakpoint and on larger screens. Example as rendered in CSS:

@media (min-width: 576px) {
  .hidden-from-sm {
    display: none;
  }
}
xs sm md lg xl
0—575px 576—767px 768—991px 992—1199px 1200—∞px
.hidden hidden hidden hidden hidden hidden
.hidden-from-xs hidden hidden hidden hidden hidden
.hidden-from-sm hidden hidden hidden hidden
.hidden-from-md hidden hidden hidden
.hidden-from-lg hidden hidden
.hidden-from-xl hidden

.hidden-upto-*

Hides content from smaller screens and up to selected breakpoint. Example as rendered in CSS:

@media (max-width: 767px) {
  .hidden-upto-md {
    display: none;
  }
}
xs sm md lg xl
0—575px 576—767px 768—991px 992—1199px 1200—∞px
.hidden-upto-sm hidden
.hidden-upto-md hidden hidden
.hidden-upto-lg hidden hidden hidden
.hidden-upto-xl hidden hidden hidden hidden

.hidden-between-*-*

Hides content from one breakpoint to another.

@media (min-width: 576px) and (max-width: 767px) {
  .hidden-between-sm-md {
    display: none;
  }
}
xs sm md lg xl
0—575px 576—767px 768—991px 992—1199px 1200—∞px
.hidden-between-xs-sm hidden
.hidden-between-sm-md hidden
.hidden-between-md-lg hidden
.hidden-between-lg-xl hidden

.hidden-print

For hidding something on print. Doesn't have any breakpoints.

@media print {
  .hidden-print {
    display: none;
  }
}

Usage in HTML

Link compiled hidden.css and apply classes to any HTML element to make them display:none.

Usage in LESS

Install library with npm install hidden.less --save-dev and include its main file inside your project less file:

@import (less) "./node_modules/hidden.less/hidden.less";

That is enough to run library with default parameters.

Default parameters

Parameters stored in mixin:

.hidden-settings() {
    // media breakpoints
    @breakpoints:
        576px,
        768px,
        992px,
        1200px;

    // names for breakpoint suffixes
    @suffixes: xs, sm, md, lg, xl;

    // IMPORTANT: suffixes count should be bigger than breakpoints count by 1
    // suffixes-count = breakpoints-count + 1
}

Redefining parameters

To change any (or every) parameter add setting mixin after import inside your .less file:

@import (less) "./node_modules/hidden.less/hidden.less";

.hidden-settings() {
    // media breakpoints
    @breakpoints:
        768px,
        1024px,
        1440px;

    // names for breakpoint suffixes
    @suffixes: small, medium, large, huge;

    // IMPORTANT: suffixes count should be bigger than breakpoints count by 1
    // suffixes-count = breakpoints-count + 1
}

In that example was redefined breakpoints and suffix names.

License

FOSSA Status

About

Responsive classname generator for hidding some HTML depending on media breakpoints

Resources

License

Packages

No packages published
You can’t perform that action at this time.