Menu icon Foundation

My Posts

  • NEW
  • Media Queries in landscape mode

    By Ed Quijano

    media queriescss

    Hello, I would like to know how to work with this CSS version of Media Queries in landscape position with iphone5, iphone6, iphone6plus and Ipad mini. I took the base of all this base css version (see below) from foundation documents sites but doesn't wo... (continued)


  • 2
    Replies
  • Upload files

    By Ed Quijano

    Sasscomponentshtml

    Hello, I'm working in my web site and I've almost finalized the process. I worked with sass. Now my question is what files I need to discharge before to upload my file to my server-domain provider?  I made this question because I see that my working... (continued)

    Last Reply by Ed Quijano about 3 years ago





My Comments

Ed Quijano commented on Ed Quijano's post about 3 years

What Browser are you using?
If you can post your code on fiddle, may be we can see what's the problem.

Ed Quijano commented on Ed Quijano's post about 3 years

Terry, I asked the above question without notice that in my notes, I have the solution. The solution as well can be found here in this blog but to find it you need to make a research in the old Q&A in this blog. Jus to say that in case you want to confirm the most weird solution I've ever found. Here is that solution. jus reload the page. Yes is that simple. Reload the page. In fact, I'm working right now with the eCommerce template and every time the I check any changes made in the code, I have to reload the page in order that the elements can be fit in the resized screen. I hope that this comment help.  

Ed Quijano commented on Mojtaba Reyhani's post about 3 years

Ok Mojtaba, look for the files in the order that appear in the script. Follow that order and you'll be happy.
Good Luck. 
<!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" />
<title>Foundation Starter Template</title>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" type="text/css" href="css/foundation.min.css">
</head>
<body>

&lt;div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit&gt;
  &lt;ul class="orbit-container"&gt;
    &lt;button class="orbit-previous"&gt;&lt;span class="show-for-sr"&gt;Previous Slide&lt;/span&gt;&amp;#9664;&amp;#xFE0E;&lt;/button&gt;
    &lt;button class="orbit-next"&gt;&lt;span class="show-for-sr"&gt;Next Slide&lt;/span&gt;&amp;#9654;&amp;#xFE0E;&lt;/button&gt;
    &lt;li class="is-active orbit-slide"&gt;
      &lt;img class="orbit-image" src="images/01.jpg" alt="Space" /&gt;
      &lt;figcaption class="orbit-caption"&gt;Space, the final frontier.&lt;/figcaption&gt;
    &lt;/li&gt;
    &lt;li class="orbit-slide"&gt;
      &lt;img class="orbit-image" src="images/02.jpg" alt="Space"&gt;
      &lt;figcaption class="orbit-caption"&gt;Lets Rocket!&lt;/figcaption&gt;
    &lt;/li&gt;
    &lt;li class="orbit-slide"&gt;
      &lt;img class="orbit-image" src="images/03.jpg" alt="Space"&gt;
      &lt;figcaption class="orbit-caption"&gt;Encapsulating&lt;/figcaption&gt;
    &lt;/li&gt;
    &lt;li class="orbit-slide"&gt;
      &lt;img class="orbit-image" src="images/04.jpg" alt="Space"&gt;
      &lt;figcaption class="orbit-caption"&gt;Outta This World&lt;/figcaption&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;nav class="orbit-bullets"&gt;
    &lt;button class="is-active" data-slide="0"&gt;&lt;span class="show-for-sr"&gt;First slide details.&lt;/span&gt;&lt;span class="show-for-sr"&gt;Current Slide&lt;/span&gt;&lt;/button&gt;
    &lt;button data-slide="1"&gt;&lt;span class="show-for-sr"&gt;Second slide details.&lt;/span&gt;&lt;/button&gt;
    &lt;button data-slide="2"&gt;&lt;span class="show-for-sr"&gt;Third slide details.&lt;/span&gt;&lt;/button&gt;
    &lt;button data-slide="3"&gt;&lt;span class="show-for-sr"&gt;Fourth slide details.&lt;/span&gt;&lt;/button&gt;
  &lt;/nav&gt;
&lt;/div&gt;
&lt;script src="js/vendor/jquery.js"&gt;&lt;/script&gt;
&lt;script src="js/vendor/what-input.js"&gt;&lt;/script&gt;
&lt;script src="js/vendor/foundation.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
  $(document).foundation();
&lt;/script&gt;

</body>
</html>

Ed Quijano commented on Mojtaba Reyhani's post about 3 years

See what it said in the docs: 
Installing
"Motion UI is already included in both starter projects. If you want to add it to an existing project, follow these steps."
Check the orbit.css files and you'll find all the effects that are describle in motion ui. But before to get to fx did you already fixed the stack images?
if you are still having problems with your images stacked put your code on fiddle and I will help you to solve the problem.

Ed Quijano commented on Mojtaba Reyhani's post about 3 years

What do you mean by identical to motion-ui-.css. Orbit works with the same core of foundations files and eCommerce theme follow the same structure about the example that you have. Of course without the problem of images stacked.

