Menu icon Foundation
Codepen, Foundation, breakpoints and previewing

New user here, to both Codepen and Foundation. Love both of these programs very much, Foundation is a great framework for ramping up on responsive and Codepen gives me the freedom to work from wherever I have web access. I have 2 questions.

1) is there a way to adjust Foundation's default breakpoints directly in the css in codepen? If not, can I at least modify and host my own customized app.css online somewhere and point to that? Not entirely sure the process here. Modifying within codepen would be rad but I realize that might not be possible.

2) my previews generated via codepen seem to missing the viewport scaling metadata that makes the page display appropriately for the device. I'm currently having to download the zip file, update the css, then post the content online via my own server to preview correctly. Am I missing some easier step within codepen? I can view the page link on a mobile device, but not in the correct css pixel aspect, and adding in the html doesn't seem to do anything (I'm guessing because it's not in the ).

Thanks in advance for any assistance.

codepenFoundationbreakpoint

New user here, to both Codepen and Foundation. Love both of these programs very much, Foundation is a great framework for ramping up on responsive and Codepen gives me the freedom to work from wherever I have web access. I have 2 questions.

1) is there a way to adjust Foundation's default breakpoints directly in the css in codepen? If not, can I at least modify and host my own customized app.css online somewhere and point to that? Not entirely sure the process here. Modifying within codepen would be rad but I realize that might not be possible.

2) my previews generated via codepen seem to missing the viewport scaling metadata that makes the page display appropriately for the device. I'm currently having to download the zip file, update the css, then post the content online via my own server to preview correctly. Am I missing some easier step within codepen? I can view the page link on a mobile device, but not in the correct css pixel aspect, and adding in the html doesn't seem to do anything (I'm guessing because it's not in the ).

Thanks in advance for any assistance.

This post has been closed. No new replies can be added.

Wing-Hou Chan over 5 years ago

Howdy!

Welcome to Foundation!

It is possible to adjust Foundation's default breakpoints in the CSS panel in CodePen however it would be difficult. You will have around 5,000 lines of internal CSS which would make the rendering of the page extremely slow.

An alternative to this would be to change the media queries in _global.scss (Line 211 - Line 215), move all the SCSS partials into one SCSS file, upload it to a webserver then link it to CodePen and have CodePen compile the SCSS file. This is probably the best way to do it.

As for your next problem. You can add stuff for the head into CodePen by clicking the little settings icon, looks like a cog, next to HTML in the HTML panel. In the dropdown, the last textarea allows you to place anything destined for the head in there.

You say that you use CodePen as it gives you gives you the freedom to work from wherever you have internet access. I'll share with you this resource: https://codeanywhere.net/ . It acts as a code editor and FTP client. The only downside you will have to pay for some more stuff and that some languages aren't supported. Check out the link to find out more.

Monk over 5 years ago

Excellent! Tested and verified the HTML-head solution for the preview issue, thanks.

As for this part:

"An alternative to this would be to change the media queries in _global.scss (Line 211 - Line 215), move all the SCSS partials into one SCSS file, upload it to a webserver then link it to CodePen and have CodePen compile the SCSS file. This is probably the best way to do it."

I think I understand, I'll mess with it and come back to the forums here if I have any questions.

Thanks so much for the advice =]

Monk over 5 years ago

Ok follow-up questions:

1) I do not currently have any files installed, as I've been using Foundation via codepen up to this point, so first things first - I have to install or at least download the files. Considering that I'm planning to do my own setup in the settings file (based off Foundation's defaults), which "Install" option should I choose? Complete, Essentials, Custom, or Sass?

2) I haven't seen the files that get downloaded yet, but are all the scss "partials" in one folder, or otherwise obvious, or do I just grab the content of every file ending with .scss and put it into one document?

Thanks again for the help.

Tom Hogan over 5 years ago

Hi Monk,

Regarding your follow up question, if you're familiar with sass and comfortable with it or if you're willing to take the time to learn it, then sass is the way to go. Otherwise, stick to the css version.

