Menu icon Foundation

Designer | Devon

I am a creative designer, coder and front end developer trying to make the world a better place! Happy days!

My Posts

  • 4
    Replies
  • Fixed sidebar

    By Steve Trask

    magellan fixed sidebar

    Hey everyone, I have been playing around with creating a fixed sidebar using magellan but it needs thoughts on adjusting it so it does not expand after scrolling down. I am avoiding giving it a fixed width as it needs to work responsively but not at sm... (continued)

    Last Reply by Steve Trask over 4 years ago





My Comments

Steve Trask commented on Brian Platter's post over 4 years

Hi Brian,

I think you are missing the top part of the topbar element as the data-topbar goes on the nav element, please see the below code:

http://codepen.io/gosupernova/pen/ewoGC?editors=100

Hope this helps

Steve

Steve Trask commented on Steve Trask's post over 4 years

Hi Eric,

Thanks for the update this has solved a lot of styling issues!

One question presume this would never work on an ipad due to the partial support of the fixed property on IOS?

Thanks

Steve

Steve Trask commented on Ryan O Hicks's post over 4 years

Hi Ryan,

I think you are right it is a common size due the screen ppi, most site designs would not dictate that you require to adjust the content again and if you do need another you can just add it in.I think the 3 breakpoints are just the average & most common that are used. Remember Foundation is to be built on and in F4 there was no medium breakpoint!

hope this helps

Steve

Steve Trask commented on Steven 's post over 4 years

Here is the base template from Foundation

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation</title>
    <link rel="stylesheet" href="css/app.css" />
    <script src="bower_components/modernizr/modernizr.js"></script>
  </head>
  <body>

    <!-- Amazing site code goes here -->

    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/foundation/js/foundation.min.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

You can see modernizr, jquery and foundation js are pulled from bower_components so these will be updated in the future.

Your app.js is all your custom js

Your folder Scss contains:
_settings.scss - you are correct change this for the default styling with the variables
app.scss - everything scss being pulled together to generate your app.css file

To add a custom scss file I would make it an import so call it _my-theme.scss in the scss folder then in your app.scss have

@import "settings";
@import "foundation";
@import "my-theme";

I would recommend if this file gets large to split it so you have a partials folder within your scss folder then your app.scss would look like:

@import "settings";
@import "foundation";
@import "partials/header";
@import "partials/sidebar";
@import "partials/forms";
@import "partials/article";
@import "partials/feature";
@import "partials/footer";

This then allows you to keep it all in neat small files that can have media queries for that specific section and allows it to be much more manageable

As for what you put onto the server, for simplicity - your bower_components, css, js folders and site files.

Hope this helps

Steve

Steve Trask commented on Mono Noke's post over 4 years

Hi Edith,

Afraid I have not seen this issue before, do you have a link I can have a look at?

Thanks

Steve

Steve Trask commented on Steven 's post over 4 years

Hi Steven,

You just directly reference the parts in bower components, so if you run a foundation update you do not have to move them again etc

You can find the update command details here http://foundation.zurb.com/docs/sass.html

As for structure I would recommend using partial sass files for independent modules or components of your site so debugging, referencing and workflow in a team is much easier. I would keep these in a sub folder in the scss directory then import them into the app.scss

As for the site file structure that is best on a per project basis, if you have more details I would be happy to advise.

Hope this helps

Steve

Steve Trask commented on Klevis Miho's post over 4 years

Hi Klevis,

Orbit will do this no problem, Though it is being deprecated http://foundation.zurb.com/forum/posts/14504-moving-on-from-developing-orbit

I would agree with Zurb in recommending Slick slider instead due to having ongoing consistent support
http://kenwheeler.github.io/slick/

Again you could achieve this with slick

Hope this helps

Steve

Steve Trask commented on Marc McGee's post over 4 years

Hey Marc,

Thanks for the update, any issues just let us know

Steve Trask commented on Tho Vo's post over 4 years

Hi Tho,

what IDE are you using? is there a preset on the file that id overriding the one set in the root?

Steve Trask commented on Bridget's post over 4 years

hi Bridget,

