Adding Bootstrap to EWF UI - problems

1

I had some success with adding these media queries to my project’s style sheet:

@media( max-width: 1000px ) {
    body {
        width: auto;
    }
}

@media( max-width: 700px) {
    body {
        font-size: 1.5em;
    }
}

So I tried to keep going by taking a page where I have a row of three buttons and making it use Bootstrap to stack into 3 rows if the screen is too narrow. I added Bootstrap via a CssInfo using a CDN. Two negative things happened. First, something about the fonts changed, causing text to wrap that used to not wrap (throughout the system, but only in a few places), or be bold when it didn’t used to be bold. Noticeable and worse but not a total upheaval of the UI. I guess this sort of makes sense because all the styles added in Global come after the default styles, so it’s probably winning in a few places, and if EWL added bootstrap itself, first, this may not happen.

Second, all of my media query progress above was erased, regardless of whether I returned the Bootstrap CssInfo before or after my own sheet in the list. Resizing the browser width does not - er, just figured out while writing this that my media queries still work but it’s really the exact same problem as above - instead of my fonts increasing to 1.5em like they should, fonts are getting steamrolled by Bootstrap somehow. Actually, my fonts ARE increasing to 1.5em, it’s just that 1.5EM is a way smaller size than it was before (which is odd, because the original font size doesn’t look very different). Bottom line is that Bootstrap styles are mucking with the fonts so it’s kind of hard to use this piecemeal. Oh well.

2 Likes
2

Turns out that Bootstrap uses pixel sizes for fonts. And Foundation (a chief competitor) uses rems instead. This could turn the tide (or really just make it a more appropriate choice for EWL). Here are some links:


http://filamentgroup.com/lab/how_we_learned_to_leave_body_font_size_alone/

Bootstrap says that in V4 when they drop IE8 support, they may drop pixels and move to em. And I guess there’s something called Susy if you just want adaptive grids, which may be easier to integrate pieecmeal (just because Foundation uses ems doesn’t mean it won’t trod on EWl’s fonts anyway).

1 Like
3

Everyone seems to be really upset with bootstrap choosing to use pixels for their font size. Looks like they added using REM to their roadmap.

4

http://responsive.vermilion.com/compare.php

5

That comparison reinforces what we were thinking: Skeleton and Susy are probably great tools but in terms of adoption and stability, Bootstrap and Foundation are in front (Susy is not on the list - Skeleton is one dude and according to its own web site hasn’t had many updates recently, Foundation seems to get a major upgrade ever year).

Notice that Foundation uses ems for media queries as well as font size. Bootstrap uses pixel media queries.

6

Alright I’m sold on em now: http://stackoverflow.com/questions/22228568/switching-to-em-based-media-queries