Menu icon Foundation

My Posts



  • 3
    Replies
  • Images not updating

    By Michael Machado

    broken images

    I'm sure this is due to something I'm doing incorrectly but when I add a new image into the img folder on Foundation for Emails 2 SASS version and then place the image into the email code, when the browsersync updates the image shows as a broken graphic u... (continued)

    Last Reply by Ede Oldi over 3 years ago


  • 11
    Replies
  • Change color in style

    By Michael Machado

    color tag

    I'm new to FFE 2 and SASS so I apologize for the basic question but I can't seem to find much help in the docs. I am trying to do a simple text color change on a subhead of my email. I have a separate _content.scss file that is being imported last to... (continued)

    Last Reply by Michael Machado over 3 years ago



My Comments

Michael Machado commented on Michael Machado's post over 3 years

Thanks Corey, the link in your post is broken. Can you please repost the link?

Michael Machado commented on Michael Machado's post over 3 years

Thanks Rafi, is there somewhere that explains the process of updating Ffe using npm? As someone that is new to using sass and a command line interface, I find the documentation to be pretty sparse.

Michael Machado commented on Michael Machado's post over 3 years

Thanks Cory, that solved it. I have a long way to go in learning SASS but I'm liking what I see so far. Thanks for all your help.

Michael Machado commented on Michael Machado's post over 3 years

Cory,
Here is a screen shot of the folder structure and the app.css file open on the right and the gulpfile on the left.
Mike

Michael Machado commented on Michael Machado's post over 3 years

Cory,
 
Thank you for the input. Unfortunately I tried the changes you suggested and they don't work. I now get an error when running npm start containing the message 
Error in plugin 'sass'
Message:
src/assets/scss/app.scss
Error: File to import not found or unreadable: content
Parent style sheet: /Users/machadodesign/Documents/1 Working Docs/email_projects/bridgewave_connections/src/assets/scss/app.scss
on line 3 of src/assets/scss/app.scss
>> @import 'content';
^

 
 

Michael Machado commented on Michael Machado's post over 3 years

Cory,
 
Thank you for the input. Unfortunately I tried the changes you suggested and they don't work. I now get an error when running npm start containing the message 
Error in plugin 'sass'
Message:
src/assets/scss/app.scss
Error: File to import not found or unreadable: content
Parent style sheet: /Users/machadodesign/Documents/1 Working Docs/email_projects/bridgewave_connections/src/assets/scss/app.scss
on line 3 of src/assets/scss/app.scss
>> @import 'content';
^

 
 

Michael Machado commented on Michael Machado's post over 3 years

Also, when I run npm start the first line that loads is an error. Not sure if this is part of the problem or not but this is what it shows:
[15:26:33] Failed to load external module babel-register
 
[15:26:33] Requiring external module babel-core/register

Michael Machado commented on Michael Machado's post over 3 years

So I believe I have narrowed the problem down to Gulp. BrowserSync is updating the browser window each time I save, but the only thing that is updated is the index.html file I am working on. If I update anything in any of the scss files the only way I can get the updates to be reflected is if I force the app.scss file to reload by typing a space and then deleting it which allows me to save it.
Here are the contents of each of the files you asked for but I don't think the problem lies there.
index.html
---

subject: My First Email

