Wednesday, April 23, 2025

Day 5: Making it Look Good - Theming and Basic Styling


Day 5, and it's time to make our Sitecore site look less like a collection of boxes and more like a real website! Today, I'm diving into theming and basic styling in SXA.

What I'm Learning Today:

  • SXA Themes: The Site's Skin. SXA uses themes to control the visual styling. There are default themes, and I'm learning how to apply them to my site. Themes contain CSS, JavaScript, and other assets. Get an overview of "Themes" within the SXA section of the Sitecore Documentation page: https://doc.sitecore.com/
  • Customizing Themes: The default themes are a good starting point, but most projects need customization. I'm looking into how to clone a theme and then modify the CSS and other assets to match a specific design. Search the Sitecore Documentation page for "Customize SXA Theme": https://doc.sitecore.com/
  • Scriban: Dynamic Rendering Power. Scriban is a templating language used within rendering variants for more advanced logic when displaying content. It looks like a way to add dynamic behavior to my components without writing full C# code for every little thing. Find information on "Scriban" within the SXA documentation on the Sitecore Documentation page: https://doc.sitecore.com/
  • Custom Components (A Glimpse): While SXA has a lot of components, sometimes you need something unique. I'm getting a basic understanding that you can create custom renderings using C# and integrate them into Sitecore. This is more advanced, but good to know for the future. Look for information on "Create a Rendering" on the Sitecore Documentation page: https://doc.sitecore.com/

My Day 5 Takeaways:

  • SXA themes provide a structured way to manage the visual styling of a Sitecore site.
  • Customizing themes involves working with CSS and other front-end assets within the Sitecore theme structure.
  • Scriban looks like a powerful tool for adding dynamic behavior to components directly within the Sitecore UI.
  • While SXA offers a lot, Sitecore's extensibility allows for creating fully custom components when needed.

Where to Go From Here:

This 5-day sprint has given me a solid foundation in Sitecore XM and SXA. My next steps are definitely going to be:

  • Deeper dive into Scriban and more complex rendering variant scenarios.
  • Exploring the world of custom component development.
  • Understanding data source configuration and how components get their content.
  • Learning about workflows and the content publishing process in Sitecore.
  • Engaging with the awesome Sitecore community!

