third party libraries & css variables with BULMA

COMP 126: Practical Web Design & Development for Everyone

Https://bulma.io/

Exercise 3.1.1: What is a CSS library?

```
Where is the CSS coming from?
```
```
What is a CDN?
```
```
What does class="button" do?
```

What does the modifier class is-primary do?

```
Can we still write and use our own CSS?
```
```
What happens if we remove the CDN link?
```

A CSS library is a collection of prewritten CSS rules that we can apply using classes.

A CDN (Content delivery network) is a convenient way of loading a library that is hosted elsewhere.

check out bulma's components at

https://bulma.io/documentation/components/

Exercise 3.1.2: exploring BULMA COMPONENTS

What happens when you remove the button class but leave is-primary?

Can the same modifier class be used with multiple components?

What are the advantages and disadvantages of using predefined styles?

Exercise 3.1.3: building a webpage with bulma

introducing Css variables

Say your website's primary color is #27233A.

The primary color is usually used for major headers, calls to action/buttons, etc.

So you might do something like this:

h1 {
    color: #27233A;
}

h2 {
    color: #27233A;
}

button {
    background-color: #27233A;
}

So if you want to change the primary color, you have to change it in all those places. For larger projects with more elements using that color, this could get complicated.

introducing Css variables

With CSS variables, you can define the color once and use the variable to call it anytime you need it:

:root {
    --main-color: #27233A;
}

h1 {
    color: var(--main-color);
}

h2 {
    color: var(--main-color);
}

button {
    background-color: var(--main-color);
}

And if you want to change it, you only have to change it in one place.

Bulma uses a lot of CSS variables.

Using devtools to Find the relevant variables to override

Exercise 3.1.4: customizing bulma's css variables