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.
- Sass 3.4+
Spline is distributed with the NPM package manager.
-
Install the NPM package
Paste this command into your command line in your project's root directory:
npm install spline-scss --save-devNote: You'll need to have Node and NPM installed to run this command.
-
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.
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
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 are methods of invoking Sass logic and functionality to return values. Read this article to learn more.
Some default variables for use in your projects.
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.
- Run
npm install - Run
npm run lint - Ensure linter passes
- Run
grunt - Ensure that all the
DEBUGoutput in your terminal are all passing - Open
test/index.htmlin your browser - Ensure all the tests descriptions are accurate compared to how the styles render
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.
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.