When you would like to override the default responsive nature of a card you can use the .card-skinny class on a .card element to keep everything vertically stacked as it would be on xs screens.

#### Video in Card

Any

$3

Common spacing declarations can be applied through responsive utility classes.

#### Margins

We use a bank of preset values called margin numbers (1, 2, 3, 4, 5, 6) to define margins. Smaller margin numbers define smaller margin values, larger numbers provide larger values.

- .margin-: include a number (1-6) to apply a margin to all sides on all breakpoints.
- .margin-t-: include a number (1-6) to apply a margin to the top side on all breakpoints.
- .margin-r-: include a number (1-6) to apply a margin to the right side on all breakpoints.
- .margin-b-: include a number (1-6) to apply a margin to the bottom side on all breakpoints.
- .margin-l-: include a number (1-6) to apply a margin to the left side on all breakpoints.

Ex:

`html
// Apply a $margin-3 to the left side on all breakpoints


In addition to preset margin numbers, we use breakpoint prefixes to define a range for the styling declarations to be applied to (xs, sm, md, lg, xl).

- .margin--: include a number (1-6) and a breakpoint prefix to apply a margin to all sides on a specific breakpoint and up.
- .margin-t--: include a number (1-6) and a breakpoint prefix to apply a margin to the top side on a specific breakpoint and up.
- .margin-r--: include a number (1-6) and a breakpoint prefix to apply a margin to the right side on a specific breakpoint and up.
- .margin-b--: include a number (1-6) and a breakpoint prefix to apply a margin to the bottom side on a specific breakpoint and up.
- .margin-l--: include a number (1-6) and a breakpoint prefix to apply a margin to the left side on a specific breakpoint and up.

`
margin-number // applies to all sides, all breakpoints
margin-sideprefix-number // applies to specific side, all breakpoints
margin-sideprefix-number-breakpointprefix // applies to specific side at a specific breakpoint and up
`

`html
// Apply a $margin-3 to the top by default on extra small screens and up
// Then, set $margin-6 to the top on medium screens and up


`
public/scss/classes/_forms.scss
`

$3

Buttons elements also come with default styling applied. You can further customize buttons with button utility classes.

`
public/scss/classes/_buttons.scss
`

- input[type="submit"] elements are automatically styled to look like a submit button.
- You can also style a container to look like a button by applying the .btn class to any container.

$3

All necessary media queries are provided through mobile-first breakpoint range variables.

`scss
.element {
padding: $padding-2;
@media #{$breakpoint-sm-up} {
padding: $padding-3;
}
@media #{$breakpoint-md-up} {
padding: $padding-4;
}
@media #{$breakpoint-lg-up} {
padding: $padding-5;
}
@media #{$breakpoint-xl-up} {
padding: $padding-6;
}
}

`

If you want to target one specific breakpoint range only, you can use these more specific breakpoint range variables that do not carry styles up:

`scss
.element {
padding: $padding-2;
@media #{$breakpoint-xs-only} {
padding: $padding-3;
}
@media #{$breakpoint-sm-only} {
padding: $padding-4;
}
@media #{$breakpoint-md-only} {
padding: $padding-5;
}
@media #{$breakpoint-lg-only} {
padding: $padding-6;
}
}

`

$3

#### Header

The header is fairly simple. Just start with a

element, give it a child container with a class .header-content-well, and then nest .header-logo and .header-nav inside the content well.

`html



`

#### Notifications (header nav)

In order to add an unread notifications bubble to the "Notifications" link in the header, give the link element a class of .link-with-unread. Next, nest a with a class .unread inside the .

`html




• 
  
  8
  Notifications
  
  


• Class Contacts


• Support


• Logout


`

#### Modals

Modals require 4 things:
- An outer container with class .modal
- An inner container with class .modal-card
- A nested element with class .modal-card-close
- Content

`html


Modal Title

Lorem ipsum, dolor set modal content.


`

Modal styles are also provided for the following contexts. Just add the corresponding class to the outer .modal element.

- Warning: .modal-warn
- Error: .modal-error
- Success: .modal-success

$3

We would like for BCS Next Styles to be versatile and to not require much customization on a per-project basis. In the case that you do find yourself writing custom classes, try to either write utility based classes (like text-bold which applies one declaration) or to namespace classnames based on their ancestors and descendants.

For example:
.card > .card-title > .card-title-date

This way we can take certain applicable custom classes and easily add them to the library.

Development / Demo Page

$3

First, make sure you have Nodemon installed locally. Next, clone the repo, install dependencies, and start the server.

`
git clone https://github.com/coding-boot-camp/bcs-next-styles.git
cd bcs-next-styles
npm install
npm start
`

- Navigate to http://localhost:8080/ in your browser.

$3

#### Build JS and CSS

`
npm run build
`

#### Watch JS and CSS

`
npm run watch
``