ng-surface

Surface is a very popular Material Design CSS only framework created by @mildrenben. ng-surface aims to introduce it to the Angular world. It was adapted/repackaged for use with Angular projects. Please note that while i intend to improve on the original work of the author, I would like to be regarded as a 'nobody' and any credit whatsoever should be always directed to the original owner aka @mildrenben. That being said i will keep the CSS-only mindset and try and introduce new features (which are work-in-progress already).

Please make me happy by donating for a good cause as expressed by the owner on this page. It will only help make a better world! https://mildrenben.github.io/surface/about.html.

Like the original Surface, ng-surface is:

• super lightweight (5.7kb)
• built with 100% SCSS
• contains no JS and therefore is completely unobtrusive to Angular
• customizable
• responsive

Getting Started

Installation is very straight-forward. You should install this package 'locally' and not globally by using the following command into your Angular project

Prerequisites

Please ensure that your project is configured to process SCSS. If you are starting afresh, you should make use of the following command when creating your project to auto-configure it to support SCSS.

ng new your-project-name --style=scss

if you are working on a project that is running on CSS, you should run the following command INSIDE your angular project folder.

npm install node-sass --save-dev

... to save your preprocessor as a dev dependency followed by ....

ng set defaults.styleExt scss

OR , if you prefer to edit you angular-cli.json yourself, you can change it as follows:

"defaults": {
     "styleExt": "scss",
}

This should configure your Angular project to make use of SCSS....

Installation

It is very easy to install ng-surface. Make sure you are located in the right Angular project and from anywhere in the root of your folder run the following command via terminal.

npm install ng-surface

You should then add the following to the angular-cli.json file. And while you are there, change the styles.css file to styles.scss in the event your project was originally set up using CSS. Do not forget to rename the file as well!

"styles": [
        "../node_modules/ng-surface/scss/surface_styles.scss",
        "styles.scss"
      ],

And you're ready to start cracking :)

Usage Instructions

Please refer to the original documentation for full details of its functionalities. This can be found at https://mildrenben.github.io/surface/getting-started.html.

Contributing

If you would like to contribute , kindly contact the author @mildrenben via Twitter or Github.

Version

This current build simply repackages the original for use with Angular projects.

Authors

• Ben Mildren - Initial work - @mildrenben

License

This project is licensed under the MIT License

Acknowledgments

• Thanks to anyone who donates!