https://github.com/simbo/stylus-mixins

https://github.com/simbo/stylus-mixins

Last synced: 10 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/simbo/stylus-mixins
• Owner: simbo
• License: mit
• Created: 2018-05-24T17:44:43.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2018-05-24T19:10:38.000Z (about 8 years ago)
• Last Synced: 2025-05-30T13:03:16.943Z (about 1 year ago)
• Language: CSS
• Size: 5.86 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
stylus-mixins

=============

  > A personal collection of Stylus mixins.

[![npm package version](https://img.shields.io/npm/v/@simbo/stylus-mixins.svg?style=flat-square)](https://www.npmjs.com/package/@simbo/stylus-mixins)

[![Travis CI build status](https://travis-ci.org/simbo/stylus-mixins.svg?branch=master)](https://travis-ci.org/simbo/stylus-mixins/builds)

---

## Installation

`stylus-mixins` is a user scoped npm package. You can install it…

``` sh

# …using npm

npm install @simbo/stylus-mixins

# …or yarn

yarn add @simbo/stylus-mixins

```

## Usage

``` stylus

/* require all mixins… */

@require 'path/to/node_modules/stylus-mixins'

/* …or only those you need… */

@require 'path/to/node_modules/stylus-mixins/mixins/md-shadow'

/* …and call them where needed: */

.my-container

  mdShadow()

```

## Mixins

### `mdShadow($depth = 2, $alphaMultiplier = 1, $inset = false)`

Material design shadows with umbra, penumbra and ambient shadow

[./mixins/md-shadow](./mixins/md-shadow.styl)

### `ratioExpander($ratio = 1)`

Creates a peudo element expander to maintain aspect ratio

[./mixins/ratio-expander](./mixins/ratio-expander.styl)

### `textEllipsis()`

Ellipsis overflow for single-line text

[./mixins/text-ellipsis](./mixins/text-ellipsis.styl)

## License

[MIT © Simon Lepel](http://simbo.mit-license.org/)