Menu icon Foundation

My Posts


  • 2
    Replies
  • Incomplete row

    By Ivan Torres

    incompleterowgridscssSass

    Question: How can I add the Incomplete row behavior ("end") into my scss? I am styling a group of images, using 3 images on a row, but on the medium breakpoint it goes down to 2 image on a row. I would like the third image on the medium breakpoint to ali... (continued)

    Last Reply by Ivan Torres about 3 years ago


  • 2
    Replies
  • Panini Partials

    By Ivan Torres

    paniniPartialsHandlebars

    Hi, I am trying to add a partial on a page that is not the default page. This page is under the page folder, and my partial is on the partial folder. I am getting this error: Panini: template could not be parsed  Error: The partial partials/foot... (continued)

    Last Reply by Ivan Torres about 3 years ago



  • NEW
  • Graceful-fs

    By Ivan Torres

    installationgraceful-fsfoundation-cli

    Hi, I just installed Foundation Cli via Terminal And I get this errror: (node:4203) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version. Question: Do I need to u... (continued)


  • NEW
  • graceful-fs module

    By Ivan Torres

    graceful-fsinstallationcli

    Hi, I just installed Foundation Cli via Terminal And I get this errror: (node:4203) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version. Question: Do I need to u... (continued)



My Comments

Ivan Torres commented on Ivan Torres's post about 3 years

Thanks

Ivan Torres commented on Ivan Torres's post about 3 years

This is what I have so far
 
.xb-images {
// LARGE & ALL - - - - - - - - - - - - - - - - - - - - -
@include grid-row;
padding-bottom: rem-calc(20);
figcaption {
font-size: rem-calc(12);
}
.img-4 {
@include grid-column(4);
}
// MEDIUM ONLY - - - - - - - - - - - - - - - - - - - - -
@include breakpoint(medium only) {
.img-4 {
@include grid-column(6);
}
}
// SMALL ONLY - - - - - - - - - - - - - - - - - - - - -
@include breakpoint(small down) {
.img-4 {
@include grid-column(12);
padding-left: rem-calc(50);
padding-right: rem-calc(50);
padding-bottom: rem-calc(30);
}
}
}

Ivan Torres commented on Ivan Torres's post about 3 years

Thanks
 

Ivan Torres commented on Ivan Torres's post about 3 years

excelent!!! it work.Thanks Val

Ivan Torres commented on Ivan Torres's post about 3 years
Ivan Torres commented on Ivan Torres's post about 3 years

Hi Rafi,
 
I am following the instructions from the developer on GitHub 
https://github.com/core77/jekyll-foundation/wiki/Getting-started
------------ Instructions on GitHub
We don't want to include unused CSS or JavaScript.
Uncomment the components you want to use
1. Sass in /assets/scss/foundation/_foundation.scss

2. JavaScript in /gulp/config.yml in javascript.src (you need to restart gulp)
------------
I did step 1 and I was able to unlock most of the components. This is because when I lunch the application all the components where off, so they need to be activated per de developer instruction.
The challenge was to activate the components that use JavaScript, that is where if fail it.
 
This is the ylm file produce by the app:
------------
browsersync:
  notify: true
  open:   false
  port:   3000
  server:
    basedir: "_site/"
  xip:    true
 
clean:
  # The jekyll build dir
  - "_site"
 
copy:
  # Paths to static assets that aren't (S)CSS or JavaScript
  # because these are completely handled by the sass and javascript tasks
  assets:
    # all files below the assets dir
    - "assets//*"
    # exclusions:
    - "!assets/{js,scss,css}/
/"   # js, scss and css files
    - "!assets/css{,/
}"            # css dir
    - "!assets/js{,/
}"             # js dir
    - "!assets/scss{,/
}"           # scss dir
    - "!assets/vendor{,/
}"         # vendor dir
  dist: "_site/assets/"
  notification: "Running Copy"
 
