Principles

We aim to provide the most accessible experience we can, because we firmly believe all humans should be able to use our product regardless of their input devices and method of traversal.

We follow these accessibility guidelines (PDF) Download as a baseline for development and design.

We also rely on the work of amazing folks that have contributed greatly to the web accessibility like:

• Boostrap Open in a new tab
• Gov.uk Open in a new tab
• Heydon Works Open in a new tab
• WebAIM Open in a new tab

NYP Framework is built using ITCSS principles, or the Inverted Triangle CSS. It's a CSS architecture that tries to solve some of the more difficult aspects of CSS, like it's global namespace, declarative nature that leads to collision and the inherit fragile nature of CSS inheritance.

ITCSS attempts to solve those problems with principles in structuring the way we write our CSS. It also embraces some of the peculiarities in CSS, like Kyle Simpson does with JavaScript Open in a new tab

The illustration above shows our project SCSS structure. The actual CSS happens at the generic level, with things like shared global CSS and resets. It moves down to elements, where we target specific things like base table styles or link styles.

Then, at objects we get into layout and structure (avoiding presentation). With components we get get that presentation layer and discrete user interface chunks. Finally we have the utilities layer for customization and variation without bloating our CSS.

Below are some useful guides, articles and projects written or developed by really smart people to help you with ITCSS:

• Manage large CSS projects with ITCSS Open in a new tab
• BEMIT: Taking the BEM Naming Convention a Step Further Open in a new tab
• inuitcss Open in a new tab

NYP Framework follows the CSS naming principles of BEM, or Block, Element, Modifier Open in a new tab . It's a front-end naming methodology developed by the people at Yandex. BEM is informative to developers about what particular pieces of markup are doing from the class name alone.

Harry Roberts Open in a new tab presents a good example of BEM principles, extracting the idea to a simple analogy:

.person {}
.person__hand {}
.person--female {}
.person--female__hand {}
.person__hand--left {}

Many others have done a much better job of explaining and covering BEM. Here's a few quick selections of quality learning material covering BEM:

• Key concepts of BEM methodology Open in a new tab
• BEM 101 Open in a new tab
• BEM & Atomic Design Open in a new tab

We're always trying to solve problems with CSS first and avoiding JavaScript implementations unless absolutely necessary or if it can be scaled and provides a significant-enough increase in usability.

JavaScript implementations are inherently more difficult and lead to more technical debt, and aren't always as portable to other frameworks or systems. CSS is the styling language of the web, so we use it whenever we can.

Sometimes, this principle can even come up in JavaScript solutions. A good example is smooth scrolling. If we're programmatically moving the user, we can enhance that experience with the scroll-behavior property in both CSS and JavaScript.

Take this trivial example:

if ('scrollBehavior' in document.documentElement.style) {
  window.scrollTo({
    top: position,
    behavior: 'smooth'
  });
} else {
  window.scrollTo(0, position);
}

In this example, we're relying on the native CSS scroll behavior to add smooth scrolling instead of relying on JavaScript animation. It's also a simplistic example of progressive enhancement Open in a new tab . If the browser doesn't support scrollbehavior, we simply rely on static scrollTo method to push the user down the page.