### Linking Minified CSS Stylesheet in HTML Source: https://github.com/harrycresswell/cu/blob/main/public/getting-started/index.html This HTML snippet demonstrates how to link the minified 'main.min.css' file into the section of a web page. It ensures the cu.css styles are applied to the document, with 'media="screen"' specifying that the stylesheet is intended for screen display. ```HTML ``` -------------------------------- ### Defining Global CSS Theme Tokens Source: https://github.com/harrycresswell/cu/blob/main/public/getting-started/index.html This snippet defines global CSS custom properties within the `:root` pseudo-class, serving as theme tokens for typography, colors (including a dark mode media query), grid gutters, border-radius, and shadows. These variables cascade throughout the CSS, allowing for centralized theme customization. ```CSS /* Global theme tokens */ :root { /* Typography */ --font-base: 'Inter', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; --font-display: var(--font-base); --font-accent: 'Menlo', 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', 'Droid Sans Mono', 'Source Code Pro', 'Courier New', monospace; --font-weight-regular: 400; --font-weight-bold: 700; --line-height-compact: 1.2; --line-height-base: 1.5; --line-height-loose: 1.7; --width-compact: 35ch; --width-longform: 65ch; --tracking: -0.05ch; --tracking-s: -0.05ch; /* Colors created with Utopia Kickstarter project @link https://www.figma.com/community/file/1122903924123950023 */ --color-text: #1D1D1D; --color-text-mod-1: #494949; --color-text-mod-2: #616161; --color-bg: #ffffff; --color-bg-mod-1:#F8F8F8; --color-bg-mod-2: #EDEDED; --color-border: #1D1D1D; --color-brand: #4f29f0; --color-accent: #9F2C5E; --color-highlight: #eefbc1; @media (prefers-color-scheme: dark) { /* If theme doesn’t require a dark mode then remove this media query altogether */ --color-text: #CED3E8; --color-text-mod-1: #C4CAE3; --color-text-mod-2: #8995C8; --color-bg: #0D101A; --color-bg-mod-1:#121626; --color-bg-mod-2: #212845; --color-border: #CED3E8; --color-brand: #a08aff; --color-accent: #FF70AE; } /* Grid */ --gutter: var(--space-s-m); /* Effects */ --border-radius: 0; // Set a rem value to add border radius to buttons, form elements, cards, callouts and accordians. --shadow: 0px 3px 7px rgba(0, 0, 0, 0.08), 0px 0px 1px rgba(0, 0, 0, 0.025); } ``` -------------------------------- ### Defining Inter Font Faces in CSS Source: https://github.com/harrycresswell/cu/blob/main/public/getting-started/index.html This snippet defines `@font-face` rules for the Inter font, enabling self-hosting and performance optimization. It includes declarations for both regular (400) and bold (700) weights, specifying font display behavior and source URLs for WOFF2 and WOFF formats. ```CSS /* Google fonts with subsetting via Google Webfonts Helper @link https://gwfh.mranftl.com/fonts/inter?subsets=latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Inter'; font-style: normal; font-weight: 400; src: url("../fonts/inter-v12-latin-regular.woff2") format("woff2"), url("../fonts/inter-v12-latin-regular.woff") format("woff"); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Inter'; font-style: normal; font-weight: 700; src: url("../fonts/inter-v12-latin-700.woff2") format("woff2"), url("../fonts/inter-v12-latin-700.woff") format("woff"); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } ``` -------------------------------- ### Linking Local CSS Stylesheet in HTML Source: https://github.com/harrycresswell/cu/blob/main/content/getting-started/installation.md This snippet demonstrates how to link the `main.min.css` stylesheet, copied locally into your project, within the `` section of an HTML page. It ensures the `cu.css` styles are applied to the page for screen media. ```HTML ``` -------------------------------- ### Linking cu.css Stylesheet in HTML Source: https://github.com/harrycresswell/cu/blob/main/public/getting-started/installation/index.html This snippet demonstrates how to link the minified cu.css stylesheet (`main.min.css`) to an HTML document. It should be placed within the `` section of the page to apply the styles. ```HTML ``` -------------------------------- ### Generic Hero Section HTML Example Source: https://github.com/harrycresswell/cu/blob/main/content/blocks/hero.md This code block presents a generic HTML example for a hero component, showcasing the recommended class grouping using a pipe (`|`) to separate the block class (`hero`) from utility classes (`region`, `flow`). This convention, part of Cube CSS, enhances code clarity and maintainability. ```html

