gramlot.

Course · Lesson 10 of 20

Style the page you own

Separate theme defaults, page CSS and reactive presentation without manipulating shadow roots.

Reading · Practice2 sectionsPrerequisites: Arrange an application with containers
Course contents
Orientation
  1. 01 Install Gramlot and create Hello world
  2. 02 Connect text and colour to Data
  3. 03 Explore Data and Source with the inspector
  4. 04 Use relative and symbolic paths, then dataFormula
  5. 05 Call the server with dataRpc and .remote
Start a project
  1. 01 Create your first project
  2. 02 Read and compose Source
  3. 03 Initialize structured Data
  4. 04 Connect fields and values
Build a form
  1. 05 Accept values, preserve drafts
  2. 06 Declare a calculation
  3. 07 Run an action at the right time
  4. 08 Name behavior and understand lifecycle
Compose an interface
  1. 09 Arrange an application with containers
  2. 10 Style the page you own
  3. 11 Publish messages and ask before acting
  4. 12 Format values without changing Data
Connect services
  1. 13 Call an endpoint
  2. 14 Load a Source fragment
  3. 15 Load Data when it is read
  4. 16 Save, restore and send Data deliberately
Deliver your work
  1. 17 Organize pages and choose a host
  2. 18 Read the JavaScript edition
  3. 19 Deliver the JavaScript edition offline
  4. 20 Explain and change a complete form

Start from the page resources

Gramlot loads a base theme before page styles. A matching stylesheet, such as appearance.css beside appearance.py, can style that page. Page.css lists additional stylesheet URLs. Compact and the other theme overlays modify the base rather than replacing the page model.

Use the Themes and CSS guide’s two-file example. The current public guide does not provide a root.css() API; do not copy an older experimental declaration into current course work.

Change presentation without changing meaning

Use application classes and supported component variables or parts. Styles outside a component do not automatically cross its shadow boundary. Keep host navigation styling separate from the CSS of an authored Gramlot Page.

The Style and visibility example makes presentation reactive. It also distinguishes visible, which keeps the layout space, from hidden, which removes that space. A layout change need not modify the underlying application value.

Your turn

Try it yourself

  1. Create the appearance.py and appearance.css files from the linked guide in your local project.
  2. Change one class rule, reload and compare the styled area with the rest of the page.
  3. Open Style and visibility and compare the space occupied by visible and hidden content.

Check your understanding

Should a new visual theme require rewriting the form’s Data bindings?

Show the answer and expected result

No. Theme and page CSS affect presentation. Keep the same literal bindings and inspect the rendered result. Use documented variables and parts for components rather than reaching into their shadow roots.

Working examples and reference