@lookupdaily styles

This repository and package contain a set of styles that Liz Daly uses across her personal projects. It is built with sass.

• @lookupdaily styles
  • Install
  • Styles
    • Colour
    • Typography
      • Content types
      • Sizes
  • Components
    • Header
  • Local development
    • Requirements
    • Getting started

Install

npm i @lookupdaily/styles

You can import the css file into your stylesheet

@import "@lookupdaily/styles/index.css";

If your project uses sass you can import all styles, or individual modules

/* Import all scss modules */
@import "@lookupdaily/styles/scss";

/* Or the compiled css */
@import "@lookupdaily/styles";

/* Import individual scss modules */
@import "lookupdaily/styles/scss/components/links";

Styles

Colour

Colours are available via global css-variables or utility classes

| colour | variable | font colour class | background colour class | | --------------- | --------------------------- | ------------------------- | ----------------------------- | | primary | --ld-colour-primary | ld-colour-primary | ld-background-primary | | primary-dark | --ld-colour-primary-dark | ld-colour-primary-dark | ld-background-primary-dark | | primary-light | --ld-colour-primary-light | ld-colour-primary-light | ld-background-primary-light | | Secondary | --ld-colour-secondary | ld-colour-secondary | ld-background-secondary | | secondary-dark | --ld-colour-secondary-dark | ld-colour-secondary-dark | ld-background-secondary-dark | | secondary-light | --ld-colour-secondary-light | ld-colour-secondary-light | ld-background-secondary-light | | grey | --ld-colour-grey | ld-colour-grey | ld-background-grey |

Background colour classes are setup with a recommended font colour - e.g. when using a primary coloured background you should use a white font colour.

Alternatively use a mixin to include a colour or background colour settings in a custom class. The parameter value should be one of the colour names listed above (lowercase).

@use "lookupdaily/styles/src as ld;

.my-text {
  @include ld.colour("primary");
}

.my-container {
  @include ld.background-colour("secondary-light");
}

Typography

Content types

| Name | Variables | Classes | | -------- | ------------------ | ---------------- | | body | --ld-font-body | ld-text-body | | title | --ld-font-title | ld-text-title | | subtitle | --ld-font-subtitle | ld-text-subtitle | | logo | --ld-font-logo | ld-text-logo |

Sizes

| Name | Size | Variables | Classes | | -------- | ---- | ----------------------- | ---------------- | | small | 16px | --ld-font-size-small | ld-text-small | | regular | 19px | --ld-font-size-regular | ld-text-regular | | large | 24px | --ld-font-size-large | ld-text-large | | x-large | 36px | --ld-font-size-x-large | ld-text-x-large | | xx-large | 72px | --ld-font-size-xx-large | ld-text-xx-large |

Alternatively use a mixin to include text, font-family or font-size settings in a custom class. The parameter value for the text() or font-family() should be one of the content type names listed above, and font-size() should be given a size variant (lowercase). You can also pass in your own font map as an optional variable (see settings/typography, $fonts for the map structure).

@use "lookupdaily/styles/src as ld;

.my-text {
  @include ld.text("body");
}

/* Or alternatively */
.my-text-2 {
  @include ld.font-family("body");
  @include ld.font-size("regular");
}

Components

Header

Should contain a logo or site title and a series of navigational links. These links will be visible in the header on larger screens, and contained in an expandable menu on smaller screens. JavaScript is used for this component, and should be setup in your client-side JavaScript. But there is a fallback for if JavaScript is not enabled in the user's browser.

Active links are styled using the data-state="active" attribute.

The header should contain a skip to content link as the first element.

The header should contain no more than 4 links.

Example:

<header class="ld-header {% if pageType == 'home' %}home{% endif %}" data-module="ld-header">
  <div class="visually-hidden"><a href="#content">Skip to content</a></div>
  <div class="ld-logo"><a href="/" class="ld-logo__link">{ logo }</a></div>
  <span hidden id="menu-label">Main menu</span>
  <button class="ld-header__menu-button" id="ld-menu-button" aria-expanded="false">
    <span class="ld-header__menu-button-text">Menu</span>
  </button>
  <nav class="ld-header-nav" id="ld-menu" aria-labelledy="menu-label">
    <ul class="ld-header-nav__list">
      <li class="ld-header-nav__item">
        <a class="ld-link ld-header-nav__link" href="/" data-state="active">
          <span class="nav__link__text">Home</span>
        </a>
      </li>
    <li class="ld-header-nav__item">
      <a class="ld-link ld-header-nav__link" href="/about"><span class="nav__link__text">About</span></a>
    </li>
    </ul>
  </nav>
</header>

Setup in JavaScript:

import { Header } from "@lookupdaily/styles/header.js"

document.addEventListener("DOMContentLoaded", () => {
  Header.init();
})

The Header component looks for an element with the data-module attribute with a value of ld-header (data-module="ld-header"), so this must be included in the html. You can customize the data-module value and menu and button ids by passing in a custom config:

import { Header } from "@lookupdaily/styles/header.js"

const config = {
	moduleName: 'my-module';
	buttonId: 'my-button';
	menuId: 'menu';
	expandedClassName: 'expanded';
}

document.addEventListener("DOMContentLoaded", () => {
  Header.init(config);
})

Local development

The project can be setup using npm

Requirements

• Npm
• Node.js 20.x

Getting started

First, install dependencies by opening a terminal and running:

npm install

To build the project as a css file:

npm build