Hello Foundation Theme Experts… Needing a little clarity and confirmation regarding a couple specific things with the Foundation Theme. Your input is valued and appreciated.
Kind Regards,
Dave
REM’s Used With Typography
I believe this is pretty simple and that I understand this one but just want to be sure. All typography in the Foundation Theme is based on an assumed user device font size of 16px. Meaning when I assign a rem value of 2 to an h1 it would display as 32px?
REM’s Sizing With Margin and Padding
If rem’s are used to determine, margin, padding and the gutters of the theme, what are these based on, or should I say what is the base unit?
If the base unit is the users font size which is what it seems like from the tutorial videos, what is the logic behind this thinking.? Fully understand how this makes sense with typography, just not sure how it plays out in responsive design as it relates to page architecture.
Adjusting Margin, Padding and Break Points
I am not seeing where I can make adjustments to margin and padding at varied break points. It appears that I can only define this at one break point then decide if I either want that value applied to other break points or not. Is it possible to give my column stack unique margin and padding for each break point?
If the answer to question 1 is no through the Theme UI what would be the manual work around as this is something that I usually need?
Regarding break points specifically, is there a way to adjust the project are better yet the page break point values or am I locked into the predefined device centric values? This is important as I am accustom to setting break points based on responsive content design needs, not a fixed device model.
The whole point of using REM is to preserve vertical rhythm. It is therefore quite correct and good practice that margins and padding should be defined in rem’s. There are many typography docs online that describe this in detail.
Adjusting Margin, Padding and Break Points
Firstly there are many options for defining padding in rem, px and % in the column stacks.
The actual grid breakpoints are set by the theme at 640px for mobile and1000px for tablet. This is not something that can be changed Many of the stacks though possess custom breakpoint settings to afford further control with difficult content.
Foundation is, of course, a mobile first environment and as with all such frameworks, breakpoints are defined by the devices on which they will be viewed and not the content on the page. The idea of a responsive grid is that it responds to the viewport dimensions and flows the content correctly. I don’t know of any modern environment that looks at the content size and scales the grid to it. That rather defeats the whole idea and is certainly not possible via CSS.
There are cases, with difficult content where it is of course necessary to adopt a content based approach in isolation. This may include font scaling to preserve readability, or in cases such as sections of content that are 100% of the browser height where content clipping needs to be avoided. In such cases there are several stacks available for free from the Big White Duck that will perform these functions and are battle tested in Foundation.
Joe… Was already pretty clear regarding REM’s as they relate to typography, but thanks for confirming as the link only seems to deal with this.
My questions as they relate to the Foundation Theme are pretty well laid out, I would value your input. Would you rather this inquiry be sent through your support email, just thought others in the community would benefit from asking it here.
Kind Regards,
Dave
Andrew: Seems you did not fully understand, apologies if I was not entirely clear. Having control over break points is sometimes quite necessary when it comes to solving responsive layout issues and yes that is even the case with a mobile first approach. If it is a limitation in the Foundation Theme thats totally OK, just want to be clear as to any and all design limitations up front. It takes a lot to build a solution like Joe has done and it can’t address every possible need. Unless one is to hand code a site from scratch there is always going to be a limitation or two, even with such a fine solution like the Foundation Theme.
Further, while it is certainly common to base break point for mobile on the iPhone and tablet on the iPad there are times where the actual break point needs to be adjusted to give the widest range of users the best possible experience. The guys over at Treehouse have some great tutorials that cover some of these topics as they relate to an enhanced UX. Have a look, I think you will find that resource quite helpful.
I believe this is pretty simple and that I understand this one but just want to be sure. All typography in the Foundation Theme is based on an assumed user device font size of 16px. Meaning when I assign a rem value of 2 to an h1 it would display as 32px?
Yes. But the value is not always 16px. Mobile devices is usually 12px. The link I posted early explains that.
REM’s Sizing With Margin and Padding
If rem’s are used to determine, margin, padding and the gutters of the theme, what are these based on, or should I say what is the base unit?
Same as font size.
If the base unit is the users font size which is what it seems like from the tutorial videos, what is the logic behind this thinking.? Fully understand how this makes sense with typography, just not sure how it plays out in responsive design as it relates to page architecture.
The sizes change based on the device you are on. Mobile devices will be smaller since 1rem = 12px.
Adjusting Margin, Padding and Break Points
I am not seeing where I can make adjustments to margin and padding at varied break points. It appears that I can only define this at one break point then decide if I either want that value applied to other break points or not. Is it possible to give my column stack unique margin and padding for each break point?
If the answer to question 1 is no through the Theme UI what would be the manual work around as this is something that I usually need?
Regarding break points specifically, is there a way to adjust the project are better yet the page break point values or am I locked into the predefined device centric values? This is important as I am accustom to setting break points based on responsive content design needs, not a fixed device model.
The 1 Column stack in Foundation has some advanced controls that allow details padding control. You can change the unit (px, rem, %) and completely turn off the padding at predefined breakpoints.
As for the page breakpoints, you are locked in right now. You cannot change those. I have some ideas around this in the far future. However, that will be a ways away until that is possible.
I totally agree, breakpoints are a big issue with the ever expanding number of devices out there. Unfortunately we have already passed the point, in many cases, where simple width breakpoints are not sufficient with the overlap of screen sizes. Foundation does include show/hide functionality based on aspect ratio (as well as screen readers and a host of other things). This can be particularly useful for the dreaded iPhone 6Plus in landscape situation.
I would also re-iterate that although you do not have control over the grid breakpoints at this stage, there are many solutions to this in the stacks and their custom settings. I think it just requires a little re-orientation from the way you may think compared to setting up a framework grid where you have access to the variables in a conventional build.