hidden.less
v0.0.1
Published
Responsive classname generator for hidding some HTML depending on media breakpoints
Downloads
2
Maintainers
Readme
hidden.less — responsive visibility classnames
Responsive classnames generator for hidding some HTML depending on media breakpoints.
Installation
Compiled from CDNhttps://unpkg.com/[email protected]/hidden.css
https://unpkg.com/[email protected]/hidden.min.css
https://unpkg.com/[email protected]/hidden.min.css.map
NPMnpm install hidden.less --save-dev
Bowerbower 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.