Bulma 是最流行的前端框架之一,文档详尽,社区活跃。这里推荐一本Bulma官方书籍《Creating Interfaces with Bulma》,
本书目录如下:
CHAPTER 1: Understanding Bulma, terminology, and concepts
How is Bulma unique?
Simple columns system
Readability
Customizable
Modular
Columns
Modifiers
Components
Helper classes
Summary
CHAPTER 2: Creating and controlling forms with Bulma
Template requirements
Centered layout
Resizing the single column
Implementing the form’s content
Logo
Email input
Password input
Remember me checkbox
Login button
Summary
CHAPTER 3: Creating navigations and vertical menus
Creating the navigation bar
The navigation’s branding
The navigation’s menu
The Navigation’s dropdown menu
The main section
The sidebar menu
Summary
CHAPTER 4: Creating responsive grids with common components
The toolbar
Similarities between navbar and level
Creating the toolbar
The books grid
The book item
Pagination
Summary
CHAPTER 5: Creating breadcrumbs and file upload fields
New book detail template
Breadcrumb
The book form
Edit the book template
Summary
CHAPTER 6: Creating tables and selecting dropdowns
The list of customers
Updating the toolbar
Implementing the table of customers
New customer template
Edit customer template
Summary
CHAPTER 7: Creating more tables and selecting dropdowns
List of orders
Edit Order
Order information
List of books
Row Form
Summary
CHAPTER 8: Creating notifications and cards
Title, time range
Important metrics
Latest orders
Most popular books with cards
Basic structure of a card
Most loyal customers
Summary
CHAPTER 9: Using Bulma with Vanilla JavaScript
Report a Bug - Modal
Mobile menu toggle
Notifications
Dropdowns
Delete a book item from books page
Delete a customer from customer page
Summary
CHAPTER 10: Using Bulma with Angular
Project preparation
Application
Componenent
Summary
CHAPTER 11: Using Bulma with VueJS
Installing Vue-CLI
Setting up the Vue project
Preparing pages
Vue-Router
Installing Bulma
Option 1: Adding Bulma via a CDN
Option 2: Adding Bulma via NPM (Recommended)
Make use of Font-Awesome
Setting up components with Vue
Admin skeleton
Implementing the dashboard
First Vue template: Login page
Creating the “Report a Bug” component
Creating a component
Add the Modal to the App Template
Books page
Sorting books
Filtering books
Creating and editing a book
Summary
CHAPTER 12: Using Bulma with React
What you will be making
Installing “Create React App”
Quick overview of Create-React-App
The app structure
Installing Bulma
Option 1: Adding Bulma via a CDN
Option 2: Adding Bulma via NPM
Routing with React Router 4
BrowserRouter
Route
Final App.js With Routes
Creating the Login component
Login.jsx
Creating the Login form
Creating the collection
The Header
Header.jsx
HeaderBrand.jsx
HeaderUserControls.jsx
Putting the header together
Footer.jsx
The book collection body
Collection.jsx
CollectionSingleBook.jsx
CollectionSingleBookDetail.jsx
Tying the Collections Component Together
Running the application
Summary
CHAPTER 13: Customizing Bulma
Setting up node-sass
Creating package.json
Creating a sass/custom.scss file
Importing Bulma
Importing the Google fonts
Introducing your own variables
Understanding Bulma’s variables
Overriding Bulma’s initial variables
Overriding Bulma’s component variables
Updating the HTML
Custom rules
Second font
Bigger controls
Using the Rubik font
Updating the sidebar menu
Fixing the navbar
Better tables
Bold titles
Responsiveness with Bulma mixins
Media
Final Summary
如需要本书完整版本,请联系我。