Fullscreen Sections

Fullscreen Sections Classes

Fullscreen sections are sections that will span the full height of the device window. They can be used as stand alone sections to showcase something specific or combined into multiple sections to showcase a series of images or elements.

Fullscreen sections have a number of helper classes for setting background position, background size and and overlay color. Below is an example of each class:

Fixed Background

By default background images that are added to a fullscreen section have an absolute position, which means they scroll with the content. To give them a fixed position, we add the .background-fixed class to the fullscreen section wrapper.

Example
								
									

Background Size

By default background images are not resized, but we can force the image to cover the full width and height of the fullscreen section by adding the .background-cover class to the fullscreen section wrapper.

Example
								
									

Alternatively, if we we want to contain our background image within its wrapper we can do so by adding the .background-contain class to the fullscreen section wrapper.

Example
								
									

No Overlay

Fullscreen content, by default, is given a semi transparent background color to ensure that it stands out irregardless of the image. Target .fullscreen-section.no-overlay .fullscreen-inner to change overlay color. We can remove the background color by adding the .no-overlay class to the fullscreen section wrapper.

With Overlay

fullscreen example 1

Without Overlay

fullscreen example 2
Example
								
									

...


Fullscreen sections by default have no navigation. The script will automatically create section navigation if we wrap all fullscreen sections in a wrapper with the class .fullscreen-sections-wrapper and give each fullscreen section a unique id.

fullscreen example 3
Example
								
									

...

...


Hide Navigation New

There may be situations when we want to use multiple fullscreen sections throughout a page layout but without section navigation. We can prevent the script from adding any section navigation by adding the .no-navigation class to the .fullscreen-sections-wrapper.

Example
								
									

...

...


Scaling Fullscreen Sections New

By default, fullscreen sections scale according to the device window and any content within a fullscreen section will always overlay the background image. This may be conveniant when the text requires more focus than the background image itself. However, on smaller devices the text may overflow it's container; in situations like these we have a few tools at our disposal to make sure the content flows nicely from top to bottom.

1. Content Below

We can force the fullscreen section content below the fullscreen image on mobile so that it does not overlow its container. This is done by adding the .content-below-on-mobile class to the .fullscreen-section wrapper.

Content Overlay

fullscreen content over

Content Below

fullscreen content below
Example
								
									

...

2. Scale Image

To create a more harmonious flow of content we can also scale the fullscreen image so that it is fully visible much like a thumbnail would be. We force the script to scale the background image by specifying the original background image width and height. This is specified using the attributes data-width and data-height which are added to the .fullscreen-section wrapper.

fullscreen content below
Example
								
									

...

3. Minimum Height

There may be situations where we would like to provide a minimum height for the scaled background image. This is particularly useful when the .background-contain class is used or when a portrait image is used. To stop the script from scaling beyond a certain height we simply add the data-min-height to the .fullscreen-section wrapper.

fullscreen content below
Example
								
									

...

Note: There is no need to add the .content-below-on-mobile class if height and width are specified using the width and height data attributes. The class is automatically added by the script.


CSS For Retina Displays

We suggest creating specific classes for each background image that you add to each fullscreen section as shown in the above example (i.e. bkg-image-1, bkg-image-2 etc.). The main reason for this is that you can then server a higher resolution images for retina displays by targeting these classes using the media queries below. Note: The CSS targeting below is just an example; replace with the classes you have created.

								
									.bkg-image-1{
										background-image:url(../images/slider/bkg-image-1.jpg);
									}
									.bkg-image-2{
										background-image:url(../images/slider/bkg-image-2.jpg);
									}

									@media
									only screen and (-webkit-min-device-pixel-ratio: 2),
									only screen and (		min--moz-device-pixel-ratio: 2),
									only screen and (			-o-min-device-pixel-ratio: 2/1),
									only screen and (				min-device-pixel-ratio: 2),
									only screen and (					min-resolution: 192dpi),
									only screen and (						min-resolution: 2dppx) { 
											.bkg-image-1{
												background-image:url(../images/slider/[email protected]);
											}
											.bkg-image-2{
												background-image:url(../images/slider/[email protected]);
											}
									}
								
							

Fullscreen Content

Fullscreen section content can be positioned in a number of ways. Use a combination of column classes, text alignment classes such as .left, .center, or .right to align text horizontally, and .v-align-bottom or .v-align-top to vertically align content. Note: Content is by default center aligned and vertically aligned middle. For more information on helper classes please visit this section of the Framwork Documentation. The above mentioned helper classes should be added to the .fullscreen-inner wrapper as shown below.

Example
								
									

...