ModoTech Tracker

Restaraunt Sprint

Union Square Practice

Quick & Dirty Case Lander Docs

Hotswappable Themes

The Basics

https://sscl.up.railway.app/admin/⁠

⁠

USER: info@modocosm.io

PASS:

AQ?EXczP?$F8LpEK

⁠

PREVIEW:

http://sscl-real-estate-price-fixing-modolabs.vercel.app/⁠

⁠

Quickstart:

All Changes in CMS Should impact Dev Preview.

Projects

⁠

https://sscl.up.railway.app/admin/content/projects⁠

Projects, is a collection of different websites or case landers, they act as a parent to pages.

Project Configuration: Real Estate Commision Price Fixing

⁠

https://sscl.up.railway.app/admin/content/projects/1⁠

⁠

Project Settings: This is mostly for dev, feel free to ignore.

fields that matter here: Title, description

Color Settings: you can control all theme color variables here.

⁠

NOTE:

opacity levels are automatically generated from the basic input

opacity can be set manually in CMS, but that can become quickly overwhelming. currently disabled.

Comming later: (not an exhaustive list.)

Auto Generate 10 color levels, based on primary-dark and primary-light.

optional manual overide.

opacity levels over

FONT settings:

NOTE: Font UI is being reworked, the granularity leads to it being more overwhelming than what is currently temporarily replacing it.

⁠

RAW CSS Variables are exposed for the time being, quickest placeholder till clunky UI is refined.

The Page Object

⁠

Parent Project: what website/project is this page attached to?

(this would autofill for people assigned to only one case lander)

Title: the title of the page

Slug: what you see in the address bar after the root domain

Slice Master: this holds each slice a web page is made out of.

Change Order: Drag the Icon on the left side of each row

Remove a Page Block: click the “x” icon on the right.

to edit a slice: click anywhere in the middle of the row.

Create New: Select a Slice type, and add it to the bottom of the Slice Master

Add Existing: If you would like to re-use a component from elsewhere on the website, this is how you do it..

Slice Types: for this quick project, there are only two. (for now)

Hero Banner

A Hero Banner with an escaping form section

Content Block:

its a combination of wysiwyg and content split 50 from prior iterations of the framework, layout decisions are made from within the component

Title: the header text...

Modifiers: click these to select different options for your block

Alternative Background Color: in a basic theme, this would be off-white-grey;

Thin Container/Wide Container: expand or contract the content container from its default

Content: a wysiwyg editor

Companion Image: you can add a companion image at various slots in the component

None: No change to the basic Behavior

Above Title: add an image above the Header Text

Below Title: add an image below the header text.

Left: make the content of this component into two columns (a content pair) add the image to the left

Right: see left.

Companion Image Settings:

Image Size: native , Half Width Max, 1/3rd Width Max, Quarter Width Max

Image Behavior: sticky, contain, cover, escape

IMAGE: set the image here

ToDo: Documentation

Forms

Dev

Hero banner Round Out

Meta Data

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.