Help with automatic css Integration of stylesheet

Frameworks
1

I’m relatively new to Pinegrow, but I have managed to get Pinegrow working using the bootstrap framework by using the tutorials.

Would anyone be able to help me add the SCSS files from automatic CSS to Pinegrow?

The main issue, I think, is not knowing which files I need as they originated from a WP plugin. The official release from the owners of ACSS could be a while yet.

If people like myself can manually integrate ACSS into Pinegrow, it’ll be a good selling point. Not to mention speed up my workflow.

If anyone from the Pinegrow community could help, it would be amazing.

2

There’s loads of interest in my topic. Are there any SCSS experts out there?

3

@seaj1one

I’m not sure I understand the use case because I don’t know ACSS, but if you want to generate a CSS file based on a SASS/SCSS file, here’s a simplified example of the recommended flow in Pinegrow.

This is one way to do it, you could also choose to use external tools such as Codekit, Prepros etc … which work perfectly with Pinegrow.

1 Like
4

Hello @Emmanuel

Thanks for reaching out.

https://automaticcss.com/, or ACSS for short, is a Framework that allows you to build websites quicker. It’s a WordPress plugin at the moment, but they do have plans to cover non-Wordpress sites but not just yet.

Within the plugin, it comes with Stylesheets based on SCSS files. Similar to bootstrap, I guess.

So I’ve created a project based on plain HTML and connected it to my local WordPress site. I’ve also installed the ACSS plugin too.

I’ve dropped the SCSS files into Pinegrow using visual studio and like below.

image
image1912×980 160 KB

Would you know what I should do next, or do you need anything else from me that I can provide you?

Thanks in advance, and sorry for hijacking another topic.

5

@seaj1one

Okay, it seems to me that Adam from PeakPerfDigital published a video on this particular topic where he talks about his experience with Automatic.css inside Pinegrow.

6

@Emmanuel

You’re spot on. I’ve seen that video, which inspired me to see if I could get it working with a later version. It also doesn’t cover every step.

I’m not a web developer, but happy to research.

From what I understand, green on the snip is the file that will generate the final CSS. Correct me if I’m wrong, as I’m still learning.

I’m thinking about doing a few things:

  • So, if I use bootstrap (as an example), should I also create my SCSS file to generate the final CSS?
  • Should I maybe copy the entire final CSS stylesheet and use the search and replace tool that you have and turn each class into a mixin?
  • I’ve installed ACSS on my local WP site. Is there a way to import the SCSS files?
  • Any other suggestions that you may have?

image
image1912×980 161 KB

7

@seaj1one, I’ve been meaning to circle back to this one. I’ll take a look tomorrow and see what I can see. Feel free to reach out to me directly if you want to coordinate.

1 Like
8

That’ll be great. Shoot us a DM once you’ve had a chance to have a look. Nice one.

9

My day got completely away from me. I’m going to try to carve out a little time to play with this on Sunday, otherwise I’ll have some time to devote to it on Monday.

10

That’s ok, I may have discovered someone interesting.

11

I thought that I had the golden ticket. Instead of creating a project, just open the website and away you go.

Oh well. I can use the stylesheet URL or add automatic.css file as a resource. I prefer the URL, as any changes I make within the ACSS dashboard are reflected within PG. I.e. if I change the primary colour. The only thing that I do need to do is update the URL as the URL does change.

image
image1908×995 107 KB