Home > css > SASS grid system improvements

SASS grid system improvements

June 3Hits:1
Advertisement

I've got this own made grid system made in SASS:

@import "../mixins/cross-browser-elements/box";  $columns: 12 !default; $gutter-width-px: 20px !default;  @function calculate-column-width($index) {   @return percentage($index / $columns); }  .row {   overflow: hidden;   max-width: 100%;    .column {     float: left;     min-height: 1px;     padding-left: ($gutter-width-px / 2);     padding-right: ($gutter-width-px / 2);     @include box-sizing(border-box);      &:first-child {       padding-left: 0;     }      &:last-child {       padding-right: 0;     }      @for $index from 1 through $columns {       &.size-#{$index} {         width: calculate-column-width($index);       }     }   }  } 

It looks pretty good in my opinion, it works and has a working padding on each element.

The thing I worry about is when I want to make it responsive. Do I have to go in my stylesheet and give every column a width of 100% when it's below a certain screen size with the @media selector?

My HTML markup looks like this:

    <div class="row">         <div class="column size-10"><p>column-size-10</p></div>         <div class="column size-2"><p>column-size-2</p></div>     </div>     <div class="row">         <div class="column size-1"><p>column-size-1</p></div>         <div class="column size-1"><p>column-size-1</p></div>         <div class="column size-1"><p>column-size-1</p></div>         <div class="column size-1"><p>column-size-1</p></div>         <div class="column size-1"><p>column-size-1</p></div>         <div class="column size-1"><p>column-size-1</p></div>         <div class="column size-1"><p>column-size-1</p></div>         <div class="column size-1"><p>column-size-1</p></div>         <div class="column size-1"><p>column-size-1</p></div>         <div class="column size-1"><p>column-size-1</p></div>         <div class="column size-1"><p>column-size-1</p></div>         <div class="column size-1"><p>column-size-1</p></div>     </div> 

Answers

I'm unsure of your SCSS, because it doesn't seem to use media-queries, and isn't small-screen-first: but here are my HTML suggestions:

The columns would likely stack on small screens, and aren't really columns semantically in general. You can note that they are smaller pieces inside a container by calling them blocks or something, and then use floats in combination with @media queries. Giving them static classes like bootstrap does, describes style in HTML – when it should stay in the styles. You can use an inner .inner-w or something to emulate a 'main column' like most web pages.

<section class='container section-name'>
<div class='inner-w'>

    <div class='block block-name'>
        some block
    </div>

    <div class='block other-block-name'>
        some other block
    </div>

</div>
</section>

If you have an actual grid, it is a list, and should be described that way. Then you can style the list without adding classes to every li.

<section class='container section-name'>
<div class='inner-w'>

    <ul class='grid'>
        <li>
            grid item 1
        </li>
        <li>
            grid item 2
        </li>
        <li>
            grid item 3
        </li>
        <li>
            grid item 4
        </li>
        <li>
            grid item 5
        </li>
        <li>
            grid item 6
        </li>
    </ul>

</div>
</section>

Tags:css, sass

Related Articles

  • SASS grid system improvementsJune 3

    I've got this own made grid system made in SASS: @import "../mixins/cross-browser-elements/box"; $columns: 12 !default; $gutter-width-px: 20px !default; @function calculate-column-width($index) { @return percentage($index / $columns); } .row { o

  • Sass Grids: From Neat To SusyOctober 23

    For the last several months, I've been using a Sass grid system called Neat. It's done almost everything I need and it's pretty easy to get started with. However, lately I've found myself writing extra styles to augment the Neat grid. Rather than ext

  • A Creative Grid System With Sass and calc()March 27

    Before we even get started talking about Sass and the code for this project, let me remind you this is no more than a quick experiment which by no means should be used in a live context. So what follows is only a proof of concept of what we could do

  • jQuery grid-system - handing different row widthsJune 14

    I made a function in jQuery for my home-made grid system. When a row has too many columns in it, it removes the HTML code from that row. Normally in my grid system it fits 12 columns in 1 row, but with the function this can easily be changed. One col

  • Bootstrap's Grid System vs. Susy: A Comparison

    Bootstrap's Grid System vs. Susy: A ComparisonAugust 29

    There are a lot of grid frameworks for us the to choose from while developing websites nowadays. Of the many frameworks, one of most loved and yet most hated framework is definitely Bootstrap. Today, I'll like to introduce you to a slightly lesser kn

  • Creating a Responsive Grid System with Susy and BreakpointDecember 9

    The big appeal behind CSS frameworks (like Bootstrap and Foundation) is that they come with a responsive grid system all set and ready to go. The downside is that you have to be content with their column count, the width of their gutters, and all the

  • A grid system (Photoshop/Pixelmator) for designing for the iPadSeptember 24

    I am designing an iPad app, so I could really use a grid template. I could probably just work with the 960 grid system; however, I'd love to find a solution that is tailor-made for the purpose (that is, takes into account such things as the iPad's re

  • My 960 grid system has wider columns that standard. 55px instead 40px for 16 columnsOctober 27

    I was surprised to discover my website is wider than is supposed to be. I am using Drupal + Omega Theme that uses 960 grid system. The total width of the site is 1180 instead 960. The columns are wider: On 16 columns options: they are supposed to be

  • Mixing the classic type size scale, grid systems and modular scalesNovember 25

    I'm coming from a programmers background and just trying to understand how sizes should relate. I read in the book "designing for the web" that these are the classic type sizes and text set in these size should look better if typeset correctly.

  • Designing for the Web: Templates and Grid Systems

    Designing for the Web: Templates and Grid SystemsDecember 12

    Continuing on from the previous article in this series, Designing for the Web: Resolution and Size, we cover some helpful and important factors while creating a template for designing a website. In this article, we will cover some important issues an

  • DesignFestival: Designing for the Web: Templates and Grid SystemsDecember 13

    Continuing on from the previous article in this series, Designing for the Web: Resolution and Size , we cover some helpful and important factors while creating a template for designing a website. In this article, we will cover some important issues a

  • Anyone using 960 Grid System or YUI 2 Grids CSSApril 13

    Anyone having experience with 960 Grid system and getting it to play nicely with SharePoint? I am intrested in experience from other CSS Framework and how successfull was your team in implementing this? --------------Solutions------------- I'm using

  • most efficient way to create a grid system in unityMay 19

    I'm creating a little tower defence game to get myself acquainted with unity. At first I was going to emulate a grid system by capturing touches / mouse clicks and rounding the coordinates to the nearest whole numbers. This is very low cost and works

  • How to choose a CSS grid system for new theme?August 4

    I am going to make a new responsive theme based on an existing base theme for drupal 6. The theme need to be minimal but flexible. As there are many CSS grid systems to choose from, I've read that 960.gs has fallen out of fashion as it is too small f

  • Is there a comparison of Frameworks, Grid Systems and Boilerplates? September 1

    There are so much of them, how can I know what to use for a project? --------------Solutions------------- Well, there is a comparison of web application frameworks in a Wikipedia page. Also you may find this Stackoverflow post on Grid system comparis

  • What are "rows" in a responsive grid system?

    What are "rows" in a responsive grid system?January 22

    I'm looking at various grid systems to make a responsive design, but I keep coming across the same thing that puzzles me : What's a row in a design where everything can move based on the screen size ? Say I want the following design on a large screen

  • Getting: org.opengis.referencing.NoSuchIdentifierException: No transform for classification "Transverse Mercator Zoned Grid System" with geotoolsApril 22

    Using geotools I've been trying to create a referenced envelope after converting/reprojecting from WGS 84 to UTM with specific zones and it seems that either I need to do something with authority factories or figure out some kind of a workaround for

  • Recommended grid systems or layouts for large display and responsive designs

    Recommended grid systems or layouts for large display and responsive designsJune 16

    I've been working with 960 layout for years – but was wondering if there are other grid systems that are strongly supported by the design and development community and also have blank or starter pages to work with. --------------Solutions------------

  • How does the grid system work for a full width page?August 25

    How does the grid system work for those websites that expand to the full size of the browser (no matter how you resize) while working with a base 12 grid system (such as 960.gs)? For example, take a look on these websites: http://vevo.com (Note: this

  • Adding custom layout to Omega child theme breaks grid systemSeptember 10

    I'm trying to create an new responsive layout in an Omega child theme. To do this I copied the grids variable from alpha.info into MYTHEME.info and added my layout (called 'narrower') based on the existing pattern: grids[alpha_default][name] = Defaul

Copyright (C) 2017 ceus-now.com, All Rights Reserved. webmaster#ceus-now.com 14 q. 0.908 s.