Setting up your 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:

/**
 * YOUR STYLESHEET
 *
 */

// 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


/**
 * COMPONENTS
 *
 */

// NYP Framework Core
@import "nyp-core/components/all";

// Add your own components here

/**
 * UTILITIES (TRUMPS)
 *
 */

@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');
  }
}

Spacing

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

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

Container

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

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

Grid

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.