\$\begingroup\$
\$\endgroup\$
I'm currently working on an header for some homepage. It should be responsive. When enough width is available a floating header is displayed (logo on the left / menu on the right). With less and less existing width the logo/menu-font get's smaller until the header structure changes into a centered version (centered logo above centered menu).
Here is the important markup:
index.html:
<!DOCTYPE html>
<html en="en">
<head>
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="styles.css">
<!-- I will exclude unnecessary fonts later on -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">
</head>
<body>
<div id="page-header-container">
<div id="page-header-width-restriction">
<div id="page-header-logo-container">
<svg id="page-header-logo-icon" viewBox="0, 0, 4000, 1000"></svg>
<div id="page-header-logo-text">
<a href=#><span id="page-header-logo-text-01">test</span><span id="page-header-logo-text-02">Test</span></a>
</div>
</div>
<div id="page-header-menu-bar-container">
<ul>
<li><a href=#>Home</a></li>
<li><a href=#>Explore</a></li>
<li><a href=#>Ask</a></li>
<li><a href=#>Contact</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
styles.scss:
This file brings all the .scss to one file.
@import "partials/reset";
@import "partials/responsive_page_header";
./partials/_reset.scss:
Simply resets margin/padding.
* {
// Box Model
margin: 0;
padding: 0;
}
html, body {
// Box Model
width: 100%;
}
./partials/_responsive_page_header.scss:
The responsive magic happens in here:
// Header style independent styles
@import "header_style_independent_content";
@import "centered_page_header";
@import "floating_page_header";
@media (max-width: 749px) {
@include upgrade_to_centered();
}
$retina-test-border: .5px solid black;
@media (min-width: 750px) and (max-width: 899px) {
@include upgrade_to_floating(100px, $retina-test-border, $retina-test-border, 80%, 0px, 10px, 80px, 3px, 30px, 0px, 20px, 14px);
}
@media (min-width: 900px) and (max-width: 1049px) {
@include upgrade_to_floating(100px, $retina-test-border, $retina-test-border, 75%, 0px, 12px, 92px, 4px, 35px, 0px, 23px, 15px);
}
@media (min-width: 1050px) {
@include upgrade_to_floating(100px, $retina-test-border, $retina-test-border, 70%, 0px, 15px, 100px, 5px, 40px, 0px, 25px, 16px);
}
./_header_style_independent_content.scss:
The static non-responsive code.
// This file contains content, which is applied independent of
// the header-style (floating/centered)
#page-header-container {
// Box Model
width: 100%;
a {
// Text
text-decoration: none;
// Color
color: black;
}
}
#page-header-width-restriction {
// Box Model
width: 100%;
}
#page-header-logo-container {
// Display
display: inline-block;
}
#page-header-logo-text {
// Display
display: inline-block;
// Text
font-family: 'Open Sans', sans-serif;
}
#page-header-logo-text-01 {
// Text
font-weight: 700;
font-style: italic;
}
#page-header-logo-text-02 {
// Text
font-weight: 300;
}
#page-header-menu-bar-container {
ul {
// List specific
list-style-type: none;
li {
// Display
display: inline-block;
// Text
font-family: 'Open Sans', sans-serif;
font-weight: 600;
a {
// Fade in/out color property
-o-transition:color .15s ease-in;
-moz-transition:color .15s ease-in;
-webkit-transition:color .15s ease-in;
&:hover {
// Text
// color: #FF5F58;
// color: #FFBE2F;
color: #28CA42;
}
}
}
}
}
./_centered_page_header.scss:
Code containing a mixin to upgrade to centered header version.
@mixin upgrade_to_centered () {
#page-header-container {
// Border
border-top: 0.3px solid black;
border-bottom: 0.3px solid black;
}
#page-header-width-restriction {
// Box Model
text-align: center;
}
$logo-margin-top: 25px;
#page-header-logo-container {
// Display
margin-top: $logo-margin-top;
}
$logo-icon-width: 100px;
$logo-icon-height: 0.25 * $logo-icon-width;
$logo-icon-extra-margin: 0px;
$logo-internal-space: 10px;
#page-header-logo-icon {
// Positioning
vertical-align: middle;
// Box Model
width: $logo-icon-width;
height: $logo-icon-height;
margin-right: $logo-internal-space;
margin-top: $logo-icon-extra-margin;
}
$logo-text-font-size: 30px;
#page-header-logo-text {
// Positioning
vertical-align: middle;
// Text
font-size: $logo-text-font-size;
line-height: $logo-text-font-size;
}
$menu-bar-font-size: 12px;
$menu-bar-line-height: 75px;
#page-header-menu-bar-container {
ul {
li {
// Box Model
margin-left: 15px;
margin-right: 15px;
// Text
font-size: $menu-bar-font-size;
line-height: $menu-bar-line-height;
}
}
}
}
./_floating_page_header.scss:
Code containing a mixin to upgrade to floating header version.
@mixin upgrade_to_floating(// General header
$header-height,
$header-border-top-stack,
$header-border-bottom-stack,
$header-width-restriction,
// Logo specific
$logo-margin-left,
$logo-internal-space,
// Logo-icon specific
$logo-icon-width,
$logo-icon-extra-vertical-margin,
// Logo-text specific
$logo-text-font-size,
// Menu-bar specific
$menu-bar-margin-right,
$menu-bar-internal-space,
// Menu-bar-font specific
$menu-bar-font-size) {
#page-header-container {
// Box Model
height: $header-height;
// Border
@if $header-border-bottom-stack != 'none' {
border-bottom: $header-border-bottom-stack;
}
@if $header-border-top-stack != 'none' {
border-top: $header-border-top-stack;
}
}
#page-header-width-restriction {
// Box Model
height: 100%;
margin: 0 auto;
width: $header-width-restriction;
}
#page-header-logo-container {
// Box Model
height: 100%;
margin-left: $logo-margin-left;
}
#page-header-logo-icon {
display: inline-block;
vertical-align: middle;
// Box Model
width: $logo-icon-width;
height: 0.25 * $logo-icon-width;
// margin-top: 0.5 * $header-height - 0.5 * 0.25 * $logo-icon-width + $logo-icon-extra-vertical-margin;
margin-top: $logo-icon-extra-vertical-margin;
margin-right: $logo-internal-space;
}
#page-header-logo-text {
vertical-align: middle;
display: inline-block;
// Text
font-size: $logo-text-font-size;
line-height: $header-height;
}
#page-header-menu-bar-container {
// Positioning
float: right;
// Display
display: inline-block;
// Box Model
height: 100%;
margin-right: $menu-bar-margin-right;
ul {
// Positioning
float: right;
li {
// Box Model
margin-left: $menu-bar-internal-space;
// Text
font-size: $menu-bar-font-size;
line-height: $header-height;
}
}
}
}
Since I'm pretty new to SASS/css in general and I am concerned about the following topics:
- General code style
- Browser support (am I using any non-well supported features? - except the
0.5pxborder) - What do you think of the separation of code like this?
- Is it maintainable?
- Is it expandable
- Is it size efficient/inefficient?
- Am I hurting any good standards?
- What can I do better in general?
1 Answer 1
\$\begingroup\$
\$\endgroup\$
First of all you should avoid using IDs in your code. It's a good rule in general and it can help you to easily reuse your code in the future (you should read http://cssguidelin.es/#ids-in-css). Use classes instead.
Another good practise is to put your Sass variables and mixins in separate files (good article about how to structure Sass project http://thesassway.com/beginner/how-to-structure-a-sass-project).
lang-css