This documentation is still in progress. We are working hard to update all our screenshots to the new Magnolia 6 style. Please bear with us.
With Magnolia front-end development we are referring to the most common task on most web projects: developing templates to generate the actual HTML, CSS and JS of the projects - and enabling authors to populate them with content.
Many Magnolia projects involve both front-end and back-end developers. To help you all work together in parallel, Magnolia supports both java-based modules and light modules in a single project.
The Get started section below provides a simple introduction to working with Magnolia specifically as a front-end developer, from concepts to a little hands-on learning.
The Go further section provides some links to access in-depth information on the different subjects introduced.
Start here to learn the essentials about working in Magnolia as a front-end developer:
Magnolia basics for front-end developers: Learn the basics about modules, templating and how to handle resource files in Magnolia.
Install Magnolia: Quickly install Magnolia using the CLI to prepare for the tutorial.
Hello Magnolia for front-end developers: Use a simple template in Magnolia and make some changes to it.
Also check out the new front-end developer training courses offered by Magnolia!
Light development in Magnolia: Learn how to work with Magnolia without Java programming skills.
Modules: Magnolia projects are built out of modules, learn about the different kinds of modules and their structure.
YAML: Learn about using YAML to configure Magnolia. Spaces are important.
Templating: Magnolia templating mechanism explained.
How to work with images: Learn how to handle images with Magnolia.
Creating a website with Magnolia: Create a website with Magnolia.
Create light modules: Create and use a fully-functional template module.
Web resources: Access CSS, JS and other web resources.
Themes: Configure your site's visual identity.
Magnolia templating kit: Use these templates as they are or to gain inspiration to create your own.
Define template definitions: Define your blueprints for creating pages, areas and components.
Define dialogs: Define the editable content properties of your templates.
REST: Access Magnolia content using REST.
Bootstrap content: Add XMLs to the JCR.
Cotoolz: IDE add-on which validates input and assists when editing YAML.