Skip to content

cssninjaStudio/altitude

Repository files navigation

👋 Altitude

Altitude is a landing page UI template built by cssninjaStudio.

cssninja-discord

✌️ preview

Check out the live demo by clicking here. Altitude 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

Altitude 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 Altitude? 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.