twitter bootstrap and sitefinity

Does Sitefinity have a version of their CSS that uses the Twitter Boothstrap method?  We're redesigning for 4.4 (from 3.7) and looking to slim down the CSS that comes pre-packaged.
http://twitter.github.com/bootstrap/ 

Did you learn anything regardng using Bootstrap? I was hoping to use bootstrap myself in our site.

Thanks,
 Ben

That lets you use the LESS files from Bootstrap, but in terms of integration with Sitefinity's basic template controls, etc., it doesn't provide any more detail.

Hey Michael,

Oh, I wasn't aware of there being such breaking changes with those templates for 5.1.

@Michael,

Ah, I got ya. I guess we'll find out if everything breaks next month.

@Michael,

Things fortunately didn't break :) And after peer pressure and being featured in the Newsletter I had no choice :) so the first version of the 'full' compatible Twitter Bootstrap / Sitefinity regions is available for download ( https://github.com/jbokkers/SF-BOILERPLATED ). 

It contains an empty Masterpage/Template featuring the responsive NavBar and the theme is compatible with the Bootstrap .row .spanx system, both static and fluid.

Known v1 issues:
Only works with the default 12 columns layout, if you a 16 column layout you're on your own.
Sitefinity's 5x 20% region isn't implemented in the static version, for obvious reasons. 

Jochem

There are a lot of inconveniences using twitter bootsrap. blog.idyllic-software.com/.../Why-we-don-t-use-Twitter-Bootstrap

Share your thoughts.

@Debarati,

1. Messy markup.
Yes Bootstrap suffers from class-itis, where Sitefinity suffers from somewhat div-itis. 
Multiple div/spans bloat the code just as much as several classes do.

To me the "error-margin alert fadein alert-succes" class is much more intuitive than a "sf_colsOut sf_3cols_2_34" naming structure. 

But you're forgetting the beauty of bootstrap + .less because you can easily nest that class blurp if that's something you're re-using throughout your project and do something like

Any framework is going to have limitations, minimum expectations, etc. The question isn't "Is Bootstrap good?" but "Is it good for me".

Jochem did an alright job on his response, being very politically correct... let me be less so.

This guy doesn't know what he's talking about, and the comments absolutely ripping him apart should be an indicator of how misguided this post was.

1. Messy Markup - "Classitis" might make things a bit messier from the code reading side, but bootstrap isn't needlessly reapplying styles where they aren't needed (www.steveworkman.com/.../). In fact, Bootstrap does a pretty good job of cascading CSS rules like it's supposed to. It uses a lot of classes in order to allow for composition, which is not a bad thing unless it gets down to the level of making EVERYTHING a component and combining everything in massive class lists, which isn't what it is doing (and is exactly why it uses LESS to do the composition type stuff in a much more sane way).

2. Non-supported HTML attributes - He's just WRONG here. These are all supported back to IE7 at least. Data attributes don't need to be supported by a browser to be usable, as pointed out in one of the comments. And Aria is a section 508 staple... and it really seems like he has no idea what their purpose is here. In the end, all he's saying here is that the Javascript components go the extra length to be accessible, and then he seems to say they are doing it wrong, when they aren't, which leads me more to think he really doesn't understand the technical implications of what he's complaining about.

3. He's once again just plain wrong about data-attributes. The tooltip complaint is valid. Modal is a nitpick. Probably the most valid complaint he has that is implementation requirement specific.

4. !important is a valid tool. Overuse is an issue, but there are literally like 4 places Bootstrap uses it. Hardly riddled. LESS vs SASS is a religious war, and not something I'd worry too much about. I think LESS tends to be better supported on Windows side, but I may be remembering that wrong...

In the end, he's making a choice based on some very incorrect assumptions, but I think if you are looking to make a similar choice, you should definitely look into it yourself, because a lot of what this guy is saying is bull.

@ Hello Michael

Thanks for your comment on my Bull. Well, in my response I will be little less sarcastic.

1. Quote "Bootstrap does a pretty good job of cascading CSS rules like it's supposed to"
Do you know why cascading CSS rules isn't a good practice? Perhaps, do a little reading on how browsers read CSS (which is from right to left). Cascaded CSS rules such as this (ul#list li a span) may be very specific but they are very slow. Descendant selectors are the worst. Hence, cascading is not a good option. Bootstrap does it for their own convenience.

2. With regard to Aria, although come with goos support, things can go wrong when used irresponsibly. When it comes to Aria, they need to be used with a hierarchy in mind. When overused, they can lead to serious damage to your accessibility aspect.
Quote "and it really seems like he has no idea what their purpose is here."
Did you even read the article completely, or you just wanted to pick on someone for fun? Again, I say "When overused, they can lead to serious damage to your accessibility aspect."

