5
\$\begingroup\$

Please have a look at the HTML/CSS/JS (there is very little JS at the moment) and give me some feedback as to how my code looks to you, what level of skills it looks like I have and how I can improve. It's not anywhere near being completed but it should give you a good idea of where I'm at and where I'm going with it.

// Get user's country. May be useful in the future.
user_country = '';

$.get("http://ipinfo.io", function(response) {
    user_country = response.country;
}, "jsonp");



$( document ).ready(function() {

    $('.mobile-menu').click(function(){
        $('#mainnav .menu').slideToggle("slow", function(){
        });
    });

});
$(window).load(function() {
    // when column wraps to next row, set padding-left to 0
    $('#main-content .row').each(function(index){
        col_offset_first = $(this).find('.col:first').offset().left;
        $(this).find('.col').each(function(index){
            col_offset = $(this).offset().left;
            if(col_offset == col_offset_first && index > 0) {
                $(this).css('padding-left', 0);
            }
        });
    });



});
h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.5em;
}

h3 {
    font-size: 1.25em;
}

#header-main {
    background: #fff;
    padding: 0;
}

#header-main .logo h1 {
    font-size: 1.5em;
    font-weight: bold;
    color: #60b8f4;
    text-transform: uppercase;
    margin-bottom: 10px;
}

#header-main .phone {
    text-align: left;
    font-weight: bold;
    margin-bottom: 10px;
}

#header-main .mobile-menu-wrapper {
    text-align: right;
}

#header-main .mobile-menu-wrapper .mobile-menu-title {
    font-size: 1.3em;
    text-transform: uppercase;
    margin-right: 10px;
}

@media (min-width: 768px) {
    #header-main .phone {
        text-align: right;
    };
}

footer {
    background: #363b3d;
    min-height: 100px;
    color: #ddd;
    font-size: 0.85em;
}

footer .social-wrapper:after {
    content: " ";
    display: block;
    clear: both;
}

footer .social-wrapper div {
    float: right;
    height: 58px;
    width: 60px;
    background-image: url("../images/social.png");
    background-repeat: no-repeat;
}

footer .social-wrapper div.facebook {
    background-position: 0 0;
}

footer .social-wrapper div.linked-in {
    background-position: -60px 0;
}

footer .social-wrapper div a {
    height: 100%;
    width: 100%;
    display: block;
}

.mobile-menu-wrapper {
    display: block;
    float: right;
}

.mobile-menu-wrapper .mobile-menu {
    position: relative;
    margin: 0 auto;
    cursor: pointer;
    color: #8b8b8b;
}

#mainnav {
    text-align: right;
}

#mainnav .menu {
    display: none;
}

body {
    font-family: "Roboto",sans-serif;
    font-size: 110%;
    background: #363b3d;
    color: #585858;
}

a {
    color: #60b8f4;
}

a:hover {
    color: #000;
}

p {
    line-height: 1.5em;
    margin: 1em 0;
    font-size: 1em;
}

.strong {
    font-weight: bold;
}

.container {
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    max-width: 980px;
    margin: 0 auto;
    padding: 20px;
}

.container-fluid {
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 20px;
}

.no-gutter {
    padding: 0 !important;
}

.row {
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.row:after {
    content: " ";
    display: block;
    clear: both;
}

.row .col {
    float: left;
}

.row .col:first-child {
    padding-left: 0 !important;
}

#banner .container-fluid {
    background: url("../images/morro_bg.jpg") no-repeat center center;
    min-height: 400px;
    background-size: cover;
    overflow: hidden;
    color: #fff;
    font-size: 1.3em;
}

#banner .container-fluid p {
    text-shadow: 1px 1px 0 #000;
}

#main-content {
    background: #f1f1f1;
    padding-bottom: 20px;
    font-size: 1.1em;
}

.action-green {
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    display: block;
    background: #8fb33e;
    padding: 20px;
    max-width: 50%;
    color: #fff;
    text-decoration: none;
    text-align: center;
}

.action-green:hover {
    color: #fff;
    background: #bbd483;
}