javascript:
  dest:
    jekyllRoot: "assets/js/"
    buildDir: "_site/assets/js/"
  # filename to output
  filename: "all.js"
  notification: "Running JavaScript"
  # Paths to JavaScript libraries, which are combined into one file
  src:
    # Libraries requried by Foundation
    - "assets/vendor/jquery/dist/jquery.js"
    - "assets/vendor/what-input/what-input.js"
 
    # Core Foundation files, all Foundation components need this!
    - "assets/vendor/foundation-sites/js/foundation.core.js"
 
    # Individual Foundation components
    # If you aren't using a component, just remove it from the list
     # "assets/vendor/foundation-sites/js/foundation.abide.js"
     # "assets/vendor/foundation-sites/js/foundation.accordion.js"
     # "assets/vendor/foundation-sites/js/foundation.accordionMenu.js"
     # "assets/vendor/foundation-sites/js/foundation.drilldown.js"
     # "assets/vendor/foundation-sites/js/foundation.dropdown.js"
     # "assets/vendor/foundation-sites/js/foundation.dropdownMenu.js"
     # "assets/vendor/foundation-sites/js/foundation.equalizer.js"
     # "assets/vendor/foundation-sites/js/foundation.interchange.js"
     # "assets/vendor/foundation-sites/js/foundation.magellan.js"
     # "assets/vendor/foundation-sites/js/foundation.offcanvas.js"
     # "assets/vendor/foundation-sites/js/foundation.orbit.js"
     # "assets/vendor/foundation-sites/js/foundation.responsiveMenu.js"
     # "assets/vendor/foundation-sites/js/foundation.responsiveToggle.js"
     # "assets/vendor/foundation-sites/js/foundation.reveal.js"
     # "assets/vendor/foundation-sites/js/foundation.slider.js"
     # "assets/vendor/foundation-sites/js/foundation.sticky.js"
     # "assets/vendor/foundation-sites/js/foundation.tabs.js"
     # "assets/vendor/foundation-sites/js/foundation.toggler.js"
     # "assets/vendor/foundation-sites/js/foundation.tooltip.js"
     # "assets/vendor/foundation-sites/js/foundation.util.box.js"
     # "assets/vendor/foundation-sites/js/foundation.util.keyboard.js"
    - "assets/vendor/foundation-sites/js/foundation.util.mediaQuery.js"
     # "assets/vendor/foundation-sites/js/foundation.util.motion.js"
     # "assets/vendor/foundation-sites/js/foundation.util.nest.js"
     # "assets/vendor/foundation-sites/js/foundation.util.timerAndImageLoader.js"
     # "assets/vendor/foundation-sites/js/foundation.util.touch.js"
     # "assets/vendor/foundation-sites/js/foundation.util.triggers.js"
 
    # Paths to your own project code are here
    # All the files in this list and in the js dir are concatenated into all.js
    - "!assets/js/all.js"
    - "assets/js/
.js"
 
jekyll:
  notification: "Running jekyll"
 
revision:
  revision:
    dest: "_site/assets"
    manifest:
      dest: "./"
    src:
      - "assets/css/app.css"
      - "assets/js/all.js"
      - "assets/img/"
  collect:
    dest: "_site"
    src:
      - "./rev-manifest.json"
      - "_site/*.{html,xml,txt,json,css,js}"
      - "_site/
/.{html,xml,txt,json,css,js}"
      - "!_site/assets/vendor"
 
sass:
  # Autoprefixer will make sure your CSS works with these browsers
  compatibility:
    - "last 2 versions"
    - "ie >= 9"
  dest:
    jekyllRoot: "assets/css/"
    buildDir: "_site/assets/css/"
  notification: "Running Sass"
  src: "assets/scss/
.scss"
 
watch:
  images: "assets/img//*"
  javascript: "assets/js/app.js"
  sass: "assets/scss/
/.scss"
  pages:
    - "
.{md,html,yml,xml}"
    - "{_data,_includes,_layouts,_pages,_posts}//*.{md,html,yml,xml}"
    - "!_site/
/."
    - "!assets/*/.*"
------

Ivan Torres commented on Ivan Torres's post about 3 years

Hi Bryan,
 
For now I want to use this on my personal site. And use this as an opportunity to get proficient using this combination (Jekyll+Foundation)
 
After that the idea is to offer this combo to my clients, similar to the way the New York Times is using Jekyll to power some of their mini-site experiences:
http://www.nytimes.com/projects/2012/snow-fall/#/?part=tunnel-creek
 
Here is are some resources on how Jekyll has been used on high profiles sites
 
The Web Ahead
54: Jekyll and CMS-less websites with Young Hahn and Dave Cole
http://5by5.tv/webahead/54
 
Development Seed
How We Build CMS-Free Websites
https://developmentseed.org/blog/2012/07/27/build-cms-free-websites/
 
Launching HealthCare.gov
https://developmentseed.org/blog/2013/06/25/healthcare-launches-in-the-open/
 
Development Seeds also developed a editor that can be integrated with Jekyll. This is to allow clients to edit their own pages once the site is completed.
http://prose.io/#about

Ivan Torres commented on Ivan Torres's post about 3 years