<container>
<row class="collapse">
<columns small="12" large="12">
<img src="../assets/img/makingConnectionsMasthead640.jpg" alt="">
</columns>
</row>
<row>
<columns small="6" large="6"><p class="small-font">VOLUME 2, NUMBER 2</p></columns>
<columns small="6" large="6"><p class="text-right small-font">Quarterly Newsletter</p></columns>
</row>
<row>
<columns small="12" large="6">
<img src="../assets/img/rev2_stry1.jpg" alt=""><br>
<img class="center-img" src="../assets/img/Earthprint_Logo.png" alt="">
</columns>
<columns small="12" large="6">
<h4>Earthprint Turns to BridgeWave for “Best of Breed” Backhaul</h4>
<p>Earthprint Technologies, one of a consortium of 100% native-owned companies serving Native American and First Nations communities, designs and deploys carrier-grade, high performance wireless networks for remote and tribal communities. The company recently completed a 100‑radio network comprised of Wi-Fi distribution and an 80GHz BridgeWave ring for a customer in Arizona.</p>
<button href="#" class="small radius">MORE</button>
</columns>
</row>
<row class="light-gray collapse">
<columns small="12" large="12"></columns>
</row>
<row>
<columns small="12" large="6">

    &lt;img src="../assets/img/rev3_story2_img.jpg" alt=" "&gt;
&lt;/columns&gt;
&lt;columns small="12" large="6"&gt;
  &lt;spacer size="16"&gt;&lt;/spacer&gt;
    &lt;h4&gt;The Search for Virtual Fiber is Over!&lt;/h4&gt;
  &lt;p&gt;It wasn&rsquo;t long after news of the BridgeWave FL4G-3000 hit the streets that an impressive list of end customers began lining up to take advantage of its industry-leading backhaul capacity for fiber replacement, fiber extension, and fiber redundancy. They include one of the most highly regarded think tanks in the world, a prominent international monetary institution, a Fortune 200 metals manufacturer, a Federal agency, and Tier 1 carriers in Asia and Africa &ndash; all seeking the ultra-high capacity delivered by the FL4G‑3000.&lt;/p&gt;
  &lt;button href="#" class="small radius"&gt;MORE&lt;/button&gt;
&lt;/columns&gt;

</row>
<row class="light-gray collapse">
<columns small="12" large="12"></columns>
</row>
<row>
<columns small="12" large="6">
<spacer size="16"></spacer>
<img src="../assets/img/AdaptPath.jpg" alt="">
</columns>
<columns small="12" large="6">
<spacer size="16"></spacer>
<p class="top-head">FEATURE SPOTLIGHT</p>
<h4 class="head-w-top">BridgeWave AdaptPath™</h4>
<p>It wasn’t long after news of the BridgeWave FL4G-3000 hit the streets that an impressive list of end customers began lining up to take advantage of its industry-leading backhaul capacity for fiber replacement, fiber extension, and fiber redundancy. They include one of the most highly regarded think tanks in the world, a prominent international monetary institution, a Fortune 200 metals manufacturer, a Federal agency, and Tier 1 carriers in Asia and Africa – all seeking the ultra-high capacity delivered by the FL4G‑3000.</p>
<button href="#" class="small radius">MORE</button>
</columns>
</row>
<row class="light-gray collapse">
<columns small="12" large="12"></columns>
</row>
<row class="collapse partner-head">
<columns small="12"><spacer size="12"></spacer><h3 class="text-center partner-head">Channel Partner Corner</h3></columns>
</row>
<row class="blue_bkg">
<columns small="12" large="2">
<spacer size="16"></spacer>
<p>One word</p>
</columns>
<columns small="12" large="4">
<spacer size="16"></spacer>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus velit eveniet est odit doloribus minus, reprehenderit vitae excepturi numquam repellendus natus consectetur dolorem. Quam, voluptatem non aperiam rem voluptas sequi?</p>
</columns>
<columns small="12" large="6">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus velit eveniet est odit doloribus minus, reprehenderit vitae excepturi numquam repellendus natus consectetur dolorem. Quam, voluptatem non aperiam rem voluptas sequi?</p>
<button href="#" class="tiny">MORE</button>
</columns>
</row>
</container>

 
app.scss
@import 'settings';
@import 'foundation';
@import 'src/partials/content';
@import 'src/partials/header';

