experience

Alert

Display contextual alert messages and dialogs.
.margin-reset { margin: 0; } Quick Example Toggle alert styling. 1{{< hackcss-alert type="info" >}} 2 {{< hackcss-button 3 type="primary" text="Toggle" 4 onclick="this.parentElement.classList.toggle('alert')" 5 />}} alert styling. 6{{< /hackcss-alert >}} Default with plain text and hidden comment: {{< hackcss-alert text="Alert Text" />}} {{< hackcss-alert >}}Inner Alert Text{{< /hackcss-alert >}} {{< hackcss-alert text="Alert Text" >}}Hidden Comment{{< /hackcss-alert >}} Alert Text Inner Alert Text Alert Text Default with formatted text:

Blockquote

Create pull quotes with citations and citation links.
With source: {{< blockquote cite="Mark Twain" text="The more things are forbidden, the more popular they become." />}} The more things are forbidden, the more popular they become. Mark Twain With anonymous source: {{< blockquote text="Obsessed is a word that the lazy use to describe the dedicated." />}} Obsessed is a word that the lazy use to describe the dedicated. N.N. With source and citation link: {{< blockquote citelink="https://style.

Button

Add colorful buttons to forms and pages.

Card

Display a bordered container with title area.
With header attribute and plain text: {{< hackcss-card header="Title" text="Lorem ipsum dolor sit amet" />}} Title Lorem ipsum dolor sit amet With header attribute and formatted text: {{< hackcss-card header="Hacker Ipsum" >}}<samp>Haxx0r ipsum true class firewall continue bytes recursively grep <b>Linus Torvalds</b> gobble Trojan horse d00dz baz. Crack bang <mark>ssh for int buffer</mark> sql fork mailbomb gnu then client salt spoof. Server python error throw sudo fatal while echo dereference concurrently.

Cell

Display a responsive cell inside a grid.
Contained by Grid with three columns of equal size: 1{{< hackcss-grid >}} 2 {{< hackcss-cell class="-4of12" text="4" />}} 3 {{< hackcss-cell class="-4of12" text="4" />}} 4 {{< hackcss-cell class="-4of12" text="4" />}} 5{{< /hackcss-grid >}} 4 4 4 With two columns of odd size: {{< hackcss-grid >}} {{< hackcss-cell class="-4of12" text="4" />}} {{< hackcss-cell class="-8of12" text="8" />}} {{< /hackcss-grid >}} 4 8 With 12 columns: {{< hackcss-grid >}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< /hackcss-grid >}} 1 1 1 1 1 1 1 1 1 1 1 1 Enclosing Cards with various Buttons inside:

Code Highlighter

Highlight code written in more than 160 languages.

Error Page

Give visitors a reason to stay when errors occur.

After Dark includes an animated 404 Page you can display when other pages cannot be found. The error page contains a full-screen background animation and “404” link with Ginsu treatment. Following the link navigates to the homepage.

Interactive Example

Fetch Injection

Load external scripts and styles with incredible speed.

Figure

Load images progressively with blurry placeholders.
With progressive image placeholder: {{< figure src="/images/watercolor_pTIyYTqAlF8_w1440h700.jpeg" alt="Artistic map" lqipsrc="/images/watercolor_pTIyYTqAlF8_w936h455.jpeg" title="Map of Bali in Watercolor" attr="Stamen Design" attrlink="https://maps.stamen.com/" >}} Map of Bali in Watercolor Stamen Design See Figures in Hugo for additional usage.

Form

Collect, validate and handle user input.
With auto-focused Text Input requesting a new email address: {{< hackcss-form autocomplete="disabled" >}} {{< hackcss-textinput autofocus="true" type="email" placeholder="Please change your email…" >}} {{< /hackcss-form >}} With Text Input and Label inside Form Group running Fuzzy Search in new window: {{< hackcss-form id="search" action="/search/" target="_blank" >}} {{< hackcss-formgroup >}} {{< hackcss-label for="query" text="Search query:" />}} {{< hackcss-textinput id="query" type="search" name="s" form="search" >}} {{< /hackcss-formgroup >}} Search query: Two forms with a Button and Text Input inside Alert with Throbber:

Form Group

Use with Label to visualize control validation states.
Label states with Text Input: {{< hackcss-formgroup >}} {{< hackcss-label for="default" text="Default:" />}} {{< hackcss-textinput id="default" >}} {{< /hackcss-formgroup >}} {{< hackcss-formgroup state="success" >}} {{< hackcss-label for="success" text="Success:" />}} {{< hackcss-textinput id="success" >}} {{< /hackcss-formgroup >}} {{< hackcss-formgroup state="warning" >}} {{< hackcss-label for="warning" text="Warning:" />}} {{< hackcss-textinput id="warning" >}} {{< /hackcss-formgroup >}} {{< hackcss-formgroup state="error" >}} {{< hackcss-label for="error" text="Error:" />}} {{< hackcss-textinput id="error" >}} {{< /hackcss-formgroup >}} Default: Success: Warning: Error: Disabling Label and disabled Text Area with Help Block:

Grid

Display a responsive grid with cells.
Containing three Cell of equal size: 1{{< hackcss-grid >}} 2 {{< hackcss-cell class="-4of12" text="4" />}} 3 {{< hackcss-cell class="-4of12" text="4" />}} 4 {{< hackcss-cell class="-4of12" text="4" />}} 5{{< /hackcss-grid >}} 4 4 4 With two columns of odd size: {{< hackcss-grid >}} {{< hackcss-cell class="-4of12" text="4" />}} {{< hackcss-cell class="-8of12" text="8" />}} {{< /hackcss-grid >}} 4 8 With 12 columns: {{< hackcss-grid >}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< /hackcss-grid >}} 1 1 1 1 1 1 1 1 1 1 1 1 Enclosing Cards with various Buttons inside:

