Skip to content

cssninjaStudio/shoppy

Repository files navigation

πŸ‘‹ Shoppy

Shoppy is a Mobile Landing Page UI template built by cssninjaStudio.

cssninja-discord

✌️ preview

Check out the live demo by clicking here. Shoppy is built with Astro, Bulma and Alpine JS.

πŸ‘ Features

  • Astro v4.x
  • Bulma 0.9.x
  • Alpine v3.x

πŸ‘Œ Usage

  1. Install Dev Depedencies
yarn install
  1. To start development server
yarn dev

🍬 Update template colors

Shoppy is built with Sass but relies on native CSS variables with HSL for colors. To change the template theme colors:

  • Open bulma-css-vars.config.js and change the HSL value of the primary color:
primary: hsl(337, 78, 57),
  • Then, edit the value of the primary, secondary and accent colors inside src/scss/css-variables/colors.scss:
// primary HSL (#e73c7d) // hsl(337, 78%, 57%)
@include colorHsl("primary", 337, 78%, 57%);

// secondary HSL (#7938f4) // hsl(261, 90%, 59%)
@include colorHsl("secondary", 261, 90%, 59%);

// accent HSL (#3bf486) // hsl(144, 89%, 59%)
@include colorHsl("accent", 144, 89%, 59%);
  • Once you're done, run the following command in your terminal:
yarn build:update-bulma-colors

πŸ” Issues

If you've found an issue or a bug, you can report it in the issues section of this repository. Please try to follow these simple guidelines to report your issue:

  • Issue definition
  • Expected behaviour
  • Actual behaviour
  • steps to reproduce
  • Already tried fixes (if relevant)

πŸŽ‰ More

You liked Shoppy? Check also our Envato portfolio Css Ninja on Themeforest.

Find more premium bulma templates on Css Ninja.

πŸš€ About Us

Css Ninja is a web design studio. We build handcrafted and polished templates that will give some hype to your startup or to your next project.