You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
4 weeks ago | |
---|---|---|
assets | 4 weeks ago | |
layouts/partials | 1 year ago | |
LICENSE.md | 2 years ago | |
README.md | 2 years ago | |
config.yaml | 1 year ago | |
go.mod | 1 year ago | |
theme.yaml | 1 year ago |
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.