Concatted CSS files ?

eva2000

On community.nodebb.org there's like 6-7 CSS files loaded. Is there anyway to define in Admin control panel how the CSS links are going to be served ?

I ask, as Centmin Mod Nginx includes http concat Nginx module http://centminmod.com/nginx.html#httpconcat which allows you to concat several CSS and JS files together to save on http requests

so 2 bootstrap css files will be served if the template or html file serves the url as

/css/??bootstrap.css,bootstrap-responsive.css

on a more specific example

would be served as 1 single request

/plugins/??nodebb-widget-essentials/css/widget.css,markdown/default.css,emoji-extended-css/style.css,nodebb-plugin-youtube/style.css,nodebb-plugin-topic-badges/css/main.css

psychobunny

I think (@julian correct me if I'm wrong) that we recently added the ability to minify all our plugin CSS files along with our core CSS in one file

julian

Yep. You'll notice the mentions plugin no longer has a CSS file. It uses LESS now, and it gets bundled into stylesheet.css

The plugin writers (which is mostly us) will have to update the plugins to send in LESS files instead of CSS.

eva2000

sweet, but do you mean

http://community.nodebb.org/stylesheet.css?v=v0.3.2-289-g815e783

as it seems the rest of those css also still get loaded http://www.webpagetest.org/result/140226_X8_60a2df5846b61aac9f61c1f1ec8fb52b/2/details/

or do you mean currently it's duplicated by the plugin authors and only stylesheet.css is needed ?

julian

What I mean is... in the source right now:

<link rel="stylesheet" href="/plugins/nodebb-widget-essentials/css/widget.css">
<link rel="stylesheet" href="/plugins/markdown/default.css">
<link rel="stylesheet" href="/plugins/emoji-extended-css/style.css">
<link rel="stylesheet" href="/plugins/nodebb-plugin-youtube/style.css">
<link rel="stylesheet" href="/plugins/nodebb-plugin-topic-badges/css/main.css">

Those stylesheets are still CSS. Once the plugins are upgraded to use LESS, then they will be bundled into stylesheet.css, thus reducing the # of files requested

eva2000

@julian ah i get it now

Schamper

@julian said:

Yep. You'll notice the mentions plugin no longer has a CSS file. It uses LESS now, and it gets bundled into stylesheet.css

The plugin writers (which is mostly us) will have to update the plugins to send in LESS files instead of CSS.

Sweet

julian

@mr_waffle It's not just that you get to use LESS now, the really cool part is that you also get to use the bootstrap variables in your plugins too!

I updated mentions above -- notice that on Lavender, mentions have a white background, while in Vanilla/Cerulean, they're reminiscent of the more typical bootstrap colour.

Exampli gratis:

	color: @state-info-text;
	background: @state-info-bg;
	border: 1px solid @state-info-border;

Schamper

@julian Ooooooh fancy. Guess I'll have to get to refactoring some time.