Nueva Handbook

This is the level of writing only global Sass variables. This will/should not produce any CSS of course.

# Directory Structure

/1_settings/
   /_/
        _path.settings.scss
        /breakpoints/
            _breakpoints/breakpoints-sizes.settings.scss
            _breakpoints/breakpoints-orientation.settings.scss
        _typo.settings.scss
        _color.settings.scss
        _grid.settings.scss
        _button.settings.scss
        _form.settings.scss
        _iconfont.settings.scss //if you are using iconfonts
        _layout.settings.scss //optional
        _decoration.settings.scss //optional
        _ease.settings.scss //optional

    _app.settings.scss
    _foundation.settings.scss
    _settings.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

#

# Naming

The underlying concept of naming SASS variables is:

$app-[filename]-[cssproperty-pseudoclass-state-element-semantics]

//e.g. typo.settings.scss
$app-typo-text-selection-color : $app-color-primary;
1
2
3
4
  • Where app is the prefix to determine if the variable is global and belongs to our app (not third-party settings).
  • Where [filename] is the name of the file in this settings folder where the variable is defined.

# » color.settings

App-wide color palette. e.g $app-color-primary: mediumpurple;

# » typo.settings

App-wide typo definitions and configurations for native elements, e.g. Body, H1-H6.

The Typo Palette: This is where you can define different sets(formats) of typo definitions for each breakpoint available in your breakpoint settings.

Please make sure, that the defined breakpoint names are available in your breakpoint settings. Otherwise it will throw a warning, that this query doesn't exist.


$app-typo-palette: (
  //breakpoint
  small-up: (
    //format
    sm : (
      //definition
      font-size: 16px,
      line-height: 25px
    ),
    //format
    lg: (
      //definition
      font-size: 50px,
      line-height: 55px
    )
  ),
  //breakpoint
  large-up: (
    //format
    sm : (
      //definition
      font-size: 10px,
      line-height: 15px
    ),
    //format
    lg: (
      //definition
      font-size: 150px,
      line-height: 155px
    )
  )
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

Subordinated Typo Maps: These maps refer "The Typo Palette". They assign a specific format by breakpoint from the global palette to a determined element or use-case. So this is a more specific settings layer to describe the usage of typo formats from the abstract palette.

e.g. The Starter delivers subordinated typo maps for Headlines.

$app-typo-map-h1:(
  small-up:      app-get-typo-map($breakpoint: 'small-up', $format: 'xl'),
  large-up:      app-get-typo-map('large-up', 'xl'),
);
1
2
3
4

OMG! How to use this? Using typo settings in your CSS Code

# » breakpoints[-sizes].settings

Defined breakpoint sizes matching viewport sizes of common devices and defined media-query range names.

//Sizes

$app-breakpoints-sizes: (
    small: 0, //portrait phones, less than 576px
    medium: 576px, //landscape phones, 576px and up
    large: 768px,  //tablets, 768px and up
    xlarge: 992px, //desktops, 992px and up
    xxlarge: 1200px //extra large desktops, 1200px and up
);
1
2
3
4
5
6
7
8
9
//Media Query Range Names

$app-breakpoints-mqs: (
  small-up: $small-up, //mandatory - do not change this
  small-only: $small-only,
  medium-up: $medium-up,
  medium-only: $medium-only,
  large-up: $large-up,
  large-only: $large-only,
  xlarge-up: $xlarge-up,
  xlarge-only: $xlarge-only,
  xxlarge-up: $xxlarge-up,
  xxlarge-only: $xxlarge-only,
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Be aware that when you change breakpointsizes that they need to refer to screensizes of real device-groups. They are not just random pixel values.

Watch out changing media-query-range-names. At worst you have to update all the settings-maps and media-queries in CSS Code that referring to these. It is not recommended to do this.

These are all mobile-first queries. That means they go bottom up. So first you need to define styles for all viewport sizes without any query. When this element should change at a viewport size "768px" (large-up) you need to override only this specific property by using the "large-up" query. And again because this is mobile-first, that large-up query matches the large screen and higher screen-sizes.

OMG! How to use this? Using Media Queries in your CSS Code

# » grid.settings

You guess it what is happening here.

Defining your grid settings - the often recurring adjustment in every project. But here it is important to know, that the Starter comes with an option to either using Foundation as a grid framework or the custom built-in grid.

# Foundation or Custom Built-in Grid?

No Matter what option you choose, here is the only place where you are able to adjust the settings. These settings are used in _foundation.settings.scss and also in our custom-grid mixins & css-modules.

The common pieces of the both grid systems are:

//the max-width of a grid container
$app-grid-container-width: app-px-to-rem(1270px);

//the padding on the left/right side of the grid container to viewport edges
$app-grid-container-offset: (
        small: 30px,
        medium: 30px,
        large: 50px
);

//the grid column count
$app-grid-column-count: 12;

//the grid gutter between each column
$app-grid-column-gutter: (
        small: 15px,
        medium: 15px,
        large: 15px,
        xlarge: 30px,
        xxlarge: 30px
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# » form.settings

Common form styles that need to be adjusted in every single project. By default they are used to style native form elements and referenced in the elements layer under 5_elements/_/form-fields.

e.g. Border of an input field

$app-form-input-border: 1px solid $app-color-lightgrey;
1

# » button.settings

Common button styles that nee to be updated every time you start with an new project. These settings are applied to native button elements and the base-button component.

$app-button-radius: 4px;
$app-button-border-width: 2px;
$app-button-padding: 1em 2em;
$app-button-min-width: auto;
$app-button-font-size:(
  small-up:      app-get-typo-map('small-up', $format: 'sm')
);

//Colors
//Primary
$app-button-colors-primary: (
  bg-color: $app-color-primary,
  bg-color-hover: $app-color-primary-light,
  color: $app-color-white,
  color-hover: $app-color-white,
  border-color: $app-color-primary,
  border-color-hover: $app-color-primary-light
);

//Secondary
$app-button-colors-secondary : (
  bg-color : $app-color-secondary,
  bg-color-hover : $app-color-secondary-light,
  color : $app-color-white,
  color-hover : $app-color-white,
  border-color : $app-color-secondary,
  border-color-hover : $app-color-secondary-light
);

//..
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# » iconfont.settings

Just in case you have set up you project using an iconfont by setting `APP_SVG_ICONS = false this file will be auto created. If you are using SVG Icons - you can still leave this file included.

This settings file is going to be generated by the webfonts generator. If you want to edit the template: see plugins/iconfont/scss.hbs.

# » layout.settings

This is the place where you can define extra layout variables.

e.g. Section Margins:

$app-layout-section-margins: (
    small-up:      40px,
    large-up:      80px,
);
1
2
3
4

These settings are currently not in use and optional.

# » decoration.settings

You need to define global decoration settings, e.g. a global box-shadow? Here we go:

$app-decoration-box-shadow: 0 0 0 1px rgba($app-color-black, 0.2);
1

These settings are currently not in use and optional.

# » ease.settings

Common easings (penner's functions) defined here. eg.

$app-ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
1

These settings are currently not in use and optional.