Starter Code for Craft CMS

Code examples and boilerplate projects for getting started with Craft CMS using Docker, DDEV and example Twig templates.


One of the many advan­tages of using a CMS like Craft CMS is that it is agnos­tic about the tem­plate code you throw at it. Bring your own HTML markup, and CSS and Craft will duti­ful­ly ren­der your pages just as you expect. 

The down­side to this flex­i­bil­i­ty is that many peo­ple (per­haps, you?) come to Craft CMS look­ing for themes or out-of-box tem­plat­ing sys­tems that will make it easy to quick­ly stand up a new Craft site. 

The bad news is that Craft doesn’t work like that. The good news is that there are some starter projects with code and struc­ture that you can lean on to get going quickly. 

The even bet­ter news is that once you become pro­fi­cient in Craft CMS, you can cre­ate your own boil­er­plate project to quick­ly build addi­tion­al projects on the platform.

NyStudio107 Starter Scaf­fold (Dock­er)

Andrew Welch is a pro­lif­ic con­trib­u­tor to the Craft CMS com­mu­ni­ty and ecosys­tem (and he’s also a con­trib­u­tor here at CraftQuest!) with sev­er­al free and com­mer­cial plu­g­ins, count­less help­ful arti­cles, and a boil­er­plate project for Craft CMS.

Running Craft project locally with Docker

Andrew’s pri­ma­ry Craft Starter Scaf­fold is an opin­ion­at­ed set­up built on Dock­er for easy local devel­op­ment and avail­able using Vite, Web­pack, and Gulp. 

Also, take a look at his projects for a plu­g­in devel­op­ment scaf­fold­ing and the dev​mode​.fm web­site.

One Darn­ley Road Starter Scaf­fold (DDEV)

Inspired by Andrew Welch’s scaf­fold projects, the folks at One Darn­ley Road in Lon­don put togeth­er this love­ly Craft CMS scaf­fold project that uses Vite for front-end tool­ing and HMR

The project also includes oth­er help­ful (but option­al) tools sup­port, like Deploy­HQ auto­mat­ed deploy­ments, Post­mark for trans­ac­tion­al email, and Alpine.js for sprin­kling some reac­tiv­i­ty on your templates. 

DDEV is a pop­u­lar and well-sup­port­ed Dock­er-based local devel­op­ment tool, and it’s nice to see some more robust Craft scaf­fold projects built on it. 

Craft CMS Starter Project (DDEV)

Sean Smith cre­at­ed a starter project that you can use via composer create-project to get an opin­ion­at­ed Craft CMS starter project using DDev for local devel­op­ment, Tail­wind CSS, Alpine Js, and Lar­avel Mix. You can use Sean’s starter project as-is or fork it and cus­tomize to your liking! 

Craft-CMS Baukas­ten

Terse­ly described as a “[h]eavily opin­ion­at­ed starter kit for CraftCMS Projects,” this NyS­tu­dio107-inspired starter project has ready-to-use fields, sec­tions, vol­umes, and some of their favorite plugins.

From the project README:

I have devel­oped sev­er­al CraftCMS projects the last few years. For me, the set­up and cer­tain basics are what tend to take time away from me at the begin­ning of the project.

For this rea­son there is the Baukas­ten” to get start­ed faster in new projects. It’s a col­lec­tion of good prac­tices I have learned and adopt­ed from past projects and from oth­er peo­ple. It’s heav­i­ly opin­ion­at­ed, but feel free to fork and mod­i­fy it for your own needs.

Down­link Sam­ple Blog

This is a blog and pod­cast site I built for the Flex­i­ble Twig Tem­plates in Craft CMS course.

The site uses a Twig tem­plate stack that dynam­i­cal­ly includes tem­plates based on field han­dle, entry type, and the sec­tion name. It’s designed to be a flex­i­ble, dynam­ic approach to build­ing tem­plates in Craft CMS

The idea behind this is that you have top-lev­el han­dler” tem­plates that take the ini­tial tem­plate include and route it to the spe­cif­ic tem­plate based on some vari­ables, like sec­tion han­dle or entry type.

{% include ["item/" ~ entry.section.handle ~ "/" ~ entry.type, "item/" ~ entry.section.handle ~ "/default", "item/default"] %}