Help Block

Combine with form controls to guide user input.
Plain or formatted text: {{< hackcss-helpblock text="Plain text Help Block" />}} {{< hackcss-helpblock >}}<i>Italicized HTML Help Block</i>{{< /hackcss-helpblock >}} {{% hackcss-helpblock %}}**Bold Markdown Help Block**{{% /hackcss-helpblock %}} Plain text Help Block Italicized HTML Help Block **Bold Markdown Help Block** Used above and below Text Input with class attribute: {{< hackcss-formgroup >}} {{< hackcss-helpblock >}} <strong>Enter a <em>secure</em> password below:</strong> {{< /hackcss-helpblock >}} {{< hackcss-textinput type="password" minlength="27" >}} {{< hackcss-helpblock class="muted" text="Min.

JIT Requests

Maximize resources while minimizing external requests.
After Dark makes JIT requests for some external assets to cut down on resource consumption and increase page performance. Take the Code Highlighter stylesheet for example: .highlight,pre.highlight{background:#000;color:#abb2bf}.highlight pre{background:#000}.highlight .ge{font-style:italic}.highlight .gs{font-weight:700}.highlight .ow{font-weight:700}.highlight .n,.highlight .nf,.highlight .nn,.highlight .o,.highlight .p{color:#abb2bf}.highlight .c,.highlight .c1,.highlight .cm,.highlight .cp,.highlight .cs{color:#5c6370;font-style:italic}.highlight .sr,.highlight .ss{color:#56b6c2}.highlight .k,.highlight .kc,.highlight .kd,.highlight .kn,.highlight .kp,.highlight .kr,.highlight .kt{color:#c678dd}.highlight .l,.highlight .ld,.highlight .s,.highlight .s1,.highlight .s2,.highlight .sb,.highlight .sc,.highlight .sd,.highlight .se,.highlight .sh,.highlight .si,.highlight .sx{color:#98c379}.highlight .nt,.highlight .nx,.highlight .vi{color:#e06c75}.highlight .il,.highlight .m,.highlight .mf,.highlight .mh,.highlight .mi,.highlight .

Label

Provide accessible captions for form controls.
Explicit label association with Text Input: {{< hackcss-label for="query" text="Search query:" />}} {{< hackcss-textinput type="search" id="query" >}} Search query: Implicit label association using Text Input and Help Block: {{< hackcss-form >}} {{< hackcss-label >}} {{< hackcss-helpblock text="Enter your Associate Tag:" />}} {{< hackcss-textinput name="AssociateTag" required="true" pattern="^\b\w*\b-20$" placeholder="associate-20" >}} {{< /hackcss-label >}} {{< /hackcss-form >}} Enter your Associate Tag: Combined with Form Group to show Text Input success state:

Last Modified

Help visitors understand when posts were last modified.
Denote posts with substantive changes or simply draw older, more relevant posts closer to the top of the listings with last modified. Modifications will be made obvious to visitors with a visible callout in post summaries and the original publish date will be kept intact in the post bylines. For robots, making this change will automatically update Schema Structured Data, RSS feeds and the lastmod setting in your Sitemap. Adjust last modified by adding a publishdate to post Front Matter and updating the date to the date and time you would like to show for the modification.

Lazy Loading

Defer loading of images, iframes and scripts.
After Dark uses lazySizes to prioritize loading of certain external resources to improve page load times and help reduce overall bandwidth consumption. Lazy loading works automatically for Post Images and when using the Figure Shortcode, or related Snippet, as seen here: Be Creative AK¥N Cakiner To use lazy loading in Custom Layouts or when creating your own Shortcodes adding the lazyload class and relevant data attributes as shown here:

Post Bylines

Create human and machine readable bylines in posts.
After Dark creates rich post bylines automatically. Bylines include optional author name, word count, links to Taxonomy Pages and Structured Data. Example Byline Published [by `author`] [`publishdate` or `date`] in [navigation](/categories/navigation) and tagged [links](/tags/links) and [taxonomy](/tags/taxonomy) using [`wordcount`] words. If author is specified in Site Configuration params or post Front Matter it will be included automatically in the byline attributing the author: [params] author = "Billy Joe Jim Bob" # the guy behind the guy behind the guy Adjust hide_author in Site Configuration to suppress attribution site-wide:

Post Images

Add large hero images without touching an image editor.
Sample image placement. Not the real deal. Add visual appeal to your posts with post images. Post images appear above post content and leverage Hugo Image Processing and Lazy Loading to provide fully automatic, lazy-loaded responsive images with LQIP and built-in art direction. Using post images requires some opinion with regard to the structure of your content. To create a post with a post image you must:

Progress

Show graphical progress bars with completion percentage.
Basic usage: {{< hackcss-progress value="40" >}} {{< hackcss-progress value="30" showpercent="true" >}} {{< hackcss-progress value="70" showpercent="true" filltext="pemuatan" >}} Inside an Alert: Stacked inside a Card: {{< hackcss-card header="Value-added Tax by Country" >}} {{< hackcss-progress value="16" showpercent="true" filltext="China – 增值税" >}} {{< hackcss-progress value="20" showpercent="true" filltext="France – TVA" >}} {{< hackcss-progress value="10" showpercent="true" filltext="Indonesia – PPN" >}} {{< hackcss-progress value="8" showpercent="true" filltext="Japan – 消費税" >}} {{< hackcss-progress value="15" showpercent="true" filltext="New Zealand – GST" >}} {{< hackcss-progress value="20" showpercent="true" filltext="United Kingdom – VAT" >}} {{< /hackcss-card >}} Value-added Tax by Country

Select

List a group of options in a drop-down menu.
Basic usage: {{< hackcss-select >}} <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> {{< /hackcss-select >}} Option 1 Option 2 Option 3 With Label inside Form Group: {{< hackcss-formgroup name="poolgroup" >}} {{< hackcss-label for="pool" text="Mining pool:" />}} {{< hackcss-select id="pool" name="pool" >}} <option>moneroocean.stream</option> <option>etn.nanopool.org</option> <option>monero.hashvault.pro</option> {{< /hackcss-select >}} {{< /hackcss-formgroup >}} Mining pool: moneroocean.stream etn.nanopool.org monero.hashvault.pro

Text Area

Add a multi-line plain-text editing control.
Read-only with prefilled text: {{< hackcss-textarea readonly="true" text="Only this and nothing more." >}} Only this and nothing more. With spellcheck disabled: {{< hackcss-textarea spellcheck="false" >}} With 16 columns and hard wrapping enabled: {{< hackcss-textarea cols="16" wrap="hard" >}} Inside disabled form group with error label and placeholder: {{< hackcss-formgroup hastextarea="true" disabled="true" state="error" >}} {{< hackcss-label for="message" text="Message:" />}} {{< hackcss-textarea id="message" placeholder="Guestbook offline…" rows="10" >}} {{< /hackcss-formgroup >}} Message:

Text Input

Add a single-line plain-text editing control.
Basic usage: {{< hackcss-textinput >}} {{< hackcss-textinput type="password" >}} {{< hackcss-textinput type="email" placeholder="Please enter your email…" >}} {{< hackcss-textinput disabled="true" placeholder="Disabled" >}} With Label and Help Block in Form with custom validation: {{< hackcss-form >}} {{< hackcss-label >}} {{< hackcss-helpblock text="Enter your Associate Tag:" />}} {{< hackcss-textinput name="AssociateTag" required="true" pattern="^\b\w*\b-20$" placeholder="associate-20" >}} {{< /hackcss-label >}} {{< /hackcss-form >}} Enter your Associate Tag: In Form Group with warning Label and Help Block:

Throbber

Display a CSS-only loading indicator.
Basic usage: {{< hackcss-throbber >}} Inside a Button: {{< hackcss-button isghost="true" type="info" >}} Please wait&hellip; {{< hackcss-throbber >}} {{< /hackcss-button >}} Please wait… Customize by creating your own CSS-only loading indicator.