0

How do I find documentation explaining how to build a theme in Craft CMS? Where do I put my theme's assets, like my CSS and JS files, and how do I reference those assets in my Twig templates?

2

Generally speaking, Craft doesn't care where those files live, but I generally put all assets like CSS/SCSS, JS, etc in my craft/templates folder. If you're using gulp then you would compile your files out to the public folder and link to them appropriately. If you're not compiling those, then they would need to live in the public folder.

You can read more about templating here:

https://craftcms.com/docs/templating-overview

http://withchief.com/blog/craft-cms-the-very-basics-of-templating

As far as how I organize my scss and js I just drop those into an assets folder like so:JS setup[![][1]][1]

I hope this helps! Craft is extremely flexible with almost no restrictions on what it can do.

2
  • How do you organize your style and script assets from within the template's folder? /craft/templates/_js/jquery.js, /craft/templates/_css/bootstrap.scss Is that acceptable? May 22 '17 at 22:22
  • Updating my answer now. May 23 '17 at 15:27
5

Each Craft install is typically considered a discrete site, with its own design, information architecture, assets, etc.

This is why you might not be seeing information about "theming," per se.

However! Everything you need to start will be in craft/templates and public.

  1. craft/templates is how you generate HTML. Files in here often correspond to your sections and routes, but can also get rendered statically, just based on where you put them and what they're named. Check out the Routing documentation to decide how you want to set up your basic templates.
  2. public is the only folder in the installation that is accessible to the web, directly. All your CSS, JS, fonts, static images (i.e. a logo, icons), etc. will go. You can reference those files the same way you would a regular HTML file. Craft has some tags to help you with generating the proper URLs.

These are two of the primary concepts that you'll need to grasp to get started displaying your content.

Be sure to check out the Templating Overview and click through the next few Docs pages. Once you understand where a template needs to be (and why), you can dig in to the expanded templating docs.

One last (rather granular) note: Each type of content you define (Sections) that has a URL will ask you for an Entry Template. That path is within your craft/templates folder, and it'll automatically load the file when you visit that Entry's URL. (i.e. my "News" section might have _news/post as its Entry Template, which corresponds to craft/templates/_news/post.twig. The underscore prevents it from being directly accessed/rendered via mydomain.com/news/post.

2
  • Thank you! Yes I like the idea of not having "themes". I was just confused at how to handle various style and script assets. I was trying to search for anything about assets and templating, but only found resources about images and twig templates. Thank you for explaining the public folder and template tags. Every CMS handles "templates" just a tad bit differently, but conceptually, its all the same i reckon. May 22 '17 at 22:09
  • It sounds like you have a lot of flexibility, and may want to look for general front-end asset management strategies—my only advice is to keep your source files (i.e. Sass, Coffeescript/ES6, etc.) out of the public web root. Put those in, say, a src directory at the top-level of your project, and have them compile into public/assets/{asset type}. Best of luck! Join us in the Craft Slack team if you have further questions, and we'll help out. May 23 '17 at 19:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.