Rework the bootstrap button solution into a 7-1 architecture. At the bottom is the main.scss
code you might use from the button solution. Be sure to do the following:
- Separate parts of your scss code from
main.scss
into appropriate folders and files. I’m not going to name which are which as I think it’s good for you to sort through the 7-1 architecture’s structure for practice. - Make sure your
main.scss
file only@include
statements to include all your partial files. - Upload and link the follow files and folders. Note I’m not naming the partial filenames and where they should be organized intentionally. That’s part of the assignment to figure out!
buttons-v2/index.html
buttons-v2/package.json
buttons-v2/css/style.css
buttons-v2/sass/main.scss
buttons-v2/sass/all-the-different-7-1-folders/and-the-partials
- And remember to make sure that everything works! Follow the node sass setup cheat sheet to help!
$color-primary: #007bff; $color-secondary: #6c757d; $color-success: #28a745; $color-info: #17a2b8; $color-warning: #ffc107; $color-danger: #dc3545; $color-light: #f8f9fa; $color-dark: #343a40; $color-white: #ffffff; $color-black: #212529; $colors: (primary: $color-primary, secondary: $color-secondary, success: $color-success, info: $color-info, warning: $color-warning, danger: $color-danger, light: $color-light, dark: $color-dark, ); @function color-yiq($color) { $r: red($color); $g: green($color); $b: blue($color); $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000; @if ($yiq >=150) { @return $color-black; } @else { @return $color-white; } } *, *::before, *::after { margin: 0; padding: 0; box-sizing: inherit; } html { font-size: 100%; } body { font-family: sans-serif; font-weight: 400; font-size: 1.6rem; color: $color-black; line-height: 1.7; padding: 3rem; box-sizing: border-box; } button { cursor: pointer; } .btn { display: inline-block; font-weight: 400; color: $color-black; text-align: center; vertical-align: middle; background-color: transparent; border: 1px solid transparent; padding: .375rem .75rem; font-size: 1rem; line-height: 1.5; border-radius: .25rem; transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; @each $colorName, $hex in $colors { &-outline-#{$colorName} { color: $hex; border-color: $hex; &:hover { color: color-yiq($hex); background-color: $hex; border-color: $hex; } } } // &-outline { // &-danger { // color: $color-danger; // border-color: $color-danger; // &:hover { // color: $color-white; // background-color: $color-danger; // border-color: $color-danger; // } // } // &-primary { // color: $color-primary; // border-color: $color-primary; // &:hover { // color: $color-white; // background-color: $color-primary; // border-color: $color-primary; // } // } // } }