You don’t have to adopt this whole set­up; you could just employ it in some parts of your site where it makes sense to have this type of tem­plate reusabil­i­ty and flexibility.

Craft CMS Starter Blog

The Craft CMS team pro­vides a starter blog for get­ting up-to-speed with Craft CMS. When you clone or down­load the Github repos­i­to­ry and install it, you get some sam­ple ele­ments and con­tent to help you make your way around Craft. 

Starter Theme for Craft CMS

Piotr Pogorzel­s­ki cre­at­ed a starter theme and accom­pa­ny­ing doc­u­men­ta­tion that includes some boil­er­plate Twig files, base CSS code using Bul­ma, and Gulp for build­ing JS and CSS assets. 

If you don’t want to use Bul­ma, you can quick­ly drop in some­thing else. Or, you can use just brows­er Piotr’s set up and learn new ways to struc­ture your projects, espe­cial­ly the Twig tem­plates! Don’t miss his help­ful expla­na­tion of the Twig file and direc­to­ry struc­ture.

Miranj Craft Boilerplate

Miranj, a web design and devel­op­ment stu­dio in New Dehli (check out Souvik’s Dot All 2018 talk), has their own Craft CMS boil­er­plate project using their own mod­u­lar tem­plat­ing archi­tec­ture, a Gulp build process, and Tailwind. 

They also include a few default plu­g­ins ready to go, includ­ing Redac­tor, Envi­ron­ment Label, CP Field Inspect, and Imager.

Like oth­ers, you can use composer create-project to use it to start your next project. Check out the Github project for infor­ma­tion and instruc­tions.

Front-end User Reg­is­tra­tion Flow

I cre­at­ed front-end user reg­is­tra­tion flow exam­ple tem­plates as part of a short course on Craft user reg­is­tra­tion I did here on CraftQuest. You can fol­low the course or just look over the Twig tem­plates I cre­at­ed.

The tem­plates are meant to guide, not a drop-in for your project. The exam­ples use Sprig for reac­tiv­i­ty. Sprig is a free plu­g­in for Craft CMS by Ben Cro­ker of Put Your Lights On. 

The tem­plates use Tail­wind, but you can use any CSS frame­work (or none at all!). 

Craft CMS Offi­cial Demo Sites

These demo sites aren’t meant to be starters for your own project, but they can inspire how you struc­ture your own site build. 

Built by the team behind Craft CMS, you get an inside look into how they envi­sion their prod­ucts being used for a mod­ern con­tent web­site and an e‑commerce shop.

There are two sam­ple sites available:

  • Europa Muse­um — a con­tent site that tack­les a clas­sic use case for Craft CMS
  • Spoke & Chain — a demo site for Craft Com­merce with all the fixin’s for han­dling a typ­i­cal e‑commerce setup.

Andrew Welch also cre­at­ed his own forks of both of these projects that use his own Dock­er set­up. This is a nice way to see Craft run­ning on top of a mod­ern Dock­er and Vite/​Webpack setup.

Craft Com­merce Starter Project

Here on CraftQuest, we have a hand­ful of cours­es on using Craft Com­merce to build e‑commerce shops and sub­scrip­tion sites. From that work, I put togeth­er a Craft Com­merce starter project that gives you the essen­tial start­ing point for a Com­merce-pow­ered website.

This starter project includes Craft Com­merce, Stripe for Craft Com­merce, SEO­mat­ic for SEO, and the Dig­i­tal Prod­ucts plugin. 

It doesn’t do any think­ing for you on tem­plates, so bring your own tem­plate code and make it yours.

Cre­at­ing Your Own Boil­er­plate Craft CMS Project

After a while, you’ll get a good feel for how you like to work with Craft CMS. Maybe the exist­ing boil­er­plate projects miss some things you like, or per­haps they have a bit more than you’d like. If that’s the case, then you can cre­ate your own boil­er­plate. And, it’s not that difficult! 

In a CraftQuest livestream, Andrew Welch and Ryan Ire­lan cov­ered how to cre­ate your own boil­er­plate project for Craft CMS, includ­ing how to make it instal­lable via composer create-project using a cus­tom Com­pos­er pack­age via Packagist.

We end­ed up with our own Craft Starter that you can also use.