Menu icon Foundation

My Posts

No Content

My Comments

Dominik Pieper commented on Javier Rincón's post over 2 years

Any news on this?

Dominik Pieper commented on Jennifer Tso's post over 2 years

You could change the padding only for the one size and not for smaller sizes with media-queries.

Dominik Pieper commented on Mojtaba Reyhani's post over 2 years

What do you mean by "standard"?
It should depend on your layout and how it will look like. In my projects e.g. I start everytime from scratch, dependent on the layout for the page. Sometimes I can use snippets from my other projects, sometimes not.

Dominik Pieper commented on Javier Rincón's post over 2 years

Same here. I hope there will be the possibility to help out or get an tryable version soon.

Dominik Pieper commented on RCD's post over 2 years

Hi,
the tilde (~) means, that bower will use the latest patch level. The "~6.2.0" means: Latest patch level, starting with 6.2.0 but less than 6.3.0

Dominik Pieper commented on Jimmy G's post over 2 years

Yes, I meant rows to adjust the extra padding.
In your example "of large-12 + large-6 + large-6 that add up to 24": It is possible, but there will be a "new line/row" after the first large-12. Even if your columns exceed 12, a row will not exceed 12.
Otherwise something like that wouldn't be possible, too. Because small exceed 12:
<div class="small-12 medium-6 column"></div>
<div class="small-12 medium-6 column"></div>
The content here would be on medium side by side and on small and mobiles one below the other.
To add more columns than 12 and nest columns without rows are two different things. It's both possible but you should be aware of whats going on.

Dominik Pieper commented on Jimmy G's post over 2 years

Hi Jimmy,
you can do that, but you have to consider that without the row, the column padding will be summarized. The row would remove the padding.
e.g. this:
<div class="row">
<div class="medium-12 column">Hello</div>

<div class="medium-12 column">
<div class="medium-12 column">Hello</div>

&lt;div class="row"&gt;
  &lt;div class="medium-12 column"&gt;Hello&lt;/div&gt;&gt;
&lt;/div&gt;

</div>
</div>
will create something like this:
Hello
Hello
Hello

Dominik Pieper commented on Anna Callahan's post over 2 years

I think you shouln't think to much about the semantic thing.
I don't know what's "best practice" with that. Use something that you think it's right and see what comes out. I don't think there's an right or wrong. It depends how you work and what's the content in that project. In the next one it's maybe totally different.
I use the grid mixins to describe "what" is in my site and not "how" it's positioned. I don't know it's right or wrong, but I can work with that.

Dominik Pieper commented on Anna Callahan's post over 2 years

I don't have a good example, sorry.
Maybe someone else here?

Dominik Pieper commented on Anna Callahan's post over 2 years

I use the semantic grid functions to use classes, which have an "meaning" in that context.
Instead of
<div class="large-4 medium-4 columns">
...
</div>

<div class="large-8 medium-8 columns">
...
</div>
you can use something like
<div class="product"></div>

<div class="details">
...
</div>
You can use classnames that that describe the content or component instead of the technical description "this thing is x grid units wide"
I don't know how to describe this better, I hope this helps a bit.

Posts Followed


  • 8
    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. &lt;div class="row"&gt; &lt;div class="large-4 medium-4 medium-... (continued)

    Last Reply by miss ziva 9 months ago


  • 1
    Reply
  • Change path for dist

    By Robert

    Path

    Today i had the idea to build a new machine with Ubuntu, to set Apache und Mysql just like i have it at the server online. Then i need a small trick in my hosts to call the server at home instead of the one in www. (With two small .bat i can swicth betw... (continued)

    Last Reply by Dominik Pieper over 2 years ago





Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Javier Rincón's post over 2 years

Any news on this?

You commented on Jennifer Tso's post over 2 years

You could change the padding only for the one size and not for smaller sizes with media-queries.

You commented on Mojtaba Reyhani's post over 2 years

What do you mean by "standard"?
It should depend on your layout and how it will look like. In my projects e.g. I start everytime from scratch, dependent on the layout for the page. Sometimes I can use snippets from my other projects, sometimes not.

You commented on Javier Rincón's post over 2 years

Same here. I hope there will be the possibility to help out or get an tryable version soon.

You commented on RCD's post over 2 years

Hi,
the tilde (~) means, that bower will use the latest patch level. The "~6.2.0" means: Latest patch level, starting with 6.2.0 but less than 6.3.0

You commented on Jimmy G's post over 2 years

Yes, I meant rows to adjust the extra padding.
In your example "of large-12 + large-6 + large-6 that add up to 24": It is possible, but there will be a "new line/row" after the first large-12. Even if your columns exceed 12, a row will not exceed 12.
Otherwise something like that wouldn't be possible, too. Because small exceed 12:
<div class="small-12 medium-6 column"></div>
<div class="small-12 medium-6 column"></div>
The content here would be on medium side by side and on small and mobiles one below the other.
To add more columns than 12 and nest columns without rows are two different things. It's both possible but you should be aware of whats going on.

You commented on Jimmy G's post over 2 years

Hi Jimmy,
you can do that, but you have to consider that without the row, the column padding will be summarized. The row would remove the padding.
e.g. this:
<div class="row">
<div class="medium-12 column">Hello</div>

<div class="medium-12 column">
<div class="medium-12 column">Hello</div>

&lt;div class="row"&gt;
  &lt;div class="medium-12 column"&gt;Hello&lt;/div&gt;&gt;
&lt;/div&gt;

</div>
</div>
will create something like this:
Hello
Hello
Hello

You commented on Anna Callahan's post over 2 years

I think you shouln't think to much about the semantic thing.
I don't know what's "best practice" with that. Use something that you think it's right and see what comes out. I don't think there's an right or wrong. It depends how you work and what's the content in that project. In the next one it's maybe totally different.
I use the grid mixins to describe "what" is in my site and not "how" it's positioned. I don't know it's right or wrong, but I can work with that.

You commented on Anna Callahan's post over 2 years

I don't have a good example, sorry.
Maybe someone else here?

You commented on Anna Callahan's post over 2 years

I use the semantic grid functions to use classes, which have an "meaning" in that context.
Instead of
<div class="large-4 medium-4 columns">
...
</div>

<div class="large-8 medium-8 columns">
...
</div>
you can use something like
<div class="product"></div>

<div class="details">
...
</div>
You can use classnames that that describe the content or component instead of the technical description "this thing is x grid units wide"
I don't know how to describe this better, I hope this helps a bit.

Posts Followed




Following

  • No Content

Followers

  • No Content