Menu icon Foundation
Foundation 2 Custom SCSS file

Thank you for creating Foundation 2 it's great!.

Is there support for a custom SCSS file? I tried adding my own, but I just end up breaking the gulp script causing errors. Things like the font colors are too generic and there isn't any options for container padding, row padding or an inner container that could have padding. The spacer feature is great, but padding just removes, extra unecessary elements.

customscssemailpadding

Thank you for creating Foundation 2 it's great!.

Is there support for a custom SCSS file? I tried adding my own, but I just end up breaking the gulp script causing errors. Things like the font colors are too generic and there isn't any options for container padding, row padding or an inner container that could have padding. The spacer feature is great, but padding just removes, extra unecessary elements.

Corey Schaaf about 3 years ago

Assuming you're using the scss version of FFE 2 - you can absolutely add your own classes. However, in the INKY Markup, you can't add styles="" directly to the <row> <columns> tags.  

You have a few choices, you can create a class and drop it on either the row or the columns

<!-- add classes to the wrapper -->
<wrapper>
    <!-- add classes to the row -->
    <row class="your-class-here">
        <-- add classes to the column-->
        <columns class="your-class-here">
            <!-- or add classes to a nested div -->
            <div class="your-class-here" >
            </div>
            <!-- or add your styles directly to a div -->
            <div style="margin-top:10px;">
            </div>
        </columns>
    </row>
</wrapper>

You can also write your own table html inside a column and add your styles directly to the tables, tr, th, td etc ... 

When creating your own classes, you need to navigate to the app.scss file.  

Inside that file, you'll want to reference the new file that containers your custom classes. 

@import 'settings';
@import 'foundation-emails';
@import 'my-custom-styles'

notice that i left the semi-colon off that last line - that's very important as it may be what was causing your build to break when you tried to inline. 

Next, make sure your file (in my example my-custom-styles) is saved inside the scss folder.  You'll want to make sure you save the file with and underscore in front of the name.  So based on my example, my file name woudl be 

_my-custom-styles.scss

 when you have those files created, you're build should work assuming your sass syntax is correct and you don't have anything else breaking your build. 

 

David Diomede about 3 years ago

I added a import file @import 'variables'. The file contains SCSS variables. The script did not break which is a good thing. None of the variables or styles were not recognized or processed into the css file. It only works if I add the variables to the settings file, which is not ideal. Here s a sample from my variables file:

 

// Basic Colors


$grey-dark:				#272727 !default;
$grey-medium:			#646569 !default;
$grey-light:			#a7a7a8 !default;
$grey-lighter:			#d9d8d5 !default;

Corey Schaaf about 3 years ago

The order you reference the variables is important. For example, you want to declare all your variables first and then write classes that reference those variables. 

so when you do your import, make sure the order in which you reference variables follows that hierarchy. 

Also, I noticed your variables above have !default; at the end of them. Default is the declaration that states this is the default value if no other value has been assigned. That same logic applies to hierarchy for default values. Always make sure they are declared first and used second. 

How is this useful? It allow us to create fall backs while also using customization. 

/* defaults */
$module_height: 20px !default;  /* this is the default value */
$module_bgcolor: #ccc !default; /* this is a default value */

/* custom vars */
$module_height: 18px; /* since the variable $module_height has already been declared, this will override the default value */


.module {
  height: $module_height; /* height: 18px; since another value was declared for module_height */
  background: $module_bgcolor; /* background: #ccc; because no other background was specified.*/
}

 

David Diomede about 3 years ago

This is great! Exactly what I was looking for. Thank you.