Core Sass, fonts and images for Marks and Spencer
The library exposes the following paths:
Install the module:
npm install fear-core-ui --save
Add the following to the gulp sass compile file.
var fearCoreUI = ;;
The following variables need to be set
Copy fear-core-ui assets to your working directory
var fearCoreUI = ;gulp;
Note that the variables set in step 3 should correspond to the location of the assets copied in step 4.
You can now reference any sass file.
fear-core-ui/base contains all the variables, functions and mixins in the library.
You can import this multiple times in your SASS code.
fear-core-ui/extends contains all the extends rules.
This should be imported once and ONLY once per generated CSS file. If you import it more than once per generated CSS file you will have duplicate CSS rules.
We want to make sure that unnecessary CSS is not imported to consuming projects.
The following can be exposed through aggregate files:
This can be done because the sass code in these files do not add CSS unless mixins / extends are explicitly called from the consuming code.
When a sass file contains direct CSS it needs to consumed through an explicit import.
i.e. If I only wanted to use the
buttons.sass component. Importing an aggregate
which included all the components CSS. That would create bloat and unused CSS being included in the consuming project.
Example: The buttons components contains direct CSS and must be imported through a direct import and not an aggregate sass file.
assets |- fonts |- images sass
item.scss - item // directory |- _variables.scss |- _extends.scss |- _functions.scss |- _mixins.scss |- _module_itemA.scss |- _module_itemB.scss
|- layouts |- _grid.scss |- grid |- _variables.scss |- _mixins.scss |- _module_grid.scss |- _zindex.scss |- normalize |- _module_mns-normalize.scss |- _module_normalize.scss |- typography |- ui-pattern |- _buttons.scss |- buttons |- _mixins.scss |- _module_icons.scss |- _module_buttons.scss |- utilites |- _mixins_measurements.scss _colors.scss _sprites.scss _normalize.scss
The mns-icons fonts are located in the
lib/assets/fonts directory. The font directory contains the generated mns-icon fonts:
mns-icons folder you will find the settings file (
selection.json) used by icomoon and a demo project to serve up and test the fonts:
The following steps will guide you through the process of adding icons to the mns-icon font
demo.htmlfile in the demo-files folder.
lib/assets/fontsand the demo files to the
lib/sass/fear-core-ui/ui-pattern/_extends_content.scssand give it a proper sass variable name
npm test runs eslint
eslint tasks and sass lint