Craft CMS 3 Orientation Guide - Welcome!

This is your ori­en­ta­tion guide if you’re new to Craft CMS 3! We’ll help you under­stand the Craft phi­los­o­phy of build­ing awe­some stuff

Andrew Welch / nystudio107

Wel­come

With the release of Craft CMS 3, the plat­form has been grow­ing in pop­u­lar­i­ty of late, so we have many peo­ple who are new to the plat­form enter­ing the community.

This arti­cle is meant to be an ori­en­ta­tion guide, to help you under­stand what Craft is, how you might use it, and grok the over­all par­a­digms that Craft uses.

Whether you’re just com­ing to Craft your­self, or you’re on-board­ing a devel­op­er who is new to Craft, or you’re just sur­vey­ing the land­scape to see what’s out there, this is the blog for you.

In the spir­it of ​“teach­ing some­one how to fish,” we’ll also pro­vide a list of resources where you can get help, and learn more about Craft!

What is Craft CMS?

Craft CMS 3 is a con­tent man­age­ment sys­tem cre­at­ed by Pix­el & Ton­ic that is designed for peo­ple who want some­thing a lit­tle bit more out of the sys­tem. It fol­lows the tra­di­tion­al mod­el of an AdminCP back­end for con­tent author­ing, and serv­er-side ren­dered con­tent for the frontend.

Craft uses PHP (7.0 or lat­er required) as the base lan­guage, with the robust Yii2 frame­work lay­ered on top. Craft itself is then lay­ered on top of that, pro­vid­ing the con­tent mod­el­ing, AdminCP inter­face, and a bevy of APIs to let you manip­u­late user-gen­er­at­ed content.

It uses the Twig tem­plat­ing lan­guage for inter­fac­ing with its APIs and ren­der­ing con­tent, but it also can work as a ​“head­less” con­tent serv­er via the Ele­ment API or GraphQL via the CraftQL plu­g­in.

So you can use Craft to ren­der your con­tent via HTML/​Twig, or you can use it for the con­tent author­ing, and ren­der your fron­tend with Vue­JS or React or what­ev­er you prefer.

It’s up to you.

Unlike many API-based CMSs, Craft is self-host­ed, so there are no month­ly or usage fees. See the arti­cle How Agen­cies & Free­lancers Should Do Web Host­ing for more infor­ma­tion on self-hosting.

Where Craft dif­fers from oth­er such CMS sys­tems is in its rich con­tent author­ing sys­tem on the back­end, as well as a fron­tend that’s essen­tial­ly a blank canvas.

Craft’s lack of assump­tions is some­thing that can be off-putting to peo­ple who are approach­ing it for the first time. There is no con­cept of ​“pages” or ​“posts” or the like. Why not? Because if those were the base build­ing blocks for the CMS, it’d be mak­ing some pret­ty bold assump­tions about how the web­site is structured.

There are also no ​“themes.” The fron­tend is yours; Craft does­n’t inject any­thing into it like a CSS theme. Instead, you can use what­ev­er CSS frame­work you pre­fer (or your own) to cre­ate some­thing cus­tom, indi­vid­ual, and awe­some. One frame­work that is grow­ing in pop­u­lar­i­ty is Tail­wind CSS, as dis­cussed in the dev​Mode​.fm episode Tail­wind CSS util­i­ty-first CSS with Adam Wathan.

The answer to ​“How do I do X in Craft?” is often ​“How­ev­er you want!”

The basic build­ing blocks for con­tent in Craft CMS are:

• Entries. Entries hold the con­tent that you want to dis­play on your web pages
• Cat­e­gories. Cat­e­gories allow you to cre­ate tax­onomies for your content
• Assets. Assets are upload-able files such as images, PDFs, and oth­er content
• Users. Users are mem­ber accounts that can be used to log into the sys­tem, and edit content

Just about every piece of con­tent in Craft is an Ele­ment. Things like Entries, Cat­e­gories, Users, Assets, and so on are all Ele­ments. That means they all inher­it the same abilities:

• Fields. All Ele­ments can have fields added that allow you to add cus­tom data to them
• Rela­tions. All Ele­ments can be relat­ed to oth­er elements
• Search­able. All Ele­ments auto­mat­i­cal­ly have their con­tent indexed, and are searchable

In Craft, Sec­tions are what you use to orga­nize your Entries. Sec­tions can be:

• Chan­nels. Chan­nels are streams of sim­i­lar con­tent; they con­tain Entries
• Struc­tures. Struc­tures are like chan­nels, but they can be man­u­al­ly ordered, and arranged in a hier­ar­chi­cal manner
• Sin­gles. Sin­gles are for one-off con­tent, such as sin­gle pages sin­gle­ton data

When a page is loaded on the fron­tend, Craft finds the Twig tem­plate that match­es the URI, and ren­ders it with data inject­ed from the cor­re­spond­ing Entry.

