https://github.com/mitchuman/danshari

A blank slate theme for Shopify 2.0
https://github.com/mitchuman/danshari

shopify shopify-theme tailwindcss

Last synced: about 2 months ago
JSON representation

A blank slate theme for Shopify 2.0

• Host: GitHub
• URL: https://github.com/mitchuman/danshari
• Owner: mitchuman
• Created: 2021-08-14T00:03:08.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2021-10-20T17:45:57.000Z (almost 3 years ago)
• Last Synced: 2024-06-12T15:55:45.225Z (3 months ago)
• Topics: shopify, shopify-theme, tailwindcss
• Language: Liquid
• Homepage: https://human-dev.myshopify.com
• Size: 233 KB
• Stars: 8
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# _Danshari_

A blank slate theme for Shopify 2.0 with Tailwind CSS

> **_Danshari (断捨離だんしゃり)_**


> _n._ Decluttering, clearing out past accumulation, minimalism.

## Demo

- [Live demo](https://human-dev.myshopify.com/) (Password: `tacos`)

- Tailwind components demo (`sections/demo-css.liquid`)

- Richtext demo (`sections/demo-richtext.liquid`)

## Global Settings

Configured in `config/settings_schema.json` and defined as CSS custom properties in `assets/root.css.liquid`.

- **Colors**

- **Typography**

- **Miscellaneous**

  - Logos & Favicon

  - [Predictive Search](https://shopify.dev/api/ajax/reference/predictive-search) feature enabled by default

## Default Styles

Danshari is a minimally styled theme. However, the following pages are applied default styles:

- Login, Register and Account related pages ([/account](https://human-dev.myshopify.com/account))

- Cart page ([/cart](https://human-dev.myshopify.com/cart))

- Blog page & Articles

- Search results page

## Media Queries

Use VS Code snippets (defined in `.vscode/danshari.code-snippets`) and Tailwind screen utilities.

| Snippet | Breakpoint |

| - | - |

| `media mobile` | ≤ 428px |

| `media mobile+` | ≥ 429px |

| `media tablet` | ≤ 768px |

| `media tablet+` | ≥ 769px |

| `media desktop` | ≤ 1280px |

| `media desktop+` | ≥ 1281px |

## Snippets

### `srcset`

Automatically generates `srcset`, `src`, `width` and `height` attributes for `` tags.

Example usage:

```liquid



```

| Props | Description |

| - | - |

| `image` | Shopify image object. Required. |

| `width`? | Max width of the image to display. |

### `quantity-selector`

Renders a product quantity selector.

| Props | Description |

| - | - |

| `name` | `name` attribute for the input. Required. |

| `id`? | `id` attribute for the input. (Default: "qty") |

| `value`? | Initial value. (Default: 1) |

| `label`? | Show a text label above the inputs. |