Skip to content

youcan-shop/theme-starter-kit

BranchesTags

Repository files navigation

YouCan Theme Starter Kit

theme starter kit

Introduction

This starter kit provides the core building blocks every theme needs, so you can skip the repetitive setup and focus on design, creativity, and new sections. All using native HTML, CSS (SCSS), and JS, while still feeling clean.

Usage

  1. Clone the repository
git clone https://github.com/youcan-shop/theme-starter-kit
  1. Initialize the starter theme

You'll be guided through a few setup questions, like the theme name, author, version, etc.

youcan theme:init -i
  1. Install your dependencies
cd your_theme_name
pnpm run dev
  1. Start the development server
pnpm run dev

Templates

Template (page) Section
Index N/A
Product single-product.liquid
List Collections list-collections.liquid
Collection single-collection.liquid
Search search.liquid
Cart cart.liquid
Thank You thankyou.liquid
Upsell upsell.liquid
Page page.liquid

Snippets

Important

Snippets marked with * are part of the theme core logic and shouldn't be removed (feel free to tweak the visuals). The rest are totally up to you.

Core

Snippet Type File
Quantity CORE* core.quantity.liquid
Shop Button CORE* core.shop-button.liquid
Variants CORE* core.variants.liquid
Express Checkout CORE* core.express-checkout.liquid
Linked Fields CORE* core.linked-fields.liquid
Cart Form CORE* core.cart-form.liquid
Cart Item CORE* core.cart-item.liquid
Cart Form Item CORE* core.cart-form-item.liquid

Constants

Snippet Type File
Inventory Status CONST* const.inventory-status.liquid
Discount Value CONST* const.discount-value.liquid
Payment Status CONST* const.payment-status.liquid
Payment Gateway CONST* const.payment-gateway.liquid

Misc

Snippet Type File
Icon MISC misc.icon.liquid
Search MISC misc.search.liquid
Toast MISC misc.toast.liquid
Pagination MISC misc.pagination.liquid
Breadcrumb MISC misc.breadcrumb.liquid
Empty MISC misc.empty.liquid
Image Fallback MISC misc.image-fallback.liquid
Cart Drawer MISC misc.cart-drawer.liquid
Menu Drawer MISC misc.menu-drawer.liquid

Block

Snippet Type File
Product BLOCK block.product.liquid
Collection BLOCK block.collection.liquid

Color System

To simplify theming, we include a CSS only color palette generated from a single primary (brand) color. This approach guarantees all generated colors respect accessibility standards, regardless of the chosen base color. It also improves DX by using semantic color tokens (e.g. primary, on-primary, primary-container, on-primary-container) instead of numeric shade levels that are rarely all needed. For a better understanding of the system, we recommend checking Alwan Generator.

Tokens vs Shades

Tokens Shades (50 - 900)
--color-primary --color-primary-500
--color-on-primary --color-primary-50
--color-primary-container --color-primary-100
--color-on-primary-container --color-primary-900 
// With Shades
[ui-slot="button"] {
  color: var(--color-primary-50);
  background-color: var(--color-primary-500);
}
// With Tokens
[ui-slot="button"] {
  color: var(--color-on-primary);
  background-color: var(--color-primary);
}

Usage

:root {
  --brand-hue: 333;
  --brand-saturation: 86%;
}

Dark Mode

<html data-theme="dark"></html>

Tokens

Name Tokens
Primary
  • --color-primary
  • --color-on-primary
  • --color-primary-container
  • --color-on-primary-container
Secondary
  • --color-secondary
  • --color-on-secondary
  • --color-secondary-container
  • --color-on-secondary-container
Tertiary
  • --color-tertiary
  • --color-on-tertiary
  • --color-tertiary-container
  • --color-on-tertiary-container
Error
  • --color-error
  • --color-on-error
  • --color-error-container
  • --color-on-error-container
Success
  • --color-success
  • --color-on-success
  • --color-success-container
  • --color-on-success-container
Warning
  • --color-warning
  • --color-on-warning
  • --color-warning-container
  • --color-on-warning-container
Information
  • --color-info
  • --color-on-info
  • --color-info-container
  • --color-on-info-container
Outline
  • --color-outline
  • --color-outline-variant
Surface
  • --color-surface
  • --color-on-surface
  • --color-surface-variant
  • --color-on-surface-variant
  • --color-surface-container
  • --color-surface-container-lowest
  • --color-surface-container-low
  • --color-surface-container-high
  • --color-surface-container-highest

Components

This project includes a UI component library (Celeste DS) with over 30 reusable components. The components are built primarily with CSS + minimal JavaScript used only when required for accessibility. Each component is documented, no dependencies, and full control to style things your way.

Note

Don't need a component? Just remove it. You own the code.

Core

Name File
Avatar avatar.scss
Badge badge.scss
Button button.scss
Button Group button-group.scss
Compact Button compact-button.scss
Link Button link-button.scss
Divider divider.scss
Status Badge status-badge.scss

Data Display

Name File
Banner banner.scss
Kbd kbd.scss
Progress Bar progress-bar.scss
Rating Bar rating-bar.scss
Rating Review rating-review.scss

Disclosure

Name File
Accordion accordion.scss
Drawer drawer.scss
Dropdown dropdown.scss
Popover popover.scss
Sheet sheet.scss

Feedback

Name File
Alert alert.scss
Modal modal.scss
Tooltip tooltip.scss

Form

Name File
Checkbox checkbox.scss
Filed Upload file-upload.scss
Hint hint.scss
Input input.scss
Label label.scss
Radio radio.scss
Select select.scss
Slider slider.scss
Switch switch.scss
Textarea textarea.scss

Layout

Name File
Carousel carousel.scss
Segmented Control segmented-control.scss
Skeleton skeleton.scss

Navigation

Name File
Breadcrumb breadcrumb.scss
Pagination pagination.scss

Common Way

Not strict rules, just small guidelines to keep things organized and make the code easier to read for everyone.

Add Section

  1. Section files naming
cart.liquid
section.cart.scss
section.cart.js
  1. Liquid section
<div ui-section="cart">My Section</div>
  1. Styling (CSS or SCSS)
[ui-section="cart"] {
}

Add Block

  1. Block files naming
block.product.liquid
block.product.scss
block.product.js
  1. Liquid section
<div ui-block="product">My Bock</div>
  1. Styling (CSS or SCSS)
[ui-block="product"] {
}

Add Snippet

  1. Snippet files naming
misc.promotion.liquid
misc.promotion.scss
misc.promotion.js
  1. Liquid section
<ui-promotion>My Snippet</ui-promotion>
  1. Styling (CSS or SCSS)
ui-promotion {
}

Web Component

if (!customElements.get("ui-select")) {
  class Select extends HTMLElement {
    static observedAttributes = ["variant", "size"];

    constructor() {
      super();

      this.trigger = this.querySelector('[ui-select="trigger"]');
    }

    connectedCallback() {
      this._render();
    }

    _render() {
      // Your logic
    }
  }

  customElements.define("ui-select", Select);
}

About

No description, website, or topics provided.

Resources

Readme
Activity
Custom properties

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases 1

v1.0.0 Latest
Jan 2, 2026

Packages

 
 
 

Contributors

Languages