Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/null-none/simple-material

Simple CSS library of Material Design based elements.
https://github.com/null-none/simple-material

css matrial matrial-ui ui

Last synced: 4 days ago
JSON representation

Simple CSS library of Material Design based elements.

Awesome Lists containing this project

README 

        
# Simple Material



## About

Mini Material is a simple library of Material Design based elements. It uses only CSS, thus it's small and light. Mini Material is not meant to build your entire site; think of it as a collection of elements to use when needed.



The main concept while creating MM was to interfere with your HTML code structure and semantics as little as possible. Mini material affects only the look of your site and doesn't force you to create giant non semantic stuctures.



## Usage

Table of contents:



- [Mini Material](#mini-material)

  - [About](#about)

  - [Usage](#usage)

    - [Layout](#layout)

    - [Header](#header)

    - [Footer](#footer)

    - [Cards](#cards)

    - [Buttons](#buttons)

    - [Grid](#grid)

    - [Tables](#tables)

    - [Forms](#forms)

    - [Tooltips](#tooltips)

    - [Text Styles](#text-styles)

    - [Headings](#headings)

    - [Colors](#colors)

    - [Media Queries](#media-queries)

    - [Ripple](#ripple)

    - [SASS Variables](#sass-variables)



### Layout

Classes:

* `page`

  * `page__content`



Example:

```html



    

    



```



### Header

Classes:

* `header`

  * `header--large`

  * `header--compact`

  * `header__title`

    * `header__link`

  * `nav`

    * `nav__list`

      * `nav__item`

        * `nav__link`

          * `nav__link--active`



Example:

```html



    


        Page Title

    


    

    

        

    



```

*large* and *compact* header structure is the same.



### Footer

Classes:

* `footer`

  * `footer__left`

  * `footer__right`



Example:

```html



    


        Left content

    


    


        Right content

    



```



### Cards

Classes:

* `card`

  * `card__image`

    * `card__image--left`

    * `card__image--right`

    * `card__image--responsive`

    * `card__img`

  * `card__title`

  * `card__content`

  * `card__actions`

    * `card__button`



Example:

```html



    


        Pretty image

    



    
Card



    


        
Content


    



    


        Action 1

        Action 2

    



```

`card__image` and `card__actions` are optional.



`card__image--responsive` can be used only with`card__image--left` or`card__image--right` and means that on screen smaller than specified breakpoint image will be displayed on top and not on the side of card.



### Buttons

Classes:

* `button`

  * `button--large`

  * `button--flat`

  * `button--disabled`

* `fab`

  * `fab--disabled`



Example:

```html

Hi there!



Hello sir!



What's up?



FAB



Disabled

```

Every button can be disabled.



### Grid

Classes:

* `grid`

  * `grid__col`

    * `grid__col--1`

    * `grid__col--fraction`



Example:

```html



    


    



    


    



    


    




```

Width of the column is expressed as fraction separated by dash. There is no *2-2* or *3-3* classes, use 1 instead. By default grid has three columns.



### Tables

Classes:

* `table`

  * `table__head`

  * `table__body`

  * `table__row`

    * `table__row--head`

    * `table__cell`

      * `table__cell--head`

      * `table__cell--non-numeric`



Example:

```html



    

        

            Header 1

            Header 2

        

    

    

        

            Something

            100

        

        

            Anything

            200

        

    



```

All cells are treated as numeric (text aligned to right) unless they have `table__cell--non-numeric` class.



### Forms

Classes:

* `text-field`

  * `text-field__input`

    * `text-field__input--textarea`

  * `text-field__label`

* `checkbox`

  * `checkbox__input`

  * `checkbox__label`

* `radio`

  * `radio__input`

  * `radio__label`

* `switch`

  * `switch__input`

  * `switch__label`



Example:

```html





    

    Last Name






    I'm awesome!

    Something about you






    

    Switch 1






    

    Radio 1



```

Both `.checkbox` and `.switch` classes are intended for checkboxes.



### Tooltips

Classes:

* `tooltip--top`

* `tooltip--right`

* `tooltip--bottom`

* `tooltip--left`



Example:

```html

tooltip--top



tooltip--right



tooltip--bottom



tooltip--left

```



### Text Styles

Classes:

* `typography--strong`

* `typography--emphasis`

* `typography--underline`

* `typography--blockquote`

* `typography--link`

* `typography--align-left`

* `typography--align-center`

* `typography--align-right`



Example:

```html

strong text



emphasis



underline and block quote:





  
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.





link

```



### Headings

Classes:

* `heading--1`

* `heading--2`

* `heading--3`

* `heading--4`

* `heading--5`

* `heading--6`



Example:

```html

heading--1


heading--2

heading--3

heading--4

heading--5

heading--6

```



### Colors

Classes:

* `color--color-name` (background color)

* `text--color-name` (text color)



All colors from [Google Material Design color palette](https://www.google.com/design/spec/style/color.html#color-color-palette) are available.



Color names are created in the following pattern: `color-shade`. Google's Red 900 is `red-900` so if you want to set background color to it you should use `.color--red-900`.



Example:

```html

white on red



black on white



white on orange 600



blue accent 700 on white

```

You can use this classes on basically every element.



### Media Queries

Classes:

* `hide--s`

  * `hide--s--down`

* `hide--m`

  * `hide--m--up`

  * `hide--m--down`

* `hide--l--up`

  * `hide--l--up`

  * `hide--l--down`

* `hide--xl`

  * `hide--xl--up`



Example:

```html

hide--s



hide--m--down



hide--m--up



hide--l--down



hide--l


```

*hide* classes can be confusing. For example `hide--m--up` doesn't mean *hide above medium* but *hide on medium and above*.

If you watch behavior of `hide--m--up` and `hide--m--down` while resizing browser window, you will see that `hide--m--down` triggers at the top breakpoint and `hide--m--up` at the bottom one. Thus on the the m-sized screen both of them will be hidden.



There are no *show* classes.



### Ripple

Classes:

* `ripple`



Example:

```html

Ripple!

```



`.ripple` is universal class which theoretically works with all elements with :active pseudo-class. However it's not even remotely as good as other implementations using JS. It should work fine on buttons and menu items but be careful when using it on other elements.



### SASS Variables

If you are using SASS you can adjust many aspects of library using variables.