You can also use the class in the grid small-centered reference on this page http://foundation.zurb.com/docs/components/grid.html

Hope this helps

Steve

Posts Followed





  • 4
    Replies
  • Controlling 1 Obrit with another

    By Sean D

    Orbitsliderjslinking

    Hi there, We are having a problem controlling 1 slider with another. One slider has bullets (it's a list of thumbs) and the other has a big image... Once bullet is clicked, toggling function of orbit works only for one time. Next time same function... (continued)

    Last Reply by Sean D almost 5 years ago







Following

    No Content

Followers

My Posts

My Comments

You commented on Brian Platter's post over 4 years

Hi Brian,

I think you are missing the top part of the topbar element as the data-topbar goes on the nav element, please see the below code:

http://codepen.io/gosupernova/pen/ewoGC?editors=100

Hope this helps

Steve

You commented on Steve Trask's post over 4 years

Hi Eric,

Thanks for the update this has solved a lot of styling issues!

One question presume this would never work on an ipad due to the partial support of the fixed property on IOS?

Thanks

Steve

You commented on Ryan O Hicks's post over 4 years

Hi Ryan,

I think you are right it is a common size due the screen ppi, most site designs would not dictate that you require to adjust the content again and if you do need another you can just add it in.I think the 3 breakpoints are just the average & most common that are used. Remember Foundation is to be built on and in F4 there was no medium breakpoint!

hope this helps

Steve

You commented on Steven 's post over 4 years

Here is the base template from Foundation

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation</title>
    <link rel="stylesheet" href="css/app.css" />
    <script src="bower_components/modernizr/modernizr.js"></script>
  </head>
  <body>

    <!-- Amazing site code goes here -->

    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/foundation/js/foundation.min.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

You can see modernizr, jquery and foundation js are pulled from bower_components so these will be updated in the future.

Your app.js is all your custom js

Your folder Scss contains:
_settings.scss - you are correct change this for the default styling with the variables
app.scss - everything scss being pulled together to generate your app.css file

To add a custom scss file I would make it an import so call it _my-theme.scss in the scss folder then in your app.scss have

@import "settings";
@import "foundation";
@import "my-theme";

I would recommend if this file gets large to split it so you have a partials folder within your scss folder then your app.scss would look like:

@import "settings";
@import "foundation";
@import "partials/header";
@import "partials/sidebar";
@import "partials/forms";
@import "partials/article";
@import "partials/feature";
@import "partials/footer";

This then allows you to keep it all in neat small files that can have media queries for that specific section and allows it to be much more manageable

As for what you put onto the server, for simplicity - your bower_components, css, js folders and site files.

Hope this helps

Steve

You commented on Mono Noke's post over 4 years

Hi Edith,

Afraid I have not seen this issue before, do you have a link I can have a look at?

Thanks

Steve

You commented on Steven 's post over 4 years

Hi Steven,

You just directly reference the parts in bower components, so if you run a foundation update you do not have to move them again etc

You can find the update command details here http://foundation.zurb.com/docs/sass.html

As for structure I would recommend using partial sass files for independent modules or components of your site so debugging, referencing and workflow in a team is much easier. I would keep these in a sub folder in the scss directory then import them into the app.scss

As for the site file structure that is best on a per project basis, if you have more details I would be happy to advise.

Hope this helps

Steve

You commented on Klevis Miho's post over 4 years

Hi Klevis,

Orbit will do this no problem, Though it is being deprecated http://foundation.zurb.com/forum/posts/14504-moving-on-from-developing-orbit

I would agree with Zurb in recommending Slick slider instead due to having ongoing consistent support
http://kenwheeler.github.io/slick/

Again you could achieve this with slick

Hope this helps

Steve

You commented on Marc McGee's post over 4 years

Hey Marc,

Thanks for the update, any issues just let us know

You commented on Tho Vo's post over 4 years

Hi Tho,

what IDE are you using? is there a preset on the file that id overriding the one set in the root?

You commented on Bridget's post over 4 years

hi Bridget,

You can also use the class in the grid small-centered reference on this page http://foundation.zurb.com/docs/components/grid.html

Hope this helps

Steve

Posts Followed

Following

  • No Content

Followers