Menu icon Foundation

Designer | Campbell, CA

Hacker, Entrepreneur, Futurist. I seize opportunity today, to envision a better tomorrow.

My Posts

  • 3
    Replies
  • Full Width Row

    By Alok Jethanandani

    Foundation 4Rows

    Hey guys, I’m just curious what you think the best practice is when I have a row that I need to be full width of the page. Because if I set a row to be the full width, then my interior subsequent row will be full width and not adopt the Foundation defa... (continued)

    Last Reply by AlexLasek over 5 years ago


My Comments

Alok Jethanandani commented on Christian Matthias's post about 5 years

Yeah you'll need SassC, an implementer, to compile your SCSS.

Follow the steps in the README.md to build SassC on your machine to compile SCSS.

https://github.com/hcatlin/sassc

Alok Jethanandani commented on Christian Matthias's post over 5 years

Libsass is basically an alternative to using Compass. Libsass is a Ruby-less way to compile Sass. Libsass is a C/C++ port of the Sass preprocessing engine, meaning that Libsass uses C rather than Ruby to compile Sass into CSS.

http://libsass.org/

Bower is a package manager for web development packages. NPM is the node package manager, dedicated for all things backend.

http://bower.io/
https://www.npmjs.org/


To install the Grunt CLI (if you already have NPM installed)

 sudo npm install -g bower grunt-cli

Libsass is just a library. To run the code locally (i.e. to compile your stylesheets), you need an implementer. SassC (get it?) is an implementer written in C. To run the compiler on your local machine, you need to build SassC. To build SassC, you must have either local copy of the libsass source or it must be installed into your system. For development, please use the source version. You must then setup an environment variable pointing to the Libsass folder, for example:

export SASS_LIBSASS_PATH=/Users/hcatlin/path/libsass

You can add this line to your bash_profile by editing the following file:

sudo nano ~/.bash_profile or ~/.profile

Alok Jethanandani commented on David Kavanagh's post over 5 years

Hey david, thanks for the clarification. In previous versions of Foundation we had sections with which one could use deep linking to change tabs using the hashmarks in the URL scope. We've discontinued the use of Foundation section because of reasons I mentioned above.

You might need to custom develop your own script to make something like this work. I'll talk to our engineers to see if we can bring this back.

Cheers
Alok

Alok Jethanandani commented on Wing-Hou Chan's post over 5 years

I would strongly suggest considering whether aesthetics should take precedence over functionality. The nav is more critical to your end-users. Just my two cents.

Alok Jethanandani commented on David Kavanagh's post over 5 years

Hey David, thanks for posting this. I'm Alok from ZURB and from what I understand there are three problems here:

1) Frustration with why we've changed sections to tabs
2) URL callback doesn't work reliably
3) Can't access whether the object is active/focused or inactive/unfocused

Answers:

1) We changed to tabs because this markup is more lightweight and easier to style using CSS. Sections were injecting too much custom HTML markup that was hard to style.

2) URL callbacks should work reliably. If not, we'll have our engineers look into it. Try this code:

 <script>
  $(document).foundation({
    tab: {
      callback : function (tab) {
        console.log(tab);
      }
    }
  });
</script>

3) To check for active/focused state try this code:

<script>
  $('#myTabs').on('toggled', function (event, tab) {
    console.log(tab);
  });
</script>

Let me know if this helps.

Cheers
Alok

Alok Jethanandani commented on Wing-Hou Chan's post over 5 years

Hey Wing-Hou, one workaround for this is to set an anchor tag on the navigation and for each link in the navigation, append the anchor link so the page jumps back to where the navigation is at.

So what you would do is something like this:

<a href="#nav">
<div class="contain-to-grid sticky nav">
   <nav class="top-bar" style="">
    <ul class="title-area">
        ....
     </ul>
    </section></nav>
  </div>
</a>

And then your links like this one, append the anchor link:

<ul class="left">
      <li><a href="http://testdomain1.hostoi.com#nav">Home</a></li>
       ....
</ul>

This might be the easiest way to fix this problem. But I wanted to ask why you want to show the school's logo and hero picture above the navigation. That's kind of a weird place to keep those two things.

Alok Jethanandani commented on Peter Hupuczi's post over 5 years

Hey peter, from what I can understand you want to check to see if the mobile phone number has:

1) numbers
2) length of 11 digits

If that is correct try this code:

 $(document)
  .foundation()
  .foundation('abide', {
    patterns: {
      mobile_number:^07([\d]{3})[(\D\s)]?[\d]{3}[(\D\s)]?[\d]{3}$
    }
  });

Or head on over to Regexlib.com to look for the regular expression that matches your mobile number criteria, if this one doesn't work.

