Testing Bootstrap 2.30!

[karlo]

http://blog.getbootstrap.com/2013/02/07/bootstrap-2-3-released/

Anyone notice anything broken? Overall I think nope.

One thing though. Thanks to a accessibility guy from Opera they have made it so that all :hover declarations now also have :focus. Github has the info but this is what made him suggest http://24ways.org/2009/dont-lose-your-focus/ Idea is to re-enable “outline” feature AFTER it is disabled. To enable navigation via keyboard without using visually nasty tricks like outline. Result: potentially funky 🙂 Sliders for example, forward/back icons/buttons. They work on “a” element so might need to be checked. Possible xxxxx:focus { text-decoration: none }

Boils down to 1 line difference:

For current BS in JS

a:hover {
color: #005580;
text-decoration: underline;
}

BS 2.30 use this

a:hover,
a:focus {
  color: #005580;
  text-decoration: underline;
}

But that is all so far. Not really possible or meaningful to test everything but it seems safe. Version 3 is another matter.

Btw. for the 1 or 2 digging micro optimization or running super popular sites AND use Netdna CDN for BS. Dont! They messed up 2.3.0 big time. http://netdna.bootstrapcdn.com/ You want “Complete Bootstrap CSS (Without Icons)” and perhaps even FontAwesome. Both work with JS. All latest versions. So cool. And then not! Try this, search 2.3.0 file for “accordion”, oooops. Not there. Now try version 2.2.1 http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap.no-icons.min.css YES, is there. I conclude they are idiots.

Like JS, they made a customized build of BS but clicked wrong buttons. There is more btw. Modals are also screwed. I nearly made a post here suggesting BS 2.3.0 is evil when used with JS. Then I got the idea to actually check their build. They have build on github but I cant be bothered to complain about such newbie mistakes. Idea is cool but when they mess up like this it is best not to use. http://www.jsdelivr.com/ might be better but check what is actually in the code! What ever is used should match what is in JS – basically default with icons.

Only thing, except for “icons”, I think JS remove from BS is the print media stuff. In 2.3.0 they also added some new “dont print” utility class in 2.3.0 so may be an idea to not exclude that code? Is useless as a “feature” because what ever they put in there it wont match all sites. Is ugly with code and ugly without code. But with code is a better starting point than zero right? Can also just use what HTML5boilerplate use but also has to be modified to each site. Well, a good start I presume and not really any reason to remove that little snippet? Any standard/CSS geek will say site is not complete if it cant be printed but most probably could not care less 😉 Can be a LOT of work to make any page/post print perfectly. Well, I would vote to not exclude “@media print ”

Topic

[karlo]

Damnation, cant edit post “Forum ID missing”. BBpress!

Also tested with jQuery 1.9.1 and latest PrettyPhoto 3.15 (with JS fix applied (why does PrettyPhoto not fix this?) ) = no screaming 🙂 They do say they updated to jQuery 1.9 but dont think it means version 1.8.3 used in current WordPress wont work. Same thing. jQuery 1.9.x should only be used with migrate.js http://jquery.com/download/ If not then good luck, especially with jQuery code in WordPress plugins 😉 It make old deprecated or even removed code work.

[Jason Bobich]

Also tested with jQuery 1.9.1 and latest PrettyPhoto 3.15 (with JS fix applied (why does PrettyPhoto not fix this?) )

I’m not sure what you’re referencing here. You’re saying that the current prettyPhoto doesn’t work with jQuery 1.9? And what javascript fix are you referring to? Are you just talking about my responsive changes?

Side note: I always get confused when you use JS… never know if you’re talking about Jump Start or Javascript lol

[karlo]

Yes I know, JS is JS, jQuery is jQuery. That leaves Jump Start for Jump Start 🙂 BS? No Bootstrap!

I am not saying Jump Start + jQuery 1.9.x does not work, PrettyPhoto dev. hints that, or something http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/

“3.1.5:
Fixed:Now works with jQuery 1.9
Dropped: Support for IE6”