@media (min-width: 320px) {
    .mob-1 {
        width: 6.95833%;
        padding-left: 1.5%;
    }

    .mob-2 {
        width: 15.41667%;
        padding-left: 1.5%;
    }

    .mob-3 {
        width: 23.875%;
        padding-left: 1.5%;
    }

    .mob-4 {
        width: 32.33333%;
        padding-left: 1.5%;
    }

    .mob-5 {
        width: 40.79167%;
        padding-left: 1.5%;
    }

    .mob-6 {
        width: 49.25%;
        padding-left: 1.5%;
    }

    .mob-7 {
        width: 57.70833%;
        padding-left: 1.5%;
    }

    .mob-8 {
        width: 66.16667%;
        padding-left: 1.5%;
    }

    .mob-9 {
        width: 74.625%;
        padding-left: 1.5%;
    }

    .mob-10 {
        width: 83.08333%;
        padding-left: 1.5%;
    }

    .mob-11 {
        width: 91.54167%;
        padding-left: 1.5%;
    }

    .mob-12 {
        width: 100%;
        padding-left: 0;
    };
}

@media (min-width: 768px) {
    .tab-1 {
        width: 6.95833%;
        padding-left: 1.5%;
    }

    .tab-2 {
        width: 15.41667%;
        padding-left: 1.5%;
    }

    .tab-3 {
        width: 23.875%;
        padding-left: 1.5%;
    }

    .tab-4 {
        width: 32.33333%;
        padding-left: 1.5%;
    }

    .tab-5 {
        width: 40.79167%;
        padding-left: 1.5%;
    }

    .tab-6 {
        width: 49.25%;
        padding-left: 1.5%;
    }

    .tab-7 {
        width: 57.70833%;
        padding-left: 1.5%;
    }

    .tab-8 {
        width: 66.16667%;
        padding-left: 1.5%;
    }

    .tab-9 {
        width: 74.625%;
        padding-left: 1.5%;
    }

    .tab-10 {
        width: 83.08333%;
        padding-left: 1.5%;
    }

    .tab-11 {
        width: 91.54167%;
        padding-left: 1.5%;
    }

    .tab-12 {
        width: 100%;
        padding-left: 0;
    }

    .mobile-menu-wrapper {
        display: none;
    }

    #mainnav {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background: #f7f7f7;
    }

    #mainnav .menu {
        display: block;
        width: 100%;
    }

    #mainnav .menu li {
        display: inline-block;
        width: 16%;
        text-align: center;
    }

    #mainnav .menu li a {
        color: #9aa2a5;
        font-weight: bold;
        text-decoration: none;
    }

    #mainnav .menu li a:hover {
        color: #60b8f4;
    }

    #banner .row {
        max-width: 980px;
        margin: 0 auto;
    }

    #banner .action-green {
        max-width: 200px;
    };
}

@media (min-width: 992px) {
    .med-1 {
        width: 6.95833%;
        padding-left: 1.5%;
    }

    .med-2 {
        width: 15.41667%;
        padding-left: 1.5%;
    }

    .med-3 {
        width: 23.875%;
        padding-left: 1.5%;
    }

    .med-4 {
        width: 32.33333%;
        padding-left: 1.5%;
    }

    .med-5 {
        width: 40.79167%;
        padding-left: 1.5%;
    }

    .med-6 {
        width: 49.25%;
        padding-left: 1.5%;
    }

    .med-7 {
        width: 57.70833%;
        padding-left: 1.5%;
    }

    .med-8 {
        width: 66.16667%;
        padding-left: 1.5%;
    }

    .med-9 {
        width: 74.625%;
        padding-left: 1.5%;
    }

    .med-10 {
        width: 83.08333%;
        padding-left: 1.5%;
    }

    .med-11 {
        width: 91.54167%;
        padding-left: 1.5%;
    }

    .med-12 {
        width: 100%;
        padding-left: 0;
    };
}