I'd go with the complete install as it gives you all the goodies you're likely to need. Besides, you can simply add only the js files for the components you actually use if the complete download is overkill.

If you need a custom grid size, gutter size or a different number of columns than the default provides, then by all means, choose the custom option. If not, the default will work just fine.

I'm not sure what you're referring to in your second question but you'd install the sass using grunt or git and their associated files or Compass framework.

Alexander Assimidis over 5 years ago

If you start you should maybe use the Yeoman ZF5 Generator just google it. This will setup your Project. If you have any further questions you can contact me.

If this answer was helpful pls click the button down.

Wing-Hou Chan over 5 years ago

Yup Tom is right.

If you are familiar with SASS or willing to take time to learn it that is definitely the way to go. SASS will allow you to write CSS much more efficiently, faster and easier to maintain. Check out http://sass-lang.com for more info.

If you use it in CodePen I will recommend getting the SASS version. As I said in my previous post, using Foundation with CSS in CodePen is going to be hell. If you use SASS the rendering may be slightly quicker and also the code will be easier to maintain. Of course you will have to learn SASS first, if you haven't already.

In terms of which download to go for if you decide to use it in proper development projects, I again will go for SASS, for the reasons of being much more efficient, faster and easier to maintain. You will also have to ability to include the SCSS components you want.

I would only use Essentials if you know that you won't be using all, or most, of Foundation's components.

Custom, is pretty self-explanatory, customize it to suit your project.

And the Complete CSS version if you don't want to use SASS and you want a base with all the components. You won't be able to pick and chose which CSS component you want and maintaining it will be hell. However you will still be able to pick and chose which JS components you want.

For your second question visit https://github.com/zurb/bower-foundation . This gives you the structure of the files and folders. If you go to scss -> foundation -> components you will see all the SCSS partials. They are partials as they contain blocks of code relevant to each component. SCSS partials also being with a _ (underscore) in their name, for example _global.scss. Partials form the complete CSS file once it is compiled. If you go back up two levels (into the scss folder) and open foundation.scss you will see that all the partials are being imported. Your SASS compiler will watch for changes in your SCSS files then compile foundation.scss.

To implement my solution, create a new SCSS file. Open up each of Foundation's SCSS partials make any changes you want and copy it into your new SCSS file. Upload to a webserver and then link it to CodePen. If you click the settings icon in the CSS panel click on SASS (.scss) and choose an add-on if you want. Not sure if there is any significant difference in Compass or Bourbon as I haven't used either of them in a project or in CodePen.

Monk over 5 years ago

Ok so I've got the files and have been looking around in _global.scss, and lines 211-215 are the following:

         <img alt="Octocat-spinner-32" class="mini-loader" height="16" src="https://github.global.ssl.fastly.net/images/spinners/octocat-spinner-32.gif" width="16" />
</a>      </li>


      <li class="tooltipped tooltipped-w" aria-label="Pull Requests">

I thought I had seen where the breakpoints for small, medium and large were modified in app.css?

Wing-Hou Chan over 5 years ago

Hang on, what!? That's HTML, not SCSS.

Breakpoints should be modified in _global.scss in Lines 212 to 217. I am referencing this from https://github.com/zurb/bower-foundation/blob/master/scss/foundation/components/_global.scss so line numbers will change as new pull requests are committed.

// Media Query Ranges
$small-range: (0em, 40em) !default;
$medium-range: (40.063em, 64em) !default;
$large-range: (64.063em, 90em) !default;
$xlarge-range: (90.063em, 120em) !default;
$xxlarge-range: (120.063em, 99999999em) !default;

In the version you downloaded, it may not be as up-to-date as the ones on GitHub so I recommend searching one of the lines of code above, using Ctrl-F, not sure what it is on Mac though, I assume Cmd-F.

You can also change it in _settings.scss on Line 75 to Line 78, remember to change uncomment the code to make it take effect. If you are using SCSS in CodePen, I would stick with changing it in _global.scss as you won't want to copy _settings.scss into the SCSS file you are going to upload to CodePen as it is just extra hassle.

