Are there any drawbacks with CSS as a Resource?

17 Posts

nilskaspersson Reply #1, 11 years, 11 months ago

The flexibility of TVs and output filters made me very interested in placing my CSS in a Resource rather than as a regular .CSS-file.

Are there any drawbacks of doing so? Will it put additional strain on the server, increase loading times or similar?

Thanks,
Nils

380 Posts

sparky Reply #2, 11 years, 11 months ago

Why would you want to do this?

You can edit the .css file if it's an asset through the manager.

17 Posts

nilskaspersson Reply #3, 11 years, 11 months ago

Mark, because, for instance:

div {
    background: url('[[*bg-img]]') no-repeat bottom;
}

Or

div {
    background: [[*foot-grad-from]];
    background: -moz-linear-gradient([[*foot-grad-from]], [[*foot-grad-to]]);
    background: -o-linear-gradient([[*foot-grad-from]], [[*foot-grad-to]]);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from([[*foot-grad-from]]), to([[*foot-grad-to]]));
    background: -webkit-linear-gradient([[*foot-grad-from]], [[*foot-grad-to]]);
}

Or

body {
    font-size: [[*font-size]]
}

h1 {
    font-size: [[*font-size:add=`3`]]
}

Being able to create dynamic CSS like this would decrease development times and give more power to a client. [ed. note: nilskaspersson last edited this post 11 years, 11 months ago.]

1,624 Posts

cipa Reply #4, 11 years, 11 months ago

Best solution IMHO is to setup a style.css file for the whole project and only add the configurable parts in the header of the template.

You can do it using APIs

Responsive CSS Grid: cipalabs.com/projects/metal/
Blog: MODX Tutorials & Articles

17 Posts

nilskaspersson Reply #5, 11 years, 11 months ago

cipa,

Why is that the best solution? Are there performance issues with having your entire CSS as a Resource?

1,624 Posts

cipa Reply #6, 11 years, 11 months ago

It's more about the caching of the CSS by the browsers.

I think in Revo you can setup file headers for resources that will emulate a real file so browsers will cache the css file and not request it on a different page. I'm not sure what your setup is, but if your css changes from page to page than I will definitely have a generic style.css file(as file) and add the custom CSS in the header or as a modx resource

Does it make sense?

Responsive CSS Grid: cipalabs.com/projects/metal/
Blog: MODX Tutorials & Articles

17 Posts

nilskaspersson Reply #7, 11 years, 11 months ago

I don't necessarily want to change it per page - the primary reason would be to simplify the design process so that I can change similar CSS values by changing a TV rather than "search + replace".

Being able to change background images through TVs would be nice, though. So I take it your suggestion would be to leave most CSS in a regular document and include the styles I want to edit through TVs in my document headers? [ed. note: nilskaspersson last edited this post 11 years, 11 months ago.]

1,098 Posts

microcipcip Reply #8, 11 years, 11 months ago

@nilskaspersson, you don't need to place the CSS inside a Resource to change background image in the website, or to change the font size, or anything else. Just add a class to your body. Example:

The CSS:

/* Change Background */
body.background1 { background: url(../img/bg1.jpg); }
body.background2 { background: url(../img/bg2.jpg); }
body.background3 { background: url(../img/bg3.jpg); }
body.background4 { background: url(../img/bg4.jpg); }

/* Change Font Size */
body.fontSize1 { font-size: 20px; }
body.fontSize2 { font-size: 30px; }

The HTML:

<body class="[*TvBackground*] [*TvFontSize*]">

The TV:

Now you can create a dropdown TV with the class you want to output, and use for example @INHERIT or getResourceField to extend that behaviour in the whole website.

Jertix.org -> Web Design & Development, Motion Graphics | Follow me on Twitter | MODx Tutorials (in Italiano) | MODx Snippets (English)

1,624 Posts

cipa Reply #9, 11 years, 11 months ago

Quote from: nilskaspersson at May 08, 2012, 12:22 PM

I don't necessarily want to change it per page - the primary reason would be to simplify the design process so that I can change similar CSS values by changing a TV rather than "search + replace".

If you want to do this easily I suggest using SASS/COMPASS or LESS. You can define CSS variables with them.

Responsive CSS Grid: cipalabs.com/projects/metal/
Blog: MODX Tutorials & Articles