base-scss v0.1.3

base-scss v0.1.2

The SCSS I use on every project. Lightweight (6kb compressed) and minimal. Resets some CSS and provides a basic 12-column grid.

Install

npm install base-scss --save-dev

Use

@import node_modules/base-scss/main.scss; into your main SCSS file.

Grid

The 12-column grid is used according to screen size.

• .col-xxs-#: small mobile
• .col-xs-#: mobile
• .col-s-#: tablet
• .col-m-#: latop
• .col-b-#: desktop
• .col-xb-#: large desktop

When used in a stack an element dynamically changes dependant on screen size.

<div class="container col-xs-12 col-s-4 col-m-3"></div>

Default screen sizes

• Small mobile: $screen-sm 320px
• Mobile: $screen-m 480px
• Mobile landscape: $screen-m-l 481px
• Tablet portrait: $screen-t-p 768px
• Tablet landscape: $screen-t-l 1024px
• Small laptop: $screen-sl 1025px
• Laptop: $screen-l 1280px
• Desktop: $screen-d 1920px
• Big desktop: $screen-bd 2300px