Menu icon Foundation

Developer

My Posts

  • 1
    Reply
  • Just a warning about sass

    By craig bane

    F6Sasscss

    A warning, as you may already know sass does nest however doing this can lead to code bloat within the out-putted css so I will suggest against anyone deep nesting. It just something often over looked and it will come back to bite you in your ass.

    Last Reply by Rafi Benkual over 3 years ago


My Comments

craig bane commented on Nino Kutnjak's post over 3 years

Just curious, using sass to make my mark up as clean as possible.
I was wondering if a sass mixin exists to make a row become a full row.

*** I'm an idiot I forgot change the containing div to expanded.

craig bane commented on Glenn Philp's post over 3 years

Hi again @Glenn Philp, you'll find that foundation 6 now uses gulp 4 features not sure if it did before haven't bothered looking at the gulp file they created however looking at it seems rather clean and elegant.

Not sure if this will help you at all but goes quite deep into gulp.

http://fettblog.eu/gulp-4-parallel-and-series/

craig bane commented on Glenn Philp's post over 3 years

Hello, yes this confused me at first however you'll find the changes to path and other settings are now stored in a separate file named config.yml its a lot more stream lined when it comes to making changes.

Here's an example of how to use the font-awesome library with foundation 6.

bower install font-awesome --save-dev

this will install font-awesome into your bower dependencies, then you can just open up your config.yml

and add the sass path which is "bower_components/font-awesome/scss" ,

so your config.yml ends up like this:

sass:
- "bower_components/foundation-sites/scss"
- "bower_components/motion-ui/src"
- "bower_components/font-awesome/scss"

after this you can just add

@import "font-awesome"; to your app.scss and this will import the needed sass.

for js, you can use bower, this time I'll cover owl-carousel.

bower install --save-dev owl-carousel, then just add the path to your config.yml under the javascript section.

search for javascript:

then add - "bower_components/owlcarousel/owl-carousel/owl.carousel.js"

This should be enough to get you started

craig bane commented on Jon B's post over 3 years

unfortunately when using bower you can may run into problems when dealing with multiple versions most of the time its fine to use the latest library however testing does need to be done its one of the problems web developers face.

The fact that new versions are being bumped constantly means we do need to be doing as much testing as possible to avoid breakages.

Might be an idea to bump the motion-ui to the same version when uploading a new version of foundation-sites just because for most this would be a bit of a usability issue.

craig bane commented on Jon B's post over 3 years

I have no experience dealing with Yeti, so I can't explain the inner workings however I can break down some of the development environment and shed some light on the subject.

Foundation new, creates the scaffolding for creating the files needed.

Foundation-cli uses gulp as the task manager when the user runs foundation watch, an instance of gulp starts up which watches the files and then loads up an http server.

Bower manages packages such as the sass files and javascript, to update run bower update and it will pull the latest packages into the directory.

6.2.0 introduced ecmascript 2015 so you'll need to upgrade see migration
https://github.com/zurb/foundation-sites/wiki/Upgrading-to-Foundation-6.2

Hopefully I've answered some of your questions and concerns if you do need some more help just ask and I might be able to break it down some more I would strongly advise against just using download zip files as frameworks do have contain bugs and will need need to be updated.

craig bane commented on Vincent Morel's post over 3 years

To be fair, I quite like velocity.js its a js library which replaces the builtin jquery animations for higher performance.
Its also one which is used in slideshows for the animation stack, have a read of this and see which appeals to you more.

https://davidwalsh.name/css-js-animation

This isn't my site however its a very useful one which is packed full of meaningful articles.

craig bane commented on Ben Delaney's post over 3 years

I've been using bower to install the js library for example velocity then editing the gulpfile and just including the path.

Not sure if this is the right thing to do however I do know its working for me

craig bane commented on Jeff Kinley's post over 3 years

That should create a row and will create 4 columns, and if on a mobile it will create 2 columns and 2 rows

craig bane commented on Jeff Kinley's post over 3 years

 .intro{
        @include grid-row; 
        article{
          @include grid-col;
          @include breakpoint(large){
            @include grid-col-size(1 of 4);                                                                 
          }
         @include breakpoint(small){
           @include grid-col-size(2 of 4);
         }
        }
}

