Boilerplate For Hyperapp Applications Using Bulma CSS

HyperBulma is a new project which empowers developers to start their single page application in minutes.

---

---

About The Project

Building single page applications with Angular is not an easy task as you need to learn a lot. It is easier to build something with React and Redux, but still, you have to learn a lot of new concepts. Hyperapp shines in this context as it makes it easy to learn all the ideas you need in two or three hours.

The same applies when you compare Bootstrap and Bulma CSS. Bulma is much easier to learn.

The combination of Hyperapp and Bulma makes it uniquely suited for developers who want to build something but do not want to become frontend developers.

This boilerplate should make it quite easy to build something based on top of it. It has a great developer experience with zero configuration needed. Thank you, Parcel.

It is also easy to build the project with just one command: yarn build. If you have Netlify installed you can even deploy it with one command: netlify deploy

Technology Stack

• Next generation JavaScript
• Hyperapp—1 KB JavaScript library for building frontend applications
• Hyperapp Router—Declarative routing for Hyperapp using the History API
• Bulma—free and open source CSS framework based on Flexbox
• Fontawesome—the web’s most popular icon set
• Parcel—Blazing fast, zero configuration web application bundler

Roadmap

• Make it easier to use Bulma by providing Hyperapp ready components
• Separate the sample app state from UI state
• Enable saving and loading of app state to and from local storage
• Switch from Fontawesome 4 to latest version
• Add Eslint or StandardJS

Getting Started

Building your project on top of this starter is straightforward. Just clone the starter in a folder with your project's name. Then remove the git history to be able to initialize your own Git repository. Then install the dependencies with yarn. When the installation has finished, you can run the new app with yarn start. These are the steps in more detail:

git clone https://github.com/cutemachine/hyperbulma.git YOUR_PROJECT
cd YOUR_PROJECT
rm -rf .git
git init
git add .
git commit -m 'Initial version of YOUR_PROJECT'
yarn
yarn start

Demo

You can see a running version by following this link.

How To Contribute

Do you want to contribute to this project? Great. You can contact me through my Github profile page or just send a pull request.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---