Before Editing

Fabulousness how to image

Turning it green to easily show what this changes.

Fabulousness how to image

Now we're green!

Fabulousness how to image

Changing the Font Size

Fabulousness how to image

If we want to change the font size, we go to "_variables.scss." Here, we can go to the root where we can change the scaling factor. Thanks to calc, changing this will resize everything globally.

Font Family

Fabulousness how to image

For changing the font family, we return again to "_fonts.scss." We then find "$font-primary" and "$font-secondary." Here, the default fonts of "Tangerine" and "Roboto" can be changed to whatever font you desire! Roboto is used for the p tag while Tangerine is used for h1-h4 tags.

Changing the background color

Fabulousness how to image

If we head over to "variables.scss," we can change the background by changing "$background-color."

Changing the Primary Color

Fabulousness how to image

Changing "$primary-color" will change the pink used as a background for the nav, footer, and cards.

Border Radius(Rounded Corners)

Fabulousness how to image

If rounded corners aren't wanted, change the value in "_variables" in "$border-radius." If you change it to 0, there will be no more rounded corners on anything on your fabulous website.

Breakpoints

Fabulousness how to image

To easily edit breakpoints, in "_variables.scss," you can change "$first-breakpoint" and "$second-breakpoint" to fit the breakpoint needs of your project.

Button Editing

Fabulousness how to image

In "_button.scss," you can change the color and margins etc to perfect the button to your website. If you want it a different color from everything else, you can easily change the background color by editing "$primary-color." You can also change the font color by changing "$secondary-color."

myCard

Fabulousness how to image

In "_myCard.scss," you can edit the various features to make it your own if you choose. It's the same process as editing the other elements.

Navbar

Fabulousness how to image

To edit elements on the nav, you head to "_nav.scss." Here you can change the color and such to make it fit your project.