Menu icon Foundation

Developer | edinburgh

My Posts


  • 4
    Replies
  • load bootstrap on top of foundation

    By kostas

    BootstrapFoundation

    hi, i have a modal pop up window functionality that is based on Bootstrap framework (a modal appears 8sec after the page loads) Then i created the page on Foundation and added the popup window on top of the page (included bootstrap cdn and used boo... (continued)

    Last Reply by ap ap 10 months ago




  • 3
    Replies
  • Fade effect on orbit slider on F6

    By kostas

    slideFade

    hi, i have created a slider :   <!-- slider start--> <div data-options="bullets:false;nav-buttons:false;animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;" class="orbit" role="regi... (continued)

    Last Reply by kostas 12 months ago



  • 3
    Replies
  • Use gulp

    By kostas

    gulp

    hi, i have set up a project in Foundation 6. I perform the /usr/bin/foundation watch   command in order to keep my CSS updated. I get:   > gulp [13:11:49] Using gulpfile ~/Desktop/myproject/gulpfile.js [13:11:49] Starting 'sass'...... (continued)

    Last Reply by Jarryd Fillmore about 1 year ago




  • 1
    Reply
  • Create full-width content

    By kostas

    full width columns

    hi, i have a 3-column div with images inside: <div class="large-4 medium-4 small-12 columns"> <img src="img/s-design_a.jpg" alt="s-design-a"> </div> <div class="large-4 medium-4 small-12 columns"> <img sr... (continued)

    Last Reply by kostas over 1 year ago


My Comments

kostas commented on kostas's post 29 days

@Val Ery : Hey this solved my problem!!! Thanks !
Can you explain why the official procedure didnt work?
Is there a way i could troubleshoot such issues like the one i faced?
I mean i didnt get any errors anywhere (console, terminal) and everything looked like in place and working only Foundation didnt work at all.
Thanks again

kostas commented on kostas's post about 1 month

to complete the post : not even the standard css  installation out of the box works.
I am on Ubuntu linix Chrome, Firefox Browser.
 
 

kostas commented on kostas's post 10 months

hi @Rafi thanks for the reply,
i had the popup window functionality based on bootstrap CDN libraries. i kind of found it more easily researching the net.
Then i had to code the page and i choose Foundation that i know how to use better.
When i put them together i understood the mistake i had done, so i looked for a solution.
Finally i programmed all the page on Bootstrap, where the modal box is producing no conflicts.
Now everything works fine.
It would be interesting to be able to use both of them, because they have some goods and bads both of them and would be interested to take the best part of both.
thanks anyway

kostas commented on kostas's post 11 months

Also even if i change a parametter in _settings.scss like
$body-background: $black;
it has no effect.
All the above changes are reflected in the
foundation watch
 terminal window

kostas commented on kostas's post 11 months

also when i try to run npm start as root or not i get:
root@xbass-W650EH:/home/xbass/Desktop/myapp# npm start
npm ERR! Linux 4.4.0-43-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "start"
npm ERR! node v5.12.0
npm ERR! npm v3.8.6
npm ERR! path /home/xbass/Desktop/myapp/package.json
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall open

npm ERR! enoent ENOENT: no such file or directory, open '/home/xbass/Desktop/myapp/package.json'
npm ERR! enoent ENOENT: no such file or directory, open '/home/xbass/Desktop/myapp/package.json'
npm ERR! enoent This is most likely not a problem with npm itself
npm ERR! enoent and is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! Please include the following file with any support request:
npm ERR! /home/xbass/Desktop/myapp/npm-debug.log
root@xbass-W650EH:/home/xbass/Desktop/myapp#

kostas commented on kostas's post 12 months

@rafi yes the carousel is totally working. This is the url if it is ok to link through the forum:
Http://www.solomondesigns.co.uk

kostas commented on kostas's post about 1 year

 hi,
thanks for the reply. I pasted the code in my page and it worked fine.
What makes me wonder is since the code i used was from the official Foundation 6 docs, what went wrong?
 

kostas commented on kostas's post about 1 year

This is the code i am using:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

&lt;link rel="stylesheet" href="css/app.css"&gt;

</head>

<body>
<button type="button" class="button" data-toggle="offCanvas">Open Menu</button>
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>

  &lt;div class="off-canvas position-left" id="offCanvas" data-off-canvas&gt;

    &lt;!-- Close button --&gt;
    &lt;button class="close-button" aria-label="Close menu" type="button" data-close&gt;
      &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
    &lt;/button&gt;

    &lt;!-- Menu --&gt;
    &lt;ul class="vertical menu"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Foundation&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Dot&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;ZURB&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Com&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Slash&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Sites&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;

  &lt;/div&gt;

  &lt;div class="off-canvas-content" data-off-canvas-content&gt;
    &lt;!-- Page content --&gt;
  &lt;/div&gt;
&lt;/div&gt;

</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/foundation-sites//js/foundation.core.js"></script>
<script src="bower_components/foundation-sites/js/foundation.util.mediaQuery.js"></script>
<script src="bower_components/foundation-sites/js/foundation.util.triggers.js"></script>
<script src="bower_components/foundation-sites/js/foundation.util.motion.js"></script>

&lt;script src="bower_components/foundation-sites/js/foundation.offcanvas.js"&gt;&lt;/script&gt;


    &lt;script&gt;

$(document).foundation();
</script>
</body>

</html>

(For some reason the code box is not working)

kostas commented on kostas's post over 1 year

 hi Sven thanks for your very helpfull link and sorry for the late reply,
The link describes a lot about installing staff with bower but nothing on the joyride issue.
Would you recommend any workaround on the joyride functionality?
I am building a site that really needs something to point users to some elements in the page.
cheers!
 

kostas commented on kostas's post over 1 year

 hi Sven thanks for your very helpfull link and sorry for the late reply,
The link describes a lot about installing staff with bower but nothing on the joyride issue.
Would you recommend any workaround on the joyride functionality?
I am building a site that really needs something to point users to some elements in the page.
cheers!
 

Posts Followed

No Content

Following

Followers

My Posts






My Comments

You commented on kostas's post 29 days

@Val Ery : Hey this solved my problem!!! Thanks !
Can you explain why the official procedure didnt work?
Is there a way i could troubleshoot such issues like the one i faced?
I mean i didnt get any errors anywhere (console, terminal) and everything looked like in place and working only Foundation didnt work at all.
Thanks again

You commented on kostas's post about 1 month

to complete the post : not even the standard css  installation out of the box works.
I am on Ubuntu linix Chrome, Firefox Browser.
 
 

You commented on kostas's post 10 months

hi @Rafi thanks for the reply,
i had the popup window functionality based on bootstrap CDN libraries. i kind of found it more easily researching the net.
Then i had to code the page and i choose Foundation that i know how to use better.
When i put them together i understood the mistake i had done, so i looked for a solution.
Finally i programmed all the page on Bootstrap, where the modal box is producing no conflicts.
Now everything works fine.
It would be interesting to be able to use both of them, because they have some goods and bads both of them and would be interested to take the best part of both.
thanks anyway

You commented on kostas's post 11 months

Also even if i change a parametter in _settings.scss like
$body-background: $black;
it has no effect.
All the above changes are reflected in the
foundation watch
 terminal window

You commented on kostas's post 11 months

also when i try to run npm start as root or not i get:
root@xbass-W650EH:/home/xbass/Desktop/myapp# npm start
npm ERR! Linux 4.4.0-43-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "start"
npm ERR! node v5.12.0
npm ERR! npm v3.8.6
npm ERR! path /home/xbass/Desktop/myapp/package.json
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall open

npm ERR! enoent ENOENT: no such file or directory, open '/home/xbass/Desktop/myapp/package.json'
npm ERR! enoent ENOENT: no such file or directory, open '/home/xbass/Desktop/myapp/package.json'
npm ERR! enoent This is most likely not a problem with npm itself
npm ERR! enoent and is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! Please include the following file with any support request:
npm ERR! /home/xbass/Desktop/myapp/npm-debug.log
root@xbass-W650EH:/home/xbass/Desktop/myapp#

You commented on kostas's post 12 months

@rafi yes the carousel is totally working. This is the url if it is ok to link through the forum:
Http://www.solomondesigns.co.uk

You commented on kostas's post about 1 year

 hi,
thanks for the reply. I pasted the code in my page and it worked fine.
What makes me wonder is since the code i used was from the official Foundation 6 docs, what went wrong?
 

You commented on kostas's post about 1 year

This is the code i am using:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

&lt;link rel="stylesheet" href="css/app.css"&gt;

</head>

<body>
<button type="button" class="button" data-toggle="offCanvas">Open Menu</button>
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>

  &lt;div class="off-canvas position-left" id="offCanvas" data-off-canvas&gt;

    &lt;!-- Close button --&gt;
    &lt;button class="close-button" aria-label="Close menu" type="button" data-close&gt;
      &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
    &lt;/button&gt;

    &lt;!-- Menu --&gt;
    &lt;ul class="vertical menu"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Foundation&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Dot&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;ZURB&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Com&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Slash&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Sites&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;

  &lt;/div&gt;

  &lt;div class="off-canvas-content" data-off-canvas-content&gt;
    &lt;!-- Page content --&gt;
  &lt;/div&gt;
&lt;/div&gt;

</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/foundation-sites//js/foundation.core.js"></script>
<script src="bower_components/foundation-sites/js/foundation.util.mediaQuery.js"></script>
<script src="bower_components/foundation-sites/js/foundation.util.triggers.js"></script>
<script src="bower_components/foundation-sites/js/foundation.util.motion.js"></script>

&lt;script src="bower_components/foundation-sites/js/foundation.offcanvas.js"&gt;&lt;/script&gt;


    &lt;script&gt;

$(document).foundation();
</script>
</body>

</html>

(For some reason the code box is not working)

You commented on kostas's post over 1 year

 hi Sven thanks for your very helpfull link and sorry for the late reply,
The link describes a lot about installing staff with bower but nothing on the joyride issue.
Would you recommend any workaround on the joyride functionality?
I am building a site that really needs something to point users to some elements in the page.
cheers!
 

You commented on kostas's post over 1 year

 hi Sven thanks for your very helpfull link and sorry for the late reply,
The link describes a lot about installing staff with bower but nothing on the joyride issue.
Would you recommend any workaround on the joyride functionality?
I am building a site that really needs something to point users to some elements in the page.
cheers!
 

Posts Followed

No Content

Following

Followers

  • No Content