Skip to content

Latest commit

 

History

History
114 lines (72 loc) · 3.7 KB

readme.md

File metadata and controls

114 lines (72 loc) · 3.7 KB

HR 👋 | An awesome Bulma + Alpine JS sample app

cssninja-discord

HR is a sample alpine JS + Bulma app built by Css Ninja Studio. HR is licensed under the MIT license.

Screenshot

✌️ Preview

You can access the demo here. HR is built with Bulma. Thanks to Emy Lascan for the homepage hero inspiration.

👌 Usage

The project runs with npm and gulp and is bundled with Alpine JS, JSON-Server and Axios.

  1. Install Dev Depedencies
npm install
  1. To start development and server and JSON server
npm run server

👌 Update template colors

Plex 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:
npm run build:update-bulma-colors

Note

Changes should be commited to src/ files only.

Tools

The template is built with Sass and Gulp build system with these features:

  • Handlebars HTML templates with Panini– Panini is a super simple flat file generator for use with Gulp. It compiles a series of HTML pages using a common layout. These pages can also include HTML partials, external Handlebars helpers, or external data as JSON.
  • Sass compilation, prefixing with Autoprefixer, and JavaScript concatenation
  • Built-in BrowserSync server - Will automatically reload your page when files are changed. It also live-injects CSS changes when you save a Sass file. This task runs continuously. Defaults to localhost.
  • For production builds - CSS compression, JavaScript compression, Image compression and more..

Additional Resources:

👍 Features

  • Gulp 4 and nodejs 12.13.0 (minimum)
  • Bulma 0.9.2
  • ES6 support
  • Alpine JS
  • JSON server running with concurrently
  • Homepage
  • List page
  • Details page

🍔 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 HR? Find more premium bulma templates on our Store.

Check also our premium Envato bulma themes.

🚀 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.