Skip to content

Instantly share code, notes, and snippets.

@marypieroszkiewicz
Created March 23, 2019 19:00
Show Gist options
  • Save marypieroszkiewicz/261e2735f3e44de350afd1b6f1a6d89c to your computer and use it in GitHub Desktop.
Save marypieroszkiewicz/261e2735f3e44de350afd1b6f1a6d89c to your computer and use it in GitHub Desktop.
.boxes {
display: flex;
flex-direction: column;
width: 100%;
padding: 10px;
text-align: center;
@include screen('tablet') {
padding: 2.875rem 1.75rem 0;
}
@include screen('desktop') {
flex-direction: row;
justify-content: space-between;
padding: 2.875rem 4.375rem 0;
}
.box {
flex-basis: 100%;
background-color: $bg_color-primary;
margin-bottom: 1.188rem;
@include screen('tablet') {
padding: 2.5rem 1.875rem;
}
@include screen('desktop') {
flex-basis: 33.33%;
margin-right: 1.188rem;
}
&:last-child {
margin-right: 0;
}
h2 {
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 {
.icon {
padding-top: .875rem;
.fa-wordpress {
width: 42px;
height: 42px;
color: $icon_color;
}
}
}
}
@bartcis
Copy link

bartcis commented Mar 24, 2019

$tablet: '768px';
$laptop: '1280px';
$dektop: '1920px';

/* Glowny kontener - nazwy maja cos znaczyc /
.box-container {
display: flex;
flex-direction: column;
width: 100%;
/
Jak decydujesz na użycie jednostek rem przy definicji paddingow/marginow itp to trzymaj sie tego /
padding: 1rem;
text-align: center;
/
Powinnas użyc Media Query nie Mixiny */
@media (min-width: $tablet) {
padding: 2rem;
}
@media (min-width: $laptop) {
padding: 3rem;
}
@media (min-width: $dektop) {
padding: 4rem;
}
}

.box {
flex-basis: 100%;
/* Jak dobierasz nazwy zmiennych to trzymaj się jakiejś konwencji */
background-color: $bg_color-primary;
margin-bottom: 1.188rem;
@media (min-width: $tablet) {
padding: 2.5rem 1.875rem;
}
@media (min-width: $dektop) {
flex-basis: 33.33%;
margin-right: 1.188rem;
}

&:last-child {
margin-right: 0;
}

h2 {
font-size: 1.25rem;
font-weight: 400;
color: $font_color-headline;
line-height: 28px;
}
/* Naucz sie takiego 'zagniezdzania' w SASS jest to tozsame z .box__par /
/
Poczytaj wiecej o BEM. element__dziecko /
&__par {
font-size: .9375rem;
color: $font_color-box--p;
line-height: 25px;
}
/
Poczytaj wiecej o BEM. element__modyfikator */
&--1 {
.icon {
padding-top: .875rem;
.fa-wordpress {
width: 42px;
height: 42px;
color: $icon_color;

  }
}

}
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment