|Feature / Desired application||Bootstrap||Foundation|
- Bootstrap uses fixed width containers that "snap" across breakpoints
- Grid layout needs to follow a container-row-column hierarchy. Otherwise 15px paddings / margins don't align properly.
- Foundation uses fluid width containers that stretch and shrink depending on the size of the client, with relevant breakpoints.
- Foundation has a row-column hierarchy with paddings on the columns only. Row is only for containment.
- normalize.css is included in default package, but optional whether or not it is used in your markup.
|Units in EMs|
Current release (v3) uses pixels and not EMs. However, v4 (unreleased) will support EMs. See Mark Otto's January 9th response in this thread on Github.
- Note: EMs will be supported. Unclear if REMs will be used.
- UIO works well with Bootstrap's pixel units, although EMs are more desirable.
|Foundation 5 uses REM units throughout. The exception being media queries which use EM units.|
- REMs are desirable and easier to use for CSS styling than EM because REMs always refer to the root EM and not the parent EM as with EM units.
- REM units currently do not scale properly in UI Options. See
FLUID-4698Getting issue details...
|Ease of using default styles in a heavily customized application|
- +/-15px margin and padding on container, rows, and columns dictate a hierarchy and usage pattern. Customizing this or deviating from this pattern causes unintentional and unwanted alignment issues which can be hard to correct (involves overriding).
- This hierarchy is required to ensure good scalable layouts.
- Working with Foundation within a heavily customized application seemed very straight forward. Some styles needed to be overridden, but that was expected.
- Foundation button has !important for font weight
|Use of !important|
- important used for print media styling, visibility of collapsing navbar, and visible and hidden elements.
- no use of !important on html elements
- Important primarily used to position starting and ending Foundation classes such as offsets, start and end of navigation containers, hide/show elements (i.e. "hide-for-large"), and custom components (like Joyride widget).
- Uses of !important on html elements
- button: font-weight: normal !important;
- select: webkit - appearance: none !important;
|Namespacing framework classnames|
- Bootstrap uses generic classnames which may cause classname collisions.
- A work-around is to use LESS or Sass to add a named container. See this as a possible solution: https://coderwall.com/p/uiwcow
|UIO Theme generation using default build|| || |
| || |
|UIO Theme generation using preprocessor|| || |
|Effects of custom Bootstrap build with default Bootstrap|
| || |
| || |
|Nice to have - tooltips|| || |