ACSS Support!

Can’t say I blame him. Building and maintaining a plugin requires time and resources. He’s probably got enough on his plate with ACSS/Frames, his youtube channel, forums and clients.

I am a bit sad since I really enjoy how ACSS makes building sites in Bricks a joy, but hopefully someone can share a similar “framework” in the Cwicly library. :smiley:

This is what I strongly recommend anyway.
Cwicly has a dedicated option built in to use these classes inside the builder.

There is an exception and that would be Tailwind.
You have full control as well, it’s most powerful and it’s free.
There is a chance we will see it at some point inside Cwicly.

Tailwind would be interesting, but only if it’s done right. I would want to be able to create custom classes using @apply and have only the classes I use be generated. I really like how TailPress does it, where you just add classes and it creates a cached CSS for just those classes. It doesn’t allow for custom classes using @apply though. I’m not sure if you can use Tailwind variables in CSS or not, so that’s something to look into at some point.

Ideally you would be able to use any TW class, create custom classes, use TW variables (if they exist), and have it generate CSS only using what you’ve used. The downside is that you can’t use CSS variables to define global colors in Cwicly. I know you can use them in all of the other color inputs (except gradients), so if we were able to use CSS variables to define global colors, that would be great. I love just being able to click the color swatch in Cwicly to add colors and change them all at once if I ever need to.

1 Like

If this ever gets a thing, it’s done the Cwicly way.
So, nothing to worry about, I guess.

Haha, that’s true… I usually trust the Cwicly way!

@msguerra74, before I moved to Cwicly, I was using Oxygen, and there was plugin very similar to ACSS called Agency Base which I used. When I moved to Cwicly, I continued using it, but since it doesn’t integrate with the builder backend, I simply set up my variables, then copy the resulting stylesheet into a global stylesheet in Cwicly.

I have my utility classes set up and added (through the nice improvement to virtual classes), and these reference the variables defined in the Agency Base stylesheet. Doesn’t go so far as having breakpoints or anything like that, but I use it heavily for sizing things (variable sizes and fonts), so I never have to change these per breakpoint.

I did buy ACSS when he had the LTD last year, but have not used it at all. Might come in handy at some point.

My personal framework sounds similar to yours where I mostly use my own CSS for variable font and spacing so I don’t have to modify them at each breakpoint. Haha, and I also got the ACSS LTD and have never used it! I got it because it was advertised as working with Cwicly in the future, but it looks like that’s been put on the back-burner until who knows when.

The main thing I wanted was responsive type and spacing so I created a SCSS function where I enter the smallest size I want, the largest size I want, the smallest breakpoint, and the largest breakpoint, and it spits out the complicated clamp math for me. Then I decided to setup some defaults for sections, buttons, and things like that. Then before I knew it, I had a whole system going with the exact settings I prefer. The only thing I don’t have in mine is colors and grid since I prefer to use Cwicly’s for that.

At some point I may build in some responsive variants and some common grid patterns, but I may just do those as a component library now that we have the cloud thing. I also added a SCSS variable that toggles on support for Cwicly, so if I turn it off, it doesn’t output any Cwicly specific stuff in case I want to use it for standard HTML or in some other builder. I personally only use Cwicly, but I have some clients on other builders and I am keeping an eye on Bricks, even though it really can’t compare with Cwicly.

The only reason I even follow Bricks is in case @Louis decides to retire one day and Cwicly goes away!

1 Like

The only thing I don’t have in mine is colors and grid since I prefer to use Cwicly’s for that.

Blockquote

Why I loved Agency Base was that it did colours as well (I know ACSS does this, too). It automatically creates shades and tints from the various colours set up inside. So I can generate things like --primary-light, --primary-dark, --primary-30 (opacity 0.3), etc.

Looks like this:

    --primary: #ffab49;
    --primary-light: #ffc580;
    --primary-lighter: #ffdeb7;
    --primary-lightest: #fff7ed;
    --primary-dark: #b37834;
    --primary-darker: #805625;
    --primary-darkest: #4d3416;
    --secondary: #a85f44;
    --secondary-light: #c38f7d;
    --secondary-lighter: #ddbfb5;
    --secondary-lightest: #f7efed;
    --secondary-dark: #98563e;
    --secondary-darker: #543022;
    --secondary-darkest: #331d15;
    --secondary-trans-10: rgba(168,95,68,0.1);
    --accent: #3f0201;
    --accent-light: #794e4e;
    --accent-dark: #2d0201;
    --accent-trans-10: rgba(63,2,1,0.1);
    --accent-trans-30: rgba(63,2,1,0.3);
    --accent-trans-50: rgba(63,2,1,0.5);
    --base-text: #100704;
    --base-text-lighter: #888382;
    --base-text-lightest: #e8e7e6;
    --light-text: #fbeee0;
    --light-text-lighter: #fdf7f0;
    --light-text-lightest: #fffefc;
    --light-background: #fcfbf4;
    --dark-background: #100704;
    --dark-background-lighter: #e8e7e6;
}

I use both these and the Cwicly colours, until I can figure out a more streamlined way.

Yep, colors are tricky when you want them baked into your framework and still want to use the colors in the builder. Some things just need colors, but I never know what colors I’ll need for each project, so yeah… haha. It’s funny, with your variables, you use the same type of wording that I always use with things like light, lighter, lightest, dark, darker, darkest.