Holy <expleitive> the button CSS is huge

[CouleeApps]

Here, I'll give you a single button's CSS.

text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);
background-color:#00406b;
background-image:-moz-linear-gradient(top, #005580, #00204d);
background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#005580), to(#00204d));
background-image:-webkit-linear-gradient(top, #005580, #00204d);
background-image:-o-linear-gradient(top, #005580, #00204d);
background-image:linear-gradient(to bottom, #005580, #00204d);
background-repeat:repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff005580', endColorstr='#ff00204d', GradientType=0);
background-color:#00406b;
background-image:-moz-linear-gradient(top, #005580, #00204d);
background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#005580), to(#00204d));
background-image:-webkit-linear-gradient(top, #005580, #00204d);
background-image:-o-linear-gradient(top, #005580, #00204d);
background-image:linear-gradient(to bottom, #005580, #00204d);
background-repeat:repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff005580', endColorstr='#ff00204d', GradientType=0);
border-color:#00204d #00204d #000000;
border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
color:#ffffff;
text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);
background-color:#00406b;
background-image:-moz-linear-gradient(top, #005580, #00204d);
background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#005580), to(#00204d));
background-image:-webkit-linear-gradient(top, #005580, #00204d);
background-image:-o-linear-gradient(top, #005580, #00204d);
background-image:linear-gradient(to bottom, #005580, #00204d);
background-repeat:repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff005580', endColorstr='#ff00204d', GradientType=0);
background-color:#00406b;
background-image:-moz-linear-gradient(top, #005580, #00204d);
background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#005580), to(#00204d));
background-image:-webkit-linear-gradient(top, #005580, #00204d);
background-image:-o-linear-gradient(top, #005580, #00204d);
background-image:linear-gradient(to bottom, #005580, #00204d);
background-repeat:repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff005580', endColorstr='#ff00204d', GradientType=0);
border-color:#00204d #00204d #000000;
border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color:#00204d;
filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);
filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);
color:#ffffff;
text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);
background-color:#00406b;
background-image:-moz-linear-gradient(top, #005580, #00204d);
background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#005580), to(#00204d));
background-image:-webkit-linear-gradient(top, #005580, #00204d);
background-image:-o-linear-gradient(top, #005580, #00204d);
background-image:linear-gradient(to bottom, #005580, #00204d);
background-repeat:repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff005580', endColorstr='#ff00204d', GradientType=0);
background-color:#00406b;
background-image:-moz-linear-gradient(top, #005580, #00204d);
background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#005580), to(#00204d));
background-image:-webkit-linear-gradient(top, #005580, #00204d);
background-image:-o-linear-gradient(top, #005580, #00204d);
background-image:linear-gradient(to bottom, #005580, #00204d);
background-repeat:repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff005580', endColorstr='#ff00204d', GradientType=0);
border-color:#00204d #00204d #000000;
border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
color:#ffffff;
text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);
background-color:#00406b;
background-image:-moz-linear-gradient(top, #005580, #00204d);
background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#005580), to(#00204d));
background-image:-webkit-linear-gradient(top, #005580, #00204d);
background-image:-o-linear-gradient(top, #005580, #00204d);
background-image:linear-gradient(to bottom, #005580, #00204d);
background-repeat:repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff005580', endColorstr='#ff00204d', GradientType=0);
background-color:#00406b;
background-image:-moz-linear-gradient(top, #005580, #00204d);
background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#005580), to(#00204d));
background-image:-webkit-linear-gradient(top, #005580, #00204d);
background-image:-o-linear-gradient(top, #005580, #00204d);
background-image:linear-gradient(to bottom, #005580, #00204d);
background-repeat:repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff005580', endColorstr='#ff00204d', GradientType=0);
border-color:#00204d #00204d #000000;
border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color:#00204d;
filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);
filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);
}.btn-primary:hover,.btn-primary:active,.btn-primary.active,.btn-primary.disabled,.btn-primary[disabled]{color:#ffffff;
background-color:#00204d;
*background-color:#001533;
}
.btn-primary:active,.btn-primary.active{background-color:#000b19 \9;
}
.btn-primary:hover,.btn-primary:active,.btn-primary.active,.btn-primary.disabled,.btn-primary[disabled]{color:#ffffff;
background-color:#00204d;
*background-color:#001533;
}
.btn-primary:active,.btn-primary.active{background-color:#000b19 \9;
}

Yes. Go prove me wrong: bootstrap.css line 620. I DARE you.

What the expletive.

Edit: Stats: 5,460 chars per button, 712 words, 4 lines Six buttons total.

Image for reference

[CouleeApps]

@OwenVersteeg i'm looking at you on this one.

[owenversteeg]

That's a bit large but really, what does that effect bandwidth-wise? Almost nothing. This is Bootstrap, and as-such very visually awesome.

At this point, I want to comment that the entire Bootstrap altogether takes 224 msec to load. How much does this contribute to that? Probably not much.

Pingdom reference of pageload time: http://tools.pingdom.com/fpt/#!/GIcjBVtT3/http://hanoverhs.org/

[tiggerntatie]

1/4 sec over a high speed connection is one thing, but on a mobile device the first visit to the site might be painful. In principle, the bandwidth should be negligible on return visits if CSS is cached by the browser. Return visits bear the burden of processing the CSS, but not downloading it. With proper design all of the CSS governs only the design or appearance of the site and is cached. If there is a limit to what can be cached in a mobile browser (?), then it would become an issue.

On Sat, Sep 29, 2012 at 8:18 PM, Owen Versteeg notifications@github.comwrote:

That's a bit large but really, what does that effect bandwidth-wise? Almost nothing. This is Bootstrap, and as-such very visually awesome.

At this point, I want to comment that the entire Bootstrap altogether takes 224 msec to load. How much does this contribute to that? Probably not much.

Pingdom reference of pageload time: http://tools.pingdom.com/fpt/#!/GIcjBVtT3/http://hanoverhs.org/

— Reply to this email directly or view it on GitHubhttps://github.com/HanoverHighSchool/hhswebsite/issues/32#issuecomment-9009569.

[owenversteeg]

@tiggerntatie The difference is not huge, but not ignorable either - viewing the site over a 3G connection makes loading take 1320 msec vs 630 msec to load w/ a highspeed connection. (In this case, "load" means that the page is completely loaded other than fonts and interactivity) CSS rendering speeds in all modern browsers are negligible and even if the FOUC lasts for long enough to be visible, our page when unstyled is simply a textual version of the current page and not jumbled, as the current site is quite standards-compliant (mostly w/ the spirit rather than the letter of the law on this one)

I'm sure the Bootstrap devs thought out every change they made to the CSS - I've participated in the project and I know how every line is forced to count. So I'd reccomend leaving this as-is, unless we want to make our own CSS framework (which, seeing as nobody either has the time or the skills, would be difficult).

source: http://www.wolframalpha.com/input/?i=33+kB+over+a+3G+connection