Menu icon Foundation

Designer

My Posts

  • 11
    Replies
  • Upgrade Yeti Launch

    By Dayo

    yetiyeti launch

    Can the devs please confirm whether the Yeti Launch tools has been updated to v6.1.1? Bear in mind that for new users to stuff like Sass, etc, this tool is potentially awesome although I am not sure the full potential is clear to the devs as one keeps ... (continued)

    Last Reply by Bryce Kirk about 3 years ago


My Comments

Dayo commented on Dayo's post over 3 years

Hi Rafi,
I only installed Node & NPM because of the F6.2.0 requirement for babel and didn't have these before when I started using Yeti Launch.

Jean,
Agree ZURB should really put a note on the Yeti Launch page stating which Foundation version it comes with.

Dayo commented on Dayo's post over 3 years

If like me, you were just using Yeti Launch without node, npm and all that stuff, seems the ride has come to an end if you want to go to v6.2.0 and you have to install node/npm.

Turns out it is a breeze as long as you use Homebrew on your Mac to do this. I used https://changelog.com/install-node-js-with-homebrew-on-os-x/

Caveat, if you want to update stuff with "npm update npm -g", you need to be logged in as root/admin.

With that in place, to update to v6.2.0, you can follow the same steps as above with the following additions after updating the "FoundationUpdate/src/assets/scss" folder (Step 6):

A. Open "FoundationUpdate/bower_components/jquery/dist/jquery.js" and "FoundationUpdate/bower_components/jquery/dist/jquery.min.js" and overwrite with the contents of "http://code.jquery.com/jquery-2.2.0.js" and "http://code.jquery.com/jquery-2.2.0.min.js" respectively.

I suppose there is a "bower-update" command that can be run somewhere.

B. Update the version number in "FoundationUpdate/bower.json"

C. Update the Foundation version number to 6.2.0 and the jquery to 2.2.0 in "FoundationUpdate/bower_components/foundation-sites/bower.json"

D. Install Babel with:

 npm install --save-dev gulp-babel babel-preset-es2015

E. Open "FoundationUpdate/gulpfile.js" and modify

   return gulp.src(PATHS.javascript)
    .pipe($.sourcemaps.init())
    .pipe($.concat('app.js'))

to ...

  return gulp.src(PATHS.javascript)
    .pipe($.sourcemaps.init())
    .pipe(babel({
      babelrc: false,
      compact: false,
    plugins: [
      "transform-es2015-arrow-functions",
        "transform-es2015-block-scoped-functions",
          "transform-es2015-block-scoping",
        "transform-es2015-classes",
        "transform-es2015-destructuring",
        "transform-es2015-template-literals",
        "transform-es2015-parameters",
      "transform-es2015-shorthand-properties",
        "transform-es2015-spread",
            ["transform-es2015-modules-commonjs", {
              allowTopLevelThis: true
            }]
          ]
    }))
    .pipe($.concat('app.js'))

Alternatively, you can amend to ...

  return gulp.src(PATHS.javascript)
    .pipe($.sourcemaps.init())
    .pipe(babel())
    .pipe($.concat('app.js'))

as long as you navigate to your "FoundationUpdate" folder in terminal and run ...

 $ echo '{"plugins": [ "transform-es2015-arrow-functions", "transform-es2015-block-scoped-functions", "transform-es2015-block-scoping", "transform-es2015-classes", "transform-es2015-destructuring", "transform-es2015-template-literals", "transform-es2015-parameters", "transform-es2015-shorthand-properties", "transform-es2015-spread", ["transform-es2015-modules-commonjs", { "allowTopLevelThis": true }] ], "compact": false}' > .babelrc

I decided to skip the .babelrc file and put the command directly in my gulp file in order to be able to more easily update the template in the package contents folder.

Hey ZURB Devs! I am sure you are choking on your skinny lattes as you read this but since you have not sorted out a proper update and some of us love Yeti Launch so much, you leave us no choice but to start hacking.

Dayo commented on Bernhard Kraft's post over 3 years

Hi Bernard,

The documentation for Foundation is a bit lacking when it come to basic and simple explanations and it seems there has been a recent influx of new users such as you and I which seems to have caught the team unprepared. Also, they are trying to roll a new version (F6) when we have all descended on them. Most of their docs are for the old version (F5) and they are not compatible.

What I can suggest is that in your case, you skip all the scss stuff and just download or link to the compiled JS/CSS and then use it as a basis to setup your site similarly to how you will use Bootstrap for instance.

You can find examples for styling here: http://foundation.zurb.com/sites/docs/

Links for the JS & CSS are here

https://cdn.jsdelivr.net/foundation/6.1.1/foundation.min.js
https://cdn.jsdelivr.net/foundation/6.1.1/foundation.min.css

