| Feature / Desired application | Bootstrap | Foundation |
|---|
| Responsive layouts | - 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.
| |
| Style reset | | |
| 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.
| |
| Ease of customizing default styles | | |
| 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.
| |
| Custom builds | | |
| 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 custom build | | |
| UIO Theme generation using preprocessor | | |
| Effects of custom Bootstrap build with default Bootstrap | | N/A |
| Effects of custom Bootstrap build with default Foundation | | |
| Effects of custom Foundation build with default Foundation | N/A | |
| Effects of custom Foundation build with default Bootstrap | | |
| Nice to have - tooltips | | |