twitter bootstrap and sitefinity

Posted by Community Admin on 05-Aug-2018 15:44

twitter bootstrap and sitefinity

All Replies

Posted by Community Admin on 12-Apr-2012 00:00
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/ 
Posted by Community Admin on 26-May-2012 00:00
Did you learn anything regardng using Bootstrap? I was hoping to use bootstrap myself in our site.

Thanks,
 Ben
Posted by Community Admin on 15-Jun-2012 00:00
Shameless self-plug and reasonably late post, but in case somebody ever wants to run Sitefinity with Twitter Bootstrap again, here's a quick how-to-get-started in combination with VisualStudio and the Sitefinity Thunder & Chirpy extensions...
 
 
Jochem.
Posted by Community Admin on 26-Jun-2012 00:00
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.

Is there a way to set the classes for each of the column-based layout templates to, for instance, wrap the template in a div with a given class (Like row-fluid) and set the column classes (like span2, span 8, etc.)?

Edit: I tried creating my own layout templates based on this: https://gist.github.com/2928782
Of course, the documentation for doing this in Sitefinity is incorrect on what you should set the "Layout Template" field to when adding it in the admin interface. If you have created these template files under ~/App_Data/Sitefinity/WebsiteTemplates/YourTemplate/CustomLayouts/Nameofyourlayout.ascx
Posted by Community Admin on 26-Jun-2012 00:00
Hey Michael,

You are right it doesn't.

I thought about putting that in in the first blogpost, but it kinda needs some additional tweaks to make it fool-proof and takes more than a lunch break of tinkering. With that, the HTML5 Boilerplate and possible v5.1 changes (with regards to jQuery, Kendo and the new RadControls) in mind, I'm holding off on making it completely compatible till after the v5.1 launch.

---

The idea basically is to map a markup like this
<div runat="server" class="sf_cols">
    <div runat="server" class="sf_colsOut sf_2cols_1_25">
        <div runat="server" class="sf_colsIn sf_2cols_1in_25">
             
        </div>
    </div>
    <div runat="server" class="sf_colsOut sf_2cols_2_75">
        <div runat="server" class="sf_colsIn sf_2cols_2in_75">
         
        </div>
    </div>
</div>

to this

<div runat="server" class="row fluid">
    <div runat="server" class="span3">
        <div runat="server" class="">
             
        </div>
    </div>
    <div runat="server" class="span9">
        <div runat="server" class="">
         
        </div>
    </div>
</div>

With .LESS it isn't that difficult, but you run into problems when you want to accommodate for Bootstrap's fluid nesting or offsetting columns.

So you're left with 3 options:
Use Bootstrap's 'span' method and forget about Sitefinity's region editor.
Redefine Sitefinity's region editor to understand span9 and forget about offsets and nesting.
Or build a 'interpreter' .LESS file that leaves Bootstrap intact but translates everything so Sitefinity 'out-of-the-box' understands it and can accommodate for the little tweaks and pitfalls you run into.

---
My blogpost and the gist just describe the first method. Michael Roper played around with the 2nd option as shown in his gist, but it breaks the page editor. Michael and I are actually having a convo tomorrow morning working out the details for option #3...


Posted by Community Admin on 26-Jun-2012 00:00
Oh, I wasn't aware of there being such breaking changes with those templates for 5.1.

I just created my own layout templates. I don't want the designers messing with sizes outside of those I define anyway, so I'm not concerned about breaking their ability to edit and resize those layouts... The entire idea of bootstrap is to standardize usages, and I didn't want to give my designers the ability to break from that too much.

As such, those simple layout templates hit the spot for me. What are you worrying about breaking in 5.1 in regards to this stuff?
Posted by Community Admin on 26-Jun-2012 00:00
@Michael,

Sometimes limiting is the best option, but sometimes it's just easier to divide a 'region' in to two parts, than to get creative with css so the region editor is useful. But if you're not concerned about it, the gist mentioned will get you to a rolling start with the sitefinityreset.css which is stripped to its bare(read clean) working minimum. If you use that and stick to Bootstrap's span system you're good to go (it even works with the responsive menu). 

---
Just had to check with regards to NDA and public information but as you can read on the v5.1 roadmap one of the big things is this:

"KendoUI will be utilized more in the Sitefinity backend- this will allow less Javascript to be served to the user's browser, resulting in backend load times as much as twice as fast, allowing you to create and edit content items at an amazing speed."

Combined with (at the bottom)
"Enhancement of the publishing system" and "Performance and usability improvements" things are likely going to change.

Next to that, the newly released RadControls Q2 2012 have finally included an option to disable the embedded loading of jQuery. (At the moment we continually load 2 jQuery versions - one from RadControls, one from Sitefinity and sometimes 1 additional because we ourselves load it on our masterpage served from a cdn).

And did you see Gabe Sumner's tweet? Something big is coming...

All this doesn't mean there will be breaking changes, it means there will be optimization changes. Maybe we'll not see any changes from a html/css perspective but maybe we will.

Since I've built an optimized masterpage+theme for HTML5Boilerplate, I would like to do the same for Twitter Bootstrap, so although I already have a working sample, I'm holding out till release and see the final changes that make the cut.


Posted by Community Admin on 26-Jun-2012 00:00
Ah, I got ya. I guess we'll find out if everything breaks next month.
Posted by Community Admin on 21-Jul-2012 00:00
@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
Posted by Community Admin on 14-Mar-2013 00:00
There are a lot of inconveniences using twitter bootsrap. blog.idyllic-software.com/.../Why-we-don-t-use-Twitter-Bootstrap

