Overwriting the $breakpoints SCSS map. about codyhouse-framework HOT 4 CLOSED

Hi there 👋 I'd suggest to create a _breakpoints.scss file inside the 'custom-style' folder, and override the SASS maps with the following snippet:

$breakpoints: (
  xs: 32rem, // ~512px
  sm: 48rem, // ~768px
  md: 64rem, // ~1024px
  lg: 80rem, // ~1280px
  xl: 90rem  // ~1440px
);

Also, don't forget to import the new _breakpoints.scss file into the _custom-style.scss file.

The col classes take the values from the SASS map, therefore they should update automatically if you edit the SASS map.

from codyhouse-framework.

Hi,

When you take a look at https://github.com/CodyHouse/codyhouse-framework/blob/master/main/assets/css/base/_breakpoints.scss#L7. The custom SASS map that i create will be overwritten again by the declaration of the SASS MAP inside this file. So this makes it impossible for me to import the _base.scss from the framework and build upon it further.

For example, the following construction will not work:

@import '../../node_modules/codyhouse-framework/main/assets/css/base';
@import '_custom-style';

from codyhouse-framework.

Hi @rlaven thanks for the clarification. I see your point. So the solution could be:

1. define your custom $breakpoints before importing the base style:
   https://www.dropbox.com/s/04wh88wzc6d5ejs/Screenshot%202019-08-26%2012.37.56.png?dl=0
2. In the base/_breakpoints.scss, you would need to add a !default to the $breakpoints declaration:
   https://www.dropbox.com/s/kk9o7jtonyxrgvt/Screenshot%202019-08-26%2012.39.51.png?dl=0

We'll include this change in the next release of the framework so that you won't need to manually update the framework files anymore. Let me know if you have any questions.

from codyhouse-framework.

Hi @claudia-romano,

Yes this is exactly as I would imagine it to work. Looking forward to the next release. Thanks for clarifying.

from codyhouse-framework.