toby3d
/
va
1
0
Fork 0
Code
Dead simple CSS framework for Hugo websites
28 Commits
1 Branch
11 Tags
74 KiB
CSS 78.6%
HTML 12.9%
JavaScript 8.5%
 
 
 
Go to file
Maxim Lebedev 0dd8f45da5
🔥 Removed dark theme support for now 		2023-05-03 17:04:37 +06:00
assets 🔥 Removed dark theme support for now 2023-05-03 17:04:37 +06:00
layouts/partials 🐛 Fixed invalid integrity value 2022-02-25 02:51:48 +05:00
LICENSE.md 🎉 Initial commit 2021-06-08 21:06:54 +05:00
README.md 🎉 Initial commit 2021-06-08 21:06:54 +05:00
config.yaml 🚚 Renamed modelu path prefix 2022-02-24 01:26:09 +05:00
go.mod 🚚 Renamed modelu path prefix 2022-02-24 01:26:09 +05:00
theme.yaml 🚚 Renamed modelu path prefix 2022-02-24 01:26:09 +05:00

README.md

VA

Dead simple responsive-flexible-adaptive CSS framework for Hugo websites

Install

Config

Import module in your site
configuration:

imports:
  - path: gitlab.com/toby3d/va

Templates

Inject cached partials in your <head> (as early as possible to speed up loading) and <body> (preferably as close as possible to the closing tag):

<head>
  {{ partialCached "va/head" . }}
</head>
<body>
  ...
  {{ partialCached "va/body" . }}
</body>

...And that's it!

Usage

Use the classes from the attached styles for the layout of your templates.

Methodologies

I use CUBE CSS for class readability with brackets and class sorting and BEM to reduce code coherence and ease of debugging.

Blocks

See Every Layout (and buy the book, it's great!).

Exceptions

Use variables for changing some values and implement exceptions.

Easy example:

<figure class="frame" style="--frame-denominator: 1; --frame-numerator: 1">
  ...
</figure>

Advanced example:

<div class="[ sidebar sidebar_side_left sidebar_no-stretch ][ stack center ]" style="--sidebar-side-width: 25%; --sidebar-content-min: 70%; --center-gutters: var(--s0); --center-max: calc(var(--measure) * 1.5)">
  <div>
    <aside>
      ...
    </aside>
    <article>
      ...
    </article>
  </div>
</div>

Docs

Coming soon.