Menu icon Foundation

My Posts






My Comments

Chris Peters commented on Chris Peters's post over 1 year

Is there a particular GitHub repo where I should file an issue for this? 

Chris Peters commented on Chris Peters's post over 1 year

Rafi, I am trying to display code examples. The screenshot above with the black background is what's rendered in the browser.
I am sure it's something with the build process auto-indenting the HTML. That's why I'm blaming the CLI.

Chris Peters commented on Chris Peters's post almost 4 years

I suppose I could just create my own class using Sass:

.th-no-link {
  @include thumb($box-shadow-hover: none);
}

Chris Peters commented on Cain's post almost 4 years

and whats up with this goofy useless forum ? lol ;)

This post borders on trolling. I wouldn't waste too much time trying to help the helpless. Good links, Rafi, though I'm afraid they'll fall on deaf ears.

Chris Peters commented on Chris Peters's post almost 4 years

To fix, I needed to uninstall older versions of the gem using this command:

$ gem uninstall foundation-rails

Select gem to uninstall:
 1. foundation-rails-5.2.2.0
 2. foundation-rails-5.3.1.0
 3. foundation-rails-5.3.3.0
 4. All versions

Chris Peters commented on Austin Pray's post almost 4 years

Yes, let the Rails asset pipeline handle it all. It's a wonderful piece of technology!

Chris Peters commented on Daniel Thompson's post almost 4 years

I suppose the part where you include the different Foundation modules could be refactored into its own partial too.

If you named it _foundation_modules.scss, each file could end up looking something like this:

@import
  'settings_dark',
  'foundation_modules';

Chris Peters commented on Daniel Thompson's post almost 4 years

The only way you could really fully separate specific color stuff would be to manually write your own CSS overrides. So I would bundle the entire kitchen sink for each theme.

You'll want to have an app-dark.css and app-light.css, each including modules that you need from the entire Foundation code base.

app-dark.scss:

//
// Settings
//

@import 'settings_dark';

//
// Dependencies
//

// ZURB Foundation components - uncomment each line as needed
@import
  "foundation/components/accordion",
  "foundation/components/alert-boxes",
// ...or whatever you need to include...
  "foundation/components/visibility";

And app-light.scss:

//
// Settings
//

@import 'settings_light';

//
// Dependencies
//

// ZURB Foundation components - uncomment each line as needed
@import
  "foundation/components/accordion",
  "foundation/components/alert-boxes",
// ...or whatever you need to include...
  "foundation/components/visibility";

Maybe another commenter will point out something that I've been missing all along, but upgrading Foundation and keeping _settings.scss intact is a manual effort. I usually grab the new _settings.scss and manually paste in my customizations from the old one, line by line. This usually only takes about 10 minutes.

FWIW, I usually group things together differently from the default setup that Foundation provides. I rename _settings.scss to _foundation_settings.scss and put my own settings for non-Foundation elements in _settings.scss. So perhaps you would end up with _foundation_settings_dark.scss and _foundation_settings_light.scss for each theme.

More info in my own style guide:
http://www.liveeditorcms.com/gc/playbook/sass-css-style-guide/

Chris Peters commented on Isaac Elias's post almost 4 years

I'm surprised you're having issues. My Capybara/Selenium-powered specs involving Foundation modals work just fine. What version of Selenium Webdriver are you using? I know it's a pain to update RSpec and Capybara, but that would probably be worth investing in too.

One thing is try is to sleep for a little bit to give the modal time to load. I always do something like this as a last resort:

page.find("[data-reveal-id='earlyUnpauseModal']").click
sleep 0.5 # Adjust this value to the minimum possible to get the test to pass
page.find('a.click-this').click

Chris Peters commented on Isaac Elias's post almost 4 years

I am actually very surprised that this line isn't causing an error because you're not passing it a valid CSS selector:

page.find("[data-reveal-id='earlyUnpauseModal").click

Try it like this:

page.find("[data-reveal-id='earlyUnpauseModal']").click

Also, why not code it like this? The more CSS selectors you use in your feature specs, the less UI-focused your tests become.

