css3 conflicts with cms_stylesheet

[geepers]

When working on building a CMS-driven (latest version 1.11.2.1) site with Bootstrap, Foundation (or other frameworks), I noticed that the following types of CSS3 declarations pose a problem.

.submit input[type="submit"] {
the style
}

I'm assuming it's primarily due to cms_stylesheet allowing the use of dynamic variables using [[ ]] to encase said variables.

My question - is there some way we can disable the now default handling of [[ ]] for smarty variables?

My alternative so far has been to keep these particular css files as separate files loaded into the file manager itself.

Appreciate any insight/thoughts/ideas anyone may be able to contribute.

[uniqu3]

I have never had a issue with css input selectors, smarty in cmsms stylesheets was introudced in 1.9.x series and i can not confirm any false behaviour with input[type="submit"] or input[type="email"] or input[type="text"] or anything similar.

[geepers]

Thanks Goran.

I suspect it's the character sheer size of the files then. I'll double-check on this.

I was purely speculating that it was the selector.

[JiiPee]

I noticed that bootstrap default responsive style sheet has about 6000 lines. When importing that, its looks ok but after opening that style sheet again, it only has 3000 lines left.

When I separated that to three different style sheets, all worked just fine. So maybe CMSMS has some max limit?

Edit: Yeah, just saw the more describing topic, more info here.

[psy]

ditto uniqu3. no problem ever with bootstrap or foundation.

Both framework CSS files are hugely bigger than the 5000 chars allowed in CMSMS stylesheets.

Splitting them into manageable sizes, eg mytheme // zurb1 and mytheme // zurb2 etc works perfectly for me.

[uniqu3]

Where honestly there is absolutely no need to include Bootstrap or Foundation as DB Stylesheet at all, these are simply Frameworks, which means a Framework is a starting point on building an App, so there is absolutely no reason to edit distributed files which then can easily be included with simple <link> stylesheet tag.

To change appearance of these one should then override specific styles by adding own stylesheet in CMSMS after <link> tag call and following proper class naming.
That way you can easily update Framework stylesheets with every new release without breaking your own styles.

Just my 2c

[fearmydesign]

Where honestly there is absolutely no need to include Bootstrap or Foundation as DB Stylesheet at all, these are simply Frameworks, which means a Framework is a starting point on building an App, so there is absolutely no reason to edit distributed files which then can easily be included with simple <link> stylesheet tag.

To change appearance of these one should then override specific styles by adding own stylesheet in CMSMS after <link> tag call and following proper class naming.
That way you can easily update Framework stylesheets with every new release without breaking your own styles.

Just my 2c

Thank you, very helpful!

[Dr.CSS]

If you insist on using bootstraps or whatever frame works it is best to <link> to the main ones and use CMS style sheets for the major changes, make sure to call {cms_stylesheet} under the <link> style sheets...

[psy]

Each to their own... 'best' is debatable.

When using <link..> you lose the benefit of cmsms stylesheet caching. These are often big css files even when minimised and each one requires an extra call to the server.

They also often call on images, fonts etc. Making them db stylesheets, ensuring all background image URLs and font calls point to the right place in your theme directory, and replacing /* with [[* etc , further tweaks the page load speed and removes the need to add extra css rules to override the original ones that may point to the wrong place.

To overcome the pathing issue, you could of course put your framework in a separate directory under the root directory but then when you wanted to export the theme, the core structure (css, js, etc) would not be included.

Just my 2c worth.