### Install with NPM Source: https://blades.ninja/css/pico Install the @anyblades/pico and @anyblades/blades packages using npm. ```bash npm install @anyblades/pico # optional npm install @anyblades/blades ``` -------------------------------- ### Manual Installation of Pico.blades.css Source: https://blades.ninja/css/pico Link the pico.blades.css file in the of your HTML for manual installation. ```html ``` -------------------------------- ### Install Blades via npm Source: https://blades.ninja/html Install the @anyblades/blades package using npm and create a symbolic link to the includes directory. ```bash npm install @anyblades/blades cd ./_includes # or where your includes dir is ln -s ../node_modules/@anyblades/blades/_includes/blades ``` -------------------------------- ### Install Prettier Plugin for Jinja Template Source: https://blades.ninja/html Install the prettier-plugin-jinja-template for auto-formatting Nunjucks files. ```bash npm i -D prettier-plugin-jinja-template ``` -------------------------------- ### NPM Installation of Blades CSS Source: https://blades.ninja/css/standalone Install Blades and optionally Pico via NPM. Import them into your CSS. ```bash npm install @anyblades/pico # optional npm install @anyblades/blades ``` ```css @import "@anyblades/pico"; /* optional */ @import "@anyblades/blades"; /* can be used standalone */ ``` -------------------------------- ### Directory Structure Example Source: https://blades.ninja/css/code Illustrates a typical directory structure for assets, including CSS files for a project. This is useful for understanding file organization. ```bash ./assets/ ├── blades.core.css # reusable class-light utilities, unthemed ├── blades.theme.css # minimal opinionated theme └── blades.css # above two together ``` -------------------------------- ### Starter HTML Template with Blades CSS Source: https://blades.ninja/css/standalone A basic HTML5 template including the Blades standalone CSS for a quick start. ```html Hello world!

Hello world!

``` -------------------------------- ### Basic Tooltip Examples Source: https://blades.ninja/css/tooltip Demonstrates how to apply tooltips to different HTML elements like links, inline elements, and buttons using the 'data-tooltip' attribute. ```html

Tooltip on a link

Tooltip on inline element

``` -------------------------------- ### Use HTML Blades in Liquid Templates Source: https://blades.ninja/html Example of how to include and render HTML blades in Liquid templates. ```liquid {% include blades/*.liquid %} {% render blades/* %} ``` -------------------------------- ### Install Float Label CSS via npm Source: https://blades.ninja/css/float-label Install the library using npm and import the float-label CSS in your project's stylesheet. ```bash npm install @anyblades/blades ``` ```css @import "@anyblades/blades/float-label"; ``` -------------------------------- ### Manual Installation of Blades CSS Source: https://blades.ninja/css/standalone Link the standalone CSS file in the head of your HTML document for manual installation. ```html ``` -------------------------------- ### CDN Installation of Blades CSS Source: https://blades.ninja/css/standalone Use the jsDelivr CDN to link the minified standalone Blades CSS file. ```html ``` -------------------------------- ### autoLinkFavicons: Before Processing Source: https://blades.ninja/build-awesome-11ty/processors Shows an example of an HTML link before the autoLinkFavicons processor is applied. This is used to demonstrate the input format for the processor. ```html https://github.com/anyblades/eleventy-blades ``` -------------------------------- ### Use HTML Blades in Nunjucks Templates Source: https://blades.ninja/html Example of how to extend and include HTML blades in Nunjucks templates. ```njk {% extends 'blades/*.njk' %} {% include 'blades/*.njk' %} ``` -------------------------------- ### Install Float Label CSS via CDN Source: https://blades.ninja/css/float-label Include the Float Label CSS library directly in your HTML using a CDN link. ```html ``` -------------------------------- ### Link Blades CSS via CDN Source: https://blades.ninja/css Use this CDN link in your HTML's `` for a dependency-free setup. ```html ``` -------------------------------- ### Dropdown in Navigation Source: https://blades.ninja/css/dropdown Example of integrating a dropdown component within a ` ``` -------------------------------- ### Semantic Landmarks as Direct Children of Body Source: https://blades.ninja/css/landmarks-section Using
,
, and

We're excited to have you join us for our upcoming event. Please arrive at the museum on time to check in and get started.

``` -------------------------------- ### Basic Progress Bar Source: https://blades.ninja/css/progress Use this snippet to display a progress bar with a defined value. The `value` attribute should be between 0 and the `max` attribute. ```html ``` -------------------------------- ### Custom HTML for Navigation Items Source: https://blades.ninja/html/links Iterate through navigation links to create a custom HTML unordered list. Includes logic to mark the current page with 'aria-current="page"'. ```liquid {% # prettier-ignore %} {% comment %}``` ``` -------------------------------- ### Navbar with Secondary Links Source: https://blades.ninja/css/navigation Demonstrates the use of the '.secondary' class for links, offering another styling option. This variant can be used for less prominent navigation items. ```html ``` -------------------------------- ### Input Placement within Label Source: https://blades.ninja/css/forms Demonstrates two ways to associate inputs with labels: input inside the label and input outside the label using 'for' and 'id'. ```html
``` -------------------------------- ### Basic Card Structure Source: https://blades.ninja/css/card A simple card component using semantic article tag. Use this for basic content display. ```html
I’m a card!
``` -------------------------------- ### Button Group with Secondary and Contrast Styles Source: https://blades.ninja/css/group Shows a button group including buttons with `secondary` and `contrast` classes for varied visual emphasis. ```html
``` -------------------------------- ### Apply Loading Indicator to Block Element Source: https://blades.ninja/css/loading Use `aria-busy="true"` on block-level elements like `
` to indicate a loading state. ```html
``` -------------------------------- ### Standalone CDN Link for Responsive Table CSS Source: https://blades.ninja/css/responsive-table Include this link in your HTML to use the responsive table stylesheet from a CDN. This is the simplest way to integrate the responsive table functionality. ```html ``` -------------------------------- ### autoLinkFavicons: After Processing Source: https://blades.ninja/build-awesome-11ty/processors Illustrates the output of an HTML link after the autoLinkFavicons processor has been applied. It includes the added favicon, span for the path, and attributes like target="_blank" and class="whitespace-nowrap". ```html /anyblades/eleventy-blades ``` -------------------------------- ### Apply Dark Color Scheme to an Article Source: https://blades.ninja/css/color-schemes Use the `data-theme="dark"` attribute on an `
` tag to explicitly set the dark color scheme for its content. ```html
...
``` -------------------------------- ### Modal for Membership Confirmation Source: https://blades.ninja/css/modal Presents membership details and options to confirm or cancel. Suitable for user confirmation steps. ```html

Confirm Your Membership

Thank you for signing up for a membership! Please review the membership details below:

  • Membership: Individual
  • Price: $10
 ``` -------------------------------- ### File Input Type Source: https://blades.ninja/css/input The `type="file"` input is styled with a secondary button appearance. ```html ``` -------------------------------- ### Basic Textarea Source: https://blades.ninja/css/textarea A standard textarea element styled for consistency with input fields. Use for multi-line text input. ```html ``` -------------------------------- ### Render Navigation Menu Manually Source: https://blades.ninja/html/links Assign navigation links to a variable and then render them using the blades/links template. This is useful for custom menu structures. ```liquid {% assign links = collections.all | eleventyNavigation %} {% render blades/links, links: links, current_url: page.url %} ```