house-frontend

The shared frontend of the house projects: design tokens, a hand-written reset, the shared components with their scripts, Jinja macros producing the shared markup, and the server half of what the scripts expect from the endpoints they call. A project carries it as a git submodule pinned to one commit and builds its own pages on top of it. No build step, no framework: plain CSS, classic scripts and HTML.

Documentation

File	Covers
docs/getting-started.md	adding the library to a Flask project or a static site, updating it
docs/page.md	the page skeleton, load order, the header and how it collapses on a phone
docs/tokens.md	design tokens, colours in both schemes, typography
docs/components.md	buttons, forms, notices, tiles, tabs, the error and account cards, badges, cards, floating buttons
docs/overlays.md	the floating message, the confirm and input dialog, the about and filter dialogs
docs/macros.md	every Jinja macro and its parameters
docs/javascript.md	every function the scripts publish, and how a page configures them
docs/api.md	what the endpoints answer the scripts with, the Python that writes it, and the error pages
docs/examples.md	the projects that use it, pictured
docs/development.md	changing the library: rules, checks, pictures, rolling a change out

The why behind the visual rules - what must never be done and the reasons - is in the house conventions, frontend-design.md; these pages describe what the library contains and how to use it.

At a glance

{% import 'house/macros.html' as house with context %}
<!doctype html>
<html lang="cs">
  <head>
    ...
    {{ house.head() }}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}">
  </head>
  <body class="index-page" data-sticky-params="ch">
    {% call house.header() %}
      {{ house.search_form(suggest_endpoint='/api/suggestions') }}
      {{ house.settings_button() }}
    {% endcall %}
    {{ house.floating_message() }}
    {% call house.about('Název webu') %}<p>Co web dělá.</p>{% endcall %}
    <main>...</main>
    {{ house.scripts(components=['filter-dialog', 'paged-list']) }}
    <script src="{{ url_for('static', filename='js/index.js') }}"></script>
  </body>
</html>

Layout

__init__.py              init_app(): the blueprint 'house', the build stamp, the error handlers
api.py                   the answers the scripts read: items, options, suggestions, errors
static/css/              common.css, header.css
static/js/               common.js, header.js, filter-dialog.js, paged-list.js, share.js
templates/house/         macros.html
docs/                    these pages, the component gallery and its pictures
tests/                   make test: the API helpers, the macros rendered, the scripts in jsdom
tools/screenshots.py     retakes the pictures (make screenshots)