Learning Sass is a separate issue from using Foundation. You only need this if you want to customise things.

There is a tool on this site for some basic customisation: http://foundation.zurb.com/sites/download.html

However, last time I checked, the version you get from it was out of date F6.0.5 instead of F6.1.1) but not sure if it has been updated since. Would be nice if the page actually told you what version you will get from it.

Anyway, it basically does the type of thing you can do with your scss at a high level.

I love the Yeti Launch tool they have but alas, it is also out of date and it doesn't seem they are fully clued up to the potential it has.

With Zencart planning to go with Foundation in the near future, there will likely be a deluge of confused newbies and I hope they get their act together soon. I actually found out about Foundation from the Zencart site.

Dayo commented on Mike Cerveni's post over 3 years

That is because the gulpfile is set up only to watch for, and process, ".html" files.

You can either leave it as ".html" and change it to ".php" in the dist folder after it is built or edit the gulpfile to include ".php".

I think you will need to make changes at the following lines in the gulpfile:

Line 74: From "gulp.src('src/pages/**/*.{html,hbs,handlebars}')" to "gulp.src('src/pages/**/*.{php, html,hbs,handlebars}')"

Line 102: From "html: ['src/**/*.html']," to "html: ['src/**/*.php', 'src/**/*.html'],"

Line 169: From "gulp.watch(['src/pages/**/*.html'], ['pages', browser.reload]);" to "gulp.watch(['src/pages/**/*.php', 'src/pages/**/*.html'], ['pages', browser.reload]);"

Dayo commented on Dayo's post over 3 years

Here is how I upgraded to a current version of Foundation_Sites manually.

  1. From the project page on Github: https://github.com/zurb/foundation-sites/releases, I downloaded and unpacked the lastest zip (v6.1.1 as at today, 29 Dec 2015).

  2. Spun up a new project using Yeti Launch called "FoundationUpdate".

  3. Went into the unpacked zip from Github and copied the following:

    • "dist" folder
    • "js" folder
    • "scss" folder
    • "LICENSE" file
    • "README.md" file
  4. Went into the "FoundationUpdate/bower_components/foundation_sites" folder, pasted these here and overwrote existing files.

  5. Opened the "FoundationUpdate/bower.json" file and changed the version of "foundation_sites"for my records.

  6. Updated my "FoundationUpdate/src/assets/scss" folder with the version from "https://github.com/zurb/foundation-zurb-template/tree/master/src/assets"

At this point, that particular project was using the updated Foundation when I stopped and restarted the project in Yeti Launch.

To be able to use this for future projects ...

  1. I copied my "FoundationUpdate/bower_components/foundation_sites" folder

  2. In finder, went into where I installed Yeti Launch, right clicked on the icon and selected "Show Package Contents"

  3. In the window that came up, went to "Contents/Resources/app/projects/advanced/bower_components" and replaced the "foundation_sites" folder and did the same for the "foundation_sites" folder in "Contents/Resources/app/projects/basic/bower_components".

  4. Updated the "scss" folders for both "Contents/Resources/app/projects/advanced/src/assets" and "Contents/Resources/app/projects/basic/src/assets"

Good to Go!

Dayo commented on Paolo Sax's post over 3 years

Hi,

Your example appears to have a missing opening brace "[" and should be
data-interchange="[img/img-default.jpg, default] ... "

More importantly though, I don't think there is actually a separate "default" category to be defined and you should just have "small", "medium" and "large" as required.

Dayo commented on Jeremy Alexander's post over 3 years

Hi Erik,

I am just a dabbler doing some personal stuff and don't have a team to collaborate with.
I bet the workflow describes works just fine for pros.

Now that I figured out that the zipped file is there, I can go there, unzip and upload to my webspace. Perhaps ftp or sftp etc to send directly would be nice.

In any case, I am just learning about sass etc and tip toeing through things.

I have a few queries but will ask those separately if I can't find answers. Trying to avoid asking uber noob questions.

Dayo commented on Alex's post over 3 years

Noob to Noob but I found that if you drop a new "details.html" file into the "src/pages" folder it will be brought in and can be viewed at the url you gave.

Are you sure the project is running in Yeti Launch?

Dayo commented on Jeremy Alexander's post over 3 years