http://regexlib.com/Search.aspx?k=uk+mobile+phone&c=-1&m=-1&ps=20

And then apply that custom abide pattern to your form field:

<form class="custom" data-abide>
  <label>Mobile Number</label>
  <input type="text" pattern="mobile_number" required>
</form> 

Alok Jethanandani commented on Asif's post over 5 years

Hey Asif, from what i understand you want to interchange small chunks of code (partials) at different breakpoints, yes?

If so, follow this code:

<div data-interchange="[../examples/interchange/default.html, (small)], [../examples/interchange/medium.html, (medium)], [../examples/interchange/large.html, (large)]">
   <!-- Insert default view here. This could be a desktop, tablet or mobile view depending on the platform you're optimizing for. ---> 
  </div>
</div>

http://foundation.zurb.com/docs/components/interchange.html

If you can describe your problem in detail, then I'd love to offer a more specific and targeted solution.

Alok Jethanandani commented on Anita Graham's post over 5 years

Hey Anita, are you trying to create a custom mixin for something? Check out http://foundation.zurb.com/docs/components/global.html for Foundation 5 Global Mixins. If you can describe what you are trying to make, I'd love to help!

Posts Followed


  • 5
    Replies
  • Orbit slider not working.

    By Kim

    Orbitslider

    I started from scratch with foundation 5. Downloaded a custom pack and am trying the Orbit template. Currently I have an issue with the orbit slider. The entire template isn't showing up properly and I have no clue what I did wrong. Hope to get some h... (continued)

    Last Reply by Yamenshahin over 5 years ago



  • 3
    Replies
  • Installing foundation 5

    By Scott Riggle

    install foundation

    Installed 4 a few says ago via command line, so I wanted to try 5. I updated the gem and it failed so I went through the entire process from the start hoping to get 5. When creating a new project I still get an index file with version 4.3.2 stated in it. ... (continued)

    Last Reply by Ivan Torres over 5 years ago


  • 14
    Replies
  • Custom Forms in F5?

    By Lynda Spangler

    forms

    First thank you for the great work in Foundation 5! In Foundation 5 are custom forms still supported? When I look at the Form docs I am seeing regular checkboxes and radio boxes. I haven't tried it in a live site yet.

    Last Reply by ajaymittal 10 months ago


Following

  • Foundation Forum Feature Requests & Suggestions

    Howdy Everyone! I've been on this Forum for quite a while now and I wanted to say what a great place this is. You make this community so much stronger by giving solutions to problems posted by others using Foundation. I thought it might be the time ... (continued) Read More

    View More Posts by Wing-Hou Chan

  • Alternate grid system(s)?

    After getting accustomed to Foundation this past week I can safely say I've warmed up to it quite a bit. That being said I'm at a point where I'm not sure whether to integrate other grid systems into it or to stick to its built-in one. Which then leads to... (continued) Read More

    View More Posts by Mihai Stroe

  • Foundation 4 & 5 Harmony

    Okay, so I'm in the middle of a couple of projects using Foundation 4 w/ Sass, I'd LOVE to start this new one using Foundation 5 but cannot risk the legacy projects falling apart. Does anyone have a good workflow potentially using Bundler or something els... (continued) Read More

    View More Posts by Jack Keller

Followers

My Posts


My Comments

You commented on Christian Matthias's post about 5 years

Yeah you'll need SassC, an implementer, to compile your SCSS.

Follow the steps in the README.md to build SassC on your machine to compile SCSS.

https://github.com/hcatlin/sassc

You commented on Christian Matthias's post over 5 years

Libsass is basically an alternative to using Compass. Libsass is a Ruby-less way to compile Sass. Libsass is a C/C++ port of the Sass preprocessing engine, meaning that Libsass uses C rather than Ruby to compile Sass into CSS.

http://libsass.org/

Bower is a package manager for web development packages. NPM is the node package manager, dedicated for all things backend.

http://bower.io/
https://www.npmjs.org/


To install the Grunt CLI (if you already have NPM installed)

 sudo npm install -g bower grunt-cli

Libsass is just a library. To run the code locally (i.e. to compile your stylesheets), you need an implementer. SassC (get it?) is an implementer written in C. To run the compiler on your local machine, you need to build SassC. To build SassC, you must have either local copy of the libsass source or it must be installed into your system. For development, please use the source version. You must then setup an environment variable pointing to the Libsass folder, for example:

export SASS_LIBSASS_PATH=/Users/hcatlin/path/libsass

You can add this line to your bash_profile by editing the following file:

sudo nano ~/.bash_profile or ~/.profile

You commented on David Kavanagh's post over 5 years

