<p>In general, Craft doesn't normally come into the equation when we're talking about general frontend assets.</p>

<p>Things like minification, preprocessing of SASS/LESS/Coffescript/WHATEVER, image compression (asset images, not content images) etc. should preferably be handled by a tool like Grunt or Gulp (my favorite).</p>

<p>Even when it comes to CSS/JS for your plugins, you might want to do the actual build process with Gulp.</p>

<p>I usually have all source files in the project root, under a folder named <strong>src</strong>. In there, you have subfolders named js, scss, img, fonts etc.</p>

<p>If you're unfamiliar with for example Gulp, I might recommend you <a href="http://markgoodyear.com/2014/01/getting-started-with-gulp/" rel="nofollow">Mark Goodyear's article Getting started with Gulp</a>.</p>

<p>On the Craft side, you could take a look at <a href="https://github.com/johndwells/craft.minimee" rel="nofollow">John D. Wells' awesome Minimee</a> and <a href="https://github.com/aelvan/Inlin-Craft" rel="nofollow">Inlin</a>.</p>

CC BY-SA 3.0
2014-09-23T18:52:56.623Z
Thank you very much. I already use grunt for compiling assets and managing my workflow, but maybe I should take a closer look at Gulp.
Christoph Kepper
CC BY-SA 3.0
2014-09-25T14:05:43.080Z
@Fred, thanks for the Gulp tutorial link. Having previously been using Grunt, that was a bit of a welcome revelation :)
Steve Holland
CC BY-SA 3.0
2014-09-26T14:19:10.800Z
@SteveHolland that's great. It has been great to move over to Gulp for most things. Much cleaner configuration, and the usage of piping is just great. Check out the setup in this article as well: viget.com/extend/gulp-browserify-starter-faq - I really like it.
Fred Carlsen
CC BY-SA 3.0
2018-03-13T04:44:28.547Z
This is a good answer, but where should the processed files wind up so that the stylesheet links can point to them and  the browser can see them?
David Rhoden
CC BY-SA 3.0
2018-03-13T09:14:22.977Z
In a folder accessible by your webserver, ie. `public/assets/`
Fred Carlsen
CC BY-SA 3.0
2014-09-23T13:47:02.393Z
2014-09-23T16:43:58.793Z
2014-09-23T16:43:58.793Z
Fred Carlsen
<p>I am a little puzzled by the way craft handles CSS files. Although I am used to working with SCSS and CSS assets and setting up a reasonable directory structure, I was expecting a little documentation or a best practice recommendation.</p>

<p>At first, I tried to create an asset folder with all CSS files. But then I realized that they could not be uploaded because they were not in the <a href="http://buildwithcraft.com/docs/config-settings#allowedFileExtensions" rel="nofollow noreferrer">allowedFileExtensions</a> config array. </p>

<p>The plugin documentation contains some info about handling plugin-specific <a href="http://buildwithcraft.com/docs/plugins/resources" rel="nofollow noreferrer">frontend resources</a> but it does not say anything about the general CSS files.</p>

<p>The most helpful information I found so far was <a href="https://craftcms.stackexchange.com/a/1424/798">this answer</a> although it did not really help me with my question.</p>

<p>What is the recommended way to handle CSS assets? What are your best practices for asset management and setting up a frontend workflow in Craft?</p>

<p>Best regards</p>

<assets><workflow><css>
Where should I put custom CSS files?
# Where should I put custom CSS files?

(Asked by: username_0 on 2014-09-23)

I am a little puzzled by the way craft handles CSS files. Although I am used to working with SCSS and CSS assets and setting up a reasonable directory structure, I was expecting a little documentation or a best practice recommendation.

At first, I tried to create an asset folder with all CSS files. But then I realized that they could not be uploaded because they were not in the [allowedFileExtensions](http://buildwithcraft.com/docs/config-settings#allowedFileExtensions) config array.

The plugin documentation contains some info about handling plugin-specific [frontend resources](http://buildwithcraft.com/docs/plugins/resources) but it does not say anything about the general CSS files.

The most helpful information I found so far was [this answer](https://craftcms.stackexchange.com/a/1424/798) although it did not really help me with my question.

What is the recommended way to handle CSS assets? What are your best practices for asset management and setting up a frontend workflow in Craft?

Best regards

**Tags:** assets, workflow, css

---

## 1 answers

### Answer by username_1 on 2014-09-23. Score: 5 | Accepted answer

In general, Craft doesn't normally come into the equation when we're talking about general frontend assets.

Things like minification, preprocessing of SASS/LESS/Coffescript/WHATEVER, image compression (asset images, not content images) etc. should preferably be handled by a tool like Grunt or Gulp (my favorite).

Even when it comes to CSS/JS for your plugins, you might want to do the actual build process with Gulp.

I usually have all source files in the project root, under a folder named **src**. In there, you have subfolders named js, scss, img, fonts etc.

If you're unfamiliar with for example Gulp, I might recommend you [Mark Goodyear's article Getting started with Gulp](http://markgoodyear.com/2014/01/getting-started-with-gulp/).

On the Craft side, you could take a look at [John D. Wells' awesome Minimee](https://github.com/johndwells/craft.minimee) and [Inlin](https://github.com/aelvan/Inlin-Craft).

> **Comments:**
> **username_0**: Thank you very much. I already use grunt for compiling assets and managing my workflow, but maybe I should take a closer look at Gulp.  
> **username_2**: @Fred, thanks for the Gulp tutorial link. Having previously been using Grunt, that was a bit of a welcome revelation :)  
> **username_1**: @SteveHolland that's great. It has been great to move over to Gulp for most things. Much cleaner configuration, and the usage of piping is just great. Check out the setup in this article as well: viget.com/extend/gulp-browserify-starter-faq - I really like it.  
> **username_3**: This is a good answer, but where should the processed files wind up so that the stylesheet links can point to them and  the browser can see them?  
> **username_1**: In a folder accessible by your webserver, ie. `public/assets/`  

---

