1
\$\begingroup\$

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.5px border)
  • 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?
Improve this question
\$\endgroup\$

1 Answer 1

Reset to default
1
\$\begingroup\$

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).

Improve this answer
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.