a UX cocktail with a southern twist

Supported Devices

Like the masters at Skeleton, Sazerac defines a series of sizes for different devices and screen resolutions. This table lists the supported sizes:

Label Less file Layout
#Large responsive-large.less 1200px and up
#Default grid.less 960px and up & 1199px and bellow
#Portrait responsive-portrait.less 768px and up & 959px and bellow
#Tablet responsive-tablet.less 480px and up & 767px and bellow
#Mobile responsive-mobile.less 479px and bellow

Each of the LESS files include the responsive classes: responsive-large.less, responsive-portrait.less, responsive-tablet.less and responsive-mobile.less. These can be edited or deleted from sazerac.less without compromising resolution, the design adapts to the size immediately before it.

NOTE: The only size that you cannot delete is grid.less. This file should always be above the responsive-*.less when you are ready to compile.

Responsive Casses

Sazerac borrowed these classes directly from the geniuses at Bootstrap. They allow you to show and hid content and/or other elements depending on the device being used..

Supported classes are listed below:.

Class Phone Tablet Desktop
.visible-phone Visible
.visible-tablet Visible
.visible-desktop Visible
.hidden-phone Visible Visible
.hidden-tablet Visible Visible
.hidden-desktop Visible Visible

Test Case

Here is an example of what wé're talking about. Resize your navigator and see for yourself.

Visible on...

  • PhonePhone
  • TabletTablet
  • DesktopDesktop

Hidden on...

  • PhonePhone
  • TabletTablet
  • DesktopDesktop