Skip to content

Instantly share code, notes, and snippets.

@marypieroszkiewicz

marypieroszkiewicz/codereview__sass--bem--mixin

Created March 26, 2019 20:47
Show Gist options
  • Save marypieroszkiewicz/6f7ed8eb2fb966e51cc34c2f17754767 to your computer and use it in GitHub Desktop.
Save marypieroszkiewicz/6f7ed8eb2fb966e51cc34c2f17754767 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
codereview__sass--bem--mixin
<!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&amp;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-container__title">Heading</h1>
<p class="wrapper-container__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 -----
// Box Container
@mixin boxes-container {
display: flex;
flex-direction: column;
width: 100%;
padding: 1.25rem .625rem;
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;
padding: .9375rem;
margin-bottom: 1.188rem;
@include screen('tablet860') {
padding: 1.875rem;
}
@include screen('desktop1200') {
flex-basis: 33.33%;
padding: 2.5rem 1.875rem;
margin-right: 1.188rem;
margin-bottom: 0;
}
&:last-child {
margin-right: 0;
margin-bottom: 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: 2.625rem;
}
}
}
}
// ----- END OF MIXINS -----
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment