Menu icon Foundation

Designer | Austin, TX

web designer for CORT

My Posts





My Comments

Monk commented on Monk's post over 5 years

Well I answered my own question:

input[type="checkbox"] + label {display:inline;line-height:0.5rem;}
input[type="checkbox"] {margin-bottom:0;}

This works, I just needed to remove the "." in front of each class and add an extra to separate the lines, as I couldn't get the class "label" to take a 1rem bottom margin.

Monk commented on Monk's post over 5 years

I'm picturing something like this - for columns, you can put in a "show-for-small-only" or "hide-for-small-only" class in the div. I'm trying to create a condition that would be like "active-for-medium-up", if there were such a thing.

I'll also try explaining it this way: For medium and large sizes, on page load, I'd like for the accordion I've built to show a defined content block, which you get by adding "active" to the class, like so:

[ div id="panel2" class="content active" ]

But on small, I'd like the exact behavior you get when you don't have "active" in the class, like so:

[ div id="panel2" class="content" ] <-- with this the 3 collapsed tabs are shown, and toggling each one open by clicking it still works.

*using ['s instead of <'s to show the code

Monk commented on Monk's post over 5 years

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

Monk commented on Monk's post over 5 years

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

Monk commented on Monk's post over 5 years

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.

Monk commented on Monk's post over 5 years

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?

Monk commented on Monk's post over 5 years

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.

Monk commented on Monk's post over 5 years

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?

Monk commented on Monk's post over 5 years

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.

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Monk's post over 5 years

Well I answered my own question:

input[type="checkbox"] + label {display:inline;line-height:0.5rem;}
input[type="checkbox"] {margin-bottom:0;}

This works, I just needed to remove the "." in front of each class and add an extra to separate the lines, as I couldn't get the class "label" to take a 1rem bottom margin.

You commented on Monk's post over 5 years

I'm picturing something like this - for columns, you can put in a "show-for-small-only" or "hide-for-small-only" class in the div. I'm trying to create a condition that would be like "active-for-medium-up", if there were such a thing.

I'll also try explaining it this way: For medium and large sizes, on page load, I'd like for the accordion I've built to show a defined content block, which you get by adding "active" to the class, like so:

[ div id="panel2" class="content active" ]

But on small, I'd like the exact behavior you get when you don't have "active" in the class, like so:

[ div id="panel2" class="content" ] <-- with this the 3 collapsed tabs are shown, and toggling each one open by clicking it still works.

*using ['s instead of <'s to show the code

You commented on Monk's post over 5 years

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

You commented on Monk's post over 5 years

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

You commented on Monk's post over 5 years

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.

You commented on Monk's post over 5 years
You commented on Monk's post over 5 years

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?

You commented on Monk's post over 5 years

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.

You commented on Monk's post over 5 years

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?

You commented on Monk's post over 5 years

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.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content