Getting Started

Quick start guide to using McGowanStyle in your project — install the package, include the compiled assets, and extend base.html for your pages.

How `base.html` works

The project's base.html establishes the site chrome: header, drawer, a centered <main class="u-container"> for page content, footer, and the compiled CSS/JS includes. It exposes a few template blocks you should use:

  • title — page title (placed in <title>)
  • head_extra — place additional <head> tags (meta, styles) here
  • content — main page content goes here (inside the centered container)
  • scripts — page-specific scripts go here (rendered before the compiled JS bundle)
base.html (essential parts)
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{% block title %}Site{% endblock %}</title>
  <link rel="stylesheet" href="/cdn/dist/mcgowan.css">
  {% block head_extra %}{% endblock %}
</head>
<body>
  <header class="ms-topbar">...navigation...</header>

  <main class="u-container">
    {% block content %}
  </main>

  <footer class="ms-footer">...footer...</footer>

  {% block scripts %}{% endblock %}
  <script type="module" src="/cdn/dist/mcgowan.js"></script>
</body>
</html>

Example: `index.html`

Here's a concrete example of an index.html page that extends base.html. It fills the title and content blocks and can optionally add page scripts.

index.html
{% extends 'website/base.html' %}%}

{% block title %}Home - McGowanStyle{% endblock %}

{% block content %}
<div class="u-grid u-grid-cols-12">
  <div class="u-col-12 u-col-md-6 u-col-lg-4">
    <section class="ms-card">
      <h1>Welcome</h1>
      <p>Welcome to McGowanStyle — a small, composable UI framework.</p>
    </section>
  </div>

  <div class="u-col-12 u-col-md-6 u-col-lg-8">
    <section class="ms-card">
      <h2>About</h2>
      <p>Use the grid and ms-card components to build pages quickly.</p>
    </section>
  </div>
</div>
{% endblock %}

{% block scripts %}
<!-- Optional page scripts -->
{% endblock %}

Important notes:

  • Keep page markup inside the content block — base.html controls the wrapper, header, and footer.
  • Include only minimal page-specific scripts/styles via the provided blocks; prefer the framework utilities for layout and spacing.

Quick markup examples

Small examples showing common patterns:

Grid + card

Card A
Card B
Card C
HTML
<div class="u-grid u-grid-cols-12">
  <div class="u-col-4"><div class="ms-card">Card A</div></div>
  <div class="u-col-4"><div class="ms-card">Card B</div></div>
  <div class="u-col-4"><div class="ms-card">Card C</div></div>
</div>

Button + badge

New
HTML
<button class="ms-btn ms-btn--primary">Primary</button>
<span class="ms-badge ms-badge--primary">New</span>
<