Nueva Handbook

The starter simplifies the access to your typo settings-maps with two mixins. app-typo-palette() & app-typo()

# You want to set typo format for an element directly from $app-typo-palette?

Use app-typo-palette() because it got direct access to the global $app-typo-palette.

.c-my-element{
  // Recommended Usage: Use this mixin app-typo-palette() 
  // only in your individual projects, because it has direct 
  // access to the global $app-typo-palette

  //Sets the style definitions of this format "xl" 
  // for small-up (no Media Query) straight from $app-typo-palette
  @include app-typo-palette($format: 'xl');

  // AND/OR
  //Sets the style definitions of this format "md" 
  //for large-up breakpoint straight from $app-typo-palette
  //Media Query is going to be generated - no need to set it here again
  @include app-typo-palette($format: 'md', $breakpoint: 'large-up');

  // OR
  //Sets the style definitions of all formats 
  //for all breakpoints, extra (format-)classes by breakpoint where generated
  //Media Queries are going to be generated - no need to set it here again
  @include app-typo-palette();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# You have set up subordinated typo maps to assign values from the $app-typo-palette to a specific use-case?

Good Idea, because now you are able to have all generated CSS & CSS wrapped in media queries managed by only changing the settings map. Use app-typo() - it will do the rest for you. No need to change the CSS manually.

//Set up a typo map
$my-component-title-typo-map:(
  //Assign formats available in `$app-typo-palette` by breakpoint
  //If you need more or less changes by breakpoint 
  //for this element, add or remove it
  small-up:      app-get-typo-map('small-up', 'sm'),
  large-up:      app-get-typo-map('large-up', 'md'),
);
1
2
3
4
5
6
7
8
9
  .c-my-component__title{
    //Sets all style definitions for all breakpoints defined in this typo-map 
    //Media Queries are going to be generated - no need to set them here again
    @include app-typo($my-component-title-typo-map);
    
    // AND/OR
    //Get the style only for a specific breakpoint defined in this typo-map
    //The only one Media Query is going to be generated 
    //Not recommended, but possible
    @include app-typo($app-typo-palette-body, 'large-up');
  }
1
2
3
4
5
6
7
8
9
10
11