Some page title

Some page description

``` -------------------------------- ### Including CSS via CDN in HTML Source: https://github.com/harrycresswell/cu/blob/main/content/getting-started/installation.md This snippet shows how to include the `cu.css` stylesheet directly from a Content Delivery Network (CDN) by pasting the link into the `` of an HTML document. This method avoids local file management and ensures access to the latest version. ```HTML ``` -------------------------------- ### Implementing Fluid Type Scale with CSS Clamp Source: https://github.com/harrycresswell/cu/blob/main/public/getting-started/index.html This snippet defines a fluid type scale using CSS custom properties and the `clamp()` function, generated by Utopia's Fluid Type Scale Calculator. Each `--step` variable provides a responsive font size that scales smoothly between a minimum and maximum value based on the viewport width. ```CSS /* Utopia fluid type @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,20,1.25,4,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,NaN */ :root { --step--1: clamp(0.83rem, calc(0.78rem + 0.29vw), 1.00rem); --step-0: clamp(1.00rem, calc(0.91rem + 0.43vw), 1.25rem); --step-1: clamp(1.20rem, calc(1.07rem + 0.63vw), 1.56rem); --step-2: clamp(1.44rem, calc(1.26rem + 0.89vw), 1.95rem); --step-3: clamp(1.73rem, calc(1.48rem + 1.24vw), 2.44rem); --step-4: clamp(2.07rem, calc(1.73rem + 1.70vw), 3.05rem); } ``` -------------------------------- ### Implementing a Feedback Form with Fieldset and Full Width Inputs Source: https://github.com/harrycresswell/cu/blob/main/content/global-styles/form.md This example demonstrates how to structure a feedback form using `
` and `` for semantic grouping and captioning. It includes input fields for full name, email, and a textarea for messages, all styled with the `w-full` utility class to occupy the full width of their container. This setup improves form organization and user experience. ```HTML
Give us your feedback
``` -------------------------------- ### Defining Fluid Space Scale with CSS Custom Properties Source: https://github.com/harrycresswell/cu/blob/main/public/getting-started/index.html This CSS snippet defines a comprehensive fluid space scale using CSS custom properties within the `:root` selector. It leverages Utopia's `clamp()` function to create responsive spacing variables (e.g., `--space-3xs`, `--space-s-l`) that adapt to different viewport sizes, ensuring consistent design across devices. These variables are intended to replace an existing space scale, providing a flexible and maintainable approach to spacing in a web project. ```CSS /* Utopia fluid space @link https://utopia.fyi/space/calculator?c=320,16,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */ :root { --space-3xs: clamp(0.25rem, calc(0.23rem + 0.11vw), 0.31rem); --space-2xs: clamp(0.50rem, calc(0.46rem + 0.22vw), 0.63rem); --space-xs: clamp(0.75rem, calc(0.68rem + 0.33vw), 0.94rem); --space-s: clamp(1.00rem, calc(0.91rem + 0.43vw), 1.25rem); --space-m: clamp(1.50rem, calc(1.37rem + 0.65vw), 1.88rem); --space-l: clamp(2.00rem, calc(1.83rem + 0.87vw), 2.50rem); --space-xl: clamp(3.00rem, calc(2.74rem + 1.30vw), 3.75rem); --space-2xl: clamp(4.00rem, calc(3.65rem + 1.74vw), 5.00rem); --space-3xl: clamp(6.00rem, calc(5.48rem + 2.61vw), 7.50rem); /* One-up pairs */ --space-3xs-2xs: clamp(0.25rem, calc(0.12rem + 0.65vw), 0.63rem); --space-2xs-xs: clamp(0.50rem, calc(0.35rem + 0.76vw), 0.94rem); --space-xs-s: clamp(0.75rem, calc(0.58rem + 0.87vw), 1.25rem); --space-s-m: clamp(1.00rem, calc(0.70rem + 1.52vw), 1.88rem); --space-m-l: clamp(1.50rem, calc(1.15rem + 1.74vw), 2.50rem); --space-l-xl: clamp(2.00rem, calc(1.39rem + 3.04vw), 3.75rem); --space-xl-2xl: clamp(3.00rem, calc(2.30rem + 3.48vw), 5.00rem); --space-2xl-3xl: clamp(4.00rem, calc(2.78rem + 6.09vw), 7.50rem); /* Custom pairs */ --space-s-l: clamp(1.00rem, calc(0.48rem + 2.61vw), 2.50rem); } ``` -------------------------------- ### Styling Links as Buttons with cu.css - HTML Source: https://github.com/harrycresswell/cu/blob/main/public/blocks/button/index.html Demonstrates how to apply the `.button` class to `` elements to style them as buttons. Includes examples for a standard button, an outline variant using `data-variant="outline"`, and a disabled button using `role="link"` and `aria-disabled="true"` for accessibility. ```HTML A link styled as a button A link as a button A disabled link as a button ``` -------------------------------- ### Creating a Semantic HTML Table Source: https://github.com/harrycresswell/cu/blob/main/public/global-styles/table/index.html This snippet demonstrates the construction of a standard HTML table, utilizing ``, ``, ``, ``, and `
`, `
`, `
` elements. It presents a dataset of Star Wars characters, their homeworlds, and preferred weapons, serving as a practical example for structured data display with cu.css. ```HTML
Star Wars characters and their home worlds
Character Homeworld Weapon
Luke Tatooine Lightsaber
Han Corellia Blaster
Leia Alderaan Blaster
Obi-Wan Stewjon Lightsaber
Yoda Dagobah Lightsaber
``` -------------------------------- ### Displaying Code Blocks with HTML Pre and Code Elements Source: https://github.com/harrycresswell/cu/blob/main/public/global-styles/index.html This example demonstrates how to properly format a multi-line code block using the `
` element for preformatted text and the `` element for the actual code, in this case, CSS styling for the `body`.

```HTML

  
    body {
      color: var(--color-dark);
      background: var(--color-light);
      font-size: var(--step-0);
      font-family: var(--font-base);
      letter-spacing: var(--tracking);
    }
  


