bartek/forkio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Introduce BEM naming

Browse Source
This commit is contained in:
Bartlomiej Pluta (PGS Software)
2018-03-19 14:20:05 +01:00
parent 93d3db0fdd
commit 4087a53940
10 changed files with 135 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/img/hero/img.png → src/img/header/img.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 464 KiB

After

Width:  |  Height:  |  Size: 464 KiB

41
src/index.html
View File

@@ -23,44 +23,47 @@
</head> </head>
<body> <body>
<div class="wrapper" id="wrapper"> <div class="wrapper" id="wrapper">
<nav class="navbar navbar-expand-lg sticky-top" id="nav"> <nav class="navbar navbar-expand-lg sticky-top">
<div class="container-fluid"> <div class="container-fluid">
<div class="navbar-header" id="navbar-header"> <div class="navbar__header navbar-header">
<img src="img/logo.svg" alt="Forkio logo"> <img class="navbar__logo" src="img/logo.svg" alt="Forkio logo">
<span class="navbar-brand">Fork<em>IO</em></span> <span class="navbar__brand">Fork</span>
<span class="navbar__brand navbar__brand--emph">IO</span>
</div> </div>
<ul class="navbar-nav" id="navbar-body"> <ul class="navbar__body navbar-nav">
<li class="nav-item"> <li class="nav-item">
<a class="default-link nav-link" href="#">Overview</a> <a class="navbar__link nav-link" href="#">Overview</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="default-link nav-link" href="#">About fork</a> <a class="navbar__link nav-link" href="#">About fork</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="default-link nav-link" href="#">Buying options</a> <a class="navbar__link nav-link" href="#">Buying options</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="default-link nav-link" href="#">Support</a> <a class="navbar__link nav-link" href="#">Support</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="raised-button nav-link" href="#">Buy now</a> <a href="#">
<button class="rounded-button rounded-button--strong">Buy now</button>
</a>
</li> </li>
</ul> </ul>
</div> </div>
</nav> </nav>
<header id="hero"> <header class="header">
<!--<img src="img/hero/img.png">-->
<div> <div>
<h1>Fork app</h1> <p class="header__h1">Fork app</p>
<h2>A real gamechanger in the world of web development</h2> <p class="header__h2">A real gamechanger in the world of web development</p>
<h3>V. 2.8 for Mac and Windows</h3> <p class="header__h3">V. 2.8 for Mac and Windows</p>
</div> </div>
</header> </header>
<section id="download"> <section class="download">
<a href="#" class="raised-button">Download for free now</a> <a href="#" class="rounded-button rounded-button--very-strong download__rounded-button--translated">
<p>Unlimited 30-Days trial period</p> Download for free now
</a>
<p class="download__description">Unlimited 30-Days trial period</p>
</section> </section>
</div> </div>

4
src/js/script.js
View File

@@ -5,9 +5,9 @@ $(document).ready(function () {
scrollTop = $(window).scrollTop(); scrollTop = $(window).scrollTop();
if (scrollTop >= 100) { if (scrollTop >= 100) {
$('#nav').addClass('shrink'); $('.navbar').addClass('navbar--shrink');
} else if (scrollTop < 100) { } else if (scrollTop < 100) {
$('#nav').removeClass('shrink'); $('.navbar').removeClass('navbar--shrink');
} }
}); });
}); });

30
src/scss/_buttons.scss
View File

@@ -1,16 +1,28 @@
a.raised-button { .rounded-button {
$hover-transition-duration: 0.4s;
padding: 7px 35px; padding: 7px 35px;
background-color: $primary; background-color: $primary;
font-family: Montserrat, sans-serif; font-family: Montserrat, sans-serif;
color: white; color: white;
border: none;
border-radius: 30px; border-radius: 30px;
transition: $hover-transition-duration; transition: $hover-duration;
}
&:hover { .rounded-button:hover {
background-color: $primary-dark; background-color: $primary-light;
transition: $hover-transition-duration; transition: $hover-duration;
text-decoration: none; text-decoration: none;
} color: white;
cursor: pointer;
}
.rounded-button--strong {
font-weight: bold;
text-transform: capitalize;
}
.rounded-button--very-strong {
@extend .rounded-button--strong;
font-size: 21px;
padding: 15px 60px;
} }

29
src/scss/_download.scss
View File

