Aspect-sass NPM

aspect-sass

aspect-sass is a lightweight, responsive and modern SASS framework.

Lightweight (~90KB minified) robust SASS/CSS to kickstart your projects
Flexbox-based, responsive and mobile-friendly layout
Modern optional elements to re-use

If you enjoy using 'aspect-sass', please consider donating via Paypal for the further development.

Installation

npm install aspect-sass --save-dev

On Import

You can easily @import on your favorite Webpack JS framework from the default node_modules folder.

// webpack.base.conf.js
...
  resolve: {
    ...
    alias: {
      ...
      aspect: resolve('node_modules/aspect-sass/src/aspect')
    }
  },
...

Alias shortcuts can then be used to @import the necessary files.

...
<style lang="sass">
// core elements
// always @import _functions.scss at first
@import '~aspect/core/functions'
// and you may @import your custom _variables.scss on second from your project assets
@import '~assets/styles/variables'
@import '~aspect/core/mixins'
@import '~aspect/core/animations'
@import '~aspect/core/reboot'
@import '~aspect/core/layout'
@import '~aspect/core/typography'
@import '~aspect/core/tables'
@import '~aspect/core/media'
@import '~aspect/core/forms'
@import '~aspect/core/buttons'
@import '~aspect/core/navs'
@import '~aspect/core/utilities'

// optional elements
@import '~aspect/elements/alerts'
@import '~aspect/elements/avatars'
@import '~aspect/elements/badges'
@import '~aspect/elements/breadcrumbs'
@import '~aspect/elements/calendars'
@import '~aspect/elements/dropdowns'
@import '~aspect/elements/menus'
@import '~aspect/elements/tabs'
...
</style>
...