```

--------------------------------

### Building a Feedback Form with Fieldset and Full Width Inputs in HTML

Source: https://github.com/harrycresswell/cu/blob/main/public/global-styles/form/index.html

This example illustrates how to structure a feedback form using `
` and `` for semantic grouping. It also applies the `w-full` utility class to inputs, textarea, and button to make them occupy the full width, enhancing layout consistency.

```HTML


  
  
    Give us your feedback
    
    
    
    
    
    
    
  



```

--------------------------------

### Applying Scroll Snap to a Reel in HTML

Source: https://github.com/harrycresswell/cu/blob/main/content/compositions/reel.md

This example shows how to enhance the reel's user experience by adding CSS scroll snap behavior. By including the `data-scroll="snap"` attribute on the `.reel` container, the scroll position will snap to the start of each child item, making navigation smoother and more predictable.

```HTML


    
Item 1

    
Item 2

    
Item 3

    
Item 4

    
Item 5

    
Item 6

    
Item 7

    
Item 8

    
Item 9

    
Item 10

    
Item 11

    
Item 12

  

```

--------------------------------

### Styling Links as Buttons in HTML

Source: https://github.com/harrycresswell/cu/blob/main/public/blocks/index.html

Demonstrates how to apply the `.button` class to `` elements to style them as buttons. It includes examples for a standard button, an outlined variant using `data-variant="outline"`, and a disabled button using `role="link"` and `aria-disabled="true"`.

```HTML
A link styled as a button
A link as a button
A disabled link as a button
```

--------------------------------

### HTML Table Code Example for Star Wars Characters

Source: https://github.com/harrycresswell/cu/blob/main/content/global-styles/table.md

This snippet provides the raw HTML code for a table displaying Star Wars characters, their homeworlds, and weapons. Presented within a code block, it serves as a direct example of the markup structure, allowing developers to easily inspect or copy the table definition.

```HTML


  
    Star Wars characters and their home worlds
  
  
    

      Character
      Homeworld
      Weapon
    

  
  
    

      Luke
      Tatooine
      Lightsaber
    

    

      Han
      Corellia
      Blaster
    

    

      Leia
      Alderaan
      Blaster
    

    

      Obi-Wan
      Stewjon
      Lightsaber
    

    

      Yoda
      Dagobah
      Lightsaber
    

  


