How to transfer bricks-frontend-inline-inline-css styles to a file?

How To
1

In the bricks settings, I set the css generation method “External files”. But on the frontend, I see that bricks writes inline styles for my classes. Why doesn’t it put them in a file? I would like my html to look cleaner. Considering that I am writing a very large number of styles for the project, there will be a large layer of inline styles in html. What to do so that the styles are written only to the file? Thx

image 2
image 21688×1033 203 KB

1 Like
2

Hi,

try to regenerate CSS.

Bricks → Settings → Performance → “Regenerate CSS files” Button

3

It did not help. After regeneration, the styles for my classes are written inline directly in html.

Here is a test link (Sample Page – Try Bricks – t6966007). You may notice that the styles for a class like (.scroll–container) are written in html and not in the post-2.min.css file

I believe this is due to the fact that we are creating a global class. But why not put these classes, say, in the global.min.css file and include them on all pages?

If I write for example 100+ classes, then my html will be bloated in the current situation.

Or am I misunderstanding something?

1 Like
4

Thanks for pointing this out, @Lkey, I just checked one of my sites and see the same - Someone with more development knowledge will hopefully point out why these are added inline.

I would have thought that instead of adding all the custom classes to a global file and bloating it, wouldn’t it be better to add the CSS to the post.css file specifically for that post to help keep unused CSS at a minimum?

@timmse Sorry to tag you in on this; it is logged under a ‘How to,’ so appreciate this would take a lower precedence than bug submissions and something you might not keep an eye on, but is this how it should be and is this optimal and if not should a feature request be created?

Thanks

Mick

2 Likes
5

I see.

Well you are right. It should be done bit different.

I think better implementation will be after introducing “global class manager” which is in roadmap.

6

Sorry for my English.

Thanks for the answer. I’m new to the forum, not quite sure how to format my question.

Michael. Yes, that’s what I was talking about. file that contains custom styles for this page. We create post-*** And I thought that when specifying css generation, all styles would be written there. But I see something else.

timms. I understand that inline styles optimize the page in their own way. I understand that bricks is a builder that simplifies writing styles. But as a former designer, I will say that styles are very important. I ask you to consider putting the styles in separate files.

I try to do awwwards level work. My desire is that the site on bricks be on the front page.

Thank you for your quality work and feedback.

7

Hey @Lkey

No need to apologise, I think you explained it very well :+1:

I have checked the website source code of Zion, O2, Ele, and Breakdance, and none of them puts the breakpoints as inline styles. I am not a CSS delivery optimisation specialist but cannot find any content on the big G that advocates this, making me think it might be a bug or a feature request? :person_shrugging:

I will move this over to a bug ticket. This way, it can either get a fix or an explanation as to why and the benefits, but at least there will be an outcome.

Was also mentioned in the FB group aswell:

P.s. Welcome to the forum :slight_smile:

8

Hey,
Welcome to the forum and sorry for the late reply!

With Bricks 1.7, the first step is done. We’re providing a setting to disable the class chaining, please see the changelog: Changelog – Bricks

Quote from the changelog:

If the feedback is positive, the next step is to provide one global class CSS file (when using the external file CSS loading method) rather than loading those rules inline.

Best regards,
timmse

5 Likes
9

We still get Inline CSS put in the head.
The option to put css in an external file is not working?
It’s not removing the inline CSS from the head.
Thanks

10

Your question was answered in the comment above,…

“If the feedback is positive, the next step is to provide one global class CSS file (when using the external file CSS loading method) rather than loading those rules inline.”