yew_and_bulma/
lib.rs

1//! # Yew and Bulma - Bulma CSS components for Yew
2//!
3//! This crate provides [Bulma CSS][bulma] components made to be used with the
4//! [Yew][yew] framework. It aims to make an easy, as intuitive as possible
5//! development experience for integrating [Bulma][bulma] into your [Yew][yew]
6//! frontends.
7//!
8//! Generally speaking, it aims to provide a Rust API for ideally* all elements,
9//! components, helpers etc. that you would be able to use in CSS/HTML or other
10//! frontend frameworks, such as Angular or React.
11//!
12//! > _* It might not be possible to expose everything in the same manner as
13//! with JavaScript, but wherever it is, this crate will try and implement them._
14//!
15//! ### Supported Targets (for Yew Client-Side Rendering only)
16//! - `wasm32-unknown-unknown`
17//!
18//! # Examples
19//!
20//! Since it is in the early stages of development, no complete example is made
21//! yet.
22//!
23//! [bulma]: https://bulma.io
24//! [yew]: https://yew.rs
25
26#![cfg_attr(nightly_error_messages, feature(rustc_attrs))]
27#![forbid(unsafe_code)]
28
29/// Holds the [Bulma column elements][bd] implemented as [Yew components][yew].
30///
31/// Contains all of the [Bulma column elements][bd] implemented as
32/// [Yew components][yew].
33///
34/// # Examples
35///
36/// ```rust
37/// use yew::prelude::*;
38/// use yew_and_bulma::columns::{Column, Columns};
39///
40/// #[function_component(App)]
41/// fn app() -> Html {
42///     html! {
43///         <Columns>
44///             <Column>
45///                 {"This is some text in a column."}
46///             </Column>
47///         </Columns>
48///     }
49/// }
50/// ```
51///
52/// [bd]: https://bulma.io/documentation/columns/
53/// [yew]: https://yew.rs
54pub mod columns;
55/// Holds the [Bulma elements][bd] implemented as [Yew components][yew].
56///
57/// Contains all of the [Bulma elements][bd] implemented as
58/// [Yew components][yew].
59///
60/// # Examples
61///
62/// ```rust
63/// use yew::prelude::*;
64/// use yew_and_bulma::elements::block::Block;
65///
66/// #[function_component(App)]
67/// fn app() -> Html {
68///     html! {
69///         <Block>{"This is some text in a block."}</Block>
70///     }
71/// }
72/// ```
73///
74/// [bd]: https://bulma.io/documentation/elements/
75/// [yew]: https://yew.rs
76pub mod elements;
77/// CSS helpers, as described in the [Bulma documentation][bd].
78///
79/// Contains the [Bulma CSS helpers][bd] implementations for:
80///
81/// * Color (implemented in the [`crate::helpers::color`] module)
82/// * Spacing (implemented in the [`crate::helpers::spacing`] module)
83/// * Typography (implemented in the [`crate::helpers::typography`] module)
84/// * Visibility (implemented in the [`crate::helpers::visibility`] module)
85/// * Flexbox (implemented in the [`crate::helpers::flexbox`] module)
86///
87/// > _Since the helpers defined in the [Other documentation section][other]
88/// only contain individual classes, without much relation or customization to
89/// them, those are defined directly into [`crate::utils::constants`]._
90///
91/// While it is possible to manually format each value, for example using the
92/// predefined strings in [`crate::utils::constants`], it is recommended to opt
93/// for the [`crate::utils::class::ClassBuilder`] CSS class builder instead.
94///
95/// # Examples
96///
97/// ```rust
98/// use yew::prelude::*;
99/// use yew_and_bulma::{
100///     helpers::color::TextColor,
101///     utils::class::ClassBuilder,
102/// };
103///
104/// // Create a `<div>` HTML element that has the text color set to primary.
105/// #[function_component(ColoredTextDiv)]
106/// fn colored_text_div() -> Html {
107///     let class = ClassBuilder::default()
108///         .with_text_color(Some(TextColor::Primary))
109///         .build();
110///     html!{
111///         <div class={class}>{ "Lorem ispum..." }</div>
112///     }
113/// }
114/// ```
115///
116/// It is also possible to use them wihtout the
117/// [`crate::utils::class::ClassBuilder`], instead formatting the class names
118/// manually, using the constants defined in [`crate::utils::constants`]:
119///
120/// ```rust
121/// use yew::prelude::*;
122/// use yew_and_bulma::{
123///     helpers::color::TextColor,
124///     utils::constants::HAS_TEXT_PREFIX,
125/// };
126///
127/// // Create a `<div>` HTML element that has the text color set to primary.
128/// #[function_component(ColoredTextDiv)]
129/// fn colored_text_div() -> Html {
130///     let text_color = TextColor::Primary;
131///     let class = classes![format!("{HAS_TEXT_PREFIX}-{text_color}")];
132///     html!{
133///         <div class={class}>{ "Lorem ispum..." }</div>
134///     }
135/// }
136/// ```
137///
138/// [bd]: https://bulma.io/documentation/helpers/
139/// [other]: https://bulma.io/documentation/helpers/other-helpers/
140pub mod helpers;
141/// Holds the [Bulma layout elements][bd] implemented as [Yew components][yew].
142///
143/// Contains all of the [Bulma layout elements][bd] implemented as
144/// [Yew components][yew].
145///
146/// # Examples
147///
148/// ```rust
149/// use yew::prelude::*;
150/// use yew_and_bulma::layout::container::Container;
151///
152/// #[function_component(App)]
153/// fn app() -> Html {
154///     html! {
155///         <Container>{"This is some text in a container."}</Container>
156///     }
157/// }
158/// ```
159///
160/// [bd]: https://bulma.io/documentation/layout/
161/// [yew]: https://yew.rs
162pub mod layout;
163/// Various utilities to make usage of Bulma components and heplers easier in
164/// Rust.
165pub mod utils;
yew_and_bulma/lib.rs

yew_and_bulma/
lib.rs