Ed Quijano commented on Mojtaba Reyhani's post about 3 years

Hey, Mojtaba, just send an email to foundation support and they will reinstate your post again. But be careful from the computer that you are sending your request, it could be infected with some sort of spam. I say this just to let you know. Any way, I read yesterday, your question about your orbit to get your orbit.css you need to go to the foundation front page, click on develop tab, click on HTML templates. Once you are in that page, look for eCommerce theme. Downloaded or preview it. In that template you will see orbit in 100% motion. Once you downloaded look for style script. That script is in the head of that template. Then you got it orbit.css. Don't forget to include in your core foundations files foundation.min.css even if you have foundation.css. But the easy way to get orbit.css is preview it eCommerce theme template, right click, click view page source and then you will see the whole script from that theme. At the top in the head section you will see style script and that is orbit.css.
Hope this can help you.

Ed Quijano commented on Mojtaba Reyhani's post about 3 years

Well, if depend where you can get the original template. If you get it from sites/docs/orbit you won't find it because those templates assume that you have the core files. Assuming that you have that template you need to add two files. One foundation.min.css (even if you have foundation.css) and the other one orbit.css. 
To make it more simple is better that you go to the foundation front page go to the menu and under develop, HTML Templates, and grab Ecommerce Homepage, See Demo (you will see the orbit in motion) make a right click in a empty space, from the pop window go to view page source, one you there copy the code that is between <style> brackets. That's the orbit css file. Depend of you project, you can grab the whole file and work from there parts by parts. I would recommend that you put in a separate file orbit.css and then linked it. Don't worry if you put some parts of this theme in your project, all the parts work fine but you have to have the foundation core files and don't forget to include foundation.min.css as well and the foundation javascript.
Hope this can work for you.

Ed Quijano commented on Mojtaba Reyhani's post about 3 years

What I see that you don't have is orbit.css. You need to create orbit css file. That file you can grab it from the demo.

Ed Quijano commented on Chad Nelson's post about 3 years

Hey Chad I forget to give you the link. Here it's https://www.coffeecup.com/foundation-framer/

Ed Quijano commented on Chad Nelson's post about 3 years

Yes there is and is called Foundation Framer. CoffeeCup is the company that is developing the editor and is in beta according with that company. I was one of the first ones to acquired the editor. I have also bootstrapstudio. I use those editors only for prototyping and learning purposes not for producing web sites. They are very limited. I would suggest you to explore both but be careful to produce any kind of web-site and if you aren't a developer you will be entertaining with a lot of issues to resolve. But one thing is interesting the industry of web design and development are moving in a APIs direction very fast and I think that this "canned editors" are included in those APIs. Yes explore them and have fun but don't forget the more you study javascript, angular, node and those others end and back developer softwares, the more you are prepared for the future and not to depend from those canned editors. May be one day you'll create yours.

Posts Followed




Following

    No Content

Followers

My Posts

My Comments

You commented on Ed Quijano's post about 3 years

What Browser are you using?
If you can post your code on fiddle, may be we can see what's the problem.

You commented on Ed Quijano's post about 3 years

Terry, I asked the above question without notice that in my notes, I have the solution. The solution as well can be found here in this blog but to find it you need to make a research in the old Q&A in this blog. Jus to say that in case you want to confirm the most weird solution I've ever found. Here is that solution. jus reload the page. Yes is that simple. Reload the page. In fact, I'm working right now with the eCommerce template and every time the I check any changes made in the code, I have to reload the page in order that the elements can be fit in the resized screen. I hope that this comment help.  

You commented on Mojtaba Reyhani's post about 3 years

Ok Mojtaba, look for the files in the order that appear in the script. Follow that order and you'll be happy.
Good Luck. 
<!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" />
<title>Foundation Starter Template</title>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" type="text/css" href="css/foundation.min.css">
</head>
<body>