UPDATE: Oh I get it. You don't want the code from the Source Code of the GitHub page. If you scroll down, the SCSS code is displayed. You want Line 212 to Line 217 from this.

Monk over 5 years ago

One last question - I'm about to test this out, I just want to check that I've got everything set up correctly.

I've got all the partials (with my breakpoint edits) now pasted into a single file that's ready to host online and connect to codepen. Codepen currently (within it's css/scss panel) is linking to http://cdn.foundation5.zurb.com/foundation.css. There is an option to link to another resource, so I'm guessing this is where I put the link to my scss file with all the combined partials? Also, when combining all the scss partials, I did not include the _functions.scss nor the _settings.scss, as these were outside the "components" folder.

I want to make sure as I'm planning to set this up after work and start prototyping with it over the weekend, and I doubt folks will be hanging around to check forums on Saturday =]

Thanks again for all the help.

Wing-Hou Chan over 5 years ago

I'm here! :)

You will want to remove http://cdn.foundation5.zurb.com/foundation.css and replace it with a link to your SCSS file.

foundation.css hosted by ZURB's own CDN is the default compiled version of Foundation so you don't want to use that or load two copies of Foundation.

That is correct, you don't need _function.scss or _settings.scss.

Monk over 5 years ago

Currently I have the .scss file hosted on my own server, I've verified the file is there and reachable, but I'm not sure if I have the codepen environment set up correctly. I replaced the link to the foundation.css with the new link to my own foundation.scss, but it seems like codepen isn't recognizing the .scss file, as I'm getting the following error:

File to import not found or unreadable: ../functions. Load paths: /home/deploy/codepen/releases/20140404011156/sass /home/deploy/codepen/shared/bundle/ruby/1.9.1/gems/compass-core-1.0.0.alpha.19/stylesheets Compass::SpriteImporter

Do I need to compile my .scss file first to make it a .css file?

Wing-Hou Chan over 5 years ago

It is not necessary, however you can. It doesn't make much difference, apart from you let CodePen do the compiling, which may be a benefit as you don't have to do it.

Could you post a link to where your SCSS file is hosted? I'll take a look to see if it is a problem with the code and also attempt to recreate the situation.

Wing-Hou Chan over 5 years ago

Thank you!

Try removing every piece of code with @import. That should solve the problem.

Monk over 5 years ago

Ok here's an update: so I attempted removing the @imports and using the revised foundation.scss, albeit hosted on my local machine. Codepen didn't seem to like that, so I moved the .scss file to the assets and linked to the file there - still didn't like that. I also tried including the file via a link ref in the html, nada.

We have an environment built here at work with a working version of compass, so we updated the settings file with the new breakpoints and then compiled that into a new app.css. I then grabbed that file, put it into the assets on codepen, copied the link and pasted that into the css settings dropdown in codepen, and eureka! it's working now.

I like this option because we can just drop the new compiled css into codepen's inbuilt assets manager. But it does require having a functional scss/compass environment installed and running locally to do the compiling, which I thought could be handled by codepen off a directly linked scss file.

We will continue playing with this build through the week, I'll try to do a better job of documenting the process for anyone looking to do the same thing in the future.

Wing-Hou Chan over 5 years ago

Yes, in your situation it seems sensible to compile locally then hosting the CSS version instead of the SCSS.

Did CodePen display any error messages when you tried linking your revised SCSS file?

Monk over 5 years ago

No errors, it just didn't seem to recognize it.

Wing-Hou Chan over 5 years ago

Are you still hosting the revised version?

I'll give it a try and see what the problem is.

Wing-Hou Chan over 5 years ago

In fact I've had a think about it. If you want to use Foundation CSS, use the default Foundation SCSS download, make the changes, compile and upload. This means that you don't need to copy all the partials into one file.

Monk over 5 years ago

Yup, this is the solution we went with - thanks for the assistance.