@media (min-width: 1200px) {
    .lg-1 {
        width: 6.95833%;
        padding-left: 1.5%;
    }

    .lg-2 {
        width: 15.41667%;
        padding-left: 1.5%;
    }

    .lg-3 {
        width: 23.875%;
        padding-left: 1.5%;
    }

    .lg-4 {
        width: 32.33333%;
        padding-left: 1.5%;
    }

    .lg-5 {
        width: 40.79167%;
        padding-left: 1.5%;
    }

    .lg-6 {
        width: 49.25%;
        padding-left: 1.5%;
    }

    .lg-7 {
        width: 57.70833%;
        padding-left: 1.5%;
    }

    .lg-8 {
        width: 66.16667%;
        padding-left: 1.5%;
    }

    .lg-9 {
        width: 74.625%;
        padding-left: 1.5%;
    }

    .lg-10 {
        width: 83.08333%;
        padding-left: 1.5%;
    }

    .lg-11 {
        width: 91.54167%;
        padding-left: 1.5%;
    }

    .lg-12 {
        width: 100%;
        padding-left: 0;
    };
}
/*# sourceMappingURL=style.css.map */
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>ESC LEGAL DOCUMENTS</title>
        <meta name="description" content="ESC Legal Documents - legal services and mobile notary serving San Luis Obispo, California and surrounding areas.">


        <link rel="stylesheet" href="css/html5reset-1.6.1.css" media="screen">
        <link rel="stylesheet" href="css/style.css" type="text/css" />
        <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
        <link href='http://fonts.googleapis.com/css?family=Roboto:400,900' rel='stylesheet' type='text/css'>

        <!--[if lte IE 9]>
            <script src="javascript/ie/html5shiv.js"></script>
            <script src="javascript/ie/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>


        <div id="content-wrapper">
            <!-- Header -->
            <header id="header-main" class="container-fluid">

                <div class="container">
                    <div class="row">
                        <!-- Logo -->
                        <div class="col mob-8 tab-8 logo">
                            <h1>Esc Legal Documents</h1>
                        </div>
                        <div class="mobile-menu-wrapper col mob-4">
                            <span class="mobile-menu-title">Menu</span>
                            <i class="fa fa-bars fa-2x mobile-menu"></i>
                        </div>
                        <div class="col mob-12 tab-4 phone">
                            888-888-8888

                        </div>
                    </div>
                    <!-- Slogan -->
                    <div class="row slogan headings">
                        <div class="col mob-12">
                            Legal Services and Mobile Notary
                        </div>


                    </div>

            </header>

            <!-- Menu -->

            <nav id="mainnav">
                <div class="container">
                    <div class="row">
                        <div class="col mob-12">


                                <ul class="menu">
                                    <li><a href="#">Home</a></li>
                                    <li><a href="#">About</a></li>
                                        <!--
                                        company creed
                                        education
                                        attny referral
                                        testimonials
                                        -->
                                    <li><a href="#">Services</a></li>
                                        <!--
                                        areas of service (locations served)
                                        types of law
                                        mobile notary public
                                        contract paralegal
                                        -->
                                    <li><a href="#">Forms</a></li>
                                    <li><a href="#">FAQ</a></li>
                                    <li><a href="#">Contact</a></li>
                                </ul>
                        </div>
                    </div>

                </div>
            </nav>

            <!-- banner -->
            <section id="banner">
                <div class="container-fluid">
                    <div class="row">


                        <div class="col mob-12">
                            <h1>Services include</h1>
                            <p>Living trust & wills, POA, deeds, divorce, custody, family law litigation, civil, chapter 7 bankruptcy</p>

                            <a class="action-green" href="#">View All Services ></a>


                        </div>
                    </div>


                </div>
            </section>



            <!-- Main content -->
            <section id="main-content">
                <div class="container">
                    <div class="row">


                        <div class="col mob-12">
                            <h2>Heading</h2>
                            <p>Lorem ipsum dolor sit amet, graecis rationibus quo ad, no essent eligendi voluptua cum. Vel dolores commune et, te harum dicam voluptatibus vis.<br><a href="#">Click this link</a></p>
                            <p><span class="strong">Headline 1 - </span> Lorem ipsum dolor sit amet, graecis rationibus quo ad, no essent eligendi voluptua cum. Vel dolores commune et, te harum dicam voluptatibus vis.</p>
                            <p><span class="strong">Headline 2 - </span> Lorem ipsum dolor sit amet, graecis rationibus quo ad, no essent eligendi voluptua cum. Vel dolores commune et, te harum dicam voluptatibus vis.</p>
                            <p><span class="strong">Headline 3 - </span> Lorem ipsum dolor sit amet, graecis rationibus quo ad, no essent eligendi voluptua cum. Vel dolores commune et, te harum dicam voluptatibus vis.</p>
                        </div>
                    </div>



                </div>


            </section>
        </div>



        <footer id="footer">
            <div class="container">

                <div class="row">
                    <div class="col tab-9 mob-12">
                        <p>I am not an attorney. I can only provide self help services at your specific direction. If you want legal advice, please consult with an active member of the State Bar.<br>
                        Thank you, ESC LEGAL DOCUMENTS<br>
                        All rights reserved. &copy; 2015</p>

                    </div>

                    <div class="col tab-3 mob-12">
                        <div class="social-wrapper">
                            <div class="linked-in"><a href="https://www.linkedin.com/profile/view?id=93570772" target="_blank"></a></div>
                            <div class="facebook"><a href="https://www.facebook.com/esclegaldocuments" target="_blank"></a></div>

                        </div>

                    </div>
                </div>
            </div>


        </footer>

        <script src="javascript/jquery.min.js"></script>
        <script src="javascript/respond.min.js"></script>
        <script src="javascript/script.min.js"></script>
    </body>

