I would be interested knowing who is using bootstrap in Orchard

Topics: Writing themes
Feb 11, 2013 at 8:03 AM
Edited Feb 11, 2013 at 9:48 AM
Recently I posted a request for upgrading the base css generated by Orchard but it was closed
http://orchard.codeplex.com/workitem/19438


My request was motivated by the great difficulty to adapt Orchard internaly generated css to something more up to date and generic as boostrap.
The css classes in Orchard are 'repeatitive' (many class need the same css code: zones, content, content-record, display-content, content-item, etc.) and missing some structuration (no clear separation of displayed elements as we could find in row, container, row-fluid, span for example, because no clear content identified)

Bootstrap is a growing standard and well structured, I am interested to know its adoption inside Orchard community.
Coordinator
Feb 11, 2013 at 9:22 AM
What I don't understand is why you don't build your themes by starting from one of the existing Bootstrap themes, if that's what you like? Why would it have to be the default? Bootstrap comes with a lot of baggage that we don't need on a default theme, and also with its own idiosyncrasies. Some, for example, find the markup that you have to build for it to work to be non-semantic and too div-rich.
Feb 11, 2013 at 10:14 AM
Edited Feb 11, 2013 at 10:20 AM
Bertrand, I know that your role is to avoid unecessary questioning about Orchard.
You are amongst the few founders of Orchard and this give you vision, credibility and authority, I voted for you for comittee.
Your answer covers various aspects:
1) my own work
2) my question

Concerning my question, I simply asked who is using Orchard, kind of status of theming practice in Orchard.
Next point in this question is the actual structure of Orchard css rule, or should I say non structure or inadapted structure.

Concerning taking Bootstrap as a standard, I agree with you, this could be a 'limiting' decision, this has to be evaluated, but, look, I remember the time people were asking should we adopt jquery...
And to evaluate a Library or component, the level of adoption is a key point.

Concerning 1), this is not the subject of my thread, we could change it...

My first move was to use an existing bootstrap orchard theme (orchard bootstrap, good work) but after 1 week on it I realized that 80% of the 'internal' views has to be replicated in the theme and rewritten to work, then that 50 of Orchard features were not working, with these patches, and need further rewritting.
Further the BS theme I was implementing internal code for layouts, I decided to migrate and adapt this in a dedicated module, then I created more code and each time realizing, when imbricating my code with traditionnal Orchard features as projections, rules, widgets, layout, that the Orchard css generated was not very adapted to a global integration: many classes are targetting only local module, different approach of css areas management are adopted in each module.
This is a constat for the internal shapes and templates from Core or Framework, from Orchard.xxx modules and each author of a module creates it own logic....

This is normal the documentation gives very few guidelines for css, kind of respective anarchy.


My idea is more could we envisage a lifting on css concept for 1.7 or 1.7 following version.
Coordinator
Feb 11, 2013 at 5:24 PM
I also want to hear what others have to say about this, and I certainly didn't mean to shut down voices that I don't agree with. I don't see my role at all as avoiding unnecessary questioning about Orchard. Questioning is good.

So it seems like

A. you don't like the current default theme's css
B. you don't like the existing Bootstrap themes

There is certainly work that could and should be done for A to modernize the default theme.

As for B, I would suggest publishing your own version, as it is likely to help others as well.

But please, by all means, tell us what you think. I don't want to monopolize this discussion.
Feb 14, 2013 at 8:06 PM
I am using it. And i had to rewrite the theme, obviously based on the bootstrap theme. It is not so complicated! what i have not figured out for example is how to change the Content zone, and how to render a sideleft menu. I think i will open a new thread for this. For basic purposes i have not had so much trouble!
Feb 15, 2013 at 7:59 AM
Thanks, I've been using widgets for this but difficulties are in the 'non compatibles' layers of css blocks. On the end you often arrive to a superposition on the orchard native and the bootstrap one you added in your content. sometime they are interleaved and braeking each other.
Expecting some other testimonies here.
Feb 18, 2013 at 10:28 AM
We're using the boostrap theme as a parent theme. Using bootstrap as the default theme might mean it is better supported with, for instance, shape tracing. Also, not sure if this is something to necessarily go by, but bootstrap is by far the most starred github repository (at 44,965 stars is greater than two times the next highest) so having it associated with Orchard in a higher profile way might make Orchard more appealing to other developers (who knows). Modifying the tags to be more semantic is no problem either. Often the layout file would be modified in a project anyway. I've been happy with the current bootstrap theme, though, so no worries if this doesn't happen.
Feb 18, 2013 at 5:32 PM
Yes impressive
Jun 6, 2013 at 5:54 PM
I may be a bit biased since I wrote the Bootstrap theme (needs to be updated btw) =) And I've created several other themes (not published) using Bootstrap.

