How to make custom layout grids more semantic? [closed]


Tags: css,css3,sass

Problem :

Say if I have a basic system for making my own grids.

BASE CSS:

.grid {
    @include clearfix;
    margin: 0 -1.5em;
}
.grid-unit {
    box-sizing: border-box;
    display: block;
    float: left;
    padding: 0 1.5em;
    width: 100%;
}
.layout .grid-unit {
    width: 20%;
}

HTML:

<div class="grid home-features">
    <div class="grid-unit"><!-- feature 1 --></div>
    <div class="grid-unit"><!-- feature 2 --></div>
    <div class="grid-unit"><!-- feature 3 --></div>
    <div class="grid-unit"><!-- feature 4 --></div>
</div>

RESPONSIVE:

@media screen and (min-width: 40em) {
    .home-features .grid-unit {
        width: 50%;
    }
}
@media screen and (min-width: 60em) {
    .home-features .grid-unit {
        width: 25%;
    }
}

How do I go about making my own SASS mixins so the above can be more symantic? I don't need a full-blown solution as there are open-source frameworks out there one could look at. However, these frameworks are trying to do a lot of things at the same time and I am tearing my hair out trying to read the source. For example, they go through all kinds of loops to achieve the above. I just need a simple premise to get started with making a symantic solution for the above code.



Solution :

If you mean more semantic class names then you should inspect the Foundation and Bootstrap source to see how they do it. Here is one approach:

@mixin media-lg {
  @media screen and (min-width: 60em) {
    @content;
  }
}
@mixin media-md {
  @media screen and (min-width: 40em) and (max-width: 59.9999999em) {
    @content;
  }
}

@include media-md {
  .lg-col-2 div {
    width:50%;
  }
  .lg-col-4 div {
    width:25%;
  }
}

@include media-lg {
  .lg-col-2 div {
    width:50%;
  }
  .lg-col-4 div {
    width:25%;
  }
}

Compile online at http://sassmeister.com/

On this markup for example:

<div class="lg-col-4 md-col-2">
    <div><!-- feature 1 --></div>
    <div><!-- feature 2 --></div>
    <div><!-- feature 3 --></div>
    <div><!-- feature 4 --></div>
</div>

    CSS Howto..

    How to add separate style to google.visualization.DataTable without changing its own styles

    How to do make CSS Toggle like this? [closed]

    How to show transition of an element that is expanding over nearby content?

    How can I align a div right under another?

    Hiding and showing elements with jQuery flickers in Chrome and Edge

    How to let the user choose a page number?

    How can I convert to a CSS Drop down menu

    how can I make my navbar scroll smoothly to the top on page click

    How do I install SASS with Mean.io?

    How do I avoid multiple jquery dropdown boxes interfering with eachother

    How to use animation with transform CSS

    How to override CSS style for a specific element if its parent has a specific class

    Using css modules how do I define a global class

    CSS- How to align background image over bottom border line? Jsfiddle included

    How to Minify CSS to its Absolute Minimalistic Essence?

    Why isn't my div content showing?

    How to select all a pseudo-classes in CSS?

    How to make header background 100% height?

    How to add the very last border on the sub menu items

    How to center child divs along each side of a parent div

    How can I add the following css code to my page header from functions.php?

    How to slide down to show content of DIV using CSS/jQuery?

    How to magnify a pure CSS menu item when hovering using JS?

    How to Make a Pentagram with CSS Border Attributes

    How to create image curved using css or jquery (See picture)

    How to make a background color stretch to left and right of viewport in Safari Browsers

    CSS how to place an image to the right of variable width text on roll over?

    How to use @page CSS in ASP.NET MVC View

    CSS: How to align text, next to image inside a span?

    How to load CSS on PC and Mobile by jQuery?