</html>

SASS source for the CSS:

@import "_functions";
@import "_variables";
@import "_mixins";
@import "_header";
@import "_footer";
$media-size: 20;
@import "_nav-mobile"; 


body {
    font-family: $main-font;
    font-size: $base-font-size;
    background: $dark-grey;
    color: $main-font-color;

}
a {
    color: $accent-color;
    &:hover {
        color: #000;
    }
}

p {
    line-height: 1.5em;
    margin: 1em 0; 
    font-size: 1em;
}

.strong {
    font-weight: bold;
}

// wrappers, rows and cols

.container {
    width: 100%;
    @include border-box;
    max-width: 980px;
    margin: 0 auto;
    padding: 20px;

}
.container-fluid {
    width: 100%;
    @include border-box;
    padding: 20px;
}
.no-gutter {
        padding: 0 !important;
}
.row {
    width: 100%;
    @include clearfix;
    @include border-box;
    .col {
        float: left;
        &:first-child {
            padding-left: 0 !important;
        }

    }
}

// headline banner
#banner {


    .container-fluid {
        background: url('../images/morro_bg.jpg') no-repeat center center;
        min-height: 400px;
        background-size: cover;
        overflow: hidden;
        color: #fff;
        font-size: 1.3em;
        p {
            text-shadow: 1px 1px 0 #000;
        }


    }
}


#main-content {
    background: $main-background;
    padding-bottom: 20px;
    font-size: 1.1em;

}


// buttons/links 

.action-green {
    @include border-radius(6px);
    display: block;
    background: $action-green;
    padding: 20px;
    //line-height: 3rem;
    //font-size: 1.4rem;
    max-width: 50%;
    color: #fff;
    text-decoration: none;
    text-align: center;
    &:hover {
        color: #fff;
        background: lighten($action-green, 20%);
    }
}

// responsive grids

@media (min-width: 320px) {

    $class-slug-mob: mob !default;
    @for $i from 1 through 12 {
        .#{$class-slug-mob}-#{$i} {
            //width: $i/12*100%;
            width: calculate-width($i)*1%;
            padding-left: padding-or-not($i,768);
        }

    }

}
@media (min-width: 768px) {

    $class-slug-tab: tab !default;

    @for $i from 1 through 12 {
        .#{$class-slug-tab}-#{$i} {

            width: calculate-width($i)*1%;
            padding-left: padding-or-not($i,992);


        }

    }
    @import "_nav";
    $media-size: 768;



    //banner
    #banner {
        .row {
            max-width: 980px;
            margin: 0 auto;
        }

        .action-green {
            max-width: 200px;
        }
    }

}
@media (min-width: 992px) {
    $class-slug-med: med !default;

    @for $i from 1 through 12 {
        .#{$class-slug-med}-#{$i} {
            width: calculate-width($i)*1%;
            padding-left: padding-or-not($i,1200);
        }

    }
    $media-size: 992;
}
@media (min-width: 1200px) {
    $class-slug-lg: lg !default;

    @for $i from 1 through 12 {
        .#{$class-slug-lg}-#{$i} {
            width: calculate-width($i)*1%;
            padding-left: padding-or-not($i,9000);

        }

    } 
    $media-size: 1200;
}

    @function padding-width() {
    @return 1.5;
}


