Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/7ninjas/scss-mixins

Collection of scss mixins and functions to ease and improve implementations of common style-code patterns.
https://github.com/7ninjas/scss-mixins

bootstrap css css-modules frontend mixins sass scss scss-mixins styling

Last synced: 5 days ago
JSON representation

Collection of scss mixins and functions to ease and improve implementations of common style-code patterns.

Host: GitHub
URL: https://github.com/7ninjas/scss-mixins
Owner: 7ninjas
License: mit
Created: 2018-01-05T11:22:11.000Z (almost 7 years ago)
Default Branch: develop
Last Pushed: 2018-06-21T07:28:10.000Z (over 6 years ago)
Last Synced: 2024-12-09T04:36:41.846Z (14 days ago)
Topics: bootstrap, css, css-modules, frontend, mixins, sass, scss, scss-mixins, styling
Language: CSS
Homepage: https://7ninjas.com/
Size: 266 KB
Stars: 149
Watchers: 8
Forks: 35
Open Issues: 6
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE

Awesome Lists containing this project

README

        


  

    

  

  
7ninjas


  


    `scss-mixins` is a collection of scss mixins and functions to ease and improve implementations of common style-code patterns.

    


    


    Discover our scss practices »

    


    


    Portfolio

    ◦

    Careers

    ◦

    Contact

  

  

  Be like a Ninja! Style like a Ninja!


## Status