_content.scss
.center-img {
margin: 0 auto;
}
.text-right {
text-align: right;
}
.light-gray {
background-color: $light-gray;
}
.blue_bkg {
background-color: #C2DAFF;
}
.top-head {
margin-bottom:0px;
color: $primary-color;
}
.partner-head {
background-color: $secondary-color;

h3 {
    color: #ffffff !important;
    margin-bottom: 0;
}

}

 
_settings.scss
// Foundation for Emails Settings
// ------------------------------
//
// Table of Contents:
//
// 1. Global
// 2. Grid
// 3. Block Grid
// 4. Typography
// 5. Button
// 6. Callout
// 7. Menu
// 8. Thumbnail

// 1. Global
// ---------

$primary-color: #2199e8;
$secondary-color: #777777;
$success-color: #3adb76;
$warning-color: #ffae00;
$alert-color: #ec5840;
$light-gray: #f3f3f3;
$medium-gray: #cacaca;
$dark-gray: #8a8a8a;
$black: #0a0a0a;
$white: #fefefe;
$pre-color: #ff6908;
$global-width: 580px;
$global-width-small: 95%;
$global-gutter: 16px;
$body-background: $light-gray;
$container-background: $white;
$global-font-color: $black;
$body-font-family: Helvetica, Arial, sans-serif;
$global-padding: 16px;
$global-margin: 16px;
$global-radius: 3px;
$global-rounded: 500px;
$global-breakpoint: $global-width + $global-gutter;

// 2. Grid
// -------

$grid-column-count: 12;
$column-padding-bottom: $global-padding;

// 3. Block Grid
// -------------

$block-grid-max: 8;
$block-grid-gutter: $global-gutter;

// 4. Typographyse

// -------------

$global-font-weight: normal;
$header-color: inherit;
$global-line-height: 1.3;
$global-font-size: 14px;
$body-line-height: 17px;
$header-font-family: $body-font-family;
$header-font-weight: $global-font-weight;
$h1-font-size: 28px;
$h2-font-size: 24px;
$h3-font-size: 20px;
$h4-font-size: 16px;
$h5-font-size: 14px;
$h6-font-size: 12px;
$header-margin-bottom: 10px;
$paragraph-margin-bottom: 10px;
$small-font-size: 80%;
$small-font-color: $medium-gray;
$lead-font-size: $global-font-size * 1.25;
$lead-line-height: 1.6;
$text-padding: 10px;
$subheader-lineheight: 1.4;
$subheader-color: $dark-gray;
$subheader-font-weight: $global-font-weight;
$subheader-margin-top: 4px;
$subheader-margin-bottom: 8px;
$hr-width: $global-width;
$hr-border: 1px solid $medium-gray;
$hr-margin: 20px auto;
$anchor-text-decoration: none;
$anchor-color: $primary-color;
$anchor-color-visited: $anchor-color;
$anchor-color-hover: darken($primary-color, 10%);
$anchor-color-active: $anchor-color-hover;
$stat-font-size: 40px;

// 5. Button
// ---------

$button-padding: (
tiny: 4px 8px 4px 8px,
small: 5px 10px 5px 10px,
default: 8px 16px 8px 16px,
large: 10px 20px 10px 20px,
);
$button-font-size: (
tiny: 10px,
small: 12px,
default: 16px,
large: 20px,
);
$button-color: $white;
$button-color-alt: $medium-gray;
$button-font-weight: bold;
$button-margin: 0 0 $global-margin 0;
$button-background: $primary-color;
$button-border: 2px solid $button-background;
$button-radius: $global-radius;
$button-rounded: $global-rounded;

// 6. Callout
// ----------

$callout-background: $white;
$callout-background-fade: 85%;
$callout-padding: 10px;
$callout-margin-bottom: $global-margin;
$callout-border: 1px solid darken($callout-background, 20%);
$callout-border-secondary: 1px solid darken($secondary-color, 20%);
$callout-border-success: 1px solid darken($success-color, 20%);
$callout-border-warning: 1px solid darken($warning-color, 20%);
$callout-border-alert: 1px solid darken($alert-color, 20%);

// 7. Menu
// -------

