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 3 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 10 months

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 10 months

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 10 months

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

Bjarni Wark commented on Erik's post about 1 year

Do you have a link to show the example?

Bjarni Wark commented on Adriano Corte Real's post about 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 about 1 year

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 about 1 year

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 over 1 year

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 over 1 year

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 3 months ago









Following

    No Content

Followers

My Posts

My Comments

You commented on Anna Callahan's post 3 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 10 months

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 10 months

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 10 months

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

You commented on Erik's post about 1 year

Do you have a link to show the example?

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

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

You commented on Bjarni Wark's post about 1 year

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 about 1 year

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 over 1 year

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 over 1 year

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