# ng-surface

> Surface is a Material Design, CSS only framework created by @mildrenben. ng-surface introduces this framework to the Angular world. It was adapted/repackaged for use with Angular projects. I (metrophobe) do not want any credit. All donation and contribu

Latest version **1.0.21** (published 2018-02-08) · ISC license · 0 weekly downloads

## Install

```sh
npm install ng-surface
pnpm add ng-surface
yarn add ng-surface
bun add ng-surface
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.21 |
| Published | 2018-02-08 |
| First published | 2018-02-08 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 34.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | metrophobe |
| Maintainers | metrophobe |
| Keywords | material, design, css, angular, ng-surface |

## Links

- npm: https://www.npmjs.com/package/ng-surface
- npm.io page: https://npm.io/package/ng-surface

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 1.0.21 (latest) — 2018-02-08

## README

# 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 ](https://twitter.com/mildrenben)


## License

This project is licensed under the MIT License 


## Acknowledgments
* Thanks to anyone who donates!

---
_Source: https://npm.io/package/ng-surface · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._