$menu-item-padding: 10px;
$menu-item-gutter: 10px;
$menu-item-color: $primary-color;

// 8. Thumbnail
// ------------

$thumbnail-border: solid 4px $white;
$thumbnail-margin-bottom: $global-margin;
$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
$thumbnail-transition: box-shadow 200ms ease-out;
$thumbnail-radius: $global-radius;

 
 
 

Posts Followed

No Content

Following

    No Content

Followers

My Posts





My Comments

You commented on Michael Machado's post over 3 years

Thanks Corey, the link in your post is broken. Can you please repost the link?

You commented on Michael Machado's post over 3 years

Thanks Rafi, is there somewhere that explains the process of updating Ffe using npm? As someone that is new to using sass and a command line interface, I find the documentation to be pretty sparse.

You commented on Michael Machado's post over 3 years

Thanks Cory, that solved it. I have a long way to go in learning SASS but I'm liking what I see so far. Thanks for all your help.

You commented on Michael Machado's post over 3 years

Cory,
Here is a screen shot of the folder structure and the app.css file open on the right and the gulpfile on the left.
Mike

You commented on Michael Machado's post over 3 years

Cory,
 
Thank you for the input. Unfortunately I tried the changes you suggested and they don't work. I now get an error when running npm start containing the message 
Error in plugin 'sass'
Message:
src/assets/scss/app.scss
Error: File to import not found or unreadable: content
Parent style sheet: /Users/machadodesign/Documents/1 Working Docs/email_projects/bridgewave_connections/src/assets/scss/app.scss
on line 3 of src/assets/scss/app.scss
>> @import 'content';
^

 
 

You commented on Michael Machado's post over 3 years

Cory,
 
Thank you for the input. Unfortunately I tried the changes you suggested and they don't work. I now get an error when running npm start containing the message 
Error in plugin 'sass'
Message:
src/assets/scss/app.scss
Error: File to import not found or unreadable: content
Parent style sheet: /Users/machadodesign/Documents/1 Working Docs/email_projects/bridgewave_connections/src/assets/scss/app.scss
on line 3 of src/assets/scss/app.scss
>> @import 'content';
^

 
 

You commented on Michael Machado's post over 3 years

Also, when I run npm start the first line that loads is an error. Not sure if this is part of the problem or not but this is what it shows:
[15:26:33] Failed to load external module babel-register
 
[15:26:33] Requiring external module babel-core/register

You commented on Michael Machado's post over 3 years

So I believe I have narrowed the problem down to Gulp. BrowserSync is updating the browser window each time I save, but the only thing that is updated is the index.html file I am working on. If I update anything in any of the scss files the only way I can get the updates to be reflected is if I force the app.scss file to reload by typing a space and then deleting it which allows me to save it.
Here are the contents of each of the files you asked for but I don't think the problem lies there.
index.html
---

subject: My First Email

<container>
<row class="collapse">
<columns small="12" large="12">
<img src="../assets/img/makingConnectionsMasthead640.jpg" alt="">
</columns>
</row>
<row>
<columns small="6" large="6"><p class="small-font">VOLUME 2, NUMBER 2</p></columns>
<columns small="6" large="6"><p class="text-right small-font">Quarterly Newsletter</p></columns>
</row>
<row>
<columns small="12" large="6">
<img src="../assets/img/rev2_stry1.jpg" alt=""><br>
<img class="center-img" src="../assets/img/Earthprint_Logo.png" alt="">
</columns>
<columns small="12" large="6">
<h4>Earthprint Turns to BridgeWave for “Best of Breed” Backhaul</h4>
<p>Earthprint Technologies, one of a consortium of 100% native-owned companies serving Native American and First Nations communities, designs and deploys carrier-grade, high performance wireless networks for remote and tribal communities. The company recently completed a 100‑radio network comprised of Wi-Fi distribution and an 80GHz BridgeWave ring for a customer in Arizona.</p>
<button href="#" class="small radius">MORE</button>
</columns>
</row>
<row class="light-gray collapse">
<columns small="12" large="12"></columns>
</row>
<row>
<columns small="12" large="6">

    &lt;img src="../assets/img/rev3_story2_img.jpg" alt=" "&gt;