```

--------------------------------

### Styling Links as Buttons in HTML

Source: https://github.com/harrycresswell/cu/blob/main/content/blocks/button.md

This snippet demonstrates how to apply the `.button` class to `` elements to style them as buttons. It includes examples for a standard button, an outline variant using `data-variant="outline"`, and a disabled link using `role="link"` and `aria-disabled="true"`.

```HTML
A link styled as a button
A link as a button
A disabled link as a button
```

--------------------------------

### Creating a Basic HTML Form for Login

Source: https://github.com/harrycresswell/cu/blob/main/content/global-styles/form.md

This snippet demonstrates a fundamental HTML form structure for collecting user credentials. It includes input fields for email and password, utilizing `autocomplete` for user convenience and `required` for validation, along with a submit button. This form serves as a basic example for user authentication interfaces.

```HTML


  
  
  
  
  


```

--------------------------------

### Applying Scroll Snap to a Reel Component in HTML

Source: https://github.com/harrycresswell/cu/blob/main/public/compositions/reel/index.html

This example shows how to enhance the Reel component with CSS scroll snap functionality. By adding the `data-scroll="snap"` attribute to the `.reel` container, the scrolling behavior will 'snap' to the start of each child item, providing a smoother and more controlled user experience.

```HTML


        
Item 1

        
Item 2

        
Item 3

        
Item 4

        
Item 5

        
Item 6

        
Item 7

        
Item 8

        
Item 9

        
Item 10

        
Item 11

        
Item 12

      

```

--------------------------------

### Building a Feedback Form with Fieldset and Legend in HTML

Source: https://github.com/harrycresswell/cu/blob/main/public/global-styles/index.html

This HTML form example demonstrates the use of `
` to group related form elements and `` to provide a caption for the group. It includes text, email, and textarea inputs, all with the `w-full` utility class for full width.

```HTML


  
  
    Give us your feedback
    
    
    
    
    
    
    
  



```

--------------------------------

### Creating HTML Preformatted Code Block with CSS Styling

Source: https://github.com/harrycresswell/cu/blob/main/content/global-styles/codeblock.md

This snippet demonstrates how to structure a code block using HTML's 
 and  elements. It contains a CSS example for basic body styling, showing how to define text color, background, font size, family, and letter spacing using CSS variables.

```HTML

  
    body {
      color: var(--color-dark);
      background: var(--color-light);
      font-size: var(--step-0);
      font-family: var(--font-base);
      letter-spacing: var(--tracking);
    }
  


```

--------------------------------

### Creating a Sticky Sidebar with HTML

Source: https://github.com/harrycresswell/cu/blob/main/content/compositions/sidebar.md

This HTML example illustrates how to enable sticky positioning for the sidebar by adding the `data-variant="sticky"` attribute to the `.sidebar` element. This allows the sidebar to remain fixed in the viewport as the user scrolls, provided there is sufficient space, enhancing persistent navigation or information display.

```HTML


  
Item 1

  
Item 2