Hey david, thanks for the clarification. In previous versions of Foundation we had sections with which one could use deep linking to change tabs using the hashmarks in the URL scope. We've discontinued the use of Foundation section because of reasons I mentioned above.

You might need to custom develop your own script to make something like this work. I'll talk to our engineers to see if we can bring this back.

Cheers
Alok

You commented on Wing-Hou Chan's post over 5 years

I would strongly suggest considering whether aesthetics should take precedence over functionality. The nav is more critical to your end-users. Just my two cents.

You commented on David Kavanagh's post over 5 years

Hey David, thanks for posting this. I'm Alok from ZURB and from what I understand there are three problems here:

1) Frustration with why we've changed sections to tabs
2) URL callback doesn't work reliably
3) Can't access whether the object is active/focused or inactive/unfocused

Answers:

1) We changed to tabs because this markup is more lightweight and easier to style using CSS. Sections were injecting too much custom HTML markup that was hard to style.

2) URL callbacks should work reliably. If not, we'll have our engineers look into it. Try this code:

 <script>
  $(document).foundation({
    tab: {
      callback : function (tab) {
        console.log(tab);
      }
    }
  });
</script>

3) To check for active/focused state try this code:

<script>
  $('#myTabs').on('toggled', function (event, tab) {
    console.log(tab);
  });
</script>

Let me know if this helps.

Cheers
Alok

You commented on Wing-Hou Chan's post over 5 years

Hey Wing-Hou, one workaround for this is to set an anchor tag on the navigation and for each link in the navigation, append the anchor link so the page jumps back to where the navigation is at.

So what you would do is something like this:

<a href="#nav">
<div class="contain-to-grid sticky nav">
   <nav class="top-bar" style="">
    <ul class="title-area">
        ....
     </ul>
    </section></nav>
  </div>
</a>

And then your links like this one, append the anchor link:

<ul class="left">
      <li><a href="http://testdomain1.hostoi.com#nav">Home</a></li>
       ....
</ul>

This might be the easiest way to fix this problem. But I wanted to ask why you want to show the school's logo and hero picture above the navigation. That's kind of a weird place to keep those two things.

You commented on Peter Hupuczi's post over 5 years

Hey peter, from what I can understand you want to check to see if the mobile phone number has:

1) numbers
2) length of 11 digits

If that is correct try this code:

 $(document)
  .foundation()
  .foundation('abide', {
    patterns: {
      mobile_number:^07([\d]{3})[(\D\s)]?[\d]{3}[(\D\s)]?[\d]{3}$
    }
  });

Or head on over to Regexlib.com to look for the regular expression that matches your mobile number criteria, if this one doesn't work.

http://regexlib.com/Search.aspx?k=uk+mobile+phone&c=-1&m=-1&ps=20

And then apply that custom abide pattern to your form field:

<form class="custom" data-abide>
  <label>Mobile Number</label>
  <input type="text" pattern="mobile_number" required>
</form> 

You commented on Asif's post over 5 years

Hey Asif, from what i understand you want to interchange small chunks of code (partials) at different breakpoints, yes?

If so, follow this code:

<div data-interchange="[../examples/interchange/default.html, (small)], [../examples/interchange/medium.html, (medium)], [../examples/interchange/large.html, (large)]">
   <!-- Insert default view here. This could be a desktop, tablet or mobile view depending on the platform you're optimizing for. ---> 
  </div>
</div>

http://foundation.zurb.com/docs/components/interchange.html

If you can describe your problem in detail, then I'd love to offer a more specific and targeted solution.

You commented on Anita Graham's post over 5 years

Hey Anita, are you trying to create a custom mixin for something? Check out http://foundation.zurb.com/docs/components/global.html for Foundation 5 Global Mixins. If you can describe what you are trying to make, I'd love to help!

Posts Followed





Following

  • Foundation Forum Feature Requests & Suggestions

    Howdy Everyone! I've been on this Forum for quite a while now and I wanted to say what a great place this is. You make this community so much stronger by giving solutions to problems posted by others using Foundation. I thought it might be the time ... (continued) Read More

    View More Posts by Wing-Hou Chan

    Alternate grid system(s)?

    After getting accustomed to Foundation this past week I can safely say I've warmed up to it quite a bit. That being said I'm at a point where I'm not sure whether to integrate other grid systems into it or to stick to its built-in one. Which then leads to... (continued) Read More

    View More Posts by Mihai Stroe

    Foundation 4 & 5 Harmony

    Okay, so I'm in the middle of a couple of projects using Foundation 4 w/ Sass, I'd LOVE to start this new one using Foundation 5 but cannot risk the legacy projects falling apart. Does anyone have a good workflow potentially using Bundler or something els... (continued) Read More

    View More Posts by Jack Keller

Followers