&lt;/columns&gt;
&lt;columns small="12" large="6"&gt;
  &lt;spacer size="16"&gt;&lt;/spacer&gt;
    &lt;h4&gt;The Search for Virtual Fiber is Over!&lt;/h4&gt;
  &lt;p&gt;It wasn&rsquo;t long after news of the BridgeWave FL4G-3000 hit the streets that an impressive list of end customers began lining up to take advantage of its industry-leading backhaul capacity for fiber replacement, fiber extension, and fiber redundancy. They include one of the most highly regarded think tanks in the world, a prominent international monetary institution, a Fortune 200 metals manufacturer, a Federal agency, and Tier 1 carriers in Asia and Africa &ndash; all seeking the ultra-high capacity delivered by the FL4G‑3000.&lt;/p&gt;
  &lt;button href="#" class="small radius"&gt;MORE&lt;/button&gt;
&lt;/columns&gt;

</row>
<row class="light-gray collapse">
<columns small="12" large="12"></columns>
</row>
<row>
<columns small="12" large="6">
<spacer size="16"></spacer>
<img src="../assets/img/AdaptPath.jpg" alt="">
</columns>
<columns small="12" large="6">
<spacer size="16"></spacer>
<p class="top-head">FEATURE SPOTLIGHT</p>
<h4 class="head-w-top">BridgeWave AdaptPath™</h4>
<p>It wasn’t long after news of the BridgeWave FL4G-3000 hit the streets that an impressive list of end customers began lining up to take advantage of its industry-leading backhaul capacity for fiber replacement, fiber extension, and fiber redundancy. They include one of the most highly regarded think tanks in the world, a prominent international monetary institution, a Fortune 200 metals manufacturer, a Federal agency, and Tier 1 carriers in Asia and Africa – all seeking the ultra-high capacity delivered by the FL4G‑3000.</p>
<button href="#" class="small radius">MORE</button>
</columns>
</row>
<row class="light-gray collapse">
<columns small="12" large="12"></columns>
</row>
<row class="collapse partner-head">
<columns small="12"><spacer size="12"></spacer><h3 class="text-center partner-head">Channel Partner Corner</h3></columns>
</row>
<row class="blue_bkg">
<columns small="12" large="2">
<spacer size="16"></spacer>
<p>One word</p>
</columns>
<columns small="12" large="4">
<spacer size="16"></spacer>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus velit eveniet est odit doloribus minus, reprehenderit vitae excepturi numquam repellendus natus consectetur dolorem. Quam, voluptatem non aperiam rem voluptas sequi?</p>
</columns>
<columns small="12" large="6">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus velit eveniet est odit doloribus minus, reprehenderit vitae excepturi numquam repellendus natus consectetur dolorem. Quam, voluptatem non aperiam rem voluptas sequi?</p>
<button href="#" class="tiny">MORE</button>
</columns>
</row>
</container>

 
app.scss
@import 'settings';
@import 'foundation';
@import 'src/partials/content';
@import 'src/partials/header';

_content.scss
.center-img {
margin: 0 auto;
}
.text-right {
text-align: right;
}
.light-gray {
background-color: $light-gray;
}
.blue_bkg {
background-color: #C2DAFF;
}
.top-head {
margin-bottom:0px;
color: $primary-color;
}
.partner-head {
background-color: $secondary-color;

h3 {
    color: #ffffff !important;
    margin-bottom: 0;
}

}

 
_settings.scss
// Foundation for Emails Settings
// ------------------------------
//
// Table of Contents:
//
// 1. Global
// 2. Grid
// 3. Block Grid
// 4. Typography
// 5. Button
// 6. Callout
// 7. Menu
// 8. Thumbnail