With these build­ing blocks and their abil­i­ties, you can design what­ev­er infor­ma­tion archi­tec­ture that is need­ed for your web­site. There are of course more avail­able, such as tags, per­mis­sions, and so on, but these are the basics that you should con­cep­tu­al­ly be aware of.

Craft also has robust local­iza­tion, mul­ti-lin­gual and mul­ti-site sup­port built into the foun­da­tion of the system.

One way you can build a site in Craft — but cer­tain­ly not the only way — is by cre­at­ing a flex­i­ble ​“con­tent builder” for your con­tent authors. The Cre­at­ing a Con­tent Builder in Craft CMS has a sim­ple exam­ple of using Matrix block fields to cre­ate a ​“con­tent builder.”

There’s also a Live Pre­view for con­tent authors, a robust plu­g­in ecosys­tem (with an inte­grat­ed plu­g­in store), and a pow­er­ful debugger/​profiler to help speed the devel­op­ment of your project.

You can even make a full blown cus­tom appli­ca­tion as dis­cussed in the Enhanc­ing a Craft CMS 3 Web­site with a Cus­tom Mod­ule article.

Use cas­es for Craft CMS 3

There’s an old expres­sion: ​“Use the right tool for the job.” The rea­son this is such an endur­ing con­cept is that it applies to every­thing from car­pen­try to writ­ing to choos­ing a Con­tent Man­age­ment Sys­tem (CMS). Craft is no exception.

In the recent inter­view Craft CMS 3 with Pix­el & Ton­ic Founder Bran­don Kel­ly! on dev​Mode​.fm, the CEO of Pix­el & Ton­ic him­self stat­ed that for friends of his who need­ed a sim­ple web­site, he’s nev­er once rec­om­mend­ed Craft CMS.

That’s not to say that Craft can’t be used to cre­ate sim­ple web­sites, but rather that it’s sim­ply overkill. You’ll want to use Craft CMS when you want:

• A bespoke, cus­tom-designed web­site that stands out from the competition
• Exquis­ite con­trol over the fron­tend from a design, SEO, and per­for­mance POV
• A rich, robust, user-friend­ly con­tent-author­ing system

Craft CMS has been used to cre­ate every­thing from celebri­ty web­sites to full eCom­merce stores (using Craft Com­merce) to cus­tom intranet portholes.

You can use it to cre­ate a tra­di­tion­al web­site, or you can also lever­age the robust Yii2 frame­work to cre­ate a cus­tom appli­ca­tion that needs a friend­ly back­end for con­tent authors.

Check out the Post-Mortem: LinkedIn Tal­ent Intel­li­gence Expe­ri­ence arti­cle for a unique use case for Craft. Here’s a smat­ter­ing of web­sites that use Craft CMS:

• Moz​.com
• Bare­foot Contessa
• Nook Sleep Systems
• Asso­ci­at­ed Press Blog & Asso­ci­at­ed Press Insights
• IDEO

…and many more. Check out the Craft CMS Case Stud­ies for more in-depth dis­cus­sion how Craft has been used to solve real-world problems.

Where do I go from here?

This arti­cle is just your ori­en­ta­tion; now it’s time to dive in, and get start­ed with Craft CMS. This is where we teach you how to fish.

Here are some resources that I’ve found real­ly useful:

• Craft CMS 3 Doc­u­men­ta­tion. The defin­i­tive source of every­thing Craft
• Craft CMS Stack Exchange. A great place to search for answers to ques­tions you may have
• Dot All Con­fer­ence. The offi­cial Craft CMS con­fer­ence, cur­rent­ly held annually
• Craft Dis­cord. Real-time chat with a fan­tas­tic com­mu­ni­ty of like-mind­ed Craft developers
• Craft Quest. Get up to speed with Craft CMS quick­ly with these tuto­r­i­al videos from Ryan Irelan
• Awe­some Craft. Care­ful­ly curat­ed list of awe­some Craft CMS arti­cles, resources and shiny things.
• Craft Link List. A curat­ed pub­li­ca­tion col­lect­ing inter­est­ing links about Craft CMS
• dev​Mode​.fm Pod­cast. A pod­cast ded­i­cat­ed to mod­ern web devel­op­ment (often with a Craft slant)
• nys​tu​dio107​.com Blog. Pure nepo­tism… but with many use­ful devel­op­ment arti­cles on Craft

The Set­ting up a New Craft CMS 3 Project arti­cle goes into more depth on actu­al­ly set­ting up a new Craft project, if you’re itch­ing to get going. The Craft Mind­set is an excel­lent and FREE video series from CraftQuest​.io to help you approach a Craft project with confidence.

Now go out and and cre­ate some­thing fantastic!

Further Reading

If you want to be notified about new articles, follow nystudio107 on Twitter.

Copyright ©2020 nystudio107. Designed by nystudio107