It's on the list of Zurb's Resources List
http://foundation.zurb.com/sites/resources.html
And for a long time I have been looking to implement Zurb and Jeyll

Ivan Torres commented on Guy Van Bael's post over 5 years

Same here.

Ivan Torres commented on Ole Fredrik Lie's post almost 6 years

Thanks for posting this Ole!!

Posts Followed




  • 14
    Replies
  • Orbit no starting automatically

    By Joost Meurs

    Orbit

    I'm using Foundation 5. The orbit is working but not starting automatically. The added scripts are placed before the closing of the body tag. app.js map is adjusted. When I hit the timer-triangle the sliders are moving, but I want them to move witho... (continued)

    Last Reply by Martin Kearn over 5 years ago






  • 2
    Replies
  • Light HTML editor with template support?

    By Wes

    template

    Hi, I've used dreamweaver for several years for the sole purpose of it's templating system.... ( mainly work on static html sites ) I'm just wondering if anyone has any alternatives that do a better job or are much faster or lighter. Thanks for any suggestions

    Last Reply by Wes over 5 years ago


Following

Followers

My Posts







My Comments

You commented on Ivan Torres's post about 3 years

Thanks

You commented on Ivan Torres's post about 3 years

This is what I have so far
 
.xb-images {
// LARGE & ALL - - - - - - - - - - - - - - - - - - - - -
@include grid-row;
padding-bottom: rem-calc(20);
figcaption {
font-size: rem-calc(12);
}
.img-4 {
@include grid-column(4);
}
// MEDIUM ONLY - - - - - - - - - - - - - - - - - - - - -
@include breakpoint(medium only) {
.img-4 {
@include grid-column(6);
}
}
// SMALL ONLY - - - - - - - - - - - - - - - - - - - - -
@include breakpoint(small down) {
.img-4 {
@include grid-column(12);
padding-left: rem-calc(50);
padding-right: rem-calc(50);
padding-bottom: rem-calc(30);
}
}
}

You commented on Ivan Torres's post about 3 years

Thanks
 

You commented on Ivan Torres's post about 3 years

excelent!!! it work.Thanks Val

You commented on Ivan Torres's post about 3 years
You commented on Ivan Torres's post about 3 years

Hi Rafi,
 
I am following the instructions from the developer on GitHub 
https://github.com/core77/jekyll-foundation/wiki/Getting-started
------------ Instructions on GitHub
We don't want to include unused CSS or JavaScript.
Uncomment the components you want to use
1. Sass in /assets/scss/foundation/_foundation.scss

2. JavaScript in /gulp/config.yml in javascript.src (you need to restart gulp)
------------
I did step 1 and I was able to unlock most of the components. This is because when I lunch the application all the components where off, so they need to be activated per de developer instruction.
The challenge was to activate the components that use JavaScript, that is where if fail it.
 
This is the ylm file produce by the app:
------------
browsersync:
  notify: true
  open:   false
  port:   3000
  server:
    basedir: "_site/"
  xip:    true
 
clean:
  # The jekyll build dir
  - "_site"
 
copy:
  # Paths to static assets that aren't (S)CSS or JavaScript
  # because these are completely handled by the sass and javascript tasks
  assets:
    # all files below the assets dir
    - "assets//*"
    # exclusions:
    - "!assets/{js,scss,css}/
/"   # js, scss and css files
    - "!assets/css{,/
}"            # css dir
    - "!assets/js{,/
}"             # js dir
    - "!assets/scss{,/
}"           # scss dir
    - "!assets/vendor{,/
}"         # vendor dir
  dist: "_site/assets/"
  notification: "Running Copy"
 
