https://github.com/superdj/smaterial

A CSS framework that follows the Material Design guidelines as close as possible
https://github.com/superdj/smaterial

css css-framework es6 framework front-end frontend material-design no-jquery scss

Last synced: 3 months ago
JSON representation

A CSS framework that follows the Material Design guidelines as close as possible

• Host: GitHub
• URL: https://github.com/superdj/smaterial
• Owner: SuperDJ
• License: mit
• Created: 2018-06-19T07:06:44.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-03-15T04:41:29.000Z (about 2 years ago)
• Last Synced: 2025-02-19T09:51:31.062Z (3 months ago)
• Topics: css, css-framework, es6, framework, front-end, frontend, material-design, no-jquery, scss
• Language: SCSS
• Homepage: https://superdj.github.io/smaterial/
• Size: 2.95 MB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: license

Awesome Lists containing this project

README

        
[![npm version](https://badge.fury.io/js/smaterial.svg)](https://badge.fury.io/js/smaterial)

# Content

- About Material

- Getting started

- Minify files

- Contributing

# About Material

[Material](https://superdj.github.io/material/) is a CSS framework based on the Material Design guidelines.

# Getting started

To get started you can choose to use the source files or the minified files.

In order to use the minified files the easiest way is to load them from GitHub for now:

	

	

	

If you prefer to use the source file you can do so by installing the package:

	npm i -D smaterial

	

In order to use the source files for sass you case use one of the following:

	@import '~smaterial/src/sass/material-light'

	@import '~smaterial/src/sass/material-dark'

	@import '~smaterial/src/sass/index'

	

Both `index` and `material-light` are basically the same. However `material-dark` will result in a dark theme.

The dark theme can also be achieved by importing `index` and override the variable `$theme: dark`

and for js:

	import '~smaterial/src/js/main.js'

	

# Minify files

To minify the output of both SASS and JS files there are a couple of tricks you can use. Do note that this only works for the source files.

## JS

When using the source files for JS you can simply import only the required classes. 

How you can do this is shown below, the full list of classes can be found in `src/js/main.js`

## SASS

For SASS you can simply edit defined arrays which specify the used components.

For example copy and paste the following variable into your own sass file: `$icon-settings: (18, 24, 36, 48);`.

If you then delete `18` the class `.icon--18` will not be included in the outputted CSS file.

# Created using

PHPStorm