Concrete5.5 and Bootstrap (CSS framework)

Permalink
After watching the recent live show from Franz and Andrew, I was very interested in seeing some of the things planned for 5.5. In particular, I was interested in seeing how Bootstrap is being used to update the C5 interface.

I'm a big fan of using frameworks for web development, and I've used a few frameworks specifically for theming in the past, but I haven't used Bootstrap yet. I've got a few questions for the core team or any other devs out there.

1 - Since bootstrap will be included in the core, is this css framework something that is worthwhile investigating for general theming?

2 - Would we be able to link to it from our themes and rely on it, or would that be asking for trouble?

3 - Will the Bootstrap styling also carry over to things like the ecommerce plugin?

4 - Will the default theme of concrete5 use Bootstrap, or is only for the dashboard and editing controls?

5 - Does anyone have any experience with Bootstrap they'd like to share? I get the impression that it's focus is more on web applications rather than sites, so I'm curious to see whether people would think it is overkill or not. Does anyone else use any other frameworks for their theme development, or do they just copy the default theme and edit the main.css file...?

Cheers
-Ryan

mesuva
 
andrew replied on at Permalink Reply
andrew
Yes, it's a really nice framework. You're right that it's a bit geared toward building web applications in which you have full control of the markup, rather than being dropped into existing things. For example, lots of the classes are pretty simply named, probably so you can remember them. This means that you'd get a lot of conflicts if you were to just drop bootstrap into a header on a site, unmodified.

In our version of bootstrap we're actually namespacing it all inside a .ccm-ui class, and then as we work on various interfaces we're wrapping those dialog windows, panes, and dashboard pages in the .ccm-ui class. This means we can roll the interface out progressively. It also means that other add-ons that make dashboard pages, block dialogs, etc... won't be affected by bootstrap styling. We'll add some legacy styles back in at the end to ensure that certain existing add-ons don't look unstyled.

To answer your questions specifically.

1 & 2. We're only going to include bootstrap in edit mode. You can rely on it being there, and make your theme include it, but you'll also get a bunch more styling as well (since we're bundling it up inside a minified ccm_app.css file). You could add this file to your theme, however, even when not in edit mode.

You could investigate it for general theming, and we're going to continue to rely on it in the future, but you will have to include a bunch of styles that you might not otherwise, since our bootstrap implementation is modified and part of a larger CSS file that also includes lots of core concrete5 controls.

3. It will once we add "ccm-ui" as a class to different parts of the UI. As we make this transition we might start offering a certain version of eCommerce to only 5.5 and above.

4. Currently it's just for the concrete5 app UI, and not any of the themes. As we release more themes in the core, we will likely be using frameworks on them, just lighter weight, presentation-only frameworks (like 960gs, etc...)

5. I think your assessment is definitely correct. It's very nice, definitely more app-focused, and it's biggest strength is that it's so compelling it's forced me to get off my butt and dive into LESS, which we're using to build the bulk of 5.5's CSS classes. If you're planning on working on any concrete5 add-on that adds a block, dialog or dashboard interface publicly or privately in the future, I'd definitely recommend it.
Fernandos replied on at Permalink Reply
Fernandos
Hi Andrew,

hope you're feeling good, it's been a while. I guess you've lots of work ahead :) Excited to see what's coming next, I know you've always surprises that make Concrete5 keep the head start over the other.

If you look into LESS, take a look at CoffeeScript also please, it's very ease to learn. You'll probably love Compass (http://compass-style.org/ ) if you like LESS.
There's even a GUI tool.
mesuva replied on at Permalink Reply
mesuva
Hi Andrew, thanks for your reply on this, appreciate your thoughts and answers.

I do remember now you mentioned in your video that you were namespacing everything. That makes perfect sense. I guess that means though that the original copy of bootstrap won't be included, it will be the concrete5 version.

That's cool though, as I can see how useful it will be for something like a custom block types. Since people will know what features are in bootstrap, in the dashboard or the edit panel of a block, they'll be able to consistently style UI elements.

In terms of ecommerce, I'm a big fan of the plugin, but I've been a bit frustrated at times trying to style things like the cart - even if these parts were just a bit plainer in 5.5 (so they are easier to override), I'd be very happy.

Personally, I think I'm going to look at using bootstrap for a CakePHP project I'm working on, but not look at using it for styling concrete5 themes - I'd prefer to use something a little lighter weight. I've also held back on looking at LESS - I can see its benefit but just haven't had a good reason to get stuck into it. Too many things to learn!
adamjohnson replied on at Permalink Reply
adamjohnson
I would also be very interested to hear peoples experiences with Bootstrap.

As far as other frameworks go, there are a few in the marketplace that act as great starting points (check "Frameworks" on the right):

http://www.concrete5.org/marketplace/themes/...

The HTML5 Reset, Boilerplate, and 960 theme work very well. I've used the 1140 CSS Grid before ( http://cssgrid.net ) and found that I didn't like it as much as the 960 grid system.

Recently I have been taking a look at http://getskeleton.com . More specifically, its grid system. Much like 960, Skeleton has a grid framework that is based in pixels; however, it is also responsive right out of the box--which is a huge plus. I'm planning on using it for a few of my upcoming sites and, if all goes well, I believe it will replace the 960 grid system (for me at least). I have also heard good things about Skeleton from my colleagues that have used it.