3. Regarding "data-attributes". I did mention they have a good support.

4. I fail to see what makes you think !important is valid tool. If you know anything about CSS specificity, you wouldn't be saying this.
Read up on it here blog.idyllic-software.com/.../CSS-Specificity-Survival-of-the-fittest
! important rule completely disregards specificity rules & calling it valid tool is Bull.

5. Quote "I think LESS tends to be better supported on Windows side"
I am going to pretend you didn't mention that. LESS or SASS nothing to do with platforms. It just helps you write things in functional way & you compile them using tools such as Scout, Codekit. If you are on Ubuntu you can use command line to compile less files.

Concluding a comment, you start with disagreeing & eventually end up saying more or less the same.

Besides, nobody forced the decision on anybody. It's all about personal choice.

@Jochem I agree with you completely. You mentioned about polyphills & that is correct but the objective of the article was to talk about what Bootstrap doesn't offer. I understand that Bootstrap isn't a complete solution & I am fine with that but to those who use it with blind acceptance is plain wrong.

I really appreciate you providing useful alternatives at the same time.

2 thumbs up!

No needs for the thumbs up and I wasn't trying to be politically correct either, I just prefer the facts and reality over opinions and idealism when it comes to development.

The only reason I'm responding is because personal preference shouldn't be used as a judgement to discourage other potential users. The Sitefinity forum, and specifically this thread is about 'can we & how do we...'

Simply saying it causes a lot of inconveniences and then backing it up with preference and mis-conceptions (or easily misread conceptions) isn't going to help anyone making educated decisions.

No professional development team, whether you're a dev shop or a design shop, is going to wake up one morning and blindly say "let's build our workflow around Bootstrap" without ensuring first if it works. The big question that needs to be answered is (at least on Sitefinity forums) - will Bootstrap work with Sitefinity?

And the answer is simple - yes it can. 
There are some hurdles to overcome, but it works. If Bootstrap's your thing, by all means use it with Sitefinity.

1.
You're mixing up tag selectors (which are inefficient) with classes. Browsers don't like it when you're referring to

<ul id="list"><li><a><span>lorem<span></a></li>

<div class="alert alert-block alert-error fade in"></div>

@Vinod, there was little sarcasm in my post. I was being very forthright about what I think about the statements you made, as many of them are wrong, and you do the community a disservice by spreading FUD.

1. You know what the "C" in CSS stands for right? Cascading rule sets and compositional rules are exactly how CSS is built to be used. Bootstrap does not do what you think it does here, so your statement is just mistaken, something which Jochem points out quite elegantly. The reality here is that the "performance benefit" of specific rules is pointless in practice unless you have tens of thousands of these individual, conflicting rules, and bootstrap is not going to slow down your site rendering to a noticable level, because it simply is not designed that way. CSS selector speed has a lot more to do with Javascript than it does with rendering.

2. Again, you are just wrong here as well. When used incorrectly, like say putting the wrong aria tags in the wrong places, it can confuse screen readers, yes. That's like saying a hammer is bad because I can break windows with it. The question is, does Bootstrap misuse aria tags? And the answer is no they don't. They are additive semantic information, and bootstrap uses them correctly.

Your comments on data-* attributes seem misguided as well, as you seem to believe that browsers must support the HTML5 data spec or something along those lines for them to be useful, and that is not the case.

I'm wondering if you are running a site with bootstrap through some HTML style checker somewhere and it spit out warnings about these things or something and you took that as gospel? Because everything you said in this point was misleading.

3. Sure you did:

Bootstrap uses several nonsupported HTML attributes such as placeholder, required,aria attributes group, data attributes group & so on.

It uses data-attributes for local title storage which IE9+ (Yes IE 10 too!) do not support & yet again, no fallback!

Both of these statements belie some sort of misunderstanding as to what the data-* attributes are actually there for. But I digress. I agree that the tooltip is broken in older IEs, and that needs fixed at some point.

4. Oh, I'll agree that a FRAMEWORK should use !important VERY judiciously, but it is not an evil directive or something. It's purpose is for local override of cascading styles as needed. There is nothing evil about them, they are just a code smell (code smells are not in themselves evil, they are just warning signs). The important part (pun unintended) is that you use !important in only the right ways. Again, hammer, window, that sort of thing. Does Bootstrap do that?

I'll concede that it would be better if Bootstrap didn't use them AT ALL, but lets take a look at the places that bootstrap DOES use them:

1. Print styles - This should be pretty obvious why they use them here. This might be valid if you are worried about print styles that much, but the argument here should be "Bootstrap makes decisions about what a print style should look like that I might not like".
2. Utility responsive classes (.visible-phone, etc.) - Again, pretty obvious why here, as they are literally all utility classes meant to override default behavior. You don't ever have to use these. 
3. .nav-collapse.collapse override for 768 max style sheet - This is the ONLY rule that uses it as a hack to achieve something in the ENTIRE framework. The only one.

