4

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 config array.

The plugin documentation contains some info about handling plugin-specific frontend resources but it does not say anything about the general CSS files.

The most helpful information I found so far was this answer 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

Community
  • 1
Christoph Kepper
  • 107
  • 1
  • 5

1 Answers1

5

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.

On the Craft side, you could take a look at John D. Wells' awesome Minimee and Inlin.

Lindsey D
  • 23,974
  • 5
  • 53
  • 110
Fred Carlsen
  • 2,997
  • 13
  • 23
  • 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 Sep 23 '14 at 18:52
  • @Fred, thanks for the Gulp tutorial link. Having previously been using Grunt, that was a bit of a welcome revelation :) – Steve Holland Sep 25 '14 at 14:05
  • @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 Sep 26 '14 at 14:19
  • 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 Mar 13 '18 at 04:44
  • In a folder accessible by your webserver, ie. public/assets/ – Fred Carlsen Mar 13 '18 at 09:14