| title |
before |
folders |
after |
notes |
Project setup |
Before we get started, create some files and get ready.
|
| label |
type |
button-systems |
folder |
|
| label |
indent |
index.html |
1 |
|
| label |
type |
indent |
css |
folder |
1 |
|
| label |
indent |
modules.css |
2 |
|
|
|
1. Make an `index.html`
2. Make a `modules.css` in your `css` folder
3. Make a `main.css` in your `css` folder
|
| label |
text |
Naming conventions |
Don’t forget to follow the [naming conventions](/topics/naming-paths-cheat-sheet/#naming-conventions). |
|
|
|
| title |
before |
code_lang |
code_file |
code |
lines |
notes |
Add HTML boilerplate |
*Use the `html5`, `viewport`, and `css` snippets.* |
html |
index.html |
<!DOCTYPE html>
<html lang="en-ca">
<head>
<meta charset="utf-8">
<title>Button systems</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="css/modules.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
</head>
<body>
</body>
</html>
|
| num |
text |
7-8 |
Don’t forget to attach both CSS files: `modules.css` and `main.css`
|
|
|
| label |
text |
HTML snippets |
Create the boilerplate with `html5`, `viewport` & `css` |
|
| label |
text |
Important |
The order of these files is extremely important: `modules.css` should always come before `main.css` in the HTML. |
|
|
|
| title |
before |
Add the Modulifier CSS |
We’re going to use Modulifier to generate a bunch of common patterns for us to use in our website.
### [Go to Modulifier.]( https://modulifier.web-dev.tools/)
*Select all of the different modules.*
Copy all code generated by Modulifier, in the right-hand panel & paste it into your `modules.css` file.
*That’s it—we have a fully functional pattern library. Now we can concentrate fully on our layout and write much less CSS.*
**We should never touch the generated CSS just in case we want to replace it later.**
|
|
| title |
before |
code_lang |
code_file |
code |
lines |
after |
Add content to the HTML |
Let’s add all the content we need to the HTML for some basic buttons.
|
html |
index.html |
⋮
<body>
<a class="btn" href="#">Click me!</a>
<a class="btn btn-ghost" href="#">No, click me!</a>
<a class="btn btn-light" href="#">No really, click me!</a>
</body>
</html>
|
|
|
| num |
text |
4-6 |
I’ve gone ahead and added the default button classes to these tags. There will be some default styles applied from Modulifier. |
|
|
Refresh in your browser to see the default styles of buttons the Modulifier has applied.
|
|
| title |
before |
code_lang |
code_file |
code |
lines |
after |
Customize the button colours |
Now, we can do some customizations of the buttons inside our `main.css` file.
**It’s really important to notice that `main.css` doesn’t have our boilerplate code anymore—Modulifier is adding all the code for us.**
|
css |
css/main.css |
html {
font-family: sans-serif;
}
.btn {
background-color: limegreen;
border-color: limegreen;
}
.btn-ghost {
background-color: transparent;
}
.btn-light {
background-color: lightgreen;
border-color: lightgreen;
}
|
| num |
text |
1 |
Notice that there is no boilerplate at the top of this file—Modulifier is adding it for us. |
|
| num |
text |
2 |
Change the default font to `sans-serif` for the whole design. |
|
| num |
text |
5-8 |
Because we are inheriting from Modulifier’s CSS we only need to specify the properties that are different.
We only want to change the button colours, so we only need to specify `background-color` and `border-color`
|
|
| num |
text |
10-12 |
Even though the `.btn-ghost` is very similar to the standard `.btn`, since it always has the `.btn` class, the CSS that we wrote above will overwrite `.btn-ghost`. So, we need to reset some properties back to their default styles.
|
|
|
Refresh in your browser and see customized buttons inherited from the Modulifier defaults.
|
|
| title |
before |
code_lang |
code_file |
code |
lines |
after |
Add some hover states |
Now that we have slightly customized versions of the default buttons let’s add some customized hover states to the buttons.
|
css |
css/main.css |
⋮
.btn-light {
background-color: lightgreen;
border-color: lightgreen;
}
.btn:hover {
background-color: darkgreen;
border-color: darkgreen;
}
.btn-ghost:hover {
background-color: transparent;
}
|
|
The `.btn` hover CSS will apply to all 3 buttons, but I don’t want the `.btn-ghost` to be filled in on hover, only the border to change, so we have to overwrite the `background-color` for `.btn-ghost:hover` back to transparent.
**Go try it out in the browser!**
|
|