CSS Classes and styles

Please note the Gomplements classes and styles do not work on traditional gomponents.Node elements, only on e.Element.

Classes

Gomplements provides a Class type, which applies the provided class to the element. You may use multiple classes as different arguments to an element builder, they are combined when rendering.

Example

Code

e.Div(
	e.Class("myMenu"),
	"Here is my menu",
)

ResultHTML

Here is my menu

<div class="myMenu">Here is my menu</div>

Styles

In order to apply CSS styles directly to an element, you may use the e.Styles map type.

Example

Code

e.Div(
	e.Styles{
		"width":  "88px",
		"height": "44px",
		"border": "1px dashed red",
	},
	"Hello world",
)

ResultHTML

Hello world

<div style="width:200px;height:50px;text-align:center;border:1px dashed red;">Hello world</div>

Responsiveness

Bulma documentation

Responsive variants may be generated by using one of the following methods on b.ResponsiveClass or b.ResponsiveClasses values:

Method	Action
`.Mobile()`	Apply on mobile (up to 768px)
`.TabletOnly()`	Apply on tablet (between 769px and 1023px)
`.Tablet()`	Apply on tablet and larger
`.Touch()`	Apply on mobile and tablet
`.DesktopOnly()`	Apply on desktop (between 1024px and 1215px)
`.Desktop()`	Apply on desktop and larger
`.WidescreenOnly()`	Apply on widescreen (between 1216px and 1407px)
`.Widescreen()`	Apply on widescreen and full HD
`.FullHD()`	Apply on full HD (1408px and above)

On b.ResponsiveClasses values, the responsive variant is applied only on classes provided in the Responsive attribute.

Example

Code

e.Div(
	b.FontSize7,
	b.FontSize6.Tablet(),
	b.FontSize5.Desktop(),
	b.FontSize4.Widescreen(),
	b.FontSize3.FullHD(),
	"Hello, my size changes according to your screen",
)

ResultHTML

Hello, my size changes according to your screen

<div class="is-size-6-tablet is-size-5-desktop is-size-4-widescreen is-size-3-fullhd is-size-7">Hello, my size changes according to your screen</div>

Applying classes and styles conditionally

You may apply classes and styles conditionally by using the .If(bool) method, which is implemented in e.Class, e.Classesas well as Bulma-Gomponentsspecific derivatives (for instance, fa.Class, b.ResponsiveClass, etc):

Example

Code

b.Message(b.Success.If(false), b.Danger.If(true), "Hello world")

ResultHTML

Hello world

<article class="message is-danger"><div class="message-body">Hello world</div></article>