```

--------------------------------

### Applying Button Styles to Input Elements

Source: https://github.com/harrycresswell/cu/blob/main/content/global-styles/button.md

This example illustrates that input elements with type="submit", type="reset", or type="button" can inherit button styles. It shows how to apply the default and outline button styles to an  element.

```HTML


```

--------------------------------

### Styling Body Element with CSS Variables

Source: https://github.com/harrycresswell/cu/blob/main/public/global-styles/codeblock/index.html

This CSS snippet provides an example of basic styling for the `` element. It leverages `cu.css` variables (e.g., `--color-dark`, `--font-base`) to define properties such as text color, background, font size, font family, and letter spacing, promoting a consistent design system.

```CSS
body {
          color: var(--color-dark);
          background: var(--color-light);
          font-size: var(--step-0);
          font-family: var(--font-base);
          letter-spacing: var(--tracking);
        }
```

--------------------------------

### Processing SCSS for Production Build (Go Template)

Source: https://github.com/harrycresswell/cu/blob/main/themes/cu/layouts/partials/head.html

This block executes when Hugo is building for production (hugo.IsServer is false). It defines options for output paths, then processes 'main.scss' and 'demo.scss' by compiling to CSS, applying autoprefixer, minifying, and fingerprinting for cache busting. This optimizes for performance and deployment.

```Go Template
{{ else }}
  {{ $cssOpts := (dict "targetPath" "css/main.css" ) }}
  {{ $demoOpts := (dict "targetPath" "css/demo.css" ) }}
  {{ $stylesMinPrint := resources.Get "scss/main.scss" | toCSS $cssOpts | postCSS (dict "use" "autoprefixer") | minify | fingerprint }}
  {{ $stylesMin:= resources.Get "scss/main.scss" | toCSS $cssOpts | postCSS (dict "use" "autoprefixer") | minify }}
  {{ $styles := resources.Get "scss/main.scss" | toCSS $cssOpts | postCSS (dict "use" "autoprefixer") }}
  {{ $demoMinPrint := resources.Get "scss/demo.scss" | toCSS $demoOpts | postCSS (dict "use" "autoprefixer") | minify | fingerprint }}
{{ end }}
```

--------------------------------

### Creating a Responsive Starship Card Grid in HTML

Source: https://github.com/harrycresswell/cu/blob/main/content/blocks/card.md

This HTML snippet defines a responsive grid layout using an unordered list (`
    `) and list items (`
  • `) styled as cards. Each card represents a Star Wars starship, displaying its name, a brief description, and an optional image or photo credit. The `data-layout` attribute suggests a custom grid system, and `data-state="reversed"` indicates a layout variation for specific cards.

```HTML

      
  
    • 
    
      
      
      Millennium Falcon
      
      
      Won by Han Solo from Lando Calrissian in a game of sabacc. Made the infamous Kessel run in slightly over 12 parsecs.
      
      
      Photo by Josué AS on Unsplash.
      
    
       
  
      • 
   
    • 
    
    
      
      
      X-wing starfighter
      
      
      Used by the Rebel Alliance in their conflict with the Galactic Empire and famously by Luke Skywalker to destroy the Death Star.
      
      View photo on Unsplash
    
      
  
      • 
   
    • 
    
      
      
      
      A-wing starfighter
      
      
      The fastest vessels in the Star Wars canon, with the advantage of being the smallest hyperspace drive-equipped craft.
      
      
      Photo by Chuck Givens on Unsplash.
      
    
      
  
      • 

    
```

--------------------------------

### Creating a Basic Callout (HTML)

Source: https://github.com/harrycresswell/cu/blob/main/content/blocks/callout.md

This snippet demonstrates how to create a standard callout using the `.callout` class. It highlights important content within an