@function calculate-width ($i){
    $topad: (12/$i) - 1; // figure how many cols will be padded (minus the first)
    $totpad: $topad * 1.5; // multiply that by the amount it's being padded (1.5%)
    $totwidth: 100 - $totpad; // figure the total width minus the total padding amount
    $colwidth: $i/12*$totwidth;
    @return $colwidth;

}
@function padding-or-not ($i,$size) {
    $padding-on-left: 1.5%;
    @if $i == 12 and $media-size < $size {
        $padding-on-left: 0;
    }

    @return $padding-on-left;
}
@mixin border-box {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
       box-sizing: border-box;
}
@mixin clearfix {
  &:after {
    content: " ";
    display: block;
    clear: both;
  }
}

@mixin border-radius($radius){
    -moz-border-radius: $radius;
    -webkit-border-radius: $radius;
    border-radius: $radius;
}
// Set vendor-prefix property for border radius with different values for each.
// Usage: @include border-radius-multi(0, 0, 5px, 5px);
@mixin border-radius-multi($radius-top-left,$radius-top-right,$radius-bottom-right,$radius-bottom-left) {
  -webkit-border-top-left-radius: $radius-top-left;
  -webkit-border-top-right-radius: $radius-top-right;
  -webkit-border-bottom-right-radius: $radius-bottom-right;
  -webkit-border-bottom-left-radius: $radius-bottom-left;

  -moz-border-radius-topleft: $radius-top-left;
  -moz-border-radius-topright: $radius-top-right;
  -moz-border-radius-bottomright: $radius-bottom-right;
  -moz-border-radius-bottomleft: $radius-bottom-left;

  border-top-left-radius: $radius-top-left;
  border-top-right-radius: $radius-top-right;
  border-bottom-right-radius: $radius-bottom-right;
  border-bottom-left-radius: $radius-bottom-left;

  -moz-background-clip:    padding;
  -webkit-background-clip: padding-box;
  background-clip:         padding-box;
}

@mixin gradient-3($start,$middle,$stop){
    background: linear-gradient($start,$middle,$stop);
    background: -moz-linear-gradient($start,$middle,$stop);
    background: -ms-linear-gradient($start,$middle,$stop);
    background: -o-linear-gradient($start,$middle,$stop);
    background: -webkit-linear-gradient($start,$middle,$stop);
}
@mixin gradient-2($start,$stop){
    background: linear-gradient($start,$stop);
    background: -moz-linear-gradient($start,$stop);
    background: -ms-linear-gradient($start,$stop);
    background: -o-linear-gradient($start,$stop);
    background: -webkit-linear-gradient($start,$stop);
}

// colors
$main-background: #f1f1f1;
$main-font-color: #585858;
$accent-color: #60b8f4;
$action-green: #8fb33e;
$action-blue: #3da8c2;
$grey: #ddd;
$dark-grey: #363b3d;