[![npm](https://img.shields.io/npm/v/@7ninjas/scss-mixins.svg?style=for-the-badge)](https://www.npmjs.com/package/@7ninjas/scss-mixins)

[![npm](https://img.shields.io/npm/l/@7ninjas/scss-mixins.svg?style=for-the-badge)](https://www.npmjs.com/package/@7ninjas/scss-mixins)

[![npm](https://img.shields.io/npm/dt/@7ninjas/scss-mixins.svg?style=for-the-badge)](https://www.npmjs.com/package/@7ninjas/scss-mixins)

[![CircleCI branch](https://img.shields.io/circleci/project/github/7ninjas/scss-mixins/develop.svg?style=for-the-badge)](https://github.com/7ninjas/scss-mixins)

[![David](https://img.shields.io/david/7ninjas/scss-mixins.svg?style=for-the-badge)](https://github.com/7ninjas/scss-mixins)

[![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/7ninjas/scss-mixins.svg?style=for-the-badge)](https://github.com/7ninjas/scss-mixins)

[![GitHub pull requests](https://img.shields.io/github/issues-pr/7ninjas/scss-mixins.svg?style=for-the-badge)](https://github.com/7ninjas/scss-mixins)

[![GitHub issues](https://img.shields.io/github/issues/7ninjas/scss-mixins.svg?style=for-the-badge)](https://github.com/7ninjas/scss-mixins)

[![GitHub closed issues](https://img.shields.io/github/issues-closed/7ninjas/scss-mixins.svg?style=for-the-badge)](https://github.com/7ninjas/scss-mixins)

[![GitHub stars](https://img.shields.io/github/stars/7ninjas/scss-mixins.svg?style=social&label=Stars&style=for-the-badge)](https://github.com/7ninjas/scss-mixins)

[![GitHub watchers](https://img.shields.io/github/watchers/7ninjas/scss-mixins.svg?style=social&label=Watch&style=for-the-badge)](https://github.com/7ninjas/scss-mixins)

## Quick start

Several quick start options are available:

- Clone the repo: `git clone https://github.com/7ninjas/scss-mixins.git`

- Install with [npm](https://www.npmjs.com/): `npm install @7ninjas/scss-mixins`

- Install with [yarn](https://yarnpkg.com/): `yarn add @7ninjas/scss-mixins`

### Usage

Import `all` file to your core `scss` file for importing all mixins from package

Example:

```scss

@import '~@7ninjas/scss-mixins/all';

```

### Table of contents

 Animations

 

- [Full documentation](./docs/animations.md)

- [Mixin hardware](./docs/animations.md#mixin-hardware)

  Border Radius

  

- [Full documentation](./docs/border-radius.md)

- [Mixin border-radius](./docs/border-radius.md#mixin-border-radius)

- [Mixin border-top-radius](./docs/border-radius.md#mixin-border-top-radius)

- [Mixin border-right-radius](./docs/border-radius.md#mixin-border-right-radius)

- [Mixin border-bottom-radius](./docs/border-radius.md#mixin-border-bottom-radius)

- [Mixin border-left-radius](./docs/border-radius.md#mixin-border-left-radius)

  Breakpoints

  

- [Full documentation](./docs/breakpoints.md)

- [Mixin media-breakpoint-up](./docs/breakpoints.md#mixin-media-breakpoint-up)

- [Mixin media-breakpoint-down](./docs/breakpoints.md#mixin-media-breakpoint-down)

- [Mixin media-breakpoint-between](./docs/breakpoints.md#mixin-media-breakpoint-between)

- [Mixin media-breakpoint-only](./docs/breakpoints.md#mixin-media-breakpoint-only)

  Buttons

  

- [Full documentation](./docs/buttons.md)

- [Mixin button-variant](./docs/buttons.md#mixin-button-variant)

- [Mixin button-outline-variant](./docs/buttons.md#mixin-button-outline-variant)

- [Mixin button-size](./docs/buttons.md#mixin-button-size)

  Flex

  

- [Full documentation](./docs/flex.md)

- [Mixin flex](./docs/flex.md#mixin-flex)

- [Mixin inline-flex](./docs/flex.md#mixin-inline-flex)

  Fonts

  

- [Full documentation](./docs/fonts.md)

- [Mixin font-face](./docs/fonts.md#mixin-font-face)

  Forms

  

- [Full documentation](./docs/forms.md)

- [Mixin placeholder](./docs/forms.md#mixin-placeholder)

  Gradients

  

- [Full documentation](./docs/gradients.md)

- [Mixin gradient-bg](./docs/gradients.md#mixin-gradient-bg)

- [Mixin gradient-x](./docs/gradients.md#mixin-gradient-x)

- [Mixin gradient-y](./docs/gradients.md#mixin-gradient-y)

- [Mixin gradient-directional](./docs/gradients.md#mixin-gradient-directional)

- [Mixin gradient-x-three-colors](./docs/gradients.md#mixin-gradient-x-three-colors)

- [Mixin gradient-y-three-colors](./docs/gradients.md#mixin-gradient-y-three-colors)

- [Mixin gradient-radial](./docs/gradients.md#mixin-gradient-radial)

- [Mixin gradient-striped](./docs/gradients.md#mixin-gradient-striped)

  Grid

  

- [Full documentation](./docs/grid.md)

- [Mixin center](./docs/grid.md#mixin-center)

- [Mixin container](./docs/grid.md#mixin-container)

- [Mixin col](./docs/grid.md#mixin-col)

  Hover

  

- [Full documentation](./docs/hover.md)

- [Mixin hover](./docs/hover.md#mixin-hover)

- [Mixin hover-focus](./docs/hover.md#mixin-hover-focus)

- [Mixin plain-hover-focus](./docs/hover.md#mixin-plain-hover-focus)

- [Mixin hover-focus-active](./docs/hover.md#mixin-hover-focus-active)

  Icons

  

- [Full documentation](./docs/icons.md)

- [Mixin svg-icon](./docs/icons.md#mixin-svg-icon)

  Images

- [Full documentation](./docs/images.md)

- [Mixin img-fluid](./docs/images.md#mixin-img-fluid)

  Lists

- [Full documentation](./docs/lists.md)

- [Mixin list-unstyled](./docs/lists.md#mixin-list-unstyled)

  Positioning

- [Full documentation](./docs/positioning.md)

- [Mixin size](./docs/positioning.md#mixin-size)

- [Mixin clearfix](./docs/positioning.md#mixin-clearfix)

- [Mixin z-index](./docs/positioning.md#mixin-z-index)

- [Mixin pseudo](./docs/positioning.md#mixin-pseudo)

- [Mixin absolute](./docs/positioning.md#mixin-absolute)

- [Mixin fixed](./docs/positioning.md#mixin-fixed)

- [Mixin relative](./docs/positioning.md#mixin-relative)

- [Mixin sticky](./docs/positioning.md#mixin-sticky)

  Responsive

- [Full documentation](./docs/responsive.md)

- [Mixin responsive-prop](./docs/responsive.md#mixin-responsive-prop)

- [Mixin responsive-embed](./docs/responsive.md#mixin-responsive-embed)

- [Mixin responsive-col](./docs/responsive.md#mixin-responsive-col)

  Shapes

  

- [Full documentation](./docs/shapes.md)

- [Mixin triangle](./docs/shapes.md#mixin-triangle)

  Spacing

- [Full documentation](./docs/spacing.md)

- [Mixin ml](./docs/spacing.md#mixin-ml)

- [Mixin mt](./docs/spacing.md#mixin-mt)

- [Mixin mr](./docs/spacing.md#mixin-mr)

- [Mixin mb](./docs/spacing.md#mixin-mb)

- [Mixin mx](./docs/spacing.md#mixin-mx)

- [Mixin my](./docs/spacing.md#mixin-my)

- [Mixin m](./docs/spacing.md#mixin-m)

- [Mixin pl](./docs/spacing.md#mixin-pl)

- [Mixin pt](./docs/spacing.md#mixin-pt)

- [Mixin pr](./docs/spacing.md#mixin-pr)

- [Mixin pb](./docs/spacing.md#mixin-pb)

- [Mixin px](./docs/spacing.md#mixin-px)

- [Mixin py](./docs/spacing.md#mixin-py)

- [Mixin p](./docs/spacing.md#mixin-p)

  Tables

- [Full documentation](./docs/tables.md)

- [Mixin table](./docs/tables.md#mixin-table)

- [Mixin table-bordered](./docs/tables.md#mixin-table-bordered)

- [Mixin table-responsible](./docs/tables.md#mixin-table-responsible)

- [Mixin table-striped](./docs/tables.md#mixin-table-striped)

- [Mixin table-hover](./docs/tables.md#mixin-table-hover)

  Typography

- [Full documentation](./docs/typography.md)

- [Mixin text-hide](./docs/typography.md#mixin-text-hide)

- [Mixin text-truncate](./docs/typography.md#mixin-text-truncate)

- [Mixin font](./docs/typography.md#mixin-font)

  Variables

- [Full documentation](./docs/variables.md)

## Bugs and feature requests

Found bug? Or maybe you've got great idea for feature request? Please first search for existing and closed issues.

If your problem or idea is not addressed yet - don't hesitate to [open a new issue](https://github.com/7ninjas/scss-mixins/issues/new)!

## Community

Get updates on 7ninjas's development and chat with the project maintainers and community members.

- Like [@7ninjas on Facebook](https://www.facebook.com/7ninjasHQ).

- Follow [@7ninjas on Twitter](https://twitter.com/7ninjas).

- Discover [@7ninjas Dribbble](https://dribbble.com/7ninjas)

- Explore [@7ninjas Behance](https://www.behance.net/7ninjas).

- Enjoy [@7ninjas Instagram](https://www.instagram.com/7ninjashq/).

## Versioning

To see new features and changes for each released version checkout [the Releases section of our GitHub project](https://github.com/7ninjas/scss-mixins/releases) 

## License

Code released under the MIT License.