https://github.com/skadizz/angular2-bulma
Bulma CSS Framework components for your Angular application
https://github.com/skadizz/angular2-bulma
angular bulma-css-framework components
Last synced: 12 months ago
JSON representation
Bulma CSS Framework components for your Angular application
- Host: GitHub
- URL: https://github.com/skadizz/angular2-bulma
- Owner: SKaDiZZ
- Created: 2018-11-04T19:25:52.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-11-24T19:21:48.000Z (over 7 years ago)
- Last Synced: 2025-04-12T23:44:06.776Z (12 months ago)
- Topics: angular, bulma-css-framework, components
- Language: TypeScript
- Size: 176 KB
- Stars: 5
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular2-Bulma
Angular2-Bulma is providing Bulma CSS Framework components to Angular developers for fast and easy development.
[](https://www.npmjs.com/package/angular2-bulma)
[](https://gitter.im/angular2-bulma) [](https://github.com/SKaDiZZ/angular2-bulma)
# Content
- Installation and setup
- [Install](#buinstall)
- [Import Bulma CSS](#buimportbulma)
- [Add Font Awesome Icons](#bufontawesome)
- [Import Angular2BulmaModule](#buimportmodule)
- Components
- [bu-columns](https://github.com/SKaDiZZ/angular2-bulma/tree/master/projects/angular2-bulma/src/lib/bu-columns) : Columns
- [bu-section](https://github.com/SKaDiZZ/angular2-bulma/tree/master/projects/angular2-bulma/src/lib/bu-section) : Section
- [bu-hero](https://github.com/SKaDiZZ/angular2-bulma/tree/master/projects/angular2-bulma/src/lib/bu-hero) : Hero
- [bu-container](https://github.com/SKaDiZZ/angular2-bulma/tree/master/projects/angular2-bulma/src/lib/bu-container) : Container
- [bu-conent](https://github.com/SKaDiZZ/angular2-bulma/tree/master/projects/angular2-bulma/src/lib/bu-content) : Content
- [bu-footer](https://github.com/SKaDiZZ/angular2-bulma/tree/master/projects/angular2-bulma/src/lib/bu-footer) : Footer
- [bu-box](https://github.com/SKaDiZZ/angular2-bulma/tree/master/projects/angular2-bulma/src/lib/bu-box) : Box
- [bu-button](https://github.com/SKaDiZZ/angular2-bulma/tree/master/projects/angular2-bulma/src/lib/bu-button) : Button
- [bu-delete](https://github.com/SKaDiZZ/angular2-bulma/tree/master/projects/angular2-bulma/src/lib/bu-delete) : Delete
- [bu-icon](https://github.com/SKaDiZZ/angular2-bulma/tree/master/projects/angular2-bulma/src/lib/bu-icon) : Icon
- [bu-image](https://github.com/SKaDiZZ/angular2-bulma/tree/master/projects/angular2-bulma/src/lib/bu-image) : Image
- [bu-notification](https://github.com/SKaDiZZ/angular2-bulma/tree/master/projects/angular2-bulma/src/lib/bu-notification) : Notification
- [bu-progress](https://github.com/SKaDiZZ/angular2-bulma/tree/master/projects/angular2-bulma/src/lib/bu-progress) : Progress
- [bu-tag](https://github.com/SKaDiZZ/angular2-bulma/tree/master/projects/angular2-bulma/src/lib/bu-tag) : Tag
- [bu-breadcrumb](https://github.com/SKaDiZZ/angular2-bulma/tree/master/projects/angular2-bulma/src/lib/bu-breadcrumb) : Breadcrumb
- [bu-card](https://github.com/SKaDiZZ/angular2-bulma/tree/master/projects/angular2-bulma/src/lib/bu-card) : Card
- [bu-dropdown](https://github.com/SKaDiZZ/angular2-bulma/tree/master/projects/angular2-bulma/src/lib/bu-dropdown) : Dropdown
- [bu-menu](https://github.com/SKaDiZZ/angular2-bulma/tree/master/projects/angular2-bulma/src/lib/bu-menu) : Menu
- [bu-message](https://github.com/SKaDiZZ/angular2-bulma/tree/master/projects/angular2-bulma/src/lib/bu-message) : Message
- [bu-navbar](https://github.com/SKaDiZZ/angular2-bulma/tree/master/projects/angular2-bulma/src/lib/bu-navbar) : Navbar
- [bu-tabs](https://github.com/SKaDiZZ/angular2-bulma/tree/master/projects/angular2-bulma/src/lib/bu-tabs) : Tabs
```bash
npm install bulma angular2-bulma --save
```
## Import Bulma CSS
In your main style.css file import Bulma CSS styles:
```css
@import '~bulma';
```
If you want to change values for some of bulma css variables define them before **@import**.
```css
$menu-item-color: #3573D6;
$menu-item-radius: 7px;
@import '~bulma';
```
## Font Awesome Icons
If you want to use icons add into your index.html file.
```html
```
Import Angular2BulmaModule in your app.module.ts file and add it into imports array.
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { Angular2BulmaModule } from 'angular2-bulma';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
Angular2BulmaModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
This will import all of the Angular2-Bulma component modules. But you can also import any of the individual component modules. Maybe you need only Tabs for your application so you can import only BuTabsModule without any other.
## Changelog
### v0.0.2
- Initial commit
## License
MIT © [Samir Kahvedzic](mailto:akirapowered@gmail.com)