Menu icon Foundation

Designer | Moruya Heads - AUSTRALIA

Part Pencil // Part Machine // Full Human - A well rounded freelance designer for print & web (HTML/CSS). Focused on brand development & custom WordPress sites.

My Posts







My Comments

Bjarni Wark commented on Anna Callahan's post 10 months

 If you are still wanting an example I asked a similar question with the final example of how to do a semantic grid.
http://foundation.zurb.com/forum/posts/38265-am-i-creating-semantic-grids-wrong

Bjarni Wark commented on Bjarni Wark's post over 1 year

Okay so what Im doing above is correct as long as I comment out the export mixin in app.scss?

Bjarni Wark commented on Bjarni Wark's post over 1 year

Okay, thanks for that will read on more on how I might get this working with jointswp menu / mobile.

Bjarni Wark commented on Jeff Kinley's post over 1 year

Yes http://jointswp.com/ does it out off the box.

Bjarni Wark commented on Erik's post over 1 year

Do you have a link to show the example?

Bjarni Wark commented on Adriano Corte Real's post over 1 year

Where is the best place to modify the height setting, in the CSS or JS?

Bjarni Wark commented on Bjarni Wark's post almost 2 years

Hi Brett, yes by changing (adding "-size") eg

grid-col(4) = grid-col-size(4);

There was a reduction in CSS, by over 50%

Thanks, learnt something new today and the CSS out put is lighter now.

.book {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  width: 100%;
  float: left; }
  @media screen and (min-width: 40em) {
    .book {
      padding-left: 1.25rem;
      padding-right: 1.25rem; } }
  @media screen and (min-width: 64em) {
    .book {
      padding-left: 2.8125rem;
      padding-right: 2.8125rem; } }
  .book:last-child:not(:first-child) {
    float: right; }
  @media screen and (min-width: 40em) {
    .book {
      width: 66.6666666667%; } }
  @media screen and (min-width: 64em) {
    .book {
      width: 33.3333333333%;
      color: green; } }


Bjarni Wark commented on Bjarni Wark's post almost 2 years

After applying the above technique to a site and needing a few extra content areas and columns, the site is looking at having over 40 or so media queries for the the layout grid.

Is this a red flag that I am doing it wrong and should look at another way or is this normal CSS kind off output?

Bjarni Wark commented on Bjarni Wark's post almost 2 years

Thanks Brandon, no have not used UNCSS though looked at using then redoing the struture of the grid. When I did add the below it took out all the additional CSS but I should look at UNCSS which may save tie and do the same job?

$include-html-grid-classes: false;

Bjarni Wark commented on Vivek Vikranth's post about 2 years

Is there a way to remove all .pull and .push classes from getting output in the final CSS file?

Posts Followed

  • 7
    Replies
  • Semantic Grid

    By Anna Callahan

    semanticfoundation 6grid

    I am trying to build my site using the semantic grid but I am confused on how to do this. I thought the idea was to change all the medium-4 medium-push-2 etc and make it more semantic. <div class="row"> <div class="large-4 medium-4 medium-... (continued)

    Last Reply by Bjarni Wark 10 months ago









Following

    No Content

Followers

My Posts

My Comments

You commented on Anna Callahan's post 10 months

 If you are still wanting an example I asked a similar question with the final example of how to do a semantic grid.
http://foundation.zurb.com/forum/posts/38265-am-i-creating-semantic-grids-wrong

You commented on Bjarni Wark's post over 1 year

Okay so what Im doing above is correct as long as I comment out the export mixin in app.scss?

You commented on Bjarni Wark's post over 1 year

Okay, thanks for that will read on more on how I might get this working with jointswp menu / mobile.

You commented on Jeff Kinley's post over 1 year

Yes http://jointswp.com/ does it out off the box.

You commented on Erik's post over 1 year

Do you have a link to show the example?

You commented on Adriano Corte Real's post over 1 year

Where is the best place to modify the height setting, in the CSS or JS?

You commented on Bjarni Wark's post almost 2 years

Hi Brett, yes by changing (adding "-size") eg

grid-col(4) = grid-col-size(4);

There was a reduction in CSS, by over 50%

Thanks, learnt something new today and the CSS out put is lighter now.

.book {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  width: 100%;
  float: left; }
  @media screen and (min-width: 40em) {
    .book {
      padding-left: 1.25rem;
      padding-right: 1.25rem; } }
  @media screen and (min-width: 64em) {
    .book {
      padding-left: 2.8125rem;
      padding-right: 2.8125rem; } }
  .book:last-child:not(:first-child) {
    float: right; }
  @media screen and (min-width: 40em) {
    .book {
      width: 66.6666666667%; } }
  @media screen and (min-width: 64em) {
    .book {
      width: 33.3333333333%;
      color: green; } }


You commented on Bjarni Wark's post almost 2 years

After applying the above technique to a site and needing a few extra content areas and columns, the site is looking at having over 40 or so media queries for the the layout grid.

Is this a red flag that I am doing it wrong and should look at another way or is this normal CSS kind off output?

You commented on Bjarni Wark's post almost 2 years

Thanks Brandon, no have not used UNCSS though looked at using then redoing the struture of the grid. When I did add the below it took out all the additional CSS but I should look at UNCSS which may save tie and do the same job?

$include-html-grid-classes: false;

You commented on Vivek Vikranth's post about 2 years

Is there a way to remove all .pull and .push classes from getting output in the final CSS file?

Posts Followed

Following

  • No Content

Followers

  • No Content