Menu icon Foundation

My Posts

  • 2
    Replies
  • Split links in top menu

    By Vladimir

    menuF6splitnavigation

    Is there an example of how to achieve menu like this in F6 (http://ravistheme.com/yoona/html/) Also, how do you center links in menu. Also, since navigation is a bit changed from F5 is there any good article/video on the net to help a bit in quicker ad... (continued)

    Last Reply by Vladimir almost 4 years ago


  • 2
    Replies
  • F6 and Laravel5 gulpfile.js

    By Vladimir

    jslaravelgulpfilegulp

    Big thanks to Zé Cipriano and his article "Laravel Elixir and Zurb Foundation, revisited" and if he didn't wrote this article my work in making F6 working with Laravel5 would be much harder. If anyone has missed it here is the link (http://zecipriano.com/... (continued)

    Last Reply by Vladimir almost 4 years ago


  • 6
    Replies
  • How to match two rows

    By Vladimir

    alignrowimage

    This is so simple question and it took me almost a full day to come up with some sort of solution. I had to use so many divs that the code structure is so ugly my eyes hurt. So I know there must be more elegant solution but nothing comes to my mind, yet. ... (continued)

    Last Reply by jessica ndaye over 4 years ago



My Comments

Vladimir commented on Vladimir's post over 3 years

@Anton I did updated it and still the same problem. I have to use data-hide in order for menu to break as I need.

Vladimir commented on Rafi Benkual's post over 3 years

And one more thing, if it fails after using NPM try cleaning NPM cache and installing it again.

Vladimir commented on Rafi Benkual's post over 3 years

@Phill had exactly the same problem in my instalation and since I use F6 with Laravel and completly different gulp file as suggested for F6, I had to change my mix.sass to mix.babel in gulp file. After that it worked as it should have.
But as I don't know what yours gulp file looks like I can only guess.

Vladimir commented on fourhexagons's post over 3 years

@fourhexagons try and use scope inheritance on your scss file and change this
$grid-column-gutter: (...)
to whatever you need. I think it should work. If you don't make it work we can try and figure it on CodePen example.

Vladimir commented on fourhexagons's post over 3 years

@Bryan You can try and change gutter values in this part of _settings.scss file
// 3. The Grid
// -----------

$grid-row-width: $global-width;
$grid-column-count: 12;
$grid-column-gutter: (
small: 20px,
medium: 30px,
);
$grid-column-align-edge: true;
$block-grid-max: 8;

Vladimir commented on fourhexagons's post over 3 years

@Brayan @Wlad as I can see in the manual you both are making a mistake in calling grid-row as it should be called like this
@include grid-row($columns, $behavior, $width, $cf, $gutter) { }
where values are explained on this page http://foundation.zurb.com/sites/docs/grid.html#sass-variables
I personally use SASS so I didn't tried this, but as I said, manual states it should be called like that (but as in many cases so far manual could be wrong)

Vladimir commented on Jonthue Michel's post over 3 years

You have some minor mistakes. Here is a live demo, you just style the rest
http://codepen.io/zlatiborac/pen/QNdeoz

Vladimir commented on Baz Nezza's post over 3 years

@Rafi I have a problem with $topbar-unstack-breakpoint setting in my setting.scss file.
Right now I am trying to change breakpoint of my menu. Because I have a lots of links in it I wanted to show navigation on medium size like it is on small (hamurger icon as they call it). I tried to change default
$topbar-unstack-breakpoint: medium;
to
$topbar-unstack-breakpoint: large;
in hope that it will use the default breakpoints defined in _settings.scss
$breakpoints: (
small: 0,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
);
but whatever I do it always breaks on 640px.
 

Vladimir commented on Nicolas Lemoine's post over 3 years

And also what is inside your package.json file? You might take a look at this thread on Laracast forum Laracasts forum theread

Vladimir commented on Nicolas Lemoine's post over 3 years

Did you tried cleaning your npm cache with npm cache clean???
 

Posts Followed








  • 4
    Replies
  • F6 Foundation is not a function?

    By Nate Carlin

    F6sites

    I am using Yeti Launch to create a site with the Zurb Template (I have also tested w/ CLI). When I create the project everything compiles besides one error "$ gulp.run() has been deprecated. Use task dependencies or gulp.watch task triggering instead." du... (continued)

    Last Reply by Colin Marshall over 3 years ago




Following

    No Content

Followers

My Posts





My Comments

You commented on Vladimir's post over 3 years

@Anton I did updated it and still the same problem. I have to use data-hide in order for menu to break as I need.

You commented on Rafi Benkual's post over 3 years

And one more thing, if it fails after using NPM try cleaning NPM cache and installing it again.

You commented on Rafi Benkual's post over 3 years

@Phill had exactly the same problem in my instalation and since I use F6 with Laravel and completly different gulp file as suggested for F6, I had to change my mix.sass to mix.babel in gulp file. After that it worked as it should have.
But as I don't know what yours gulp file looks like I can only guess.

You commented on fourhexagons's post over 3 years

@fourhexagons try and use scope inheritance on your scss file and change this
$grid-column-gutter: (...)
to whatever you need. I think it should work. If you don't make it work we can try and figure it on CodePen example.

You commented on fourhexagons's post over 3 years

@Bryan You can try and change gutter values in this part of _settings.scss file
// 3. The Grid
// -----------

$grid-row-width: $global-width;
$grid-column-count: 12;
$grid-column-gutter: (
small: 20px,
medium: 30px,
);
$grid-column-align-edge: true;
$block-grid-max: 8;

You commented on fourhexagons's post over 3 years

@Brayan @Wlad as I can see in the manual you both are making a mistake in calling grid-row as it should be called like this
@include grid-row($columns, $behavior, $width, $cf, $gutter) { }
where values are explained on this page http://foundation.zurb.com/sites/docs/grid.html#sass-variables
I personally use SASS so I didn't tried this, but as I said, manual states it should be called like that (but as in many cases so far manual could be wrong)

You commented on Jonthue Michel's post over 3 years

You have some minor mistakes. Here is a live demo, you just style the rest
http://codepen.io/zlatiborac/pen/QNdeoz

You commented on Baz Nezza's post over 3 years

@Rafi I have a problem with $topbar-unstack-breakpoint setting in my setting.scss file.
Right now I am trying to change breakpoint of my menu. Because I have a lots of links in it I wanted to show navigation on medium size like it is on small (hamurger icon as they call it). I tried to change default
$topbar-unstack-breakpoint: medium;
to
$topbar-unstack-breakpoint: large;
in hope that it will use the default breakpoints defined in _settings.scss
$breakpoints: (
small: 0,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
);
but whatever I do it always breaks on 640px.
 

You commented on Nicolas Lemoine's post over 3 years

And also what is inside your package.json file? You might take a look at this thread on Laracast forum Laracasts forum theread

You commented on Nicolas Lemoine's post over 3 years

Did you tried cleaning your npm cache with npm cache clean???
 

Posts Followed

Following

  • No Content

Followers

  • No Content