GithubHelp home page GithubHelp logo

craft4-tutorial's Introduction

Craft 4 Solo - Tutorial

This tutorial/workshop started as a pure Craft CMS starter as provided in the craftcms/craft package with the following additions:

  • Added modules/_faux to enable autocompletion for some most frequently used variables in twig
  • Moves example module to modules/main
  • Set system timezone to Europe/Berlin
  • Added /web/cpresources, /node_modules, /config/license.key to .gitignore
  • Added more config settings and use fluent syntax in config/general.php

We then built a extended version of Craft's official tutorial.

Tutorial setup

  • Added setup/install for automated installation under ddev, imports a demo database with a user admin/password.
  • Added multi-lingual support
  • Added sections Home/Page/Post/SiteInfo/Topic
  • Added fields for sections incl. a simple matrix content builder.
  • Added sample content (mostly AI generated/translated)
  • Added twig frontend templates with a lot of comments that should be helpful for beginners.
  • Added CP styles
  • Added CP template ui elements
    • Display existing drafts
    • Display usage for assets
  • Basic Tailwind CSS setup

DDEV Installation

  • Clone repository
  • cd into project directory
  • Run bash setup/install <projectname>

Screenshots

Screenshot home page

Screenshot post index page

Screenshot drafts ui element

Screenshot usages ui element

craft4-tutorial's People

Contributors

wsydney76 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.