Share your thoughts.
Posted by Community Admin on 14-Mar-2013 00:00
@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

.projalertbox
  .error-margin;
  .alert;
  .fadein;
  .alert-success;

After all, Bootstrap is a starting framework, not necessarily the end result and in this case, use .LESS to your advantage if it's bothering you.

2. Non-supported HTML attributes
Bootstrap is a HTML5 framework and the placeholder, aria and data- attributes you're referring to are valid HTML5. 

In my opinion, we currently build websites with the primary audience being the visitors now and the coming 6-12 months. Not the visitors we've seen in the past 12 months. This means you build with modern technology where you can and provide fallback for the past.

If your primary target is IE8 or lower, than Bootstrap simply isn't your framework if it were for nothing but the fact that IE8 doesn't even support HTML5 without a little help. Modernizr & respond will get you a long way but it won't magically turn IE8 into IE10.

A quick check shows that data-* is supported by IE8+, Firefox 18+, Chrome 23+, Safari 5.1+ and iOs has had it since 3.2 while Android supports it since 2.1. Same goes for the placeholder attribute except for IE which supports it since 9.


3. Javascript components.
Again, Modernizr and polyfills can do alot with regards to CSS3 transitions.
Perhaps it's me but these demos (twitter.github.com/.../javascript.html work pretty good on IE9/10 for me.

4. Messy parts.
Well, enough pro-bootstrap talk because you're right - Bootstrap isn't perfect, but what is?

It has its defects, it's weirdness and it's certainly not OCD proof but it's a solid framework that gets me/you/us up and running fast with some good foundations and some UI gems...

Jochem
Posted by Community Admin on 14-Mar-2013 00:00
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.
Posted by Community Admin on 15-Mar-2013 00:00
@ 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.
Posted by Community Admin on 15-Mar-2013 00:00
@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!
Posted by Community Admin on 15-Mar-2013 00:00
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.
Posted by Community Admin on 15-Mar-2013 00:00
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>



but that's not what's Bootstrap is doing. Take a look at an alert box as from the previous example:

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

Now look at the css used to render that:

.alert
    padding: 8px 35px 8px 14px;
    margin-bottom: 20px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    background-color: #fcf8e3;
    border: 1px solid #fbeed5;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
.alert, .alert h4
    color: #c09853;
.alert-danger, .alert-error
    color: #b94a48;
    background-color: #f2dede;
    border-color: #eed3d7;
.alert-block
    padding-top: 14px;
    padding-bottom: 14px;
.fade
    opacity: 0;
    -webkit-transition: opacity 0.15s linear;
    -moz-transition: opacity 0.15s linear;
    -o-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
.fade.in
    opacity: 1;

Most of the css used in these class compliment eachother. Let's see what's actually being duplicated:

The .alert-error overrides the color, background-color and border-color, which makes sense because i'm specifically saying I want an error (as in redish). The .alert-block class merely overrides the padding, which is makes it look better because an alert-block usually contains more text. The .fade.in overrides the opacity, again specifically requested by me.

So in this case there are no inefficient tag selectors, descendants, adjacent, child or overqualified selectors, just 5 elements (3 colors, 1 padding and 1 opacity) are being overruled because I specifically needed it to. 

Sure it needs to find those 5 rules in the style sheet, but if that's your concern, re factor those 5 rules utilizing less into a single one by all means. But then you end up with almost unique classes like Michael said and that's not going to help scalability or portability at all.

2. 
ARIA has zero to do with hierarchy, it has everything to do with providing context (give semantic meaning). A search box can/should be enriched with the role="search" to let the browser help the user understand its a searchbox. If that search box is dropped at the header or footer of a document has nothing to do with the role it is serving.

Also there's no such thing as 'overused', browsers and disabled people will love you for it - the problem is the 'irresponsible use', and basically that's up to us as developers no?

Install the latest VS 2012 Web tooling updates with the Web Essentials plugin, set your validation to HTML5 and the system will try and help you out there. But anyway, this has nothing to do with Bootstrap. If I'm not mistaking Bootstrap only uses ARIA to help browsers understand Dropdowns better.

4. 
Like Michael said, there are like 4 or 5 places Bootstrap uses the !important - but let's be honest, we all 'cheat' now and then because it's serves it purpose. If it didn't, support would have been dropped years ago.

5.
"... you compile them using tools such as Scout, Codekit" says it all no?
Most Microsofties tend to prefer using just Visual Studio (or the Express edition even) and .LESS has just seen a better adoption on that platform.

Tools like the visualstudio extensions Web Essentials and Web Workbench level the playing field a lot but still in our area .LESS is the preferred way to go. Telerik JustCode offers LESS syntax support, Kendo UI uses LESS, Bootstrap uses LESS ;) and Telerik themselves use .LESS on their websites. 

If you don't like .LESS, don't use it and grab the .css files from Bootstrap and combine them with your SASS files. 

The reason that you shouldn't use LESS because the Bootstrap creators picked it because they are friends with the LESS creators isn't valid. 

The reason that you should be using .LESS is that you can tap directly into the original source files and make them (variables+mixins) work for you instead of wasting time & money by re-inventing the wheel.
Posted by Community Admin on 15-Mar-2013 00:00
@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.
Posted by Community Admin on 17-Jul-2013 00:00
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
Posted by Community Admin on 18-Jul-2013 00:00
@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.
This thread is closed