Site Building¶
SkyCMS uses a three-layer content architecture — Layouts → Templates → Pages — that separates site-wide structure from reusable page patterns and per-page content. This system gives site builders control over design consistency while allowing editors to focus on content.
Audiences: Site Builders, Developers, Administrators
Jump to:
1. Content Architecture: Layouts, Templates, Pages¶
Documentation: Layouts, Templates & Articles (Developers) · Key Concepts
Three-Layer Model¶
┌─────────────────────────────────────────────┐
│ Layout (site-wide shell) │
│ ┌───────────────────────────────────────┐ │
│ │ Template (reusable page structure) │ │
│ │ ┌─────────────────────────────────┐ │ │
│ │ │ Page (editor content) │ │ │
│ │ └─────────────────────────────────┘ │ │
│ └───────────────────────────────────────┘ │
└─────────────────────────────────────────────┘
| Layer | Managed By | Purpose |
|---|---|---|
| Layout | Site Builder / Admin | Global header, footer, navigation, base styles, scripts |
| Template | Site Builder / Admin | Reusable page structures with defined editable regions |
| Page | Editor / Author | Content authored within template-defined regions |
2. Layouts¶
Documentation: Layouts (Site Builders) · Layouts (Developers) · Creating Layouts (Website Launch)
The layout is the outermost shell of every page — the consistent chrome that appears across the entire site (or a section of it).
Layout Responsibilities¶
- Global site structure (header, footer, sidebar)
- Navigation menus
- Base spacing and typography
- Theme tokens and brand colors
- Site-wide scripts (analytics, chat widgets)
- Site-wide stylesheets
Layout Editing¶
Two editing modes:
- Page Builder (GrapesJS) — Visual drag-and-drop design
- Code Editor (Monaco) — Direct HTML/CSS editing
Layout Features¶
| Feature | Description |
|---|---|
| Create | New layout from scratch |
| Edit Code | Direct HTML/CSS editing with Monaco |
| Visual Designer | GrapesJS drag-and-drop builder |
| Edit Notes | Attach metadata and documentation to a layout |
| Preview | Preview layout changes before publishing |
| Publish | Make a layout version the active default |
| Promote | Set a layout as the site-wide default |
| Export | Export layout as a downloadable file |
| Import | Import from the community layout library |
| Delete | Remove a layout (with confirmation) |
Layout Versioning¶
- Published version is the active default shown to visitors
- Draft versions branch from the published version
- Promote a draft to become the new published version
- Only one published default layout active at a time
Community Layout Library¶
- Browse and import pre-built layouts from the community gallery
- Paginated, sortable gallery view
- One-click import into your site
3. Templates¶
Documentation: Templates (Site Builders) · Templates (Developers) · Creating Templates (Website Launch)
A template defines the reusable page structure within a layout. Templates contain editable regions where editors place content.
Template Responsibilities¶
- Repeated page structure (content area, sidebar, feature sections)
- Define editable regions with specific toolbar profiles
- Presentation defaults (spacing, typography for the content area)
- Content slot definitions
Template Editing¶
Two editing modes:
- Page Builder (GrapesJS) — Visual template composition
- Code Editor (Monaco) — Direct HTML editing with region markup
Template Features¶
| Feature | Description |
|---|---|
| Create | New template from scratch |
| Edit Code | HTML editing with editable region markup |
| Visual Designer | GrapesJS builder for template structure |
| Pages | View all pages using this template |
| Update Page | Apply template changes to a single page |
| Publish | Make template version active |
| Publish Drafts | Publish template and update all affected pages |
| Preview Impact | See which pages will be affected before publishing |
| Delete | Remove template (with confirmation) |
Editable Region Markup¶
Templates use HTML attributes to define where editors can place content:
<div data-ccms-ceid="main-content"
data-editor-config="standard"
class="ck-content">
<!-- Editor content goes here -->
</div>
Region Attributes¶
| Attribute | Purpose |
|---|---|
data-ccms-ceid="region-id" |
Stable identifier — persists across template updates |
data-ccms-new="true" |
Auto-generate a GUID on first save (for new regions) |
data-editor-config="profile" |
Toolbar mode: title, simple, standard, advanced, image-widget |
class="ck-content" |
Apply CKEditor styling to the region |
data-ccms-enable-alt-editor="true" |
Enable alt-text editing for image widget regions |
Supported Region Elements¶
- Block containers:
<div>,<section>,<article>,<aside>,<main>,<header>,<footer> - Headings:
<h1>through<h6> - Nested editable regions are not allowed — each region must be independent
Content Preservation on Template Update¶
- When a template is updated, existing content in unchanged regions (same
data-ccms-ceid) is preserved - Only new regions appear empty; existing content is not overwritten
- Safe rollout strategy: test on one page first, then mass-update
Template Patterns¶
Common template patterns provided or recommended:
- Content / Article — Standard article page with main content area
- Landing Page — Hero section, feature blocks, CTA sections
- Campaign — Time-limited promotional layouts
- Information with Secondary Nav — Content area with sidebar navigation
4. Pages¶
Documentation: Pages (Site Builders) · Building the Home Page · Building Initial Pages
Pages are the concrete content instances that editors create and publish. Each page inherits structure from its layout and template.
Page Properties¶
- Title with URL slug auto-generation
- Title uniqueness validation
- Associated layout and template
- Editable content within template-defined regions
- Version history
- Permissions (per-page access control)
- Publication status and scheduling
Page Types¶
- Standard content pages
- Blog posts (managed through the blogging subsystem)
- Home page (special designation, created via initial setup or promoted)
- SPA (Single Page Application) deployments
5. Widgets¶
Documentation: Widgets Overview · Custom Widgets (Developers) · Breadcrumbs · Forms · Image Widget · Nav Builder · Search · Table of Contents · Crypto Widget
Reusable components that editors can insert into pages through the Page Builder or template definitions.
Available Widget Categories¶
Based on the GrapesJS block library integration:
- Blog components (stream, post)
- Contact forms and CTAs
- Content blocks (text, headings, lists)
- Commerce elements (pricing tables)
- Feature showcases
- Footer layouts
- Image galleries
- Header/navigation components
- Hero sections
- Statistics/data displays
- Step-by-step process displays
- Team member profiles
- Testimonial sections
Widget Behavior¶
- Drag-and-drop placement in the Page Builder
- Configurable properties per widget instance
- Responsive behavior inherited from the design system
- Style customization via the Style Manager panel
6. Style Guide Support¶
Documentation: Style Guide Template
SkyCMS provides a style guide template pattern for establishing and documenting site design standards.
Style Guide Template¶
- Reference template for typography, colors, spacing, and component styling
- Serves as a living style reference for editors and site builders
- Helps maintain visual consistency across pages and editors