Responsiveness

Elenore is a mobile-first framework

Vertical by default #

Every element in Elenore is mobile-first and optimizes for vertical reading, so by default on mobile:

columns are stacked vertically
the level component will show its children stacked vertically
the nav menu will be hidden

For example, you can enforce the horizontal layout for both columns or nav by appending the is-mobile modifier.

Breakpoints #

Elenore has 5 breakpoints:

mobile: up to 768px
tablet: from 769px
desktop: from 1024px
widescreen: from 1216px
fullhd: from 1408px

Elenore uses 9 responsive mixins:

=mobile
until 768px
=tablet
from 769px
=tablet-only
from 769px and until 1023px
=touch
until 1023px
=desktop
from 1024px
=desktop-only
from 1024px and until 1215px
=widescreen
from 1216px
=widescreen-only
from 1216px and until 1407px
=fullhd
from 1408px

Mobile Up to `768px`	Tablet Between `769px` and `1023px`	Desktop Between `1024px` and `1215px`	Widescreen Between `1216px` and `1407px`	FullHD `1408px` and above
mobile	-
-	tablet
-		desktop
-			widescreen
-				fullhd
-	tablet-only	-
-		desktop-only	-
-			widescreen-only	-
touch		-
until-widescreen			-
until-fullhd				-

Disabling breakpoints #

New! 1.4.1

By default, the $widecreen and $fullhd breakpoints are enabled. You can disable them by setting the corresponding Sass boolean to false:

      // Disable the widescreen breakpoint
$widescreen-enabled: false

// Disable the fullhd breakpoint
$fullhd-enabled: false
    

Variables #

You can use these variables to customize the responsive breakpoints. Simply set one or multiple of these variables before importing Elenore. Learn how.

Name	Default value
Name	Default value
`$gap`	`32px`
`$tablet`	`769px`
`$desktop`	`960px + (2 * $gap)`
`$widescreen`	`1152px + (2 * $gap)`
`$fullhd`	`1344px + (2 * $gap)`

This page is open source. View on GitHub