Menu icon Foundation

Developer | Poland

Symfony2 & Angular enthusiast using Foundation as... well, a foundation for his projects.

My Posts

  • 1
    Reply
  • Greetings from Samoa! ;)

    By Darek Wędrychowski

    forum

    Greetings from Samoa, everyone! What I mean is, everytime I log into the forum, timezone in my profile is set to American Samoa, even if I changed it so many times to my one in the past (and it's shown as my one until I'm logged out). It's not a big th... (continued)

    Last Reply by Rafi Benkual over 4 years ago



My Comments

Darek Wędrychowski commented on Mikhail Svirkin's post over 4 years

I'd go with nesting. :) A row with two columns, and two rows in right column. A simple Foundation way that doesn't require additional styling.

Darek Wędrychowski commented on Sebastian Castoria's post over 4 years

Or you can use this CSS:

a {
    word-wrap: break-word;
};

Darek Wędrychowski commented on JapperCat's post over 4 years

Thanks a lot for improvements, it was really irritating. :)

Darek Wędrychowski commented on Whoever's post over 4 years

That's a thing I'd really love to see in Foundation for Apps - a general scope variable that keeps the current screen size according to Foundation's settings for sizes.

Darek Wędrychowski commented on Mikhail Svirkin's post over 4 years

I'll start with the second part of your post. One of the reasosn I chose Foundation over Bootstrap is how easy you can overwrite any setting you want without causing other default settings to break. I'd see nothing wrong with overwriting it, if we think only of the code. But as a designer, I'd say it looks more natural for me with this padding on the left. Users are used to seeing it like that on other sites.

Creating empty divs for the sake of elements positioning is never a recommended way. What's more, not all browsers will show this element if it's empty. Your design treats the top as two rows - one with logo and column, the other with empty place and menu. I'd rather think of it as two columns. In the left column there's logo, while in the right column there's phone number and below that, menu. This will let you to achieve the same thing without the empty div element, you can also place bigger logo thanks to that.

Another small thing - "medium-6" is synonymous to "large-6 medium-6". Medium-6 means that you set 6 for all screen sizes equal or larger than medium. This way your "large-6" are unnecessary, as they don't really change anything.

Darek Wędrychowski commented on roi hudson's post over 4 years

Even if I flagged your topic as a spam because of the links, I'll still answer it.

What you want to achieve (scroll bar only next to the content, not navbars) suggests that you want to make a webapp rather than a website. It's easy to do with new Foundation for Apps inside of the grid-frame - you can see it working on the templates examples.

But if you think of Foundation 5, the main question would be "why" you want to achieve something like that. Almost all websites with fixed navbars have scroll bar on all height of the page and that's the way an average user would expect it to look like.

Darek Wędrychowski commented on Simon Olley's post over 4 years

 <div class="off-canvas-wrap" data-offcanvas="">

You're missing class "row" here. That's why it stretches. It should look like that:

 <div class="row off-canvas-wrap" data-offcanvas="">

Darek Wędrychowski commented on Dennis Kortsch's post over 4 years

In Angular / Ember the modal isn't required to exist at the moment you fill the form, as the value is kept in the $scope object.

You can just get the value from

<input ng-model="username">

and use it whenever you want, f.e. in:

<modal>
your username is: {{username}}
</modal>

Darek Wędrychowski commented on Anna Callahan's post over 4 years

There are no problems with implementing this design with Foundation's Top Bar. As you see in the documentation http://foundation.zurb.com/docs/components/topbar.html you can set your navigation bar wherever you wish in your code - it doesn't have to be at the very top of the page.

Just make a div (possibly with class="fixed") that contains the overall design you pasted here and fit your top bar inside another div that's positioned where we see this red rectangle.

Also, if you don't need the drop down menu provided by Top Bar, it's even faster to achieve with a Sub Nav - http://foundation.zurb.com/docs/components/subnav.html

Darek Wędrychowski commented on bedun debis's post over 4 years