Posts Followed



  • 7
    Replies
  • Bamboozled

    By Jon B

    6.2.0

    Hi there, I am pretty much a complete beginner to all this Foundation 6 stuff and bower and gulp and npm (and the list goes on). I am struggling away with trying to understand everything but there seems to be so many ways to do things with such large a... (continued)

    Last Reply by craig bane over 3 years ago





  • 4
    Replies
  • How to build semantically

    By Jeff Kinley

    Sassmixinssemantic

    Hi, I want to stop creating HTML files with all the extra class names. Therefore, I want to learn how to use the Sass mixins to create rows and columns. There are some basic examples in the Docs, but its not very clear. What is the difference between grid... (continued)

    Last Reply by Jeff Kinley over 3 years ago


Following

    No Content

Followers

My Posts


My Comments

You commented on Nino Kutnjak's post over 3 years

Just curious, using sass to make my mark up as clean as possible.
I was wondering if a sass mixin exists to make a row become a full row.

*** I'm an idiot I forgot change the containing div to expanded.

You commented on Glenn Philp's post over 3 years

Hi again @Glenn Philp, you'll find that foundation 6 now uses gulp 4 features not sure if it did before haven't bothered looking at the gulp file they created however looking at it seems rather clean and elegant.

Not sure if this will help you at all but goes quite deep into gulp.

http://fettblog.eu/gulp-4-parallel-and-series/

You commented on Glenn Philp's post over 3 years

Hello, yes this confused me at first however you'll find the changes to path and other settings are now stored in a separate file named config.yml its a lot more stream lined when it comes to making changes.

Here's an example of how to use the font-awesome library with foundation 6.

bower install font-awesome --save-dev

this will install font-awesome into your bower dependencies, then you can just open up your config.yml

and add the sass path which is "bower_components/font-awesome/scss" ,

so your config.yml ends up like this:

sass:
- "bower_components/foundation-sites/scss"
- "bower_components/motion-ui/src"
- "bower_components/font-awesome/scss"

after this you can just add

@import "font-awesome"; to your app.scss and this will import the needed sass.

for js, you can use bower, this time I'll cover owl-carousel.

bower install --save-dev owl-carousel, then just add the path to your config.yml under the javascript section.

search for javascript:

then add - "bower_components/owlcarousel/owl-carousel/owl.carousel.js"

This should be enough to get you started

You commented on Jon B's post over 3 years

unfortunately when using bower you can may run into problems when dealing with multiple versions most of the time its fine to use the latest library however testing does need to be done its one of the problems web developers face.

The fact that new versions are being bumped constantly means we do need to be doing as much testing as possible to avoid breakages.

Might be an idea to bump the motion-ui to the same version when uploading a new version of foundation-sites just because for most this would be a bit of a usability issue.

You commented on Jon B's post over 3 years

I have no experience dealing with Yeti, so I can't explain the inner workings however I can break down some of the development environment and shed some light on the subject.

Foundation new, creates the scaffolding for creating the files needed.

Foundation-cli uses gulp as the task manager when the user runs foundation watch, an instance of gulp starts up which watches the files and then loads up an http server.

Bower manages packages such as the sass files and javascript, to update run bower update and it will pull the latest packages into the directory.

6.2.0 introduced ecmascript 2015 so you'll need to upgrade see migration
https://github.com/zurb/foundation-sites/wiki/Upgrading-to-Foundation-6.2

Hopefully I've answered some of your questions and concerns if you do need some more help just ask and I might be able to break it down some more I would strongly advise against just using download zip files as frameworks do have contain bugs and will need need to be updated.

You commented on Vincent Morel's post over 3 years

To be fair, I quite like velocity.js its a js library which replaces the builtin jquery animations for higher performance.
Its also one which is used in slideshows for the animation stack, have a read of this and see which appeals to you more.

https://davidwalsh.name/css-js-animation

This isn't my site however its a very useful one which is packed full of meaningful articles.

You commented on Ben Delaney's post over 3 years

I've been using bower to install the js library for example velocity then editing the gulpfile and just including the path.

Not sure if this is the right thing to do however I do know its working for me

You commented on Jeff Kinley's post over 3 years

That should create a row and will create 4 columns, and if on a mobile it will create 2 columns and 2 rows

You commented on Jeff Kinley's post over 3 years

 .intro{
        @include grid-row; 
        article{
          @include grid-col;
          @include breakpoint(large){
            @include grid-col-size(1 of 4);                                                                 
          }
         @include breakpoint(small){
           @include grid-col-size(2 of 4);
         }
        }
}

Posts Followed





Following

  • No Content

Followers

  • No Content