Of course question is what issues he is refering to. Could simply mean removal of stuff like “.live” – making it “fully” compatible with 1.9. No need for migrate.js Those who test jQuery 1.9.x with no migrate.js will see what ever not 100% 1.9 compatible as broken. Devs. probably have different views on these things. If X works 100% with migrate.applied is it then really working? And blah blah.

Yes I am refering to your viewport fix. Strange PrettyPhoto dev does not implement something similar but I have noticed he talk about new refactored version so probably saving up for that instead of polishing “old”. He is “busy”. Some have suggested he change “invalid” “rel=” to “data-xxx=” so HTML5 validators are happy and he say wait for new version… I was trying to make own PrettyPhoto theme so had to dig in. Had not noticed any breakage with PrettyPhoto in my Jump Start tests, regardless of jQuery version. I never assume there cant be any so seeing it continue to pop up stuff with latest and perhaps greatest is good 🙂 Is 100 times better to test for and catch issues now than the day WordPress 3.6 is out – will have latest jQuery for sure, and migrate.js!

[karlo]

I think Bootstrap CDN is ok now.

http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.no-icons.min.css

Not bothered enough to test but I see “accordion”. Great work clicking right button!

Is a good network and only CDN that match Jump Start because of no icons/glyphs so it better work.

But a double test as newer Bootstrap is not necessarily 100% perfect with Jump Start. I think it is but then not perfect with specific site. They change stuff… Add FontAwesome and it is a triple test 🙂

[karlo]

Actually there is one more with no-icon version, CloudFlare

https://github.com/cdnjs/cdnjs/tree/master/ajax/libs/twitter-bootstrap/2.3.0
https://github.com/cdnjs/cdnjs/tree/master/ajax/libs/font-awesome/3.0.2

They also messed up but have now figured it out 🙂

They do not advertise CSS part on the real site http://cdnjs.com/#/search/#all but it is there.

[karlo]

I really hope I am talking to my self!

NO, CloudFlare does not work out of the box. They have split up responsive code and that is required.

https://github.com/cdnjs/cdnjs/issues/945 Apparently they cant write or I cant read. Definitely not too good with testing, heh. They added the file not the code! What they say is not what they do, look for media code https://github.com/cdnjs/cdnjs/blob/master/ajax/libs/twitter-bootstrap/2.3.0/css/bootstrap.no-icons.min.css – nothing…

So the only file that works is “Complete Bootstrap CSS (Without Icons)” from here http://netdna.bootstrapcdn.com/

To me it seems like the same network but with different “distributions”.

[Danny]

What is the best way to get this in Jumpstart? I want to go to 2.3 to get something like flatstrap..
I need a flat base for all css..(most of the visits are using IE- I am now using pie on the current site I dont want to use pie ever really )
I have striped out most of the web kit type css..but I would like to get 2.3 in. I did drop in the css just by changing the files out and all..I broke most of the theme I was working on..
I have had some minor issues in general using the child css and overriding the bootstrap css.. I went with the safe hacking way..for example I added the buttons css from bootstrap and than coded it flat -but the main B-strap css was not all overridden.. not sure why its okay- my question is
can you show me how you dropped in B-strap 2.3? The right way?
Thanks
Dan

[karlo]

Jason can show you. I am a rebel so have removed his functions of loading BS and well everything. Replaced them with my own. Totally works but not after the book.

But you should wait for Twitter Bootstrap 3.0 – that will be flat. 2.3.2 is not. Pretty much the same as current in Jump Start. 3.0 will be huge update so might take time.

So right now you have to flatten your self 🙂 Gradient heaven/hell still alive until 3.0.

I noticed someone saying it wont be out before end up summer, 2-3 months – then add more time for Jason to make it work – and update fluentely with 100% happy users, heh.

Check BS entry on Github. Some valuable info. Like left/right/bottom tabs will be removed. Ooops, nice to know. Of course there will be replacements or replacement tips for most but still. Changelog will be a mile long. Less for Jump Start I think but we use BS behind the scenes so is relevant to keep up.