New to all this myself (just a toe dipping amateur) but I found that when you click on the "Deploy" button in Yeti Launch 1.0.1, it will create a zipped package of files which can be uploaded. The distracting nagging screen asking you to sign up for Notable (can't find a option to switch this off) can be ignored it seems.

Posts Followed

  • 1
    Reply
  • Basic usage of SASS

    By Bernhard Kraft

    cms

    I do web projects since '95. I already customized the Zurb Foundation CSS/JS files for one project or the other. There I just commented out many stuff I do not seem to need from the .css files. But I do not really understand how I should use the SASS file... (continued)

    Last Reply by Dayo over 3 years ago




  • 2
    Replies
  • Can't get Interchange to work - F6

    By Paolo Sax

    interchange

    Hello, I'm trying to test & deploy interchange on F6 for a background divs, but it's not clear at all on how to initialize the whole stuff - I mean I've followed the docs instructions (but maybe I did it wrong): - Insert the scripts bower_components... (continued)

    Last Reply by Paolo Sax over 3 years ago



Following

    No Content

Followers

My Posts


My Comments

You commented on Dayo's post over 3 years

Hi Rafi,
I only installed Node & NPM because of the F6.2.0 requirement for babel and didn't have these before when I started using Yeti Launch.

Jean,
Agree ZURB should really put a note on the Yeti Launch page stating which Foundation version it comes with.

You commented on Dayo's post over 3 years

If like me, you were just using Yeti Launch without node, npm and all that stuff, seems the ride has come to an end if you want to go to v6.2.0 and you have to install node/npm.

Turns out it is a breeze as long as you use Homebrew on your Mac to do this. I used https://changelog.com/install-node-js-with-homebrew-on-os-x/

Caveat, if you want to update stuff with "npm update npm -g", you need to be logged in as root/admin.

With that in place, to update to v6.2.0, you can follow the same steps as above with the following additions after updating the "FoundationUpdate/src/assets/scss" folder (Step 6):

A. Open "FoundationUpdate/bower_components/jquery/dist/jquery.js" and "FoundationUpdate/bower_components/jquery/dist/jquery.min.js" and overwrite with the contents of "http://code.jquery.com/jquery-2.2.0.js" and "http://code.jquery.com/jquery-2.2.0.min.js" respectively.

I suppose there is a "bower-update" command that can be run somewhere.

B. Update the version number in "FoundationUpdate/bower.json"

C. Update the Foundation version number to 6.2.0 and the jquery to 2.2.0 in "FoundationUpdate/bower_components/foundation-sites/bower.json"

D. Install Babel with:

 npm install --save-dev gulp-babel babel-preset-es2015

E. Open "FoundationUpdate/gulpfile.js" and modify

   return gulp.src(PATHS.javascript)
    .pipe($.sourcemaps.init())
    .pipe($.concat('app.js'))

to ...

  return gulp.src(PATHS.javascript)
    .pipe($.sourcemaps.init())
    .pipe(babel({
      babelrc: false,
      compact: false,
    plugins: [
      "transform-es2015-arrow-functions",
        "transform-es2015-block-scoped-functions",
          "transform-es2015-block-scoping",
        "transform-es2015-classes",
        "transform-es2015-destructuring",
        "transform-es2015-template-literals",
        "transform-es2015-parameters",
      "transform-es2015-shorthand-properties",
        "transform-es2015-spread",
            ["transform-es2015-modules-commonjs", {
              allowTopLevelThis: true
            }]
          ]
    }))
    .pipe($.concat('app.js'))

Alternatively, you can amend to ...

  return gulp.src(PATHS.javascript)
    .pipe($.sourcemaps.init())
    .pipe(babel())
    .pipe($.concat('app.js'))

as long as you navigate to your "FoundationUpdate" folder in terminal and run ...

 $ echo '{"plugins": [ "transform-es2015-arrow-functions", "transform-es2015-block-scoped-functions", "transform-es2015-block-scoping", "transform-es2015-classes", "transform-es2015-destructuring", "transform-es2015-template-literals", "transform-es2015-parameters", "transform-es2015-shorthand-properties", "transform-es2015-spread", ["transform-es2015-modules-commonjs", { "allowTopLevelThis": true }] ], "compact": false}' > .babelrc

I decided to skip the .babelrc file and put the command directly in my gulp file in order to be able to more easily update the template in the package contents folder.

Hey ZURB Devs! I am sure you are choking on your skinny lattes as you read this but since you have not sorted out a proper update and some of us love Yeti Launch so much, you leave us no choice but to start hacking.

You commented on Bernhard Kraft's post over 3 years

Hi Bernard,

The documentation for Foundation is a bit lacking when it come to basic and simple explanations and it seems there has been a recent influx of new users such as you and I which seems to have caught the team unprepared. Also, they are trying to roll a new version (F6) when we have all descended on them. Most of their docs are for the old version (F5) and they are not compatible.

What I can suggest is that in your case, you skip all the scss stuff and just download or link to the compiled JS/CSS and then use it as a basis to setup your site similarly to how you will use Bootstrap for instance.

You can find examples for styling here: http://foundation.zurb.com/sites/docs/

Links for the JS & CSS are here

https://cdn.jsdelivr.net/foundation/6.1.1/foundation.min.js
https://cdn.jsdelivr.net/foundation/6.1.1/foundation.min.css

Learning Sass is a separate issue from using Foundation. You only need this if you want to customise things.

There is a tool on this site for some basic customisation: http://foundation.zurb.com/sites/download.html

However, last time I checked, the version you get from it was out of date F6.0.5 instead of F6.1.1) but not sure if it has been updated since. Would be nice if the page actually told you what version you will get from it.