Thanks for joining me on this learning journey! I hope this has been helpful. Remember, the Sitecore Documentation (https://doc.sitecore.com/) is your best friend as you continue to explore.


Happy learning!

#Sitecore #SXA #WebDevelopment #Learning #CMS

Day 4: Giving Content Structure - Data Templates and Architecture


Day 4 is all about understanding how content is organized and structured within Sitecore using data templates. This is the backbone of any good website.

What I'm Learning Today:

  • Data Templates: Defining Content Fields. Templates are the blueprints for our content. They define what fields each type of content item will have (e.g., a news article might need a headline, body, image, and author). Learning how to create and configure these is key: Explore the "Working with Templates" section on the Sitecore Documentation page: https://doc.sitecore.com/
  • Content Architecture: Planning for the Future. Just creating templates isn't enough. I need to think about how different content types relate to each other and how they'll be organized in the Content Tree. This is all about planning for a maintainable and scalable website. Search the Sitecore Documentation page for "Content Architecture" or "Content Strategy" for more insights: https://doc.sitecore.com/
  • Standard Values: Setting the Defaults. Standard values let you pre-populate fields in a template with default content. This saves content authors time and ensures consistency. Learn about "Standard Values" on the Sitecore Documentation page: https://doc.sitecore.com/
  • Information Architecture (IA): The User's Journey. While not strictly a Sitecore feature, I'm also thinking about how users will navigate the site and how content will be linked. A well-planned IA is crucial for a good user experience.

My Day 4 Takeaways:

  • Data templates are the fundamental building blocks for defining content structure in Sitecore.
  • A well-thought-out content architecture is essential for a manageable and scalable website.
  • Standard values are a neat way to improve the content authoring experience and maintain consistency.
  • Thinking about the user's journey (IA) is just as important as the technical content structure.

Next Steps: Tomorrow, I will shift my focus to the visual layer, exploring SXA themes and how to customize the website's look and feel. I'll also get a basic introduction to Scriban for more advanced rendering customizations.

Follow along: https://learning.sitecore.com/learn/learning_plan/view/26/sitecore-experience-accelerator-sxa-collection.

Day 3: Playing with LEGOs - SXA Components and the Grid


Alright, Day 3 and I'm finally in the Experience Editor, playing with SXA! It feels like building with LEGO, but for websites.

What I'm Learning Today:

  • The SXA Toolbox: A Treasure Trove! Wow, there's a whole library of pre-built components I can just drag and drop onto the page. Text, Image, Navigation, Forms, it's all there! This will definitely speed things up. You can find an overview of SXA components on the Sitecore Documentation page: https://doc.sitecore.com/
  • The 12-Column Grid: Layout Power! SXA uses a responsive 12-column grid system. It's all about dividing the page into these columns and placing components within them to create different layouts that adapt to various screen sizes. The "Layout" tab in the Experience Editor is where you control this. Learn more about the SXA Grid System on the Sitecore Documentation page: https://doc.sitecore.com/
  • Rendering Variants: Component Flexibility. This is a cool concept. Instead of writing code to display a component differently in various situations, rendering variants let you define different HTML structures and data mappings right in the Sitecore UI. Check out the "Rendering Variants" section on the Sitecore Documentation page: https://doc.sitecore.com/
  • Partial Designs: Reusable Sections. These are like pre-built chunks of layouts and components (like a header or footer) that you can reuse across multiple pages. Huge time-saver! More info on "Partial Designs" can be found on the Sitecore Documentation page: https://doc.sitecore.com/

My Day 3 Takeaways:

  • The SXA Toolbox is packed with useful, ready-to-go components.
  • Understanding the grid system is crucial for creating flexible and responsive layouts without writing extensive custom CSS.
  • Rendering variants provide a powerful way to customize component presentation without requiring code changes for every minor adjustment.
  • Partial designs are going to be my best friend for creating consistent site structures.

Next Steps: Tomorrow, I'm digging into the data side of things – how content is structured using data templates and how it all comes together.

Follow along: https://learning.sitecore.com/learn/learning_plan/view/26/sitecore-experience-accelerator-sxa-collection.

Day 2: Getting My Hands Dirty - Setting Up Shop

 


Day 2 is all about getting a local Sitecore development environment up and running. This can be a bit of a rite of passage for Sitecore developers, so let's see how it goes!

What I'm Learning Today:

  • Local Installation (The Traditional Route): I'm going the traditional route for now, using the Sitecore Install Assistant (SIA). It looks like there are prerequisites like .NET Framework, ASP.NET Core Hosting Bundle, and SQL Server. The official installation guide seems pretty comprehensive (and necessary!): Find the installation guide for your specific Sitecore version on the main Sitecore Documentation page: https://doc.sitecore.com/
  • Key Tools - Initial Setup:
    • Sitecore CLI: Installed this using the .NET CLI. Seems like it's going to be my go-to for tasks like serializing items and deploying code. Get started with Sitecore CLI on the Sitecore Documentation page: https://doc.sitecore.com/
    • Sitecore for Visual Studio: Just installed this extension in Visual Studio. It adds Sitecore project templates and helps with connecting to my local instance. Look for information on "Sitecore Developer Tools" or "Sitecore for Visual Studio" on the Sitecore Documentation page: https://doc.sitecore.com/

My Day 2 Takeaways:

  • Setting up a local Sitecore instance can be a bit involved, so following the official documentation closely is key. Patience is definitely a virtue here!
  • Sitecore CLI looks like a powerful tool for automating Sitecore tasks.
  • The Visual Studio extension appears to make development within my familiar IDE much smoother.

Next Steps: Tomorrow, the fun begins! I'm finally going to start playing with SXA components in the Experience Editor. Let's see what these pre-built goodies can do!

Follow along: https://learning.sitecore.com/learn/learning_plan/view/50/xm-cloud-for-jss-headless-developers.

Move to day 3

Day 1: Hello Sitecore XM & SXA - First Impressions

 


Okay, Day 1. Time to demystify Sitecore XM and SXA. I've heard they're a big deal in the web development world, so let's see what the hype is all about.

What I'm Learning Today:

  • Sitecore XM: The Content Powerhouse. From what I gather, Sitecore XM is the core CMS. It's not just a place to store text and images; it's a system for managing the entire lifecycle of web content, featuring workflows and collaboration tools. Think of it as the structured brain behind a website.
  • Sitecore SXA: The Developer's Toolkit. SXA is the cool kid on the block for us developers. It's a layer on top of XM that provides a ton of pre-built components, templates, and even themes. The promise? Faster development and more reusability. Sounds like music to my ears!
  • Key Concepts - My Initial Grasp:
    • Templates: These are like content blueprints. Imagine defining the fields for a blog post (title, body, author, date). That's what templates do. Explore the "Working with Templates" section on the Sitecore Documentation page: https://doc.sitecore.com/
    • Layouts: The structure of a webpage – where different elements go. Search for "Layouts" on the Sitecore Documentation page: https://doc.sitecore.com/
    • Renderings/Components: Reusable UI bits that display content or add functionality. SXA boasts a big library! Look for "Renderings" or "Components" on the Sitecore Documentation page: https://doc.sitecore.com/
    • Themes: Styling – the look and feel of the site. Find information on "Themes" within the SXA section of the Sitecore Documentation page: https://doc.sitecore.com/
    • Experience Editor: The visual editor for content folks to build pages. Understanding this is key for building components they'll love. Learn about the "Experience Editor" on the Sitecore Documentation page: https://doc.sitecore.com/

My Day 1 Takeaways:

  • Sitecore XM is a robust CMS, and SXA is the framework that aims to make our development lives easier.
  • The core concepts of templates, layouts, and components appear fundamental to the structure and display of content.
  • The Experience Editor is where the content magic happens for non-developers.

Next Steps: Tomorrow, I'm tackling setting up a local development environment. This is crucial for actually getting my hands dirty. Wish me luck!

Follow along: https://learning.sitecore.com/learn/learning_plan/view/51/xm-cloud-for-net-headless-developers.

Move To Day 2