javascript:
  dest:
    jekyllRoot: "assets/js/"
    buildDir: "_site/assets/js/"
  # filename to output
  filename: "all.js"
  notification: "Running JavaScript"
  # Paths to JavaScript libraries, which are combined into one file
  src:
    # Libraries requried by Foundation
    - "assets/vendor/jquery/dist/jquery.js"
    - "assets/vendor/what-input/what-input.js"
 
    # Core Foundation files, all Foundation components need this!
    - "assets/vendor/foundation-sites/js/foundation.core.js"
 
    # Individual Foundation components
    # If you aren't using a component, just remove it from the list
     # "assets/vendor/foundation-sites/js/foundation.abide.js"
     # "assets/vendor/foundation-sites/js/foundation.accordion.js"
     # "assets/vendor/foundation-sites/js/foundation.accordionMenu.js"
     # "assets/vendor/foundation-sites/js/foundation.drilldown.js"
     # "assets/vendor/foundation-sites/js/foundation.dropdown.js"
     # "assets/vendor/foundation-sites/js/foundation.dropdownMenu.js"
     # "assets/vendor/foundation-sites/js/foundation.equalizer.js"
     # "assets/vendor/foundation-sites/js/foundation.interchange.js"
     # "assets/vendor/foundation-sites/js/foundation.magellan.js"
     # "assets/vendor/foundation-sites/js/foundation.offcanvas.js"
     # "assets/vendor/foundation-sites/js/foundation.orbit.js"
     # "assets/vendor/foundation-sites/js/foundation.responsiveMenu.js"
     # "assets/vendor/foundation-sites/js/foundation.responsiveToggle.js"
     # "assets/vendor/foundation-sites/js/foundation.reveal.js"
     # "assets/vendor/foundation-sites/js/foundation.slider.js"
     # "assets/vendor/foundation-sites/js/foundation.sticky.js"
     # "assets/vendor/foundation-sites/js/foundation.tabs.js"
     # "assets/vendor/foundation-sites/js/foundation.toggler.js"
     # "assets/vendor/foundation-sites/js/foundation.tooltip.js"
     # "assets/vendor/foundation-sites/js/foundation.util.box.js"
     # "assets/vendor/foundation-sites/js/foundation.util.keyboard.js"
    - "assets/vendor/foundation-sites/js/foundation.util.mediaQuery.js"
     # "assets/vendor/foundation-sites/js/foundation.util.motion.js"
     # "assets/vendor/foundation-sites/js/foundation.util.nest.js"
     # "assets/vendor/foundation-sites/js/foundation.util.timerAndImageLoader.js"
     # "assets/vendor/foundation-sites/js/foundation.util.touch.js"
     # "assets/vendor/foundation-sites/js/foundation.util.triggers.js"
 
    # Paths to your own project code are here
    # All the files in this list and in the js dir are concatenated into all.js
    - "!assets/js/all.js"
    - "assets/js/
.js"
 
jekyll:
  notification: "Running jekyll"
 
revision:
  revision:
    dest: "_site/assets"
    manifest:
      dest: "./"
    src:
      - "assets/css/app.css"
      - "assets/js/all.js"
      - "assets/img/"
  collect:
    dest: "_site"
    src:
      - "./rev-manifest.json"
      - "_site/*.{html,xml,txt,json,css,js}"
      - "_site/
/.{html,xml,txt,json,css,js}"
      - "!_site/assets/vendor"
 
sass:
  # Autoprefixer will make sure your CSS works with these browsers
  compatibility:
    - "last 2 versions"
    - "ie >= 9"
  dest:
    jekyllRoot: "assets/css/"
    buildDir: "_site/assets/css/"
  notification: "Running Sass"
  src: "assets/scss/
.scss"
 
watch:
  images: "assets/img//*"
  javascript: "assets/js/app.js"
  sass: "assets/scss/
/.scss"
  pages:
    - "
.{md,html,yml,xml}"
    - "{_data,_includes,_layouts,_pages,_posts}//*.{md,html,yml,xml}"
    - "!_site/
/."
    - "!assets/*/.*"
------

You commented on Ivan Torres's post about 3 years

Hi Bryan,
 
For now I want to use this on my personal site. And use this as an opportunity to get proficient using this combination (Jekyll+Foundation)
 
After that the idea is to offer this combo to my clients, similar to the way the New York Times is using Jekyll to power some of their mini-site experiences:
http://www.nytimes.com/projects/2012/snow-fall/#/?part=tunnel-creek
 
Here is are some resources on how Jekyll has been used on high profiles sites
 
The Web Ahead
54: Jekyll and CMS-less websites with Young Hahn and Dave Cole
http://5by5.tv/webahead/54
 
Development Seed
How We Build CMS-Free Websites
https://developmentseed.org/blog/2012/07/27/build-cms-free-websites/
 
Launching HealthCare.gov
https://developmentseed.org/blog/2013/06/25/healthcare-launches-in-the-open/
 
Development Seeds also developed a editor that can be integrated with Jekyll. This is to allow clients to edit their own pages once the site is completed.
http://prose.io/#about

You commented on Ivan Torres's post about 3 years

It's on the list of Zurb's Resources List
http://foundation.zurb.com/sites/resources.html
And for a long time I have been looking to implement Zurb and Jeyll

You commented on Guy Van Bael's post over 5 years

Same here.

You commented on Ole Fredrik Lie's post almost 6 years

Thanks for posting this Ole!!

Posts Followed

Following

Followers

  • No Content