There's one more thing. In web inspector there's an option to easily unuglify the one-line CSS and JS. In my previous posts I just forgot that it's not turned on by default.

Look for the { } icon in left-bottom corner of code window in Sources tab. Once you turn it on, the next time you receive an error message, you will be redirected to the particular line of unuglified code, even if your CSS file is an unreadable one-liner.

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on Mikhail Svirkin's post over 4 years

I'd go with nesting. :) A row with two columns, and two rows in right column. A simple Foundation way that doesn't require additional styling.

You commented on Sebastian Castoria's post over 4 years

Or you can use this CSS:

a {
    word-wrap: break-word;
};

You commented on JapperCat's post over 4 years

Thanks a lot for improvements, it was really irritating. :)

You commented on Whoever's post over 4 years

That's a thing I'd really love to see in Foundation for Apps - a general scope variable that keeps the current screen size according to Foundation's settings for sizes.

You commented on Mikhail Svirkin's post over 4 years

I'll start with the second part of your post. One of the reasosn I chose Foundation over Bootstrap is how easy you can overwrite any setting you want without causing other default settings to break. I'd see nothing wrong with overwriting it, if we think only of the code. But as a designer, I'd say it looks more natural for me with this padding on the left. Users are used to seeing it like that on other sites.

Creating empty divs for the sake of elements positioning is never a recommended way. What's more, not all browsers will show this element if it's empty. Your design treats the top as two rows - one with logo and column, the other with empty place and menu. I'd rather think of it as two columns. In the left column there's logo, while in the right column there's phone number and below that, menu. This will let you to achieve the same thing without the empty div element, you can also place bigger logo thanks to that.

Another small thing - "medium-6" is synonymous to "large-6 medium-6". Medium-6 means that you set 6 for all screen sizes equal or larger than medium. This way your "large-6" are unnecessary, as they don't really change anything.

You commented on roi hudson's post over 4 years

Even if I flagged your topic as a spam because of the links, I'll still answer it.

What you want to achieve (scroll bar only next to the content, not navbars) suggests that you want to make a webapp rather than a website. It's easy to do with new Foundation for Apps inside of the grid-frame - you can see it working on the templates examples.

But if you think of Foundation 5, the main question would be "why" you want to achieve something like that. Almost all websites with fixed navbars have scroll bar on all height of the page and that's the way an average user would expect it to look like.

You commented on Simon Olley's post over 4 years

 <div class="off-canvas-wrap" data-offcanvas="">

You're missing class "row" here. That's why it stretches. It should look like that:

 <div class="row off-canvas-wrap" data-offcanvas="">

You commented on Dennis Kortsch's post over 4 years

In Angular / Ember the modal isn't required to exist at the moment you fill the form, as the value is kept in the $scope object.

You can just get the value from

<input ng-model="username">

and use it whenever you want, f.e. in:

<modal>
your username is: {{username}}
</modal>

You commented on Anna Callahan's post over 4 years

There are no problems with implementing this design with Foundation's Top Bar. As you see in the documentation http://foundation.zurb.com/docs/components/topbar.html you can set your navigation bar wherever you wish in your code - it doesn't have to be at the very top of the page.

Just make a div (possibly with class="fixed") that contains the overall design you pasted here and fit your top bar inside another div that's positioned where we see this red rectangle.

Also, if you don't need the drop down menu provided by Top Bar, it's even faster to achieve with a Sub Nav - http://foundation.zurb.com/docs/components/subnav.html

You commented on bedun debis's post over 4 years

There's one more thing. In web inspector there's an option to easily unuglify the one-line CSS and JS. In my previous posts I just forgot that it's not turned on by default.

Look for the { } icon in left-bottom corner of code window in Sources tab. Once you turn it on, the next time you receive an error message, you will be redirected to the particular line of unuglified code, even if your CSS file is an unreadable one-liner.

Posts Followed

Following

  • No Content

Followers

  • No Content