Responsive utilities

Furatto provides class names to accelerate the mobile-friendly development, by showing or hiding the content by device managed by media queries.

---

Visibility class names

Furatto provides some responsive utilities for you to hide or show content depending on the screen size is rendering. Credits go to Bootstrap.

	Width < 768px	Width < 992px	Width < 1200px	Width > 1200px
visible-on-xsmall	Visible	Hidden	Hidden	Hidden
visible-on-small	Hidden	Visible	Hidden	Hidden
visible-on-medium	Hidden	Hidden	Visible	Hidden
visible-on-large	Hidden	Hidden	Hidden	Visible
hidden-on-xsmall	Hidden	Visible	Visible	Visible
hidden-on-small	Visible	Hidden	Visible	Visible
hidden-on-medium	Visible	Visible	Hidden	Visible
hidden-on-large	Visible	Visible	Visible	Hidden

---

Orientation visibility

Furatto also provides orientation visibility utilities for you to keep on going.

Name	Description
show-on-portrait	Displays the content when the device is on portrait orientation.
show-on-landscape	Displays the content when the device is on landscape orientation.
hide-on-portrait	Hides the content when the device is on portrait orientation.
hide-on-landscape	Hides the content when the device is on landscape orientation.

---

Available variables

Feel like you need mor customization, you can override our variables to achieve it.

// General settings
$media-display: "only screen" !default;

// Responsive screen sizes
$extra-small-screen: 34.28571429rem !default;
$extra-small-screen-max: 34.21428571rem !default;
$extra-small-media: "(max-width: #{$extra-small-screen-max})" !default;

$small-screen: 54.85714286rem !default;
$small-screen-max: 54.78571429rem !default;
$small-screen-media: "(max-width: #{$small-screen-max})" !default;
$small-screen-range: "(min-width: #{$small-screen}) and (max-width: #{$small-screen-max})" !default;

$medium-screen: 70.85714286rem !default;
$medium-screen-max: 70.78571429rem !default;
$medium-screen-range: "(min-width: #{$medium-screen}) and (max-width: #{$medium-screen-max})" !default;

$large-screen: 85.71428571rem !default;
$large-screen-range: "(min-width: #{$large-screen})" !default;

// Responsive screen orientations
$portrait-media: "#{$media-display} and (orientation: portrait)" !default;
$landscape-media: "#{$media-display} and (orientation: landscape)" !default;