Anyway, it basically does the type of thing you can do with your scss at a high level.

I love the Yeti Launch tool they have but alas, it is also out of date and it doesn't seem they are fully clued up to the potential it has.

With Zencart planning to go with Foundation in the near future, there will likely be a deluge of confused newbies and I hope they get their act together soon. I actually found out about Foundation from the Zencart site.

You commented on Mike Cerveni's post over 3 years

That is because the gulpfile is set up only to watch for, and process, ".html" files.

You can either leave it as ".html" and change it to ".php" in the dist folder after it is built or edit the gulpfile to include ".php".

I think you will need to make changes at the following lines in the gulpfile:

Line 74: From "gulp.src('src/pages/**/*.{html,hbs,handlebars}')" to "gulp.src('src/pages/**/*.{php, html,hbs,handlebars}')"

Line 102: From "html: ['src/**/*.html']," to "html: ['src/**/*.php', 'src/**/*.html'],"

Line 169: From "gulp.watch(['src/pages/**/*.html'], ['pages', browser.reload]);" to "gulp.watch(['src/pages/**/*.php', 'src/pages/**/*.html'], ['pages', browser.reload]);"

You commented on Dayo's post over 3 years

Here is how I upgraded to a current version of Foundation_Sites manually.

  1. From the project page on Github: https://github.com/zurb/foundation-sites/releases, I downloaded and unpacked the lastest zip (v6.1.1 as at today, 29 Dec 2015).

  2. Spun up a new project using Yeti Launch called "FoundationUpdate".

  3. Went into the unpacked zip from Github and copied the following:

    • "dist" folder
    • "js" folder
    • "scss" folder
    • "LICENSE" file
    • "README.md" file
  4. Went into the "FoundationUpdate/bower_components/foundation_sites" folder, pasted these here and overwrote existing files.

  5. Opened the "FoundationUpdate/bower.json" file and changed the version of "foundation_sites"for my records.

  6. Updated my "FoundationUpdate/src/assets/scss" folder with the version from "https://github.com/zurb/foundation-zurb-template/tree/master/src/assets"

At this point, that particular project was using the updated Foundation when I stopped and restarted the project in Yeti Launch.

To be able to use this for future projects ...

  1. I copied my "FoundationUpdate/bower_components/foundation_sites" folder

  2. In finder, went into where I installed Yeti Launch, right clicked on the icon and selected "Show Package Contents"

  3. In the window that came up, went to "Contents/Resources/app/projects/advanced/bower_components" and replaced the "foundation_sites" folder and did the same for the "foundation_sites" folder in "Contents/Resources/app/projects/basic/bower_components".

  4. Updated the "scss" folders for both "Contents/Resources/app/projects/advanced/src/assets" and "Contents/Resources/app/projects/basic/src/assets"

Good to Go!

You commented on Paolo Sax's post over 3 years

Hi,

Your example appears to have a missing opening brace "[" and should be
data-interchange="[img/img-default.jpg, default] ... "

More importantly though, I don't think there is actually a separate "default" category to be defined and you should just have "small", "medium" and "large" as required.

You commented on Jeremy Alexander's post over 3 years

Hi Erik,

I am just a dabbler doing some personal stuff and don't have a team to collaborate with.
I bet the workflow describes works just fine for pros.

Now that I figured out that the zipped file is there, I can go there, unzip and upload to my webspace. Perhaps ftp or sftp etc to send directly would be nice.

In any case, I am just learning about sass etc and tip toeing through things.

I have a few queries but will ask those separately if I can't find answers. Trying to avoid asking uber noob questions.

You commented on Alex's post over 3 years

Noob to Noob but I found that if you drop a new "details.html" file into the "src/pages" folder it will be brought in and can be viewed at the url you gave.

Are you sure the project is running in Yeti Launch?

You commented on Jeremy Alexander's post over 3 years

New to all this myself (just a toe dipping amateur) but I found that when you click on the "Deploy" button in Yeti Launch 1.0.1, it will create a zipped package of files which can be uploaded. The distracting nagging screen asking you to sign up for Notable (can't find a option to switch this off) can be ignored it seems.

Posts Followed

Following

  • No Content

Followers

  • No Content