Breakpoints Setup

Enabling Breakpoints will allow you to define the responsive behavior of your Grids Stack. There are two “Breakpoints” that you are able to define. The first one titled “Tablet” is set to 840px which is Pure’s default width for tablet browsers. The second one is titled “Mobile” and is set to 640px which is Pure’s default width for mobile browsers. Adjusting the column values underneath each section will change the grid layout for browser widths that are equal to or lesser than the breakpoint value.

Example

If I set 3 columns in the grid stack to 1/3 widths and leave columns 4-6 Off
Stacks Image 18876
and set the “Tablet” breakpoint to 840px. I can change the 3 column widths to: 1, 1/2, 1/2 to create a layout the fits tablets screens better.
Stacks Image 18880
Note: You do not need to adjust the values of columns 4-6 since we have turned them off in the Width Settings menu.
Now I right click the Stacks page and select “Preview Page With…” and then select my browser.
I then adjust my browser width to a narrow 840px size to see how the Grids Stack responds.
The “Tablet” breakpoint now defines the layout above for tablet browsers and shows the layout below to desktop browsers who have more width room to fit content.
More on Breakpoints

If the default breakpoint values do not fit your specific site well you may adjust by increasing or decreasing them until you get a good fit. It should be said that you are not limited to making adjustments to tablet and mobile browsers (These are just titles with matching default values ). You can set the value to whatever you like, for example 1024px which would allow you to adjust for small desktop screens. If you would like to only have one breakpoint, you can even set the “Mobile” value to 0px and only use the “Tablet” section.

Here are some default breakpoint values that work well with Pure for RapidWeaver: 1280px (Desktop), 1024px (Small Desktop), 840px (Tablet), 640px (Mobile).

Hiding Content

Along with setting different width values for each breakpoint, you are also able to choose to hide certain content. Just select the “Hide” value in the breakpoint settings or the width settings if you would like to hide content on desktop browser widths.

Example

If I want to have unique content for each of these browser widths (Desktop, Tablet, and Mobile) I can add a Grids Stack with columns 1-3 set to 1(100%), hide, and hide. And set columns 4-6 to Off.
Stacks Image 18898
Now in the breakpoint settings I will set the Tablet column values to hide, 1(100%), hide and the Mobile column values to hide, hide, 1(100%).
Stacks Image 18902
Now in the editor I will have three “Drop Stacks Here” sections for columns 1-3. Anything I place inside column 1 will only display to desktops, things in column 2 will only display to tablets, and things in column3 will only display to mobile browser widths.
Stacks Image 18872

Breakpoints.

This is a FREE update to Pure for RapidWeaver. If you don’t have Pure you can purchase it through the link below.
This is a FREE update to Pure for RapidWeaver. If you don’t have Pure you can purchase it through the link below.
© 2015 1LD