Clay Base provides all the features and components your theme needs and inherits Bootstrap’s styles. As a result, Clay Base is fully compatible with third party themes that leverage Bootstrap’s Sass variable API.
The Styled Theme uses Clay Base to provide its styles and components. Therefore, as a best practice, you should use the Styled base theme to integrate third party themes.
Follow these steps to integrate a third party theme with Clay Base:
Create a new theme with the Styled Theme as its base. This is the default base theme for newly created themes, so no further action is required. This provides the Clay Base files you need.
In the theme’s
/src/cssfolder (legacy ant themes:
/_diff/css) add a file named
font_awesome.scsswith the code below and save:
// Icon paths $FontAwesomePath: "font-awesome/font"; @import "font-awesome/scss/font-awesome";
In that same folder, add a file named
_clay_variables.scss. All your Atlas, Bootstrap, and Clay Base variable modifications must be placed in this file.
Create a folder inside
/src/css(for legacy ant themes,
/_diff/css) that contains your third party theme (e.g.
Copy the CSS contents of the theme to the folder you just created.
_clay_variables.scss, import the file containing the theme variables. For example,
_custom.scss, import the file containing the CSS. For example,
Deploy your theme with
gulp deploy(for legacy ant themes, use
Now you know how to integrate third party themes with Clay Base!