I absolutely love it as a design framework, but it's only one of several out there. If the Orchard team were going to move towards using a design framework, I would think they would want to do a thorough investigation into all of them, not just Bootstrap.

The issues I had when writing the Bootstrap theme, was knowing that I could customize the templates for most of the standard features (logon, blogs, pages, etc), but what happens when someone installs a module that enables a new feature? Most likely they would need to create a custom template to make the new feature fit inside the Bootstrap layout. I'm not sure if this is consistent with other themes that don't use Bootstrap or other themes that use a different design framework. For me, loading up Shape Tracing, creating an alternative, and customizing it a bit is fairly quick and straight-forward, so I don't have an issue with it. Others may not want to have to do that though.

Honestly, I like the fact that Orchard theming is so open to customization...and I think it's like that because they haven't pushed a standard design framework on us.
Jun 6, 2013 at 9:15 PM
Edited Jun 6, 2013 at 9:15 PM
What i like in boostrap is that clear 'grammar' with clear keywords as container, row spanxx, offsetxx, etc. This is missing in Orchard 'styling', each module comes with its own rules and uses different strategies versus screen management, orchard default styling is 'heterogeneous', this is the reason why each time you use a bootstrap theme you have to rewrite 80% of the models.
It impossible to simply write a css transformer, you have to change the way classes are generated.
Even if not based on bootstrap, I would appreciate some normalization here.
Jun 6, 2013 at 11:35 PM
sass/compass is much nicer and more powerful. While I really like bootstrap and have used it for several Orchard projects (including a bootstrap 3 based Orchard admin theme screenshots: 1, 2, 3, 4, and 5 -- sorry about the screenshots they look like garbage, I didn't think using .gif format would come out so bad but I'm too lazy to re-take them right now), i think Sass/Compass have nicer features. Foundation seems like a very interesting project, and very viable competitor to bootstrap, but I haven't had a chance to use it. I recently saw a Foundation theme published to the Orchard gallery.

Psenechal hits the nail on the head with the difficulties of using bootstrap with orchard. It's especially true in the admin area, where there is more of a UI language and conventions established that all modules sort of participate in, so you end up having to make quite a lot of changes to get bootstrap working all throughout.
Developer
Jul 16, 2013 at 11:36 PM
FYI we at Lombiq have created a Bootstrap theme that doesn't alter the semantic Orchard markup. Instead it uses the power of LESS to adapt Bootstrap's styling to Orchard's markup. This works especially well for the grid system.
Jul 17, 2013 at 12:14 AM
Definitely a much better long-term solution Zoltan...especially when you're looking at customizing the base Bootstrap template yourself. In the Bootstrap theme I created, I wanted to use the default Bootstrap stylesheet because I was applying predefined (purchased) templates over the top of the base stylesheet and adapting them for use in Orchard. It makes it much easier to apply the predefined templates, but also much harder to modify the stylesheets. It also requires customizing a large number of Orchard shapes. If you want to build a customized Bootstrap based theme from the ground up, the Lombiq theme is a really good choice to get you started.
Jul 17, 2013 at 12:15 AM
Interesting.
I am actually simply duplicating 80% of templates to avoid all the unnecessary and sometimes not homogenous CSS generated by orchard default styling....
my point was only that I was believing bootstrap was 70% of orchard sites...so why bother maintaining something less accomplished in its concepts than bootstrap...