Menu icon Foundation
How to build semantically

Hi, I want to stop creating HTML files with all the extra class names. Therefore, I want to learn how to use the Sass mixins to create rows and columns. There are some basic examples in the Docs, but its not very clear. What is the difference between grid-column and grid-column-size? How are they used? In the example, it shows grid-column-size only when using a media query, but grid-column after grid-row. Don't you always have to have a row to create a column? I know I need to use @include, but what Sass functions and where? The examples are crude.

How about a page that shows the SCSS for a typical HTML page? This documentation is not clear. If someone would help me learn, I'd be happy to contribute to better documentation.

How do I write SCSS for this using the mixins for building semantically? I am guessing the .intro needs to be the row and the articles are the columns. They stack on mobile and are 4 columns wide on medium and large.

Thanks for any help.

Jeff

<div class="intro">
        
        <div class="article">
            
        </div>        

        <div class="article">
            
        </div>    
         
        <div class="article">
        
        </div>  
</div>
            

         

Sassmixinssemantic

Hi, I want to stop creating HTML files with all the extra class names. Therefore, I want to learn how to use the Sass mixins to create rows and columns. There are some basic examples in the Docs, but its not very clear. What is the difference between grid-column and grid-column-size? How are they used? In the example, it shows grid-column-size only when using a media query, but grid-column after grid-row. Don't you always have to have a row to create a column? I know I need to use @include, but what Sass functions and where? The examples are crude.

How about a page that shows the SCSS for a typical HTML page? This documentation is not clear. If someone would help me learn, I'd be happy to contribute to better documentation.

How do I write SCSS for this using the mixins for building semantically? I am guessing the .intro needs to be the row and the articles are the columns. They stack on mobile and are 4 columns wide on medium and large.

Thanks for any help.

Jeff

<div class="intro">
        
        <div class="article">
            
        </div>        

        <div class="article">
            
        </div>    
         
        <div class="article">
        
        </div>  
</div>
            

         
craig bane about 4 years ago

 .intro{
        @include grid-row; 
        article{
          @include grid-col;
          @include breakpoint(large){
            @include grid-col-size(1 of 4);                                                                 
          }
         @include breakpoint(small){
           @include grid-col-size(2 of 4);
         }
        }
}

craig bane about 4 years ago

That should create a row and will create 4 columns, and if on a mobile it will create 2 columns and 2 rows

Jeff Kinley about 4 years ago

Thanks, that helps. I'll keep working on it. I still think the documentation is pretty bad. I tried making this a code pen, but i don't know how to get all the dependencies added. its a shame. There are so many more resources for Bootstrap, but Foundation is so much better. Wish there were more materials available.

Jeff Kinley about 4 years ago

Here is something I'd like to share. I hope it helps others. Some food for thought: now that we can name things semantically, what do we name them? In this example, I have two 'blurbs' for an about section on a homepage. Should I label them column? Article? I like moving in this direction because its making me think about the whole system a bit differently. Thoughts?

What about the Sass? Did I use grid-col correctly? If so, what is grid-col-size for?

Given this Markup:

<section class="intro">
      <div class="intro-text">
        <div class="blurb">
          <h2>Lorem Ipsum</h2>
          <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum.</p>
        </div>

        <div class="blurb">
          <h2>Ipsum Lorem</h2>
          <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
        </div>
      </div>
    </section>

We could write our Sass like so:

/**** INTRO SECTION ****/ 
section.intro {
  padding: 1rem 0;
  background: #eee;
  @include breakpoint(medium) {
  padding: 3rem 0;
  }
  .intro-text {
    @include grid-row;
      .blurb{
        @include grid-col(12);                               
        @include breakpoint(medium) {
        @include grid-col(6);

      }
    }
  }
}