Spline-SCSS

Spline-SCSS, or just Spline, is a mixin and function library for Sass. It makes writing stylesheets for mobile-first builds faster and easier. Spline provides methods to manipulate text, use web & icon fonts, create CSS3 shapes, and much more.

• Installation
• Documentation
• Browser Support
• Changelog
• Issues

Requirements

• Sass 3.4+

Installation

Spline is distributed with the NPM package manager.

1. Install the NPM package

   Paste this command into your command line in your project's root directory:

   npm install spline-scss --save-dev
   

   Note: You'll need to have Node and NPM installed to run this command.

2. Import Spline at the beginning of your Sass stylesheet

   @import "node_modules/spline-scss/dist/spline";

Packages installed through NPM aren't made to be edited. If you need to edit or change anything within Spline, please consider opening an issue or a PR and having it added directly to the project itself.

Updating

Spline follows Semantic Versioning. In a nutshell, that means that upgrading to new point releases (eg. moving from 1.0 to 1.1) is safe. Upgrading to new major releases (from 1.0 to 2.0) will cause backwards-incompatible changes.

To update Spline, paste the following command into your command line in your project's root:

npm update spline-scss

Documentation

Utilities

The core set of mixins for the project.

• Border
• Change BR
• Color
• Dimensions
• Ellipsis
• Flexbox
• Hide Text
• Icon Font
• Icon Font Replace
• Margin
• Padding
• Squish Text
• Style Override (aka The Headbang Trick)
• Tap Highlight
• Text
• Triangle
• Visibility
• Web Font

Functions

Functions are methods of invoking Sass logic and functionality to return values. Read this article to learn more.

• Cache Buster
• Icon Address
• Rem Converter
• Reverse Gradient
• Tint & Shade

Variables

Some default variables for use in your projects.

• Transition Timings

Browser Support

Spline is written for mobile browsers. This means that Spline should support newer desktop browsers as well but old browser support is not a priority. Spline does not contain any browser prefixing. If you're looking for prefixing, we recommend you use Autoprefixer in addition to Spline.

• iOS 6+
• Android Browser 2.3+
• Chrome for Android 35+

Other browsers may be supported but Spline is not actively developed on them. If you find any issues with specific browsers, please log them in our Issues tracker.

How To Test

1. Run npm install
2. Run npm run lint
3. Ensure linter passes
4. Run grunt
5. Ensure that all the DEBUG output in your terminal are all passing
6. Open test/index.html in your browser
7. Ensure all the tests descriptions are accurate compared to how the styles render

Credits

Spline is maintained and funded on Mobify's dime. If you've got things you'd like to see added or removed, submit a PR or tweet at Jeff Kamo. A special shout out to Kyle Peatt, and Ryan Frederick for their past contributions, with which Spline was made possible.

We also owe a lot of thanks to Thoughtbot's Bourbon and Compass. Spline was inspired by both of these projects and draws a lot of its work from them.

License

MIT License. Spline-SCSS is Copyright © 2014-2016 Mobify. It is free software and may be redistributed under the terms specified in the LICENSE file.