# Help with automatic css Integration of stylesheet

**URL:** <https://forum.pinegrow.com/t/help-with-automatic-css-integration-of-stylesheet/6908>\
**Category:** Frameworks\
**Created:** [September 7, 2022, 10:11am UTC](https://forum.pinegrow.com/t/help-with-automatic-css-integration-of-stylesheet/6908 "2022-09-07T10:11:29Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![seaj1one](https://avatars.discourse-cdn.com/v4/letter/s/ed655f/32.png) [@seaj1one](https://forum.pinegrow.com/u/seaj1one)\
**Post date:** [September 7, 2022, 10:11am UTC](https://forum.pinegrow.com/t/help-with-automatic-css-integration-of-stylesheet/6908/1 "2022-09-07T10:11:29Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![seaj1one](https://avatars.discourse-cdn.com/v4/letter/s/ed655f/32.png) [@seaj1one](https://forum.pinegrow.com/u/seaj1one)\
**Post date:** [September 7, 2022, 7:34pm UTC](https://forum.pinegrow.com/t/help-with-automatic-css-integration-of-stylesheet/6908/2 "2022-09-07T19:34:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)\
**Post date:** [September 8, 2022, 7:47am UTC](https://forum.pinegrow.com/t/help-with-automatic-css-integration-of-stylesheet/6908/3 "2022-09-08T07:47:30Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![seaj1one](https://avatars.discourse-cdn.com/v4/letter/s/ed655f/32.png) [@seaj1one](https://forum.pinegrow.com/u/seaj1one)\
**Post date:** [September 8, 2022, 12:10pm UTC](https://forum.pinegrow.com/t/help-with-automatic-css-integration-of-stylesheet/6908/4 "2022-09-08T12:10:21Z")

</div>

Hello @Emmanuel

Thanks for reaching out.

[https://automaticcss.com/](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](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/d/d45e2282d43d9dea122c2a3c9bb23661d5e29213.jpeg)

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.

---

<div class="post-metadata">

**Author:** ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)\
**Post date:** [September 8, 2022, 12:19pm UTC](https://forum.pinegrow.com/t/help-with-automatic-css-integration-of-stylesheet/6908/5 "2022-09-08T12:19:06Z")

</div>

@seaj1one

Okay, it seems to me that Adam from PeakPerfDigital [published a video on this particular topic](https://youtu.be/aR__1PzjpnY) where he talks about his experience with Automatic.css inside Pinegrow.

---

<div class="post-metadata">

**Author:** ![seaj1one](https://avatars.discourse-cdn.com/v4/letter/s/ed655f/32.png) [@seaj1one](https://forum.pinegrow.com/u/seaj1one)\
**Post date:** [September 8, 2022, 4:15pm UTC](https://forum.pinegrow.com/t/help-with-automatic-css-integration-of-stylesheet/6908/6 "2022-09-08T16:15:17Z")

</div>

@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](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/a/a05df69cc4f7226b5f6910f3faae24ecbb7b2746.jpeg)

---

<div class="post-metadata">

**Author:** ![adamslowe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/adamslowe/32/4590_2.png) [@adamslowe](https://forum.pinegrow.com/u/adamslowe)\
**Post date:** [September 8, 2022, 9:38pm UTC](https://forum.pinegrow.com/t/help-with-automatic-css-integration-of-stylesheet/6908/7 "2022-09-08T21:38:23Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![seaj1one](https://avatars.discourse-cdn.com/v4/letter/s/ed655f/32.png) [@seaj1one](https://forum.pinegrow.com/u/seaj1one)\
**Post date:** [September 9, 2022, 12:58pm UTC](https://forum.pinegrow.com/t/help-with-automatic-css-integration-of-stylesheet/6908/8 "2022-09-09T12:58:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![adamslowe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/adamslowe/32/4590_2.png) [@adamslowe](https://forum.pinegrow.com/u/adamslowe)\
**Post date:** [September 9, 2022, 11:59pm UTC](https://forum.pinegrow.com/t/help-with-automatic-css-integration-of-stylesheet/6908/9 "2022-09-09T23:59:22Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![seaj1one](https://avatars.discourse-cdn.com/v4/letter/s/ed655f/32.png) [@seaj1one](https://forum.pinegrow.com/u/seaj1one)\
**Post date:** [September 10, 2022, 7:51am UTC](https://forum.pinegrow.com/t/help-with-automatic-css-integration-of-stylesheet/6908/10 "2022-09-10T07:51:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![seaj1one](https://avatars.discourse-cdn.com/v4/letter/s/ed655f/32.png) [@seaj1one](https://forum.pinegrow.com/u/seaj1one)\
**Post date:** [September 10, 2022, 2:28pm UTC](https://forum.pinegrow.com/t/help-with-automatic-css-integration-of-stylesheet/6908/11 "2022-09-10T14:28:55Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/2/2bf55c0961367b736d037d035e97cea946fd890d.png)