&lt;div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit&gt;
  &lt;ul class="orbit-container"&gt;
    &lt;button class="orbit-previous"&gt;&lt;span class="show-for-sr"&gt;Previous Slide&lt;/span&gt;&amp;#9664;&amp;#xFE0E;&lt;/button&gt;
    &lt;button class="orbit-next"&gt;&lt;span class="show-for-sr"&gt;Next Slide&lt;/span&gt;&amp;#9654;&amp;#xFE0E;&lt;/button&gt;
    &lt;li class="is-active orbit-slide"&gt;
      &lt;img class="orbit-image" src="images/01.jpg" alt="Space" /&gt;
      &lt;figcaption class="orbit-caption"&gt;Space, the final frontier.&lt;/figcaption&gt;
    &lt;/li&gt;
    &lt;li class="orbit-slide"&gt;
      &lt;img class="orbit-image" src="images/02.jpg" alt="Space"&gt;
      &lt;figcaption class="orbit-caption"&gt;Lets Rocket!&lt;/figcaption&gt;
    &lt;/li&gt;
    &lt;li class="orbit-slide"&gt;
      &lt;img class="orbit-image" src="images/03.jpg" alt="Space"&gt;
      &lt;figcaption class="orbit-caption"&gt;Encapsulating&lt;/figcaption&gt;
    &lt;/li&gt;
    &lt;li class="orbit-slide"&gt;
      &lt;img class="orbit-image" src="images/04.jpg" alt="Space"&gt;
      &lt;figcaption class="orbit-caption"&gt;Outta This World&lt;/figcaption&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;nav class="orbit-bullets"&gt;
    &lt;button class="is-active" data-slide="0"&gt;&lt;span class="show-for-sr"&gt;First slide details.&lt;/span&gt;&lt;span class="show-for-sr"&gt;Current Slide&lt;/span&gt;&lt;/button&gt;
    &lt;button data-slide="1"&gt;&lt;span class="show-for-sr"&gt;Second slide details.&lt;/span&gt;&lt;/button&gt;
    &lt;button data-slide="2"&gt;&lt;span class="show-for-sr"&gt;Third slide details.&lt;/span&gt;&lt;/button&gt;
    &lt;button data-slide="3"&gt;&lt;span class="show-for-sr"&gt;Fourth slide details.&lt;/span&gt;&lt;/button&gt;
  &lt;/nav&gt;
&lt;/div&gt;
&lt;script src="js/vendor/jquery.js"&gt;&lt;/script&gt;
&lt;script src="js/vendor/what-input.js"&gt;&lt;/script&gt;
&lt;script src="js/vendor/foundation.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
  $(document).foundation();
&lt;/script&gt;

</body>
</html>

You commented on Mojtaba Reyhani's post about 3 years

See what it said in the docs: 
Installing
"Motion UI is already included in both starter projects. If you want to add it to an existing project, follow these steps."
Check the orbit.css files and you'll find all the effects that are describle in motion ui. But before to get to fx did you already fixed the stack images?
if you are still having problems with your images stacked put your code on fiddle and I will help you to solve the problem.

You commented on Mojtaba Reyhani's post about 3 years

What do you mean by identical to motion-ui-.css. Orbit works with the same core of foundations files and eCommerce theme follow the same structure about the example that you have. Of course without the problem of images stacked.

You commented on Mojtaba Reyhani's post about 3 years

Hey, Mojtaba, just send an email to foundation support and they will reinstate your post again. But be careful from the computer that you are sending your request, it could be infected with some sort of spam. I say this just to let you know. Any way, I read yesterday, your question about your orbit to get your orbit.css you need to go to the foundation front page, click on develop tab, click on HTML templates. Once you are in that page, look for eCommerce theme. Downloaded or preview it. In that template you will see orbit in 100% motion. Once you downloaded look for style script. That script is in the head of that template. Then you got it orbit.css. Don't forget to include in your core foundations files foundation.min.css even if you have foundation.css. But the easy way to get orbit.css is preview it eCommerce theme template, right click, click view page source and then you will see the whole script from that theme. At the top in the head section you will see style script and that is orbit.css.
Hope this can help you.

You commented on Mojtaba Reyhani's post about 3 years

Well, if depend where you can get the original template. If you get it from sites/docs/orbit you won't find it because those templates assume that you have the core files. Assuming that you have that template you need to add two files. One foundation.min.css (even if you have foundation.css) and the other one orbit.css. 
To make it more simple is better that you go to the foundation front page go to the menu and under develop, HTML Templates, and grab Ecommerce Homepage, See Demo (you will see the orbit in motion) make a right click in a empty space, from the pop window go to view page source, one you there copy the code that is between <style> brackets. That's the orbit css file. Depend of you project, you can grab the whole file and work from there parts by parts. I would recommend that you put in a separate file orbit.css and then linked it. Don't worry if you put some parts of this theme in your project, all the parts work fine but you have to have the foundation core files and don't forget to include foundation.min.css as well and the foundation javascript.
Hope this can work for you.

You commented on Mojtaba Reyhani's post about 3 years

What I see that you don't have is orbit.css. You need to create orbit css file. That file you can grab it from the demo.

You commented on Chad Nelson's post about 3 years

Hey Chad I forget to give you the link. Here it's https://www.coffeecup.com/foundation-framer/

You commented on Chad Nelson's post about 3 years

Yes there is and is called Foundation Framer. CoffeeCup is the company that is developing the editor and is in beta according with that company. I was one of the first ones to acquired the editor. I have also bootstrapstudio. I use those editors only for prototyping and learning purposes not for producing web sites. They are very limited. I would suggest you to explore both but be careful to produce any kind of web-site and if you aren't a developer you will be entertaining with a lot of issues to resolve. But one thing is interesting the industry of web design and development are moving in a APIs direction very fast and I think that this "canned editors" are included in those APIs. Yes explore them and have fun but don't forget the more you study javascript, angular, node and those others end and back developer softwares, the more you are prepared for the future and not to depend from those canned editors. May be one day you'll create yours.

Posts Followed

Following

  • No Content

Followers

  • No Content