Menu icon Foundation
How can I get Zero Sass / CSS?

How do I remove the base CSS from an email?

I removed everything from the SASS file, the layout, the page and I still get CSS when I run Foundation build.

The problem is that these values are not wanted in the final email. I have copied the styles back into my SASS file and still these styles do not change. How can I get rid of them?

JSFiddle: https://jsfiddle.net/wallyglenn/p751tc6r/

 

    <style>
@media only screen {
  html {
    min-height: 100%;
    background: #f3f3f3;
  }
}

@media only screen and (max-width: 596px) {
  .small-float-center {
    margin: 0 auto !important;
    float: none !important;
    text-align: center !important;
  }

  .small-text-left {
    text-align: left !important;
  }

  .small-text-right {
    text-align: right !important;
  }
}

@media only screen and (max-width: 596px) {
  table.body img {
    width: auto;
    height: auto;
  }

  table.body center {
    min-width: 0 !important;
  }

  table.body .container {
    width: 95% !important;
  }

  table.body .columns {
    height: auto !important;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  table.body .columns .columns {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  table.body .collapse .columns {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  th.small-6 {
    display: inline-block !important;
    width: 50% !important;
  }

  th.small-12 {
    display: inline-block !important;
    width: 100% !important;
  }

  .columns th.small-12 {
    display: block !important;
    width: 100% !important;
  }

  table.menu {
    width: 100% !important;
  }

  table.menu td,
  table.menu th {
    width: auto !important;
    display: inline-block !important;
  }

  table.menu.vertical td,
  table.menu.vertical th {
    display: block !important;
  }

  table.menu[align="center"] {
    width: auto !important;
  }
}
</style>

 

 

Sasscsshtml

How do I remove the base CSS from an email?

I removed everything from the SASS file, the layout, the page and I still get CSS when I run Foundation build.

The problem is that these values are not wanted in the final email. I have copied the styles back into my SASS file and still these styles do not change. How can I get rid of them?

JSFiddle: https://jsfiddle.net/wallyglenn/p751tc6r/

 

    <style>
@media only screen {
  html {
    min-height: 100%;
    background: #f3f3f3;
  }
}

@media only screen and (max-width: 596px) {
  .small-float-center {
    margin: 0 auto !important;
    float: none !important;
    text-align: center !important;
  }

  .small-text-left {
    text-align: left !important;
  }

  .small-text-right {
    text-align: right !important;
  }
}

@media only screen and (max-width: 596px) {
  table.body img {
    width: auto;
    height: auto;
  }

  table.body center {
    min-width: 0 !important;
  }

  table.body .container {
    width: 95% !important;
  }

  table.body .columns {
    height: auto !important;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  table.body .columns .columns {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  table.body .collapse .columns {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  th.small-6 {
    display: inline-block !important;
    width: 50% !important;
  }

  th.small-12 {
    display: inline-block !important;
    width: 100% !important;
  }

  .columns th.small-12 {
    display: block !important;
    width: 100% !important;
  }

  table.menu {
    width: 100% !important;
  }

  table.menu td,
  table.menu th {
    width: auto !important;
    display: inline-block !important;
  }

  table.menu.vertical td,
  table.menu.vertical th {
    display: block !important;
  }

  table.menu[align="center"] {
    width: auto !important;
  }
}
</style>

 

 

Rafi Benkual over 2 years ago

Why do you want to remove the CSS?

Are you trying to not use any of Foundation's styles?

You an try removing the styles comment in the layout

<!-- <style> -->

alternatively, comment out the inline pipe in the gulpfile

.pipe($.replace, '<!-- <style> -->', `<style>${mqCss}</style>`)
    .pipe($.replace, '<link rel="stylesheet" type="text/css" href="css/app.css">', '')

Wally Glenn over 2 years ago

Thanks Rafi.

I have an email that on a mobile device needs the width of images to go edge-to-edge. 

It looks to me like I need to change this specific setting:

@media only screen and (max-width: 596px) {

	table.body .container {
		 width: 95% !important;
	}
}

I have tried setting it to width: 100%. Every time I edit this on my custom SASS, it reverts back to width: 95%.

I am trying to troubleshoot where that's coming from, fix it and add back the rest of my SASS files.

To troubleshoot, I created a new scss file with no values to see what would show up when I ran 'foundation build'.

Even though there is no link to the foundation scss files, css values are showing up.

If you have an idea how I can edit those values in the JSFiddle, it would be really great. Then I can really move forward.

Wally Glenn over 2 years ago

siphon or siphon-media-query pulls values from _template.scss, even if you don't link the file to your sass.

Are there other files that get automatically pulled in? 

It's really annoying because for some reason the values are given precedence over my SASS files. As an example, I don't want a 95% width, f3f3f3 is not a brand color and I don't need a 16px padding, but those values cannot be overwritten in SASS and that's sloppy.

    .pipe($.replace, 'width: 95% !important', 'width: 100% !important')

    .pipe($.replace, 'padding-right: 16px !important;', '')

    .pipe($.replace, 'padding-left: 16px !important;', '')

 

    .pipe($.replace, 'background: #f3f3f3;', '')

How can I identify which SASS files are used automatically and is there a way to stop this and still create a style sheet with my custom values?

Brinto Shalin over 2 years ago

Thank you for all the replies..It was really helpful for me to fix on my home care in tampa site