Skip to main content

Setting up your SCSS

    Setting up your SCSS

    Import and configure NYP Framework Core in your project with SCSS.


    SCSS Configuration

    Unlike a framework like Bootstrap, NYP Framework is intended to be used as a SCSS framework to be integrated directly into your project. This way, you can maintain the integrity of ITCSS principles as you author your CSS. Instead of using a .css file, include NYP Framework directly in your SCSS build process.

    Default Configuration

    Below is the default boilerplate for to get up and running with NYP Framework Core using the default settings. NYP Framework Core will automatically install the following dependencies:

    // NYP Framework Core
    $nyp-font-path: '../fonts/TheSans';
    @import "nyp-core/nyp-core";
     * OBJECTS
    // NYP Framework Core
    @import "nyp-core/objects/all";
    // Add your own objects here
    // NYP Framework Core
    @import "nyp-core/components/all";
    // Add your own components here
    @include nyp-type-classes; // Create NYP Framework Type classes here, treate as utility
    @import "nyp-core/utilities/all";
    // Add your own utilities here

    Conventions and Defaults

    Writing CSS

    Avoid nesting whenever possible and follow the BEM syntax. This helps us avoid complications of specificity, allows us to reliably use our utilities and to override when needed with modifiers.

    .c-foobar {
      background: nyp-color('gray', 'dark');
      padding: $g-spacing;
    .c-foobar__title {
      @include nyp-type('heading', 'h3');
    .c-foobar--big {
      padding: $g-spacing-lg;
      .c-foobar__title {
        @include nyp-type('heading', 'h2');


    Spacings are added via global SCSS variables $g-spacing with an optional size modifier, $g-spacing-[modifier]. Units are all sized with rem.

    When you see modifiers with -xl on components or objects, they are directly corresponding to a spacing unit.

    xxs 0.25rem 4px (at 16px browser default))
    xs 0.5rem 8px
    sm 1rem 16px
    None $g-spacing 1.5rem 24px
    md 2rem 32px
    lg 3rem 48px
    xl 4rem 64px
    xxl 5rem 80px
    xxxl 6rem 96px
    .c-foobar {
      padding: $g-spacing-sm;
    .c-foobar__title {
      margin: 0 0 $g-spacing-xxs;


    Breakpoints are sized xs - xxl. You'll often also find classes like o-grid__item-6@sm or u-d-block@xl where the @ always signifies a breakpoint condition.

    xs 0px
    sm 480px
    md 760px
    lg 1008px
    xl 1280px
    xxl 1440px
    .c-foobar {
      padding: $g-spacing-sm;
      @include mq(lg) {
        padding: $g-spacing;

    SCSS Tools

    NYP Framework comes with some tools and mixins for general purpose use when authoring SCSS. You can review them in our repository or in nyp-core/tools.

    Two other major tools you'll utilize in NYP Framework are NYP Colors and NYP Type which both come with their own mixins.

    Customizing NYP Framework

    NYP Framework's goal is partially to create consistency in user interface design across projects, so it ships without many configuration variables you may be used to seeing in frameworks. NYP Framework is specific and intentional about it's design principles and is not meant to be a general purpose library. However, NYP Framework does comes with some configurable options:

    Spacing Units

    You can configure the spacing options used within NYP Framework but it will always be based off the baseline unity of 0.5rem (8px when the standard 16px font is used in a browser).

    // Spacing Units
    $g-spacing-xxs-unit:  0.5 !default;
    $g-spacing-xs-unit:   1 !default;
    $g-spacing-sm-unit:   2 !default;
    $g-spacing-unit:      3 !default;
    $g-spacing-md-unit:   4 !default;
    $g-spacing-lg-unit:   5 !default;
    $g-spacing-xl-unit:   6 !default;
    $g-spacing-xxl-unit:  10 !default;
    $g-spacing-xxxl-unit: 12 !default;
    // Spacings
    $g-spacing-xxs:  $g-baseline * $g-spacing-xxs-unit !default;   // 4px
    $g-spacing-xs:   $g-baseline * $g-spacing-xs-unit !default;    // 8px
    $g-spacing-sm:   $g-baseline * $g-spacing-sm-unit !default;    // 16px
    $g-spacing:      $g-baseline * $g-spacing-unit !default;       // 24px
    $g-spacing-md:   $g-baseline * $g-spacing-md-unit !default;    // 32px
    $g-spacing-lg:   $g-baseline * $g-spacing-lg-unit !default;    // 48px
    $g-spacing-xl:   $g-baseline * $g-spacing-xl-unit !default;    // 64px
    $g-spacing-xxl:  $g-baseline * $g-spacing-xxl-unit !default;   // 80px
    $g-spacing-xxxl: $g-baseline * $g-spacing-xxxl-unit !default;  // 96px


    The default max-width container is 1280px, but you can override by setting the variable below.

    // Container settings
    $g-container-max-width: 1280px !default;


    By default we use the large spacing unity for our grid, and use half that unity on mobile. By default, this equates to 16px gutters by default and 32px gutters on > lg screens.

    // Grid settings
    $grid-gutter-width: $g-spacing-lg !default;
    $grid-columns: 12 !default;
    // We enable the NYP Framework grid by default, for BEM naming syntax and mobile/desktop
    // gutters (vs Bootstrap which has a single gutter size across all viewports).
    $enable-nyp-grid: true !default; // NYP Framework grid classes enabled by default.