This project contains a library of frontend components ready to be picked for use in web development projects. Each component has its own markup, styles and JS files if needed. Most of the CSS comes from the Bulma framework (https://bulma.io/), but our components contain some additional styles.
The visual representation of the component library can be found in https://devgeniem.github.io/bulmally/
You can get the project up and running by following these steps:
- Clone the Git repository and navigate to the cloned folder. You can also fork the repository.
- Run
npm install - Run
npm start - Open your browser and navigate to the URL provided by BrowserSync in your command line output.
Now you should be able to see the index of all Bulmally components!
When creating a new component, you need to follow these steps:
- Create a folder for the component under the main folder
- Add files for HTML, CSS and JS when needed.
- You can copy the template files from the
boilerplatefolder. It is used to start new components. - You should namespace the component with a class
bulmally-component, for examplebulmally-accordion. This way the scope is easier to use in different projects. - When you add files, the watch should automatically detect all changes and reload the web browser.
The folder structure is pretty straight-forward: Each component has its own folder which contains the HTML, CSS and
possibly a JS file as well. All component folders are located under the main folder components. To modify an existing component, you
need to follow these steps:
- Start the server (instructions above)
- Navigate to the desired component folder and open its files you want to modify
- Modify the files and check that they're loaded.
- Save, copy or commit the changes depending on your use case and you're done!
Each component has its own readme file with instructions for use and information on its accessibility-ready status.
- Card (with accessible examples)