Buttons
Create a reusable button class that can easily adapt with simple modifier classes.
Submission
Push your completed deliverable to your GitHub deliverable repository.
Due: Sun Sept 24, 2023
# Instructions
In your deliverables repository, create a 03-buttons folder within the assignments folder.
Recreate the buttons displayed below by creating a reusable .btn class. Create modifier classes for each different button type that builds on the initial .btn class.
What do I mean by reusable and modifier classes?
A reusable class, as the name suggests, is a class that provides a number of basic styles that can be reused over and over again. In this case, the .btn class should apply all of the styles for a basic button. Meaning, if I apply .btn to an element it should look exactly like the primary button below.
A modifier class is a class that makes very minor changes to a reusable class and should be used in combination with a reusable class. In this case we could make a .btn--secondary class, which is a modifier of .btn. The only styles that .btn--secondary should apply are the styles necessary to change the element to look like the secondary button seen below (ie: changing colors). Meaning to get a button to correctly look like the secondary button below, we need to apply btn btn--secondary as classes to the element.
This is an application of the Block Element Modifier (BEM) (opens new window) class naming philosophy and will be the style of class naming I will be using for most of the course.
The first line should use an appropriate HTML tag for links and the second link should use an appropriate HTML tag for interactive element buttons. The same .btn tag should have all of the necessary styling for both types of HTML tags.
# Styling
Make sure to include the CSS Reset!
- Colors
- Brand Primary:
#394A59 - Brand Primary Light:
#59758d - Brand Secondary:
#36BF7F - Brand Secondary Light:
#75d3a7
- Brand Primary:
- Font:
sans-serif
# Submission
Submit this assignment by pushing your code to your mad9013-deliverables repository with the commit message Complete 03-buttons assignment.
A reminder of the git commands:
git add -A
git commit -m "Complete 03-buttons assignment"
git push
2
3