[Jason Bobich]

Hey Dan,

Have you seen this article? http://dev.themeblvd.com/tutorial/overriding-a-framework-javascript-file/

The first example there should help. I’ll have Bootstrap updated in the next Jump Start release.

[karlo]

Now I read more closely I wonder about:

I have striped out most of the web kit type css..but I would like to get 2.3 in. I did drop in the css just by changing the files out and all..I broke most of the theme I was working on..

As Jason says be sure to override properly. Is better than stripping. That is why I do not post how I mess about as that is not according to docs. “Stripping out” is cool but means you have done things so you can update safely right? – and also checked CSS code for errors? If you make an error while stripping, and one can be enough, site can appear broken. Parsing of CSS code goes to hell. How to check? Wading through 100s of lines, starting over – again and again? No that is silly. First you use real code editor to minimize risk, with backup etc. But errors happen anyway so you also check with CSSlint http://csslint.net/ paste in entire code and then look for “Parsing errors”. Those are 100% evil and must be fixed. Impact of errors depend on where they are, what ever – only 0 is acceptable. Ignore all “warnings”, most are not relevnat. Parsing errors are, always.

Some code editors have CSSlint build in, 1 click and you are linted – or not. Let machines do boring work. Check any random CSS file you find on the internet. Hit rate is alarming high. Also on premium theme shops. People are that lazy… I would change some things in Jump Start CSS but there are zero parsing errors. If you see any, you made them 😉

If you think this is a non-issue as you can just check with Firebug or Chrome dev tools then think again. You cant see parsing errors = why they are evil. Only way to debug is to fix!

[Danny]

Hey thanks for the info and yes I saw that dev article ( I spend a lot of time there) But to be honest it went over my head
in that I understand it but totally forgot to go back there when this all became a issue..I am going to do that just follow that dev article..
Also thanks Karlo I did keep working on this after my postings..A guy from Schwab I know who works there sent me some inline css I am testing and that will help. Im not 100% but they may still have some bootstrap in there..they did at some point.. I think they are on ASP.net..We all run the same kind of content site..I am calling in favors from all the guys I know who work at major sites..So that will help.. plus I am learning new stuff and could end up being much stronger in the end..
Dan

[karlo]

Getting on top of how JS/CSS are loaded in WordPress I think is among most important tasks. You also need it when you start to go performance crazy 🙂

Actions, hooks, filters, priorities, dependencies. And done. Once you get it basic idea you can do things own way. I load everything from child theme, disable Jump Start build in code with own because it is easier for me, make more sense. With lots of extra files loading, and extra code for loading!, I want it all in one place. If you did that right now it will go badly I think. There would be no point at all. And Jason will probably wish you good luck with your custom code, hhe. Is only easier if you know how, why and have learned from many mistakes 😉 Should not feel trapped by fixed solutions though – but must know about those few terms before straying off path.

[Jason Bobich]

@Dan

Step 1: Create a custom build of Bootstrap where you un-check Base CSS > Icons, and download it: http://twitter.github.io/bootstrap/customize.html

Step 2: Unzip the package you downloaded from the Bootstrap website. Now you have a folder called “bootstrap” — Place this entire folder in the root directory of your Child theme.

Step 3: Copy the code from the article into your Child theme’s functions.php:

function my_boostrap() {
    wp_register_style( 'boostrap', get_stylesheet_directory_uri() . '/bootstrap/css/bootstrap.min.css' );
    wp_register_script( 'boostrap', get_stylesheet_directory_uri() . '/bootstrap/js/bootstrap.min.js' );
}
add_action( 'wp_enqueue_scripts', 'my_boostrap', 4 );

And that’s all there is to updating Bootstrap from your Child theme.

[Danny]

Wow..Thanks this worked great outstanding! Its so cool because I was able to re-do and try different things..
Mamp install was perfect for testing this..I can for sure get a flat IE friendly style up there that will load like fast.
Thanks again for this..
Dan

[Author]

Replies