[Part 1] Building A Website in Craft CMS - An Introduction, Lets talk LEGOS

In a previous post I talked about the importance of selecting the best CMS (Content Management System) for your website and recommended CraftCMS as my CMS of choice. In this article we're going to familiarize ourselves with exactly what Craft is, what you need to know, and the basics of how it works.

Image Credit Craft

So What Exactly Is Craft?

Craft is a content management system that is built on the PHP language's YII framework. It is database-driven which makes it easier to build and manage robust websites as we access our data by executing unique queries to the database where all the content/data is stored.

Ok That Sounds Good, Is It Free?

The short answer is no, it is a commercial CMS and not fully opened sourced like some other popular CMS's like Drupal, Wordpress, etc. There is however a free option which does not include all of the features of the Client and Pro licenses. You can even get access to all of the features of the paid options during development by running Craft from any domain that it does not consider to be a public domain. A few examples include:

• localhost
• 127.0.0.1
• website.dev
• testing.website.com
• website.yolo
• website.com:0987

This is how the licensing page will appear if you are not on a public domain, as you can see it says Test instead of Buy Now as shown in the next image to allow you to use the additional features and test them until you are ready to push the site to a public domain should you need those features for your site:

If you do want to purchase a license for the Client or Pro versions of the software to unlock the additional features once you have put the site on a domain that IS considered to be a public domain, you can simply purchase the license from inside the Control Panel. See the attached image for how it will appear on a domain that is considered a public domain:

Here are the additional features available for the Client and Pro licenses:

Ok That All Sounds Great! So How Does It Work?

Craft (originally called BLOCKS in the beta) works a bit like Legos. There are multiple different types of elements that you use to build together the final product, using and re-using different elements for convenience. So lets dive right in shall we?

Sections

Sections are the top level lego for most things you'll want to do while building a site in Craft. There are multiple different section types based on what they will be used for:

• Single - Singles are used for one-off pages that are very unique and often times use their own templates. The most common use for a Single is the Homepage of a site. Some people use singles more extensively throughout a complex site but in my opinion, this is sloppy and lazy particularly when a properly configured Structure or Channel could achieve the same functionality and be more DRY.
• Channel - A channel is used to group related content, a great example of where to use a channel would be for News or a blog (but who needs a blog when we have steemit).
• Structure - The structure section type is a bit of a hybrid between a Single and a Channel. You use a structure to group similar content that requires a hierarchy. Most pages on a website (aside from things such as a blog, news, store, etc.) would fit perfectly into a Structure and also make the creation of a Navigation bar very easy with siblings, children, etc.

Entry Types

Each section whether it is a Single, Channel, or Structure has at least 1 Entry Type. Singles are limited to just 1 as they are used for one-offs as explained above. Channels and Structures can have an infinite number of entry types however.

Ok so I can have different entry types, why would I do that anyways?

I'm so glad you asked! As we previously discussed, Structures and Channels are used for grouping together similar content. All similar content however is not always identical in structure, sometimes something may need additional or different fields for content, different capabilities, or maybe an entirely different layout!

Entry types makes this possible. Each unique entry-type has it's own Field Layout, don't worry we'll get to that in depth in a moment, essentially though it means that you can have unique content requirements/options per type. You can also differentiate how to handle content based on what entry type it uses in the code, but that'll all be covered in a later article, lets not get too far ahead of ourselves now!

Assets

Assets are the top level lego for any files, images, etc. you'll want to manage while building a site in Craft. There is only 1 type of Asset however you can create different Asset Groups, each with their own unique rules and fields.

Globals

Globals are essentially content snippets that don't exactly fit as a Single, Channel, or Structure but still need to be easily edited from within the control-panel.

I frequently use Globals for things such as Social Media accounts that are output throughout the site, maybe a short site/company summary in the footer, or contact information for the site owner.

Like Assets there is only one type of Global however you can create different Global Groups, each with their own unique rules and fields.

Field Layouts

All of the previously mentioned Legos use Fields to allow the input and output of content grouped into Field Layouts. Here is an example of an asset/global/entry-type field-layout screen for instance:

That particular field layout utilizes some advanced fields (hence how few are being used) that have many options within them. This screenshot is the field layout of a standard page structure, of an actual website I am in the process of building. Here is what it looks like on the entry-creation page:

And here is another after i have clicked Add a Block to reveal one of the MATRIX field types which includes multiple fields.

Field Groups are unique to the Entry Type/Assets Group/ Globals Group/etc. that they are assigned to, however fields can be shared across all of them. For instance if you needed a Hero Image which is an Asset field btw, in multiple entry types or a global, you could simply add that field to their unique field groups. This makes it much simpler to think about content in a more abstract way rather than having to create unique fields for every single instance you need them regardless of the fact they are essentially identical to previously used fields. This is one area in which Craft really shines and MANY other CMS's fall short.

Fields

Fields are what are grouped into Field Layouts as described a moment ago. There are many types of default fields such as:

• Assets - Used to upload and associate files and images.
• Categories - Used to allow selection of pre-set categories
• Checkboxes - To allow the selection of multiple items using checkboxes
• Color - To allow a user to select a custom color with a nice color wheel
• Date/Time - To allow users a nice Jquery enabled date-time field for selecting dates and/or time.
• Dropdown - Similar to checkboxes, to allow the selection of an item using a dropdown
• Entries - To relate an entry(s) in some way to this particular content
• Lightswitch - A simple On/Off switch that may provide custom functionality in your code.
• Matrix - An advanced field that allows the creation of customizable content structures from different Block Types with multiple fields.
• Multi-Select - A multi-select box to allow content managers to select multiple pre-set items.
• Number - A field that only accepts numbers, able to set minimum, maximum, value as well as decimal points to accept.
• Plain Text - A simple plain text field, great for things such as Headings or if like steemit, you require users to write their content in Markdown. Plain text fields can be single line or multi-line, it's up to you.
• Rich Text - Provides a full blown WYSIWYG (with custom options hidden or shown) to allow users to enter and edit content if they are not familiar with Markdown, similar to Steemit's option.
• Table - A table of content with pre-set structure.
• Tags - To tag content exactly how we do here on Steemit, also allowing the selection of pre-created tags with suggestions.
• Users - To relate a particular user(s) to the content as defined in your code.

In addition to these default fields there are Plugins such as:

• Neo
• Supertable
• Linkit
  And many others that provide even more advanced options and customizability, we're not going to go into detail on these in this article, but I promise we'll cover them in future posts. If an extreme amount of interest is expressed early on, we may cover these earlier in the series than originally planned, otherwise they'll be discussed at least several articles from now.

In Our Next Article

In the next posts about CraftCMS I'll begin go cover some basic templating based on what we learned in this article using the powerful Twig templating language. We'll discus custom routes for custom behavior and direction, and checkout some more awesome features of the control panel such as LIVE PREVIEW, yes you heard that right, watch the page come to life in real-time as you enter your content to get it all pixel perfect.

I HOPE YOU ENJOYED & LEARNED SOMETHING!

As always If you've reached it to the end of the article, given it's not particularly short, I'm going to assume that you enjoyed reading it. Please go ahead and UPVOTE the post, RESTEEM if you think your followers would also find value in it, and make sure to @FOLLOW ME to make sure you don't miss the upcoming articles in this series where we'll get much more in depth and even build a site together from the ground up! EXCITING TIMES!

Thanks to all of my followers both new and old, I hope to continue to bring you quality content that interest you, feel free to comment any requests for any particular topic you'd like to read or learn about if you believe I may be able to answer it for you. Cheers!