@@ -1,20 +1,17 @@
#download { .download {
text-align: center; text-align: center;
}
a.raised-button { .download__rounded-button--translated {
position: absolute; position: absolute;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 21px; }
font-weight: bold;
text-transform: capitalize;
padding: 15px 60px;
}
p { .download__description {
padding-top: 45px; padding-top: 45px;
font-family: Montserrat, sans-serif; font-family: Montserrat, sans-serif;
font-size: 14px; font-size: 14px;
color: $regular-text; font-weight: 500;
text-transform: capitalize; color: $regular-text;
} text-transform: capitalize;
} }

32
src/scss/_header.scss Normal file
View File

@@ -0,0 +1,32 @@
.header {
background: url(../img/header/img.png) no-repeat 50% 30% / cover;
height: 900px;
padding-top: 110px;
}
.header__h1 {
font-family: Montserrat, sans-serif;
font-size: 82px;
font-weight: bold;
color: white;
text-transform: capitalize;
text-align: center;
}
.header__h2 {
font-family: Lato, sans-serif;
font-size: 30px;
color: $primary;
text-align: center;
margin-bottom: 0;
}
.header__h3 {
margin-top: 20px;
font-family: Montserrat, sans-serif;
font-size: 16px;
font-weight: 600;
color: $regular-text;
text-transform: uppercase;
text-align: center;
}

32
src/scss/_hero.scss
View File

@@ -1,32 +0,0 @@
#hero {
background: url(../img/hero/img.png) no-repeat 50% 40% / contain;
height: 900px;
padding-top: 110px;
h1 {
font-family: Montserrat, sans-serif;
font-size: 82px;
font-weight: bold;
color: white;
text-transform: capitalize;
text-align: center;
}
h2 {
font-family: Lato, sans-serif;
font-size: 30px;
color: $primary;
text-align: center;
margin-bottom: 0;
}
h3 {
margin-top: 20px;
font-family: Montserrat, sans-serif;
font-size: 16px;
font-weight: 600;
color: $regular-text;
text-transform: uppercase;
text-align: center;
}
}

81
src/scss/_navbar.scss
View File

@@ -1,54 +1,53 @@
#nav { $shrinking-duration: 0.4s;
$shrinking-duration: 0.4s;
.navbar {
margin: 0 0; margin: 0 0;
padding: 0 90px; padding: 0 90px;
height: 100px; height: 100px;
background-color: white; background-color: white;
transition: height $shrinking-duration; transition: height $shrinking-duration;
}
&.shrink { .navbar--shrink {
height: 50px; height: 50px;
transition: height $shrinking-duration; transition: height $shrinking-duration;
} }
#navbar-header { .navbar__header {
display: flex; display: flex;
justify-content: center; justify-content: center;
}
img { .navbar__logo {
height: 45px; height: 45px;
} margin-right: 17px;
}
span { .navbar__brand {
margin-left: 17px; font-family: Lato, sans-serif;
font-family: Lato, sans-serif; text-transform: uppercase;
text-transform: uppercase; font-size: 24px;
font-size: 24px; font-weight: bold;
font-weight: bold; display: inline-flex;
align-items: center;
}
em { .navbar__brand--emph {
color: $primary; color: $primary;
font-style: normal; font-style: normal;
} }
}
}
#navbar-body { .navbar__link {
a { text-transform: capitalize;
text-transform: capitalize; font-family: Montserrat, sans-serif;
font-family: Montserrat, sans-serif; font-size: 16px;
font-size: 16px; font-weight: bolder;
font-weight: bolder; margin: 0 20px;
} color: $primary-dark;
transition: $hover-duration;
}
a.default-link { .navbar__link:hover {
margin: 0 20px; color: $primary;
color: $primary-dark; transition: $hover-duration;
} }
a.raised-button {
@extend .raised-button
}
}
}

5
src/scss/_variables.scss
View File

@@ -1,3 +1,6 @@
$primary: #8d81ac; $primary: #8d81ac;
$primary-dark: #635c73; $primary-dark: #635c73;
$regular-text: #848e97; $primary-light: #a599c8;
$regular-text: #848e97;
$hover-duration: 0.3s;

2
src/scss/style.scss
View File

@@ -1,5 +1,5 @@
@import "variables"; @import "variables";
@import "buttons"; @import "buttons";
@import "navbar"; @import "navbar";
@import "hero"; @import "header";
@import "download"; @import "download";