click_link 'My Text'
click_link 'Click for tests'

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Chris Peters's post over 1 year

Is there a particular GitHub repo where I should file an issue for this? 

You commented on Chris Peters's post over 1 year

Rafi, I am trying to display code examples. The screenshot above with the black background is what's rendered in the browser.
I am sure it's something with the build process auto-indenting the HTML. That's why I'm blaming the CLI.

You commented on Chris Peters's post almost 4 years

I suppose I could just create my own class using Sass:

.th-no-link {
  @include thumb($box-shadow-hover: none);
}

You commented on Cain's post almost 4 years

and whats up with this goofy useless forum ? lol ;)

This post borders on trolling. I wouldn't waste too much time trying to help the helpless. Good links, Rafi, though I'm afraid they'll fall on deaf ears.

You commented on Chris Peters's post almost 4 years

To fix, I needed to uninstall older versions of the gem using this command:

$ gem uninstall foundation-rails

Select gem to uninstall:
 1. foundation-rails-5.2.2.0
 2. foundation-rails-5.3.1.0
 3. foundation-rails-5.3.3.0
 4. All versions

You commented on Austin Pray's post almost 4 years

Yes, let the Rails asset pipeline handle it all. It's a wonderful piece of technology!

You commented on Daniel Thompson's post almost 4 years

I suppose the part where you include the different Foundation modules could be refactored into its own partial too.

If you named it _foundation_modules.scss, each file could end up looking something like this:

@import
  'settings_dark',
  'foundation_modules';

You commented on Daniel Thompson's post almost 4 years

The only way you could really fully separate specific color stuff would be to manually write your own CSS overrides. So I would bundle the entire kitchen sink for each theme.

You'll want to have an app-dark.css and app-light.css, each including modules that you need from the entire Foundation code base.

app-dark.scss:

//
// Settings
//

@import 'settings_dark';

//
// Dependencies
//

// ZURB Foundation components - uncomment each line as needed
@import
  "foundation/components/accordion",
  "foundation/components/alert-boxes",
// ...or whatever you need to include...
  "foundation/components/visibility";

And app-light.scss:

//
// Settings
//

@import 'settings_light';

//
// Dependencies
//

// ZURB Foundation components - uncomment each line as needed
@import
  "foundation/components/accordion",
  "foundation/components/alert-boxes",
// ...or whatever you need to include...
  "foundation/components/visibility";

Maybe another commenter will point out something that I've been missing all along, but upgrading Foundation and keeping _settings.scss intact is a manual effort. I usually grab the new _settings.scss and manually paste in my customizations from the old one, line by line. This usually only takes about 10 minutes.

FWIW, I usually group things together differently from the default setup that Foundation provides. I rename _settings.scss to _foundation_settings.scss and put my own settings for non-Foundation elements in _settings.scss. So perhaps you would end up with _foundation_settings_dark.scss and _foundation_settings_light.scss for each theme.

More info in my own style guide:
http://www.liveeditorcms.com/gc/playbook/sass-css-style-guide/

You commented on Isaac Elias's post almost 4 years

I'm surprised you're having issues. My Capybara/Selenium-powered specs involving Foundation modals work just fine. What version of Selenium Webdriver are you using? I know it's a pain to update RSpec and Capybara, but that would probably be worth investing in too.

One thing is try is to sleep for a little bit to give the modal time to load. I always do something like this as a last resort:

page.find("[data-reveal-id='earlyUnpauseModal']").click
sleep 0.5 # Adjust this value to the minimum possible to get the test to pass
page.find('a.click-this').click

You commented on Isaac Elias's post almost 4 years

I am actually very surprised that this line isn't causing an error because you're not passing it a valid CSS selector:

page.find("[data-reveal-id='earlyUnpauseModal").click

Try it like this:

page.find("[data-reveal-id='earlyUnpauseModal']").click

Also, why not code it like this? The more CSS selectors you use in your feature specs, the less UI-focused your tests become.

click_link 'My Text'
click_link 'Click for tests'

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content