Last active
March 26, 2019 16:21
-
-
Save marypieroszkiewicz/d3d0eeb3f0e5d1334b59524aba3e5189 to your computer and use it in GitHub Desktop.
mixin-repeating-element
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* --- HTML --- */ | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>GOGOmedia - Recruitment Task</title> | |
| <!-- Google Fonts --> | |
| <link href="https://fonts.googleapis.com/css?family=Rubik:300,400,500,700&subset=latin-ext" rel="stylesheet"> | |
| <!-- Font Awesome Icons --> | |
| <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.0/css/all.css" integrity="sha384-Mmxa0mLqhmOeaE8vgOSbKacftZcsNYDjQzuCOm6D02luYSzBG8vpaOykv9lFQ51Y" crossorigin="anonymous"> | |
| <!-- Style CSS --> | |
| <link rel="styleseet" href="css/normalize.css"> | |
| <link rel="stylesheet" href="css/style.css"> | |
| </head> | |
| <body> | |
| <!-- header --> | |
| <header class="header-container"> | |
| <section class="container clearfx"> | |
| <div class="header-container__logo"> | |
| <a href="#"><img src="images/logo.png"></a> | |
| </div> | |
| </section> | |
| <div class="banner-container"> | |
| <section class="container clearfx"> | |
| <h1 class="banner-container__title">Heading</h1> | |
| <p class="banner-container__text">Lorem ipsum dolor sit amet, consect etur adipiscing elit.</p> | |
| <div class="box-container"> | |
| <div class="box-container__box box--1"> | |
| <h2 class="box__head">Heading</h2> | |
| <p class="box__par">Lorem ipsum dolor sit amet.</p> | |
| <div class="box__icon"><i class="fab fa-wordpress"></i></div> | |
| </div> | |
| <div class="box-container__box box--2"> | |
| <h2 class="box__head">Heading</h2> | |
| <p class="box__par">Lorem ipsum dolor sit amet, consect etur adipiscing elit. Aenea uismod bibendum laoreet. Proin gravida dolor sit amet lacus.</p> | |
| </div> | |
| <div class="box-container__box box--3"> | |
| <h2 class="box__head">Ultra Mega Super Long Heading</h2> | |
| <p class="box__par">Lorem ipsum dolor sit amet, consect etur adipiscing elit. Aenea uismod bibendum laoreet. Lorem ipsum dolor sit amet</p> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </header> | |
| <!-- end of header --> | |
| <!-- main --> | |
| <main class="main-container"> | |
| <section class="container clearfx"> | |
| <div class="wrapper-container"> | |
| <h1 class="wrapper__title">Heading</h1> | |
| <p class="wrapper__par">Lorem ipsum dolor sit amet, consect etur adipiscing elit.<p> | |
| </div> | |
| <div class="box-container"> | |
| <div class="box-container__box box--1"> | |
| <h2 class="box__head">Heading</h2> | |
| <p class="box__par">Lorem ipsum dolor sit amet.</p> | |
| <div class="box__icon"><img class="icons" src="images/icon_2.png" alt=""></div> | |
| </div> | |
| <div class="box-container__box box--2"> | |
| <h2 class="box__head">Heading</h2> | |
| <p class="box__par">Lorem ipsum dolor sit amet, consect etur adipiscing elit. Aenea uismod bibendum laoreet. Proin gravida dolor sit amet lacus.</p> | |
| </div> | |
| <div class="box-container__box box--3"> | |
| <h2 class="box__head">Ultra Mega Super Long Heading</h2> | |
| <p class="box__par">Lorem ipsum dolor sit amet, consect etur adipiscing elit. Aenea uismod bibendum laoreet. Lorem ipsum dolor sit amet</p> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- end of main --> | |
| <!-- footer --> | |
| <!-- end of footer --> | |
| </body> | |
| <!-- JS Scripts --> | |
| <script src="js/app.js"></script> | |
| </html> | |
| // ---------------------------------------------------- | |
| // ----- MIXINS ----- | |
| // ---------------------------------------------------- | |
| // --- Media Queries - Breakpoints --- | |
| @mixin screen($size) { | |
| @if $size == mobile420 { | |
| @media #{$mobile__420} { | |
| @content; | |
| } | |
| } | |
| @else if $size == tablet860 { | |
| @media #{$tablet__860} { | |
| @content; | |
| } | |
| } | |
| @else if $size == desktop1200 { | |
| @media #{$desktop__1200} { | |
| @content; | |
| } | |
| } | |
| @else if $size == high-screen1440 { | |
| @media #{$high-screen__1440} { | |
| @content; | |
| } | |
| } | |
| @else { | |
| @media only screen and #{$size} { | |
| @content; | |
| } | |
| } | |
| } | |
| // --- End Of Media Queries - Breakpoints | |
| // --- Clearfix --- | |
| @mixin clearfix { | |
| &::after { | |
| content: ''; | |
| display: table; | |
| clear: both; | |
| } | |
| } | |
| // ----- End Of Clearfix ----- | |
| // --- BEM --- | |
| // Block Element | |
| @mixin element($element) { | |
| &__#{$element} { | |
| @content; | |
| } | |
| } | |
| // Block Modifier | |
| @mixin modifier($modifier) { | |
| &--#{$modifier} { | |
| @content; | |
| } | |
| } | |
| // ----- End Of BEM ----- | |
| @mixin boxes-section { | |
| display: flex; | |
| flex-direction: column; | |
| width: 100%; | |
| padding: 10px; | |
| text-align: center; | |
| @include screen('tablet860') { | |
| padding: 2.875rem 1.75rem 0; | |
| } | |
| @include screen('desktop1200') { | |
| flex-direction: row; | |
| justify-content: space-between; | |
| padding: 2.875rem 4.375rem 0; | |
| } | |
| @include element('box') { | |
| flex-basis: 100%; | |
| background-color: $bg_color-primary; | |
| margin-bottom: 1.188rem; | |
| @include screen('tablet860') { | |
| padding: 2.5rem 1.875rem; | |
| } | |
| @include screen('desktop1200') { | |
| flex-basis: 33.33%; | |
| margin-right: 1.188rem; | |
| margin-bottom: 0; | |
| } | |
| &:last-child { | |
| margin-right: 0; | |
| } | |
| & .box__head { | |
| font-size: 1.25rem; | |
| font-weight: 400; | |
| color: $font_color-headline; | |
| line-height: 28px; | |
| } | |
| & .box__par { | |
| font-size: .9375rem; | |
| color: $font_color-box--p; | |
| line-height: 25px; | |
| } | |
| } | |
| & .box--1 { | |
| .box__icon { | |
| padding-top: .875rem; | |
| .fa-wordpress { | |
| color: $icon_color; | |
| font-size: 42px; | |
| } | |
| } | |
| } | |
| } | |
| // ----- END OF MIXINS ----- |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment