Socket
Book a DemoInstallSign in
Socket

source.toby3d.me/toby3d/va

Package Overview
Dependencies
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

source.toby3d.me/toby3d/va

Go Modules
Version
v1.5.0
Version published
Created
Source

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.

FAQs

Package last updated on 03 May 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts