flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Readapt the misuse of BEM, Code organization

Browse Source 
- -- is only for a modifier, not a child "child". Use master__child without the parent__ in it to make it more readable.
https://www.smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problems-and-how-to-avoid-them/
- Redefine atom design components
This commit is contained in:
Félix Péault
2020-02-29 18:32:32 +01:00
parent 70ce97e9bc
commit 76c8c31c89
17 changed files with 387 additions and 391 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/style/atoms/_link.scss
View File

@@ -67,6 +67,8 @@
// Link with animated letters
.link-translate {
display: inline-block;
.text {
position: relative;
overflow: hidden;

85
src/style/molecules/_location.scss Normal file
View File

@@ -0,0 +1,85 @@
// Location
.location {
position: relative;
margin-bottom: 48px;
@include breakpoint (sm) {
margin-left: pxVW(72);
margin-right: pxVW(72);
}
@include breakpoint (xl) {
margin-left: 72px;
margin-right: 72px;
}
a {
position: relative;
z-index: 2;
display: flex;
flex-flow: column;
align-items: center;
text-decoration: none;
}
// Flag image
img {
display: block;
width: 32px;
height: auto;
margin: 0 auto;
border-radius: 50vh;
}
// City
&__city {
font-family: $font-serif;
font-size: rem(32px);
color: $color-secondary;
@include breakpoint (sm) {
font-size: rem(48px);
}
}
.mask-city {
height: 40px;
margin: 24px 0 16px;
@include breakpoint (sm) {
height: 64px;
margin-bottom: 24px;
}
}
.mask-country {
height: 16px;
}
// Hover
&:hover {
.location__city {
color: $color-tertiary;
}
&:after {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}
// Shape on hover
&:after {
content: "";
pointer-events: none;
opacity: 0;
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.94);
display: block;
width: 216px;
height: 216px;
background: rgba($color-lightpurple, 0.3);
border-radius: 50vh;
transition: all 85ms ease-in-out;
}
}

148
src/style/molecules/_photo.scss
View File

@@ -48,45 +48,45 @@
margin: 0;
padding: 0;
}
}
// Image container
&--img {
overflow: hidden;
position: relative;
z-index: 2;
// Image itself
&__picture {
overflow: hidden;
position: relative;
z-index: 2;
display: block;
width: 100%;
border-radius: 0;
background-color: #fff;
box-shadow: 0 8px 18px rgba(#715E4E, 0.2);
user-select: none;
@include breakpoint (sm) {
border-radius: 8px;
}
img {
display: block;
width: 100%;
border-radius: 0;
background-color: #fff;
box-shadow: 0 8px 18px rgba(#715E4E, 0.2);
user-select: none;
height: auto;
}
@include breakpoint (sm) {
border-radius: 8px;
}
img {
display: block;
width: 100%;
height: auto;
}
// Overlay
&:after {
content: "";
position: absolute;
z-index: 2;
opacity: 0;
pointer-events: none;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: $color-primary;
display: block;
z-index: 3;
transition: opacity 150ms $ease-inout;
}
// Overlay
&:after {
content: "";
position: absolute;
z-index: 2;
opacity: 0;
pointer-events: none;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: $color-primary;
display: block;
z-index: 3;
transition: opacity 150ms $ease-inout;
}
a {
@@ -103,49 +103,49 @@
}
}
}
}
// Date (on the side)
&--date {
display: block;
margin-top: 16px;
padding: 0 pxVW(128);
font-size: rem(14px);
color: $color-lightgray;
// Date (on the side)
&__date {
display: block;
margin-top: 16px;
padding: 0 pxVW(128);
font-size: rem(14px);
color: $color-lightgray;
@include breakpoint (sm) {
position: absolute;
z-index: 3;
left: calc(100% + 30px);
bottom: 0;
transform: rotate(270deg);
transform-origin: 0 0;
white-space: nowrap;
line-height: 0;
padding: 0;
}
}
// Photo number
&--number {
@include breakpoint (sm) {
position: absolute;
bottom: -80px;
right: 24px;
font-family: $font-serif-extra;
color: rgba($color-tertiary, 0.5);
font-size: rem(124px);
pointer-events: none;
user-select: none;
z-index: 3;
left: calc(100% + 30px);
bottom: 0;
transform: rotate(270deg);
transform-origin: 0 0;
white-space: nowrap;
line-height: 0;
padding: 0;
}
}
@include breakpoint (sm) {
font-size: pxVW(300);
left: 92%;
top: 50%;
z-index: 1;
transform: translate(-50%, -50%);
}
@include breakpoint (xxl) {
font-size: rem(300px);
}
// Photo number
&__number {
position: absolute;
bottom: -80px;
right: 24px;
font-family: $font-serif-extra;
color: rgba($color-tertiary, 0.5);
font-size: rem(124px);
pointer-events: none;
user-select: none;
@include breakpoint (sm) {
font-size: pxVW(300);
left: 92%;
top: 50%;
z-index: 1;
transform: translate(-50%, -50%);
}
@include breakpoint (xxl) {
font-size: rem(300px);
}
}
}

197
src/style/organisms/_carousel.scss
View File

@@ -41,54 +41,54 @@
height: 0;
padding-bottom: calc(100% / 1.5); // Ratio 3.2
user-select: none;
}
// Photo
&--photo {
$duration: 0.9s;
// Photo
&__photo {
$duration: 0.9s;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale($scale);
box-shadow: 0 pxVW(15) pxVW(60) rgba(#000, 0.3);
transition: transform $duration $ease-quart, opacity $duration $ease-quart;
will-change: transform, opacity;
@include breakpoint (sm) {
border-radius: $radius;
}
img {
opacity: 0;
overflow: hidden;
position: relative;
z-index: 1;
display: block;
width: 100%;
height: auto;
}
// Overlay
&:before {
opacity: 0;
content: "";
display: block;
position: absolute;
z-index: -1;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale($scale);
box-shadow: 0 pxVW(15) pxVW(60) rgba(#000, 0.3);
transition: transform $duration $ease-quart, opacity $duration $ease-quart;
will-change: transform, opacity;
@include breakpoint (sm) {
border-radius: $radius;
}
img {
opacity: 0;
position: relative;
z-index: 1;
display: block;
width: 100%;
height: auto;
}
// Overlay
&:before {
opacity: 0;
content: "";
display: block;
position: absolute;
z-index: 2;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: $color-primary;
}
right: 0;
bottom: 0;
background-color: $color-primary;
}
// Active photo
.active {
&--active {
opacity: 1;
z-index: 10;
transform: scale(1);
@@ -99,7 +99,7 @@
}
// Previous & next photo
.prev, .next {
&--prev, &--next {
opacity: 1;
img {
@@ -112,7 +112,7 @@
}
// Previous photo
.prev {
&--prev {
z-index: 8;
@include breakpoint (sm) {
@@ -126,7 +126,7 @@
}
// Next photo
.next {
&--next {
z-index: 9;
@include breakpoint (sm) {
@@ -159,28 +159,28 @@
justify-content: space-between;
}
// Hover and clicking area
&--area {
display: flex;
align-items: center;
justify-content: center;
width: 12%;
height: 100%;
cursor: pointer;
&.prev {
margin-left: -6%;
}
&.next {
margin-right: -6%;
}
}
button {
box-shadow: 0 2px 20px rgba(#000, 0.15);
}
}
// Hover and clicking area
&__area {
display: flex;
align-items: center;
justify-content: center;
width: 12%;
height: 100%;
cursor: pointer;
&--prev {
margin-left: -6%;
}
&--next {
margin-right: -6%;
}
}
/*
** Information
@@ -188,49 +188,50 @@
&__infos {
position: relative;
z-index: 3;
}
// Locations
&--locations {
position: relative;
overflow: hidden;
min-height: 128px;
// Locations
&__locations {
position: relative;
overflow: hidden;
min-height: 128px;
}
// Location
&__location {
$distance: 40%;
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
text-align: center;
transition: transform 0.9s $ease-quart, opacity 0.9s $ease-quart;
will-change: transform, opacity;
margin-top: 32px;
@include breakpoint (sm) {
margin-top: pxVW(80);
}
@include breakpoint (xl) {
margin-top: 72px;
}
// Location
&--location {
$distance: 40%;
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
text-align: center;
transition: transform 0.9s $ease-quart, opacity 0.9s $ease-quart;
will-change: transform, opacity;
margin-top: 32px;
// States
&--prev {
transform: translateY(-$distance);
}
&--active {
transform: translateY(0);
opacity: 1;
}
&--next {
transform: translateY($distance);
}
@include breakpoint (sm) {
margin-top: pxVW(80);
}
@include breakpoint (xl) {
margin-top: 72px;
}
&.prev {
transform: translateY(-$distance);
}
&.active {
transform: translateY(0);
opacity: 1;
}
&.next {
transform: translateY($distance);
}
// State
.state {
margin-top: 6px;
}
// State
.state {
margin-top: 6px;
}
}

13
src/style/molecules/_footer.scss → src/style/organisms/_footer.scss
View File

@@ -43,6 +43,7 @@
li {
display: block;
text-align: center;
height: 100%;
& > ul {
display: flex;
@@ -57,6 +58,10 @@
li {
margin: 0 20px;
}
a {
display: block;
}
}
}
@@ -84,7 +89,7 @@
justify-content: center;
}
img {
display: inline-block;
display: block;
}
}
@@ -99,8 +104,8 @@
}
img {
display: inline-block;
margin: 8px 0 0 12px;
display: block;
margin: 3px 0 0 12px;
transition: transform 400ms $ease-quart;
will-change: transform;
@@ -111,7 +116,7 @@
// Hover
a:hover img {
transform: scale(1.025);
transform: scale(1.04);
}
}
}

86
src/style/organisms/_locations.scss
View File

@@ -53,88 +53,4 @@
margin-bottom: 232px;
}
}
// Location
.location {
position: relative;
margin-bottom: 48px;
@include breakpoint (sm) {
margin-left: pxVW(72);
margin-right: pxVW(72);
}
@include breakpoint (xl) {
margin-left: 72px;
margin-right: 72px;
}
a {
position: relative;
z-index: 2;
display: flex;
flex-flow: column;
align-items: center;
text-decoration: none;
}
// Flag image
img {
display: block;
width: 32px;
height: auto;
margin: 0 auto;
border-radius: 50vh;
}
// City
&__city {
font-family: $font-serif;
font-size: rem(32px);
color: $color-secondary;
@include breakpoint (sm) {
font-size: rem(48px);
}
}
.mask-city {
height: 40px;
margin: 24px 0 16px;
@include breakpoint (sm) {
height: 64px;
margin-bottom: 24px;
}
}
.mask-country {
height: 16px;
}
// Shape on hover
&:after {
content: "";
pointer-events: none;
opacity: 0;
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.94);
display: block;
width: 216px;
height: 216px;
background: rgba($color-lightpurple, 0.3);
border-radius: 50vh;
transition: all 85ms ease-in-out;
}
&:hover {
.location__city {
color: $color-tertiary;
}
&:after {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}
}
}
}

72
src/style/molecules/_pagination.scss → src/style/organisms/_pagination.scss
View File

@@ -30,48 +30,48 @@
font-size: rem(160px);
}
// Numbers
&--numbers {
overflow: hidden;
height: 62px;
margin-right: 4px;
@include breakpoint (sm) {
height: 136px;
}
.scroll {
display: flex;
flex-direction: column;
transform: translate(0, 0);
text-align: right;
line-height: 0.85;
transition: transform 325ms $ease-cubic;
will-change: transform;
}
}
// Info
&--info {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -72%);
font-family: $font-serif;
font-size: 18px;
color: $color-secondary-bright;
@include breakpoint (sm) {
font-size: rem(40px);
}
}
// Hover
&:hover {
color: rgba($color-text, 0.25);
}
}
// Numbers
&__numbers {
overflow: hidden;
height: 62px;
margin-right: 4px;
@include breakpoint (sm) {
height: 136px;
}
.scroll {
display: flex;
flex-direction: column;
transform: translate(0, 0);
text-align: right;
line-height: 0.85;
transition: transform 325ms $ease-cubic;
will-change: transform;
}
}
// Info
&__info {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -72%);
font-family: $font-serif;
font-size: 18px;
color: $color-secondary-bright;
@include breakpoint (sm) {
font-size: rem(40px);
}
}
// Caption
&__caption {
max-width: 420px;

65
src/style/organisms/_photos.scss
View File

@@ -26,16 +26,6 @@
transform: rotate(-90deg) translateX(-100%);
}
// Container
&--wrap {
@include breakpoint (md) {
position: sticky;
z-index: 10;
top: 32px;
height: 100%;
}
}
p {
font-size: rem(12px);
color: $color-lightgray;
@@ -49,6 +39,16 @@
}
}
// Container
&__sidewrap {
@include breakpoint (md) {
position: sticky;
z-index: 10;
top: 32px;
height: 100%;
}
}
// Each photo
.photo {
position: relative;
@@ -87,14 +87,15 @@
}
// Image
.photo__image {
justify-content: flex-end;
&--date {
.photo {
&__image {
justify-content: flex-end;
}
&__date {
right: 100%;
left: -30px;
}
&--number {
&__number {
right: 77%;
left: auto;
text-align: right;
@@ -104,7 +105,7 @@
}
// Number
&__image--number {
&__number {
@include breakpoint (sm) {
transform: translate(-50%, var(--translate));
will-change: transform;
@@ -185,23 +186,21 @@
}
}
// Image
&__image {
&--img {
border-radius: 8px;
}
&--number {
font-size: rem(96px);
bottom: -88px;
right: 24px;
z-index: 1;
transform: none;
top: auto;
left: auto;
}
&--date {
display: none;
}
// Image informations
&__img {
border-radius: 8px;
}
&__number {
font-size: rem(96px);
bottom: -88px;
right: 24px;
z-index: 1;
transform: none;
top: auto;
left: auto;
}
&__date {
display: none;
}
}

2
src/style/pages/_homepage.scss
View File

@@ -50,7 +50,7 @@
}
// Photos
.gallery__images--photo {
.gallery__photo {
&:before {
background-color: $color-secondary;
}

33
src/style/pages/_page.scss
View File

@@ -40,26 +40,23 @@
}
}
// List
&__list {
// Category
&--category {
margin-bottom: 96px;
text-align: center;
// Category
&__category {
margin-bottom: 96px;
text-align: center;
&:last-child {
margin-bottom: 0;
}
&:last-child {
margin-bottom: 0;
}
h2 {
margin-bottom: 56px;
}
dl {
margin-bottom: 40px;
}
dt {
margin-bottom: 8px;
}
h2 {
margin-bottom: 56px;
}
dl {
margin-bottom: 40px;
}
dt {
margin-bottom: 8px;
}
}

12
src/style/pages/_place.scss
View File

@@ -124,14 +124,14 @@
height: 100%;
background-color: $color-tertiary;
}
}
// Wrap
&--wrap {
padding: 0;
// Wrap
&__wrap {
padding: 0;
@include breakpoint (md) {
padding-left: 128px;
}
@include breakpoint (md) {
padding-left: 128px;
}
}

7
src/style/style.scss
View File

@@ -22,15 +22,16 @@
@import "atoms/switcher";
// Molecules
@import "molecules/location";
@import "molecules/photo";
@import "molecules/pagination";
@import "molecules/globe";
@import "molecules/footer";
// Organisms
@import "organisms/locations";
@import "organisms/carousel";
@import "organisms/photos";
@import "organisms/locations";
@import "organisms/pagination";
@import "organisms/footer";
// Layouts
@import "layouts/explore";