// 1. Global
// ---------

$primary-color: #2199e8;
$secondary-color: #777777;
$success-color: #3adb76;
$warning-color: #ffae00;
$alert-color: #ec5840;
$light-gray: #f3f3f3;
$medium-gray: #cacaca;
$dark-gray: #8a8a8a;
$black: #0a0a0a;
$white: #fefefe;
$pre-color: #ff6908;
$global-width: 580px;
$global-width-small: 95%;
$global-gutter: 16px;
$body-background: $light-gray;
$container-background: $white;
$global-font-color: $black;
$body-font-family: Helvetica, Arial, sans-serif;
$global-padding: 16px;
$global-margin: 16px;
$global-radius: 3px;
$global-rounded: 500px;
$global-breakpoint: $global-width + $global-gutter;

// 2. Grid
// -------

$grid-column-count: 12;
$column-padding-bottom: $global-padding;

// 3. Block Grid
// -------------

$block-grid-max: 8;
$block-grid-gutter: $global-gutter;

// 4. Typographyse

// -------------

$global-font-weight: normal;
$header-color: inherit;
$global-line-height: 1.3;
$global-font-size: 14px;
$body-line-height: 17px;
$header-font-family: $body-font-family;
$header-font-weight: $global-font-weight;
$h1-font-size: 28px;
$h2-font-size: 24px;
$h3-font-size: 20px;
$h4-font-size: 16px;
$h5-font-size: 14px;
$h6-font-size: 12px;
$header-margin-bottom: 10px;
$paragraph-margin-bottom: 10px;
$small-font-size: 80%;
$small-font-color: $medium-gray;
$lead-font-size: $global-font-size * 1.25;
$lead-line-height: 1.6;
$text-padding: 10px;
$subheader-lineheight: 1.4;
$subheader-color: $dark-gray;
$subheader-font-weight: $global-font-weight;
$subheader-margin-top: 4px;
$subheader-margin-bottom: 8px;
$hr-width: $global-width;
$hr-border: 1px solid $medium-gray;
$hr-margin: 20px auto;
$anchor-text-decoration: none;
$anchor-color: $primary-color;
$anchor-color-visited: $anchor-color;
$anchor-color-hover: darken($primary-color, 10%);
$anchor-color-active: $anchor-color-hover;
$stat-font-size: 40px;

// 5. Button
// ---------

$button-padding: (
tiny: 4px 8px 4px 8px,
small: 5px 10px 5px 10px,
default: 8px 16px 8px 16px,
large: 10px 20px 10px 20px,
);
$button-font-size: (
tiny: 10px,
small: 12px,
default: 16px,
large: 20px,
);
$button-color: $white;
$button-color-alt: $medium-gray;
$button-font-weight: bold;
$button-margin: 0 0 $global-margin 0;
$button-background: $primary-color;
$button-border: 2px solid $button-background;
$button-radius: $global-radius;
$button-rounded: $global-rounded;

// 6. Callout
// ----------

$callout-background: $white;
$callout-background-fade: 85%;
$callout-padding: 10px;
$callout-margin-bottom: $global-margin;
$callout-border: 1px solid darken($callout-background, 20%);
$callout-border-secondary: 1px solid darken($secondary-color, 20%);
$callout-border-success: 1px solid darken($success-color, 20%);
$callout-border-warning: 1px solid darken($warning-color, 20%);
$callout-border-alert: 1px solid darken($alert-color, 20%);

// 7. Menu
// -------

$menu-item-padding: 10px;
$menu-item-gutter: 10px;
$menu-item-color: $primary-color;

// 8. Thumbnail
// ------------

$thumbnail-border: solid 4px $white;
$thumbnail-margin-bottom: $global-margin;
$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
$thumbnail-transition: box-shadow 200ms ease-out;
$thumbnail-radius: $global-radius;

 
 
 

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content