macaroon.css v1.0.0-alpha.3

MACAROON.css

Macaroon is an experimental sass-framework using the latest sass features.

Only supported with Dart-Sass

Index

• Installation
• Setup Framework
  • Initialize Styles
  • Override Defaults
  • Add Fonts

Installation

Install via npm package manager

npm i macaroon.css

Install via yarn package manager

yarn add macaroon.css

Setup Framework

Initialize Styles

The framework is created using sass. To use it you need to set up you sass environment first. Create your main sass/scss file and add the following two lines of code to the file.

@use "~macaroon.css/sass/init"

Override Defaults

To override the default colors and grid sizes you only need to create a _theme.scss file in your project main sass/scss folder and coping the following code in to it.

Now you can override the theme colors and grid sizes to your need

@use "~macaroon.css/sass/init"
@use "theme"

Add Fonts

Add some fonts to your project by going to Google Fonts , select your font pair and add it before your macaroon imports.

@use "~macaroon.css/src/sass/init"
@use "theme"
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap')

Update fonts in theme.sass file.

Changelog

Please see CHANGELOG for more information on what has changed recently.

Credits

• Claude Myburgh

License

The MIT License (MIT). Please see License File for more information.