Button systems

Explore how to use and change the default set of buttons provided by Modulifier.

Goal

We’re going to explore how to use & change the default buttons provided by Modulifier.

This is what it should look like when it’s done:

  1. Type it, type it real good

    Remember the purpose of this lesson is to type the code out yourself—build up that muscle memory in your fingers!

1 Project setup

Before we get started, create some files and get ready.

  1. button-systems
  2. index.html
  3. css
  4. modules.css
  5. main.css
  1. Create a folder named button-systems
  2. Make an index.html
  3. Make a modules.css in your css folder
  4. Make a main.css in your css folder
  1. Naming conventions

    Don’t forget to follow the naming conventions.

2 Add HTML boilerplate

Use the html5, viewport, and css snippets.

<!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>
  1. HTML snippets

    Create the boilerplate with html5, viewport & css

  2. Important

    The order of these files is extremely important: modules.css should always come before main.css in the HTML.

  3. Lines G–H

    Don’t forget to attach both CSS files: modules.css and main.css

3 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.

Select all of the different modules.

Copy all code generated by Modulifier, in the right-hand panel & paste it into your module.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.

4 Add content to the HTML

Let’s add all the content we need to the HTML for some basic buttons.

⋮
<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>

Refresh in your browser to see the default styles of buttons the Modulifier has applied.

  1. Lines D–F

    I’ve gone ahead and added the default button classes to these tags. There will be some default styles applied from Modulifier.

5 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.

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;
}

Refresh in your browser and see customized buttons inherited from the Modulifier defaults.

  1. Line A

    Notice that there is no boilerplate at the top of this file—Modulifier is adding it for us.

  2. Line B

    Change the default font to sans-serif for the whole design.

  3. Lines E–H

    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

  4. Lines J–L

    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.

Drop it into Markbot

Drop the final, coded exercise into Markbot and fix all the errors until Markbot gives you all green (and maybe a little yellow).

Be sure to keep the green check open to show the teacher!

  1. Can’t submit

    Markbot won’t let you submit this exercise because it’s getting checked by the teacher during class.