5. I wish that were true actually, but it isn't. LESS is better supported as a toolset for the VisualStudio crowd, while finding a SASS solution that you can build into your build solution is much more difficult and requires a lot more tools to be available (e.g. Ruby, Gems, etc.). I actually like SASS better, but it fits much more with the Linux crowd than the Windows crowd right now. There ARE solutions for it, but not as easily integrated as the LESS ones...

In fact, both LESS and SASS made decisions about their development that makes them (and I mean the real distributions of them, not third party interpreters) reliant on an external tool chain. SASS with Ruby, and LESS with Node, which were both kind of short sighted and makes integrating with non-*nix based development environments much more difficult.

But that is kind of irrelevant to a discussion about Bootstrap, and more relevant to how Bootstrap works with Sitefinity, as it is a .NET application so Windows based development is the norm. So talking about it HERE means that LESS is actually the preferable method. But again, I wouldn't worry too much about that argument, as its more religious than substantive.

As I said at the beginning of my post, the question of limitations arises due to the nature of using a framework that forces choices on you.

My point was the conclusions you came to are based on faulty reasoning. I have no idea what your background happens to be, but you appear to be misinformed on a good deal here, and spreading that misinformation is going to confuse a lot of people who don't know better. Now if you want some ACTUAL short comings:

1. Bootstrap makes a lot of legitimate style choices (font sizes, colors, etc.) in the interest of typography that sometimes I wish they didn't... but you can override that in the LESS file, and really, you should be compiling a custom stylesheet when using bootstrap anyway. Some of that actually is supposed to go away in the next version, where they are going to a very flat style to allow for easier customization by people who don't compile though.
2. The print styles are actually kind of annoying sometimes. We've had to override them because they actually add the full URL of a link in parentheses after the link text when printing, but the rest isn't so bad.
3. Tooltip being broken I can't confirm right now. It is certainly broken on their site in IE8, but that may be due to the other JS error I'm getting on their page which is related to some image placeholder JS they have on there. I don't have any tooltips on my own site to try it.
4. Bootstrap is REALLY meant to be used as a base for site CSS, not out of the box, but a lot of people do, and I can't fault them for that. Bootstrap provides a lot of OOTB functionality and styles that I wish it didn't, but that can all be customized with LESS.
5. If you DO go the LESS route, you are likely to modify some of the source LESS files in the process. This makes upgrades a fun little nightmare as you have to reapply your changes manually usually. There are tricks to get around this, but none of it is fun. They try and make it easier with a settings LESS file, but often I find myself modifying other LESS files to get certain functionality (or to remove some, like the aforementioned print style). However, this is also a strength, because I CAN do this much more easily than modifying a monolithic CSS file every time they release.
6. I'd actually prefer some of the "features" to be better broken up in the LESS structure. There's a lot of components jammed together with default styles in several places that makes modification a bit harder than it should be. e.g. every single one called out in the components section should be its own LESS file. They seem to have actually started down this route though, so I can't really complain much now... it used to be a bigger issue. But for instance, why the hell isn't there a print.less file? Why is that globbed into reset.less?
7. Some components are almost useless unless you want to use them wholesale without much modification. Looking at you, navbar.

A lot of these come down to Bootstrap taking over more than I might want it to as a framework. Again, that's just a limitation of using a framework that makes choices for you.

Sorry if you took offense, but the guy who posted the link asked for discussion on the points you brought up, and its hard enough having reasoned discussion on valid points, let alone one based on faulty understanding. I stand by my assertion that most of your points are bull, for that reason.

Hi Jochem

This is my first time using Sitefinity and we really need to get Bootstarp working.

I have downloaded and followed the instructions for the Bootstrap installation from GitHub, but when i get to the the step where I want to modify the template  on the template editor screen  or even if I create a new page based on the Bootrap master page , the main toolbar at the top just shows loading for ever (screenshot attached) . I am therefore unable to modify or save the template or the page

Am I missing something?

p.s. I'm using Sitefinity 6.0.4210.0 professional

@Marcio,

Not sure if/where something has gone wrong, but feel free to shoot me an email ( jbokkers at live . nl ) and I'd be more than happy to take a thorough look at your setup.

Have you checked there are no 404's on any of the references and files are being correctly loaded ? Perhaps a typo slipped in somewhere that I or you've missed causing it.

The loading of jQuery inside that composite script is rather crucial, you've not removed it or referenced a higher version stored locally/externally ?

Have you tried switching LoadScriptsBeforeUI="True" to false on the <telerik:RadScriptManager> line?

Have you tried it in a different browser to rule out a possible browser add-on loading jQuery?


Let me know how it goes,
Jochem.