// fonts
$base-font-size: 110%;
$main-font: 'Roboto', sans-serif;
h1 {

    font-size: 2em;

}
h2 {
    font-size: 1.5em;

}
h3 {
    font-size: 1.25em;

}
#header-main {
    //height: 100px;
    background: #fff;
    padding: 0;

    .logo {
        h1 {
            font-size: 1.5em;
            font-weight: bold;
            color: $accent-color;
            text-transform: uppercase;
            margin-bottom: 10px;
        }


    }
    .phone {
        text-align: left;
        font-weight: bold;
        margin-bottom: 10px;
    }
    .mobile-menu-wrapper {
        text-align: right;
        .mobile-menu-title {
            font-size: 1.3em;
            text-transform: uppercase;
            margin-right: 10px;
        }
    }
}
@media (min-width: 768px) {
    #header-main {

        .phone {
            text-align: right;
        }
    }
}
.mobile-menu-wrapper {
    display: none;
}
#mainnav {

    @include border-box;
    background: lighten($grey,10%);

    .menu {
        display: block;
        width: 100%;
        li {
            display: inline-block;
            width: 16%;
            text-align: center;
            a {
                color: lighten($dark-grey,40%);
                font-weight: bold;
                text-decoration: none;
                &:hover {
                    color: $accent-color;
                }
            }
        }
    }

}
.mobile-menu-wrapper {
    display: block;
    float: right;
    .mobile-menu {
        position: relative;
        margin: 0 auto;
        cursor: pointer;
        color: lighten($main-font-color, 20%);
    }
}
#mainnav {
    text-align: right;



    .menu {
        display: none;
    }
}
footer {
    background: $dark-grey; 
    min-height: 100px;
    color: $grey;
    font-size: 0.85em;

    .social-wrapper {
        @include clearfix;
        //margin-top: 20px;
        div {

            float: right;
            height: 58px;
            width: 60px;
            background-image: url("../images/social.png");
            background-repeat: no-repeat;
            &.facebook {
                background-position: 0 0;
            }
            &.linked-in {
                background-position: -60px 0;
            }
            a {
                height: 100%;
                width: 100%;
                display: block;
            }

        }
    }

}
\$\endgroup\$
  • 1
    \$\begingroup\$ Now that the code has been edited in, could the close voter please redact their vote? \$\endgroup\$ – Dan Pantry Jul 9 '15 at 20:19
  • \$\begingroup\$ It would be helpful if there was a demo for this. \$\endgroup\$ – cimmanon Jul 10 '15 at 17:51
2
\$\begingroup\$

Whitespace in expressions

There is a distinct lack of whitespace in all of your expressions in Sass (eg. $colwidth: $i/12*$totwidth). This has been known to cause confusion with the parser in certain versions of Sass (notably with subtraction). I would recommend always including whitespace around every arithmetic operator, rather than just the ones that can cause problems.

Underscore optional

When you import a file, the underscore is completely optional, just like the extension (unless you happen to have both foo.scss and _foo.scss).

@import "_functions";

Is the same as

@import "functions";

Font-size

There's no good reason to have all of these font declarations:

body {
    font-family: $main-font;
    font-size: $base-font-size;
}
p {
    line-height: 1.5em;
    font-size: 1em;
}

It can be shortened to this:

body {
    font: $base-font-size/#{1.5} $main-font;
}

Note the lack of unit on the line-height. This has been the standard practice for nearly 10 years (see: http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/)

Unsemantic class names

Naming a class after an existing HTML element should raise a red flag. What makes an element strong? Is it a stern warning? Is it a call-to-action element? Can it bench press 300lbs? What?

.strong {
    font-weight: bold;
}

Same goes for "action-green". Will it still make sense when the color scheme doesn't include green anymore?

Unsemantic markup

Now I see what the strong class is for.

<p><span class="strong">Headline 1 - </span> Lorem ipsum dolor sit amet, graecis rationibus quo ad, no essent eligendi voluptua cum. Vel dolores commune et, te harum dicam voluptatibus vis.</p>

Markup should be chosen based how well it fits the content semantically, not because it makes styling a little easier. This looks almost the same and has better markup semantically:

<h3>Headline 1</h3>

<p>Lorem ipsum dolor sit amet, graecis rationibus quo ad, no essent eligendi voluptua cum. Vel dolores commune et, te harum dicam voluptatibus vis.</p>

<h3>Headline 1</h3>

<p>Lorem ipsum dolor sit amet, graecis rationibus quo ad, no essent eligendi voluptua cum. Vel dolores commune et, te harum dicam voluptatibus vis.</p>

SCSS:

h3 { // add class here if appropriate
  display: inline;
  font-size: inherit;

  &:after {
    content: ' - ';
  }

  + p {
    display: inline;

    &:after {
      display: table;
      content: '';
      margin-top: 1em;
    }
  }
}

This probably doesn't do what you think it does...

In a number of your media queries, you're setting the variable $media-size equal to whatever the min-width value is of that media query. Once the closing curly brace is in place, that variable is lost. I don't even know how this code compiles unless the variable is declared in some other block of code that you didn't provide.

@media (min-width: 992px) {
    $media-size: 992;
}

.foo {
  bar: $media-size; // Undefined variable: "$media-size".
}

Reinventing the wheel

There are a few libraries out there that provide mixins for handling properties that require prefixes. Personally, I use Compass. The ones it provides are quite a lot more robust than the ones you're using (their gradient mixin will generate an SVG for IE9 as well as the old style webkit gradient, which is still relevant for older mobile browsers).

Is that JavaScript doing what I think it's doing?!

JavaScript isn't my thing, and I certainly don't use jQuery, but it looks like you're using it to compensate for adding margins on the left side of all of your elements that are the first element on that row, yes? You don't have to do that!

Use negative margins on your container element instead:

.outer {
  background: yellow;
  margin-left: -5%; // negative of the margin you're going to add
  overflow: hidden;

  .inner {
    width: 20%;
    background: rgba(blue, .3);
    margin-left: 5%;
    float: left;
  }
}

Orphans

This doesn't appear to be used:

@function padding-width() {
    @return 1.5;
}

Duplicate markup for mobile and desktop

This doesn't seem very fleshed out at the moment, but serving duplicate content with the intent of hiding one and styling the other depending on if it is a "mobile" device vs. a "desktop" device is not a path I recommend following. Your page should still make sense even when there's no styling at all. Reading through the same set of menu items twice would be very confusing for the poor guy who is stuck using Lynx to view your page.

\$\endgroup\$
  • \$\begingroup\$ You should use two colons for generated content, instead of just one: ::after. \$\endgroup\$ – ANeves Jul 10 '15 at 18:44
  • \$\begingroup\$ For compatibility reasons, I would say no: stackoverflow.com/questions/10181729/…. As one of the answers point out, the CSS specification states that user agents must support the older single colon syntax for properties that existed in the 2.1 specification. \$\endgroup\$ – cimmanon Jul 10 '15 at 18:51
  • \$\begingroup\$ @cimmanon Thank you for taking the time to give your feedback and critiques, you don't know how much I appreciate and needed this! \$\endgroup\$ – Paula Hightower Jul 11 '15 at 14:17
  • \$\begingroup\$ Compatibility with IE8? It is down to ~4% market share now; eventually we'll need to move on. \$\endgroup\$ – ANeves Jul 13 '15 at 15:03
  • \$\begingroup\$ @ANeves The benefit to "moving on" is what? Browsers have to support both methods since the old one is not going to be deprecated. Even if no browser on the planet supported only the single colon syntax, it would still be worth using over the double colon simply because it requires less bytes. \$\endgroup\$ – cimmanon Jul 13 '15 at 15:15
1
\$\begingroup\$

Partial answer:

Use double-colon syntax for pseudo-content

You must use double-colon syntax for pseudo-content such as ::after and ::before.

Single-colon syntax is only supported for retro-compatibility, and only for pseudo-elements from CSS2.
Newer elements only support double-colon syntax.

See https://stackoverflow.com/a/28527928/148412 (emphasys mine):

Due to legacy constraints, user agents must allow ::before, ::after, ::first-line, and ::first-letter pseudo-elements to be written with a single colon rather than two, similar to pseudo-class syntax. Authors must always use the double-colon syntax for these pseudo-elements.

This means that the only appropriate use of the single-colon syntax today is if you absolutely require legacy browser support — the only browser that matters here is IE8 and older. If you don't, you should use the double-colon syntax for the sake of consistency with newer pseudo-elements which will only accept double colons.


Subjective: adopting change helps drive progress.

Objective: eventually you will use a new selector that does not support single-colon-syntax, and be forced to choose to either mix and use both syntaxes, or to convert to using only double-syntax.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.