├── .github
└── workflows
│ └── stale.yml
├── .gitignore
├── .npmignore
├── CHANGELOG.md
├── Gruntfile.coffee
├── LICENSE
├── README.md
├── bower.json
├── dist
└── _scut.scss
├── docs
├── content
│ ├── data.yml
│ ├── entries
│ │ ├── absolute.md
│ │ ├── border.md
│ │ ├── center-absolutely.md
│ │ ├── center-block.md
│ │ ├── center-transform.md
│ │ ├── characters.md
│ │ ├── circle.md
│ │ ├── clearfix.md
│ │ ├── color-swap.md
│ │ ├── coords.md
│ │ ├── em.md
│ │ ├── fill.md
│ │ ├── fixed.md
│ │ ├── font-face.md
│ │ ├── hanging-indent.md
│ │ ├── hd-bp.md
│ │ ├── hide-visually.md
│ │ ├── image-replace.md
│ │ ├── indented-ps.md
│ │ ├── key-val.md
│ │ ├── link-bb.md
│ │ ├── link-unstyled.md
│ │ ├── list-custom.md
│ │ ├── list-divided.md
│ │ ├── list-floated.md
│ │ ├── list-inline.md
│ │ ├── list-punctuated.md
│ │ ├── list-unstyled.md
│ │ ├── margin.md
│ │ ├── padding.md
│ │ ├── ratio-box.md
│ │ ├── relative.md
│ │ ├── rem-fallback.md
│ │ ├── rem.md
│ │ ├── reset.md
│ │ ├── reverse-italics.md
│ │ ├── selected.md
│ │ ├── side-lined.md
│ │ ├── size.md
│ │ ├── sticky-footer-fixed.md
│ │ ├── sticky-footer-fluid.md
│ │ ├── strip-unit.md
│ │ ├── triangle.md
│ │ ├── truncate.md
│ │ ├── vcenter-ib.md
│ │ ├── vcenter-lh.md
│ │ ├── vcenter-td.md
│ │ └── vcenter-tt.md
│ ├── example-styles
│ │ ├── _example-variables.scss
│ │ ├── absolute.scss
│ │ ├── border.scss
│ │ ├── center-absolutely.scss
│ │ ├── center-block.scss
│ │ ├── center-transform.scss
│ │ ├── circle.scss
│ │ ├── clearfix.scss
│ │ ├── color-swap.scss
│ │ ├── em.scss
│ │ ├── fill.scss
│ │ ├── fixed.scss
│ │ ├── hanging-indent.scss
│ │ ├── hd-bp.scss
│ │ ├── hide-visually.scss
│ │ ├── image-replace.scss
│ │ ├── indented-ps.scss
│ │ ├── key-val.scss
│ │ ├── link-bb.scss
│ │ ├── link-unstyled.scss
│ │ ├── list-custom.scss
│ │ ├── list-divided.scss
│ │ ├── list-floated.scss
│ │ ├── list-inline.scss
│ │ ├── list-punctuated.scss
│ │ ├── list-unstyled.scss
│ │ ├── margin.scss
│ │ ├── padding.scss
│ │ ├── ratio-box.scss
│ │ ├── relative.scss
│ │ ├── rem-fallback.scss
│ │ ├── rem.scss
│ │ ├── reverse-italics.scss
│ │ ├── selected.scss
│ │ ├── side-lined.scss
│ │ ├── size.scss
│ │ ├── triangle.scss
│ │ ├── truncate.scss
│ │ ├── vcenter-ib.scss
│ │ ├── vcenter-lh.scss
│ │ └── vcenter-td.scss
│ ├── help.yml
│ └── home
│ │ ├── about.md
│ │ ├── contributing.md
│ │ ├── installation.md
│ │ └── usage.md
└── dev
│ ├── js
│ ├── hbs-helpers.js
│ ├── main.js
│ └── prism.js
│ ├── layouts
│ ├── base.hbs
│ └── entry-base.hbs
│ ├── partials
│ ├── banner.hbs
│ ├── home-toc.hbs
│ └── nav.hbs
│ ├── scss
│ ├── _banner.scss
│ ├── _base.scss
│ ├── _characters.scss
│ ├── _code.scss
│ ├── _entry.scss
│ ├── _examples.scss
│ ├── _nav.scss
│ ├── _type.scss
│ ├── _variables.scss
│ └── main.scss
│ └── templates
│ └── index.hbs
├── gulpfile.js
├── lib
├── eyeglass-exports.js
└── scut.rb
├── package.json
├── release-checklist.md
├── sache.json
├── scut.gemspec
└── src
├── functions
├── _em.scss
├── _rem.scss
└── _strip-unit.scss
├── general
├── _border.scss
├── _circle.scss
├── _color-swap.scss
├── _hd-bp.scss
├── _hide-visually.scss
├── _image-replace.scss
├── _rem-fallback.scss
├── _reset.scss
├── _selected.scss
└── _triangle.scss
├── layout
├── _center-absolutely.scss
├── _center-block.scss
├── _center-transform.scss
├── _clearfix.scss
├── _fill.scss
├── _list-custom.scss
├── _list-divided.scss
├── _list-floated.scss
├── _list-inline.scss
├── _list-punctuated.scss
├── _list-unstyled.scss
├── _margin.scss
├── _padding.scss
├── _positioning-absolute.scss
├── _positioning-coords.scss
├── _positioning-fixed.scss
├── _positioning-relative.scss
├── _ratio-box.scss
├── _size.scss
├── _sticky-footer-fixed.scss
├── _sticky-footer-fluid.scss
├── _vcenter-ib.scss
├── _vcenter-lh.scss
├── _vcenter-td.scss
└── _vcenter-tt.scss
└── typography
├── _characters.scss
├── _font-face.scss
├── _hanging-indent.scss
├── _indented-ps.scss
├── _key-val.scss
├── _link-bb.scss
├── _link-unstyled.scss
├── _reverse-italics.scss
├── _side-lined.scss
└── _truncate.scss
/.github/workflows/stale.yml:
--------------------------------------------------------------------------------
1 | # This workflow warns and then closes issues and PRs that have had no activity for a specified amount of time.
2 | #
3 | # You can adjust the behavior by modifying this file.
4 | # For more information, see:
5 | # https://github.com/actions/stale
6 | name: 'Close stale issues and PRs'
7 |
8 | on:
9 | schedule:
10 | - cron: '0 * * * *'
11 |
12 | jobs:
13 | stale:
14 |
15 | runs-on: ubuntu-latest
16 | permissions:
17 | issues: write
18 | pull-requests: write
19 |
20 | steps:
21 | - uses: actions/stale@v4
22 | with:
23 | repo-token: ${{ secrets.GITHUB_TOKEN }}
24 | stale-issue-message: 'This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.'
25 | stale-pr-message: 'This PR is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 10 days.'
26 | close-issue-message: 'This issue was closed because it has been stalled for 5 days with no activity.'
27 | close-pr-message: 'This PR was closed because it has been stalled for 10 days with no activity.'
28 | days-before-issue-stale: 30
29 | days-before-pr-stale: 45
30 | days-before-issue-close: 5
31 | days-before-pr-close: 10
32 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | bower_components
3 | .sass-cache
4 |
5 | docs/dist
6 | docs/dev/index.html
7 | docs/content/example-styles/processed
8 |
9 | *.gem
10 |
11 | npm-debug.log
12 | .DS_Store
13 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .*
2 | *.md
3 | **/.*
4 | node_modules
5 | bower_components
6 | docs
7 | test
8 | tests
9 | Gruntfile.coffee
10 | gulpfile.js
11 | bower.json
12 | lib/*
13 | !lib/*.js
14 | scut.gemspec
15 | sache.json
16 | npm-debug.log
17 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Changelog
2 |
3 | ## 2.0.0
4 | - Fixed [`slash as division`](https://sass-lang.com/documentation/breaking-changes/slash-div) deprecation. Breaks compatibility with LibSass.
5 |
6 | ## 1.4.4
7 | - Remove math.div for LibSass support.
8 |
9 | ## 1.4.3
10 | - Fixed missed [`slash as division`](https://sass-lang.com/documentation/breaking-changes/slash-div) deprecation.
11 |
12 | ## 1.4.2
13 | - Updated ownership.
14 |
15 | ## 1.4.1
16 | - Fixed [`slash as division`](https://sass-lang.com/documentation/breaking-changes/slash-div) deprecation.
17 |
18 | ## 1.4.0
19 |
20 | - Added common currencies to scut-characters
21 |
22 | ## 1.3.1
23 |
24 | - Fixed [`eyeglass`](https://github.com/sass-eyeglass/eyeglass) support.
25 | - Lowered specificity of `scut-reset-button`
26 |
27 | ## 1.3.0
28 | - Added `list-unstyled`.
29 |
30 | ## 1.2.1
31 | - Fixed bug in `vcenter` quoting inner selectors.
32 |
33 | ## 1.2.0
34 | - Added [`eyeglass`](https://github.com/sass-eyeglass/eyeglass) support.
35 |
36 | ## 1.1.3
37 | - Improvement on `scut-image-replace` (cf. http://codepen.io/HugoGiraudel/pen/jEYWKx/)
38 | - Some refactoring.
39 |
40 | ## 1.1.2
41 | - Changed `scut-reverse-italics` to avoid Sass deprecation warning.
42 |
43 | ## 1.1.0
44 | - Added `woff2` format to `scut-font-face`.
45 |
46 | ## 1.0.2
47 | - Made all elements inherit `-webkit-font-smoothing` in `scut-reset-antialias`, to target elements that need specific targeting.
48 |
49 | ## 1.0.1
50 | - Adjusted syntax of Sass `@if not` statements so that they will work in Libsass despite the Libsass bug https://github.com/sass/libsass/issues/368
51 |
52 | ## 1.0.0
53 | - Changed `box-sizing` reset to use inheritance.
54 |
55 | ## 0.10.4
56 | - No longer remove `outline` from `button` as part of `scut-reset-button`.
57 | - Added use of selector lists for `scut-vcenter-td` and `scut-vcenter-ib`.
58 |
59 | ## 0.10.3
60 | - Added `scut-reset-figure`.
61 | - Added `input[type="submit"]` and `input[type="reset"]` to `scut-reset-button`.
62 |
63 | ## 0.10.2
64 | - Added `scut-reset-media`.
65 | - Changed `scut-sticky-footer` to `scut-sticky-footer-fixed` in order to add a new sticky footer mixin, `scut-sticky-footer-fluid`.
66 | - Added `scut-color-swap` back in, because some people liked it.
67 |
68 | ## 0.10.1
69 | - Fixed bug in build process.
70 |
71 | ## 0.10.0
72 | - Added some squares to characters: `$scut-square`, `$scut-whitesquare`, `$scut-ssquare`, `$scut-swhitesquare`.
73 | - Removed `scut-color-swap`, `scut-bookends`, and `scut-fonticon-label` because I never ended up using them.
74 |
75 | ## 0.9.1
76 | - Updated `scut-font-face` so users can enter there own `$formats` list, if they don't want to include all font-file-formats.
77 |
78 | ## 0.9.0
79 | - Documented `scut-reset` so that others might understand.
80 | - Added `$no-margin` variable to list mixins, with the default value `true`.
81 | - Made `scut-font-face`'s argument `$weight` optional.
82 | - Removed inner element from `scut-ratio-box`, as the user can add it herself if she wants it (and she may not want it).
83 | - Exposed the `$scut-rem-base` default value to users.
84 |
85 | ## 0.8.0
86 | - Fixed a bug preventing the results of `scut-em` and `scut-rem` from being used in calculations.
87 | - Added `scut-truncate`.
88 | - Deleted "tests" in repository. Devs should use Codepen. It's easy.
89 | - Updated `scut-reset`. Some substance-changes and specific resets are now excludable.
90 |
91 | ## 0.7.1 and 0.7.2
92 | - Bug fixes.
93 |
94 | ## 0.7.0
95 | - Updated `scut-list-unstyled` for less aggressive resetting; modified related utilities to fit.
96 | - Updated `scut-fill` for two different filling approaches: all coordinates = 0 or width/height = 100%.
97 | - Updated `scut-em` to accept lists of pixel-values and exposed the `$scut-em-base` default value to users.
98 | - Added `scut-rem` and `scut-rem-fallback`.
99 | - Added `scut-list-custom`.
100 | - Added `scut-center-trasform` and `scut-vcenter-tt`.
101 |
102 | ## 0.6.0
103 | - Added RubyGem config so Scut can be used as a standard Compass extension.
104 | - Modified `scut-margin` and `scut-padding`.
105 | - Added `scut-center-block`.
106 | - Changed `scut-hide-text` to `scut-image-replace` and added `scut-hide-visually`.
107 | - Moved `scut-triangle` and `scut-circle` to General category; removed `scut-foursquare`; and removed Shapes category.
108 | - Replaced block comments with in-line comments.
109 |
110 | ## 0.5.0
111 | - Added `scut-border`.
112 |
113 | ## 0.4.1
114 | - Fixed bug with `scut-foursquare`: it requires `box-sizing: border-box`.
115 |
116 | ## 0.4.0
117 | - Started changelog!
118 |
--------------------------------------------------------------------------------
/Gruntfile.coffee:
--------------------------------------------------------------------------------
1 | module.exports = (grunt) ->
2 | grunt.initConfig
3 |
4 | pkg: grunt.file.readJSON "package.json"
5 |
6 | assemble:
7 | # Assemble docs dev markup
8 | docsDev:
9 | options:
10 | layoutdir: "docs/dev/layouts/"
11 | layout: "entry-base.hbs"
12 | helpers: ["docs/dev/js/hbs-helpers.js"]
13 | partials: [
14 | "docs/dev/partials/*.{md,hbs}"
15 | "docs/content/home/*.{md,hbs}"
16 | ]
17 | data: ["docs/content/*.yml"]
18 | dist: false
19 | files: [{
20 | expand: true
21 | flatten: true
22 | cwd: "docs/"
23 | src: [
24 | "content/entries/*.{md,hbs}"
25 | "dev/templates/*.{md,hbs}"
26 | ]
27 | dest: "docs/dist/"
28 | }]
29 |
30 | grunt.loadNpmTasks "assemble"
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2013 David Clark
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
6 | this software and associated documentation files (the "Software"), to deal in
7 | the Software without restriction, including without limitation the rights to
8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Scut
2 |
3 | **— a collection of Sass utilities to ease and improve our implementations of common style-code patterns.**
4 |
5 | For a prolonged introduction to Scut, [read "Introducing Scut" on CSS-Tricks](http://css-tricks.com/introducing-scut-new-sass-utility-library).
6 |
7 | If you have any questions about Sass, they are answered [in Sass's fine documentation](http://sass-lang.com/documentation/file.SASS_REFERENCE.html).
8 |
9 | ## Ownership
10 | Scut was originally developed and owned by David Clark ([@DavidTheClark](https://github.com/davidtheclark)). On January 21, 2022, David decided to transfer ownership of this GitHub repository to RamseyInHouse ([@RamseyInHouse](https://github.com/RamseyInHouse)) where it will be maintained and updated for the foreseeable future.
11 |
12 | ## Installing and Using
13 |
14 | > [Please visit the complete documentation here: http://ramseyinhouse.github.io/scut/](https://ramseyinhouse.github.io/scut/)
15 |
16 | Usage should be explained there, as is installation. But I'll explain installation here, too, for your convenience. You can install Scut by:
17 |
18 | - Using Bower: `bower install scut --save-dev`.
19 | - Downloading the file from [the latest release](https://github.com/ramseyinhouse/scut/releases).
20 | - Using Scut as a Compass extension by installing the RubyGem (`gem install scut`) and then performing the usual Compass `require` and `@import` business.
21 | - Using [node-sass](https://www.npmjs.com/package/node-sass) and [eyeglass](https://www.npmjs.com/package/eyeglass):
22 | - `npm install --save-dev scut`
23 | - setup render per eyeglass instructions
24 | - in sass files: `@import 'scut'`
25 |
26 | ## Contributing
27 |
28 | Please do! Scut is simple; contributing should be easy. So give it a go.
29 |
30 | If you have any questions, if anything about this document is unclear or inaccurate, if you can't figure out what to do, please file an issue or contact me.
31 |
32 | ### Approach
33 |
34 | Scut utilities should help users **avoid repetition, organize code, and re-use code**.
35 |
36 | Scut utilities should tackle patterns that suffer from one or more of the following problems:
37 |
38 | 1. The pattern is non-intuitive.
39 | 2. The pattern deserves a shorthand.
40 | 3. The pattern involves some important best practices.
41 | 4. The pattern is extremely common and (at least) a little annoying.
42 |
43 | The utility's goal is to fix those problems in a way that **maximizies reusability**. Here are some principles to keep in mind to maximize that reusability:
44 |
45 | - Include sufficient detail to implement the pattern, but no more.
46 | - Use arguments to allow for typical variations on the theme.
47 | - Arrange those arguments according to the likelihood that users will want to change them.
48 | - Namespace (notice the `scut-` prefix everwhere).
49 | - Document thoroughly.
50 |
51 | I go into detail about all these ideas in [that CSS-Tricks article](http://css-tricks.com/introducing-scut-new-sass-utility-library/).
52 |
53 | ### Development Requirements
54 |
55 | - [Node and npm](http://nodejs.org/)
56 | - [Grunt-cli](https://github.com/gruntjs/grunt-cli)
57 | - [Gulp](https://github.com/gulpjs/gulp)
58 | - [Bower](http://bower.io/)
59 | - [Sass-cli](http://sass-lang.com/install)
60 |
61 | ### Writing Scut Utilities
62 |
63 | **The utilities are in `src/`, organized by category.** The SCSS stylesheets in `src/` ultimately concatenate into `dist/_scut.scss`, which is what users `@import` into their own Sass.
64 |
65 | #### Scut's SCSS Styleguide
66 |
67 | **Please have a look at existing SCSS files within `src/` and try to match their style.**
68 |
69 | (Or, if you think there's a better way to do things, please file an issue.)
70 |
71 | Here are some guidelines to explain how I've been writing:
72 |
73 | - **Head the file with a multi-line comment (each line an inline `//` comment, not a block comment) naming the utility and listing any dependencies.** Limit dependencies please. In the end, that top comment should also contain the URL of the utility's documentation. For example:
74 |
75 | ```scss
76 | // SCUT PIXELS TO EMS
77 | // http://ramseyinhouse.github.io/scut/#pixels-to-ems
78 |
79 | // Depends on `scut-strip-unit`.
80 | ```
81 |
82 | - **Indent with two spaces.**
83 | - **List arguments on separate lines**, so they are easy to scan. For example:
84 |
85 | ```scss
86 | @mixin scut-color-swap (
87 | $inactive,
88 | $active,
89 | $duration: 0,
90 | $bg: false
91 | ) {
92 | // mixin content
93 | }
94 | ```
95 |
96 | - **Space liberally.** A space at the beginning and end of mixins and functions helps distinguish the arguments from the inner workings. Spacing can also help delineate different "sections" of the code by grouping rules that work together and separating those with different roles.
97 |
98 | ### Experimenting and Testing
99 |
100 | The method I recommend for experimentation and testing is to use [Codepen](http://codepen.io/), either starting your own pen from scratch or forking [the Scut Playground](http://codepen.io/davidtheclark/pen/FhqGc) (which imports the latest version of Scut).
101 |
102 | (I have deleted the "tests" directory and tasks from the repository in favor of relying on Codepen.)
103 |
104 | ### Documenting
105 |
106 | Documentation is compiled using [Assemble](http://assemble.io). The source files are located in `docs/content` and `docs/dev`. You'll need to `bower install` to get Normalize.
107 |
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Scut",
3 | "version": "2.0.0",
4 | "homepage": "http://ramseyinhouse.github.io/scut/",
5 | "authors": [
6 | "David Clark "
7 | ],
8 | "description": "A collection of Sass utilities to ease and improve our implementations of common style-code patterns.",
9 | "main": "dist/_scut.scss",
10 | "keywords": [
11 | "SCSS",
12 | "Sass",
13 | "style"
14 | ],
15 | "license": "MIT",
16 | "ignore": [
17 | ".*",
18 | "*.md",
19 | "**/.*",
20 | "node_modules",
21 | "bower_components",
22 | "docs",
23 | "test",
24 | "tests",
25 | "Gruntfile.coffee",
26 | "gulpfile.js",
27 | "package.json",
28 | "npm-debug.log",
29 | "lib",
30 | "scut.gemspec",
31 | "sache.json"
32 | ],
33 | "devDependencies": {
34 | "normalize-scss": "~2.1.2"
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/docs/content/data.yml:
--------------------------------------------------------------------------------
1 | "version": "2.0.0"
2 | github-url: "https://github.com/ramseyinhouse/scut/blob/v"
3 | github-home: "https://github.com/ramseyinhouse/scut"
4 | codepen-url: "http://codepen.io/davidtheclark/pen/FhqGc"
5 |
--------------------------------------------------------------------------------
/docs/content/entries/absolute.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: "absolute"
3 | slug: absolute
4 | summary: Absolutely position an element and assign its coordinates, all in one line of SCSS.
5 | type: mixin, with default-values placeholder
6 | categories:
7 | - layout
8 | args:
9 | - variable: $coordinates
10 | default: [0 n n 0]
11 | comment: "See information about [`scut-coords`](coords.html)."
12 | example:
13 | show-html: true
14 | html: |
15 |
16 |
Top left
17 |
Bottom right
18 |
19 | ---
20 |
21 | You'll save years of your life, and probably lose weight.
22 |
--------------------------------------------------------------------------------
/docs/content/entries/border.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: border
3 | slug: border
4 | summary: Shorthand for using a single border value on multiple sides of an element.
5 | type: mixin only
6 | categories:
7 | - general
8 | args:
9 | - variable: $style
10 | comment: |
11 | A vanilla-CSS `border` shorthand value for the border you wish to create.
12 | - variable: $sides
13 | default: n y
14 | comment: |
15 | The sides on which to add your border: a list of 2 or 4. `n` abbreviates `null`, passing no value; `y` (or anything other than `n`), will create a rule. See below for details.
16 | example:
17 | html: |
18 |
Variation 1
19 |
Variation 2
20 |
Variation 3
21 |
Variation 4
22 | ---
23 |
24 | The `$sides` argument determines which sides get the border. It parallels the established pattern in vanilla CSS: if a list of two is passed, the first value applies to top and bottom, the second to right and left; if a list of four is passed, the values apply, in order, to top, right, bottom, and left.
25 |
26 | As elsewhere in Scut, `n` stands for `null` and results in no rule being created. For `scut-border`, `y` (or anything other than `n`) stands for "yes" or `true` and will result in a rule. See the examples below.
27 |
28 | (If you don't see the purpose or value of such a silly little shorthand, please read the explanation in `scut-margin`, which applies equally to this mixin.)
--------------------------------------------------------------------------------
/docs/content/entries/center-absolutely.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: center absolutely
3 | slug: center-absolutely
4 | summary: Center an absolutely positioned element horizontally, vertically, or both ways.
5 | type: mixin only
6 | categories:
7 | - layout
8 | args:
9 | - variable: $dimensions
10 | comment: |
11 | A two-value list: the `width` and `height` of the element-to-be-centered (both optional). To bypass either and avoid centering in that dimension, pass `n`. See below.
12 | example:
13 | html: |
14 |
15 |
Centered both horizontally and vertically
16 |
17 |
18 |
Centered only horizontally
19 |
20 |
21 |
Centered only vertically
22 |
23 | ---
24 |
25 | **This method only works if the element-to-be-centered has a fixed dimension on the relevant axis** — fixed width to center horizontally, fixed height to center vertically. *If your element cannot have fixed dimensions (and you do not need to support IE8), consider [`scut-center-transform`](center-transform.html).*
26 |
27 | If you do not want to center horizontally — only vertically — pass `n` (short for `null`, "no," "nothing," etc.) for the `width` value. Same goes for height, if you do not want to center vertically. See the examples below for clarification.
--------------------------------------------------------------------------------
/docs/content/entries/center-block.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: center block
3 | slug: center-block
4 | summary: Give a block element `auto` left- and right-margins and (optionally) set its `max-width`.
5 | type: mixin, with a default-values placeholder
6 | categories:
7 | - layout
8 | args:
9 | - variable: $max-width
10 | default: "false"
11 | comment: |
12 | A `max-width` value for the to-be-centered block.
13 | example:
14 | html: |
15 |
Variation 1
16 |
Variation 2
17 | ---
18 |
19 | You, being wise, probably know that setting `margin-left: auto; margin-right: auto;` on a block element with a defined width will center that element. You probably do it all the time.
20 |
21 | So why a utility?
22 |
23 | - To make sure you're setting `margin-left` and `margin-right` when that's all you need to set — instead of also overriding `margin-top` and `margin-bottom` with a rule like `margin: 0 auto;`.
24 | - To organize and name the pattern, describing what is being done — you are *centering a block* — whereas `margin: auto;` does not explain itself.
25 | - To provide a little handy shortcut for the all-too-common pattern of setting `auto` left and right margins along with a `max-width`. (`max-width` instead of `width`, so the element shrinks with the viewport, if it comes to that — I find myself doing it that way most often.)
--------------------------------------------------------------------------------
/docs/content/entries/center-transform.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: center transform
3 | slug: center-transform
4 | summary: Center an element without fixed dimensions, vertically, horizontally, or both ways, via CSS `transform`.
5 | type: mixin, with extension placeholder(s)
6 | categories:
7 | - layout
8 | args:
9 | - variable: $axis
10 | default: "false"
11 | comment: |
12 | Leave `false` to center on both axes; or set to `x` or `y` to center on one axis only.
13 | compatibility: |
14 | This utility uses a CSS `transform`, so will not work with IE8. Also note that `transform` requires vendor prefixes, which are included in the utility.
15 | references:
16 | - description: "CSS-Tricks: \"Centering Percentage Width/Height Elements\""
17 | url: http://css-tricks.com/centering-percentage-widthheight-elements/
18 | example:
19 | html: |
20 |
21 |
22 | Variation 1
23 |
24 |
25 |
26 |
27 | Variation 2
28 |
29 |
30 |
31 |
32 | Variation 3
33 |
34 |
35 |
36 |
37 |
Variation 4
38 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
39 |
40 |
41 | ---
42 |
43 | (If your element *does* have fixed dimensions on each axis you wish to center, you may enjoy the primitive browser support and vendorprefixlessness of [`scut-center-absolutely`](center-absolutely.html).)
44 |
45 | Be warned: **This method uses `position: absolute`, so the parent within which you'll be centering must have a `position` value other than `static`.**
46 |
47 | If you pass no arguments, both axes get the treatment; or you can pass `x` or `y` to center on one axis only.
48 |
49 | These three varieties are available with three extension placeholders:
50 |
51 | - **`%scut-center-transform`**
52 | - **`%scut-center-tranform-x`**
53 | - **`%scut-center-transform-y`**
54 |
55 | Also, notice that an alias is provided for vertical centering: [`scut-vcenter-tt`](vcenter-tt.html) (fitting the `vcenter` naming convention).
--------------------------------------------------------------------------------
/docs/content/entries/characters.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: characters
3 | slug: characters
4 | summary: A set of variables providing CSS-friendly Unicode character-codes for the kinds of typographic glyphs you may find yourself adding to your stylesheets as `content` values.
5 | type: variables
6 | categories:
7 | - typography
8 | ---
9 |
10 | Instead of looking them up every time, use a variable.
11 |
12 | The names of these variables often correspond with HTML character entity references that you can use in your markup. For example, `$scut-nbsp` is the same character as ` ` in HTML.
13 |
14 |
Spaces
15 |
16 |
$scut-space
17 |
18 |
space ("\0020")
19 |
$scut-nbsp
20 |
21 |
non-breaking space ("\00a0")
22 |
23 |
Quotation Marks
24 |
25 |
$scut-quot
26 |
"
27 |
quotation mark ("\0022")
28 |
$scut-lsquo
29 |
‘
30 |
left single curly quote ("\2018")
31 |
$scut-rsquo
32 |
’
33 |
right single curly quote ("\2019")
34 |
$scut-ldquo
35 |
“
36 |
left double curly quote ("\201C")
37 |
$scut-rdquo
38 |
”
39 |
right double curly quote ("\201D")
40 |
$scut-lsaquo
41 |
‹
42 |
left single angle quote (guillemet) ("\2039")
43 |
$scut-rsaquo
44 |
›
45 |
right single angle quote (guillemet) ("\203A")
46 |
$scut-laquo
47 |
«
48 |
left double angle quote (guillemet) ("\00ab")
49 |
$scut-raquo
50 |
»
51 |
right double angle quote (guillemet) ("\00bb")
52 |
53 |
Other Punctuation
54 |
55 |
$scut-mdash
56 |
—
57 |
em dash (mutton) ("\2014")
58 |
$scut-ndash
59 |
–
60 |
en dash (nut) ("\2013")
61 |
$scut-hyphen
62 |
-
63 |
hyphen ("\2010")
64 |
$scut-amp
65 |
&
66 |
ampersand ("\0026")
67 |
$scut-para
68 |
¶
69 |
paragraph symbol (pilcrow) ("\00b6")
70 |
$scut-middot
71 |
·
72 |
middot (interpunct, interpoint) ("\00b7")
73 |
$scut-bull
74 |
•
75 |
bullet ("\2022")
76 |
$scut-whibull
77 |
◦
78 |
white bullet ("\25E6")
79 |
$scut-hellip
80 |
…
81 |
horizontal ellipsis ("\2026")
82 |
$scut-vellip
83 |
⋮
84 |
vertical ellipsis ("\22EE")
85 |
$scut-midhellip
86 |
⋯
87 |
midline horizontal ellipsis ("\22EF")
88 |
89 |
Various Symbols
90 |
91 |
$scut-gt
92 |
>
93 |
greater than ("\003e")
94 |
$scut-lt
95 |
<
96 |
less than ("\003c")
97 |
$scut-times
98 |
×
99 |
times ("\00D7")
100 |
$scut-bigtimes
101 |
✕
102 |
big times ("\2715")
103 |
$scut-checkmark
104 |
✓
105 |
checkmark ("\2713")
106 |
$scut-sect
107 |
§
108 |
section sign (double S, hurricane, sectional symbol, the legal doughnut, signum
109 | sectiōnis) ("\00a7")
110 |
$scut-oslash
111 |
Ø
112 |
o-slash (slashed o) ("\00f8")
113 |
114 |
Shapes
115 |
116 |
$scut-utri
117 |
▲
118 |
up-pointing triangle ("\25b2")
119 |
$scut-dtri
120 |
▼
121 |
down-pointing triangle ("\25bc")
122 |
$scut-ltri
123 |
◀
124 |
left-pointing triangle ("\25c0")
125 |
$scut-rtri
126 |
▶
127 |
right-pointing triangle ("\25b6")
128 |
$scut-ustri
129 |
▴
130 |
up-pointing small triangle ("\25b4")
131 |
$scut-dstri
132 |
▾
133 |
down-pointing small triangle ("\25be")
134 |
$scut-lstri
135 |
◂
136 |
left-pointing small triangle ("\25c2")
137 |
$scut-rstri
138 |
▸
139 |
right-pointing small triangle ("\25b8")
140 |
$scut-diamond
141 |
◆
142 |
diamond ("\25c6")
143 |
$scut-fisheye
144 |
◉
145 |
fisheye ("\25c9")
146 |
$scut-bullseye
147 |
◎
148 |
bullseye ("\25ce")
149 |
$scut-circle
150 |
●
151 |
circle ("\25cf")
152 |
$scut-whitecircle
153 |
○
154 |
white circle ("\25cb")
155 |
$scut-square
156 |
■
157 |
square ("\25a0")
158 |
$scut-whitesquare
159 |
□
160 |
white square ("\25a1")
161 |
$scut-ssquare
162 |
▪
163 |
small square ("\25aa")
164 |
$scut-swhitesquare
165 |
▫
166 |
small white square ("\25ab")
167 |
168 |
Currency
169 |
170 |
$scut-currency
171 |
¤
172 |
currency ("\00a4")
173 |
$scut-cent
174 |
¢
175 |
cent ("\00a2")
176 |
$scut-dollar
177 |
$
178 |
dollar ("\0024")
179 |
$scut-pound
180 |
£
181 |
pound ("\00a3")
182 |
$scut-euro
183 |
€
184 |
euro ("\20ac")
185 |
$scut-yen
186 |
¥
187 |
yen ("\00a5")
188 |
$scut-rupee
189 |
₹
190 |
rupee ("\20B9")
191 |
--------------------------------------------------------------------------------
/docs/content/entries/circle.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: circle
3 | slug: circle
4 | summary: Create a CSS circle.
5 | type: mixin only
6 | categories:
7 | - general
8 | args:
9 | - variable: $size
10 | comment: One value becomes both `width` and `height`.
11 | - variable: $color
12 | default: inherit
13 | compatibility: |
14 | This utility uses `border-radius`, which is not supported in IE8 — so IE8 will just get what it deserves: squares.
15 | example:
16 | html: |
17 |
18 |
19 |
20 | ---
21 |
22 | By default, the circle will inherit the color of its parent's text. Or you can designate a color yourself.
23 |
24 | *If you want to add a border to your circle, you must declare a color.*
25 |
--------------------------------------------------------------------------------
/docs/content/entries/clearfix.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: clearfix
3 | slug: clearfix
4 | summary: Make an element adapt its height to fit floated children, and clear floats in both directions.
5 | type: mixin and placeholder (same)
6 | categories:
7 | - layout
8 | references:
9 | - description: "Treehouse blog: \"CSS Tip: A Better Clearfix with Sass\""
10 | url: http://blog.teamtreehouse.com/a-better-clearfix-with-sass
11 | - description: "CSS-Tricks catalogs various clearfix hacks"
12 | url: http://css-tricks.com/snippets/css/clear-fix/
13 | - description: "Nicholas Gallagher: \"A New Micro Clearfix Hack\""
14 | url: http://nicolasgallagher.com/micro-clearfix-hack/
15 | example:
16 | show-html: true
17 | html: |
18 |
19 |
floated
20 |
floated
21 |
22 | ---
--------------------------------------------------------------------------------
/docs/content/entries/color-swap.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: color swap
3 | slug: color-swap
4 | summary: A shorthand for setting two color-states, — active (hover/focus) and inactive — involving text `color` and `background-color`, with the option of adding a transition.
5 | type: mixin-only
6 | categories:
7 | - general
8 | args:
9 | - variable: $off
10 | comment: Color(s) for the "off" state. A list of two values will designate `color` and `background-color` (in order). *One* value will be interpreted as `color` — unless the `$bg` argument, below, is set to `true`, in which case it will be `background-color`.
11 | - variable: $on
12 | comment: Color(s) for the "on" state (`:hover` and `:focus`). One or two values, interpreted the same way as `$off`, above.
13 | - variable: $duration
14 | default: "0"
15 | comment: The `transition-duration` between `$off` and `$on` states.
16 | - variable: $bg
17 | default: "false"
18 | comment: Set to `true` if you want to pass a single color value for the `$off` and `$on` arguments and you want that value interpreted as `background-color`. (By default, a single value will be intepreted as `color`.)
19 | example:
20 | html: |
21 |
Variation 1
22 |
Variation 2
23 |
Variation 3
24 | ---
25 |
26 | The examples should clarify the somewhat tricky arguments ...
--------------------------------------------------------------------------------
/docs/content/entries/coords.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: "coordinates"
3 | slug: coords
4 | summary: A shorthand for assigning coordinates to an element.
5 | type: mixin only
6 | categories:
7 | - layout
8 | args:
9 | - variable: $coordinates
10 | default: [n n n n]
11 | comment: |
12 | A list: `top`, `right`, `bottom`, and `left` coordinates. `n` abbreviates `null`. `a` is interchangeable with `auto`. See below.
13 | ---
14 |
15 | You *may* want to use this mixin on its own — but **this mixin's primary purpose is to facilitate the positioning mixins: [`scut-absolute`](absolute.html), [`scut-relative`](relative.html), and [`scut-fixed`](fixed.html)**, which pair your coordinates with a `position` value.
16 |
17 | Some guidlines for this mixin and its followers:
18 |
19 | - **`n` (the default value) signifies `null` or "nothing" or "no"** — so any coordinate assigned `n` is simply ignored, creating no rule in your compiled CSS.
20 | - **`a` can abbreviate `auto`** (both will work).
21 | - **All four values must be passed**, so use `n` as needed.
22 |
--------------------------------------------------------------------------------
/docs/content/entries/em.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: pixels-to-ems
3 | slug: em
4 | summary: Convert pixel-values to `em`-values.
5 | type: function, with an exposed settings-variable
6 | categories:
7 | - functions
8 | args:
9 | - variable: $pixels
10 | comment: The `px`-value you wish to convert to `em`s. No `px` unit necessary (e.g. `20` is fine, so is `20px`). *Passing a list will result in a list of `em` values* (see examples).
11 | - variable: $base
12 | default: 16
13 | comment: A base-value with which to calculate the `em`-value. If there are no units, it's interpreted as *pixels*; but you can use `em`-values, as well. **The `$base` default value can be changed for your project by setting your own `$scut-em-base` variable prior to using this function** (see examples).
14 | example:
15 | html: |
16 |
26 | Variation 3: 250px wide, in ems, with a different base size in px
27 |
28 |
29 |
30 | Variation 4: 250px wide, in pixels, with a different base size in px
31 |
32 |
33 |
34 | Variation 5: 275px wide, in ems, with a different base size in ems
35 |
36 |
37 |
38 | Variation 6: 275px wide, in pixels, with a different base size in ems
39 |
40 |
41 |
42 | Variation 7: Demonstrating a list of values being passed, as well as the option of including or leaving out the px unit.
43 |
44 |
45 |
46 | Variation 8: You can change the default $scut-em-base value to avoid setting it manually over and over again.
47 |
48 |
49 | ---
50 |
51 | *Pass a single value or a list of values.*
52 |
53 | This function eases the burden on those who build flexible, `em`-based layouts but still find themselves thinking in pixels or using tools that speak in pixels.
54 |
55 | Unlike other px-to-ems mixins I've seen, this one provides flexibility for situations in which the `em`-value has to be calculated in relation to something other than a default `16px font-size`.
56 |
57 | If a `$base` argument is provided, the `em`-value will be calculated relative to that `$base` (by default, `$base` is assumed to be `16`). If that `$base` is in pixels, everything should work smoothly, no questions asked. *You can also provide a `$base` in ems* — but this is trickier: it will only work if your `em`s are not more than one layer deep.
58 |
59 | (For example, if your element is the child of a container whose `font-size` is an `em`-value other than `1em`, you can pass the `font-size` as the `$base` argument and everything will work fine (see example variations 5 and 6), But if the container has a `font-size` in `em`s (not `1em`), and a child of it has a `font-size` in `em`s (also not `1em`), and you're adjusting a grandchild ... things will probably go wrong. So, again, I don't suggest trying to use this function three or more levels deep in `em`-relativity.)
60 |
61 | **If you're worried about these nesting issues and want to use `rem` units, instead, try the [`scut-rem` function](rem.html) or the [`scut-rem-fallback` mixin](rem-fallback.html).**
--------------------------------------------------------------------------------
/docs/content/entries/fill.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: fill
3 | slug: fill
4 | summary: Make an element fill its parent.
5 | type: mixin, with a default-values placeholder
6 | categories:
7 | - layout
8 | args:
9 | - variable: $width-height
10 | default: false
11 | comment: |
12 | Use 100% width and height (instead of zero coordinates) on all sides. See description and example below to learn *why* you might do this.
13 | example:
14 | show-html: true
15 | html: |
16 |
Default method:
17 |
18 | Parent provides the border
19 |
20 | Child provides the background
21 |
22 |
23 |
Default method not working with an <img> element (to illustrate the issue):
24 |
25 |
26 |
27 |
Width-height method working with an <img> element:
28 |
29 |
30 |
31 | ---
32 |
33 | This utility provides two methods for filling. Both position the element absolutely. Both set `top: 0` and `left: 0`. Then:
34 |
35 | - The default method, with `$width-height: false`, applies `right: 0; bottom: 0;` — so all four coordinates are `0`. **The default method works for "non-replaced" HTML elements (most of them).**
36 | - The width-height method, with `$width-height: true`, applies `width: 100%; height: 100%`. **The width-height method works the same for "replaced" and "non-replaced" HTML elements; *but this method can run into problems if you don't use `box-sizing: border-box` and the parent element has borders or padding*** (even with `border-box`, problems occasionally arise).
37 |
38 | To learn more about "replaced" vs. "non-replaced" elements, have a look at [this Sitepoint article on the subject](http://reference.sitepoint.com/css/replacedelements). Basically, "replaced" elements are those that have intrinsic dimensions determined by their content — examples include form elements (e.g. `input`, `textarea`, `button`, `selected`), media elements (e.g. `img`, `video`), `iframe` elements, and probably others I don't know about. For replaced elements, you need to manually set whatever dimensions you want to control: just positioning absolutely and setting all coordinates won't do. See the example below.
39 |
40 | And note this: **Because this mixin positions the element absolutely, *the parent-to-be-filled must be *positioned** — meaning that you must assign `position: relative` to the parent if its position is not already `absolute` or `fixed`.
--------------------------------------------------------------------------------
/docs/content/entries/fixed.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: "fixed"
3 | slug: fixed
4 | summary: Fix an element's position and assign its coordinates, all in one line of SCSS.
5 | type: mixin, with default-values placeholder
6 | categories:
7 | - layout
8 | args:
9 | - variable: $coordinates
10 | default: [0 n n 0]
11 | comment: "See information about [`scut-coords`](coords.html)."
12 | example:
13 | show-html: true
14 | html: |
15 |
See the bottom right
16 |
Here's your example.
17 | ---
18 |
19 | Notice the example in the bottom right.
20 |
--------------------------------------------------------------------------------
/docs/content/entries/font-face.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: font-face
3 | slug: font-face
4 | summary: Implement cross-browser `@font-face` with the greatest of ease.
5 | type: mixin only
6 | categories:
7 | - typography
8 | args:
9 | - variable: $font-family
10 | comment: A name for the font.
11 | - variable: $file-path
12 | comment: The relative path to the font's files, **including the files' common path and name and excluding their extensions**.
13 | - variable: $weight
14 | default: normal
15 | comment: "A `font-weight` value. **This argument is *optional*: you can just leave it out for your italic non-bold fonts.** See the example below."
16 | - variable: $style
17 | default: normal
18 | comment: A `font-style` value.
19 | - variable: $formats
20 | default: eot woff2 woff ttf svg
21 | comment: "The font formats that you would like to include (in case you don't have them all, or you want to thin out your code for modern browsers, or whatever your private reasons)."
22 | references:
23 | - description: "CSS-Tricks: \"Using @font-face\""
24 | url: http://css-tricks.com/snippets/css/using-font-face/
25 | - description: "Fontspring: \"The New Bulletproof @Font-Face Syntax\""
26 | url: http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
27 | ---
28 |
29 | The method Scut uses is that advocated by CSS-Tricks and used by Font Squirrel (see references). It solves all kinds of cross-browser issues going all the way back to IE6.
30 |
31 | For example, to implement all varieties of Arvo:
32 |
37 |
38 | If, for whatever reason, you do not want to include all of the default formats that are required for the far-far-back cross-browser compatibility (`eot`, `woff2`, `woff`, `ttf`, and `svg`), then include your own `$formats` list, e.g.:
39 |
40 |
41 | If you have a font but don't have all the varieties, try Font Squirrel's [Webfont Generator](http://www.fontsquirrel.com/tools/webfont-generator).
42 |
--------------------------------------------------------------------------------
/docs/content/entries/hanging-indent.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: hanging indent
3 | slug: hanging-indent
4 | summary: Implement a "hanging indent," which applies to all lines *but* the first — as opposed to the "normal" indent (applying *only* to the first line), that you're accustomed to from paragraphs in those print publications you may have glanced at before computers took over your life.
5 | type: mixin, with default-values placeholder
6 | categories:
7 | - typography
8 | args:
9 | - variable: $indent
10 | default: 1em
11 | example:
12 | html: |
13 |
Lastname, Firstname. Title of the Work. City, State: Publisher, YEAR. Print.
14 |
15 |
Lastnameofanotherlady, Firstname. Title of Another Work. City, State: Publisher, YEAR. Print.
16 |
17 | ---
18 |
19 | My Chicago Manual of Style also calls it the flush-and-hang style. I like that.
20 |
21 | Hanging indents are standard fare for indexes and works cited, but may seem obscure to you if you're no scholar … until one day you realize that you do need them, and have needed them all along …
--------------------------------------------------------------------------------
/docs/content/entries/hd-bp.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: HD (HiDPI) breakpoint
3 | slug: hd-bp
4 | summary: Write effective resolution-based `@media`-queries, without trying too hard.
5 | type: mixin only
6 | categories:
7 | - general
8 | args:
9 | - variable: $ratio
10 | default: 1.3
11 | comment: A *minimum* resolution value.
12 | references:
13 | - description: The involved Github discussion that resulted in HTML5 Boilerplate's HiDPI breakpoint
14 | url: https://github.com/h5bp/html5-boilerplate/issues/1127
15 | - description: Matt Thomas's post about Wordpress's HiDPI breakpoint (implemented in WordPress core 3.5)
16 | url: http://mattnt.com/2012/11/18/making-sense-of-hidpi-media-queries/
17 | example:
18 | html: |
19 |
If you are using an HD screen (1.3 resolution or higher), this paragraph's background will be blue — otherwise, a sad low-definition gray.
20 | ---
21 |
22 | This mixin sets `-o-min-device-pixel-ratio`, `-webkit-min-device-pixel-ratio`, and `min-resolution`. If you're curious about these choices, read the References below.
--------------------------------------------------------------------------------
/docs/content/entries/hide-visually.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: hide visually
3 | slug: hide-visually
4 | summary: Hide an element visually, and effectively remove it from page layout, without hiding it from screen readers.
5 | type: mixin and placeholder (same)
6 | categories:
7 | - general
8 | references:
9 | - description: "Jonathan Snook: \"Hiding Content for Accessibility\""
10 | url: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
11 | - description: HTML5 Boilerplate discussion and research
12 | url: https://github.com/h5bp/html5-boilerplate/issues/194/
13 | example:
14 | show-html: true
15 | html: |
16 |
This element is visually hidden.
17 |
You can't see the element above this one, can you?
18 | ---
19 |
20 | Vital accessibility practice.
--------------------------------------------------------------------------------
/docs/content/entries/image-replace.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: image replacement
3 | slug: image-replace
4 | summary: Include text in the markup but replace it with an image.
5 | type: mixin and placeholder (same)
6 | categories:
7 | - general
8 | references:
9 | - description: "L. Jeffrey Zeldman: \"Replacing the -9999px Hack (New Image Replacement)\""
10 | url: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
11 | example:
12 | show-html: true
13 | html: |
14 |
The following image is replacing text:
15 |
This text has been replaced.
16 | ---
17 |
18 | Be warned: you might run into occasional bugs with this method of image-replacement *unless you've also set a `width` on your element.*
--------------------------------------------------------------------------------
/docs/content/entries/indented-ps.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: indented paragraphs
3 | slug: indented-ps
4 | summary: Indent paragraphs instead of spacing them, as tends to happen in those "books" and "magazines" that old people read.
5 | type: mixin, with default-values placeholder
6 | categories:
7 | - typography
8 | args:
9 | - variable: $indent
10 | default: 1.5em
11 | - variable: $no-first-indent
12 | default: "true"
13 | comment: It is a not uncommon printing practice to leave the first paragraph un-indented.
14 | example:
15 | html: |
16 |
17 |
Default (first line un-indented)
18 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
19 |
Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
20 |
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
21 |
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
22 |
23 |
24 |
Variant (first line is no exception; larger indent)
25 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
26 |
Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
27 |
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
28 |
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
29 |
30 | ---
--------------------------------------------------------------------------------
/docs/content/entries/key-val.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: key-value punctuation
3 | slug: key-val
4 | summary: Style (and punctuate) key-value pairs that you have semantically marked-up as definition lists.
5 | type: mixin, with default-values placeholder
6 | categories:
7 | - typography
8 | args:
9 | - variable: $divider
10 | default: "\":\""
11 | comment: Content (most likely punctuation) to divide the *term* from the *description*.
12 | - variable: $pad
13 | default: 0.25em
14 | comment: Horizontal space between the `$divider` and the description.
15 | - variable: $indent
16 | default: 1em
17 | comment: Indentation of the description.
18 | - variable: $spacing
19 | default: 0
20 | comment: Vertical space between term-description pairs.
21 | - variable: $pad-left
22 | default: 0
23 | comment: Horizontal space between the `$divider` and the term.
24 | example:
25 | show-html: true
26 | html: |
27 |
28 |
29 |
Name
30 |
Lorem Ipsum
31 |
Occupation
32 |
Placeholder
33 |
Children
34 |
None
35 |
Excuses
36 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
37 |
38 |
39 |
Consolation
40 |
Alleviation of misery or distress of mind
41 |
Depression
42 |
A sinking of the spirits
43 |
Equanimity
44 |
A state of resistance to elation, depression, anger, etc.
45 |
46 |
47 |
Doom
48 |
Fate decreed or determined; fixed fortune; irrevocable destiny.
49 |
Waggle
50 |
To cause to wag frequently and with short motions; move first one way and then the other.
51 |
Pantaloon
52 |
In early Italian comedy, a character usually represented as a lean and foolish old man (properly a Venetian), wearing spectacles and slippers.
53 |
54 |
55 | references:
56 | - description: WhatWG on the <dl> element
57 | url: "http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-dl-element"
58 | - description: HTML5 Doctor on the <dl> element
59 | url: "http://html5doctor.com/the-dl-element/"
60 | ---
61 |
62 | You've probably been wondering how to *semantically mark-up your lists of keys and values* — your labelled bits of information. You've probably been gnawing your fingernails to nubs, panicked with uncertainty. Well wait 'till you hear this: The answer seems to be *description (or association) lists* — the `
`, `
`, and `
` elements. (See the References listed below.)
63 |
64 | **WhatWG says "The dl element represents an association list consisting of zero or more name-value groups (a description list)."** There you have it. What you've been looking for.
65 |
66 | One traditional manner of *styling* such associative lists is with *colon-separated name-value pairs*, the first line flush left and following lines indented (the fabled ["hanging indent"](hanging-indent.html)). This mixin should help make that dream a reality. And it also enables many other common key-value formats, a couple of which are shown in the examples below.
67 |
68 | **Apply the mixin to your `
` element.**
69 |
70 | *A note about spacing*: There are several spacing variables — so this might clear things up:
71 | - On the *first line*, you have: `[term][$pad-left][$divider][$pad][description]`
72 | - On *following lines* the description is indented with `$indent` (see Example 1). (You will also notice the effects of `$indent` on the first line if it is wider than your term — as in Examples 2 and 3.)
73 | - Vertical spacing between term-description groups is controlled with `$spacing` (see Example 2).
--------------------------------------------------------------------------------
/docs/content/entries/link-bb.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: link bottom-bordered
3 | slug: link-bb
4 | summary: Replace standard link underlining with a bottom border.
5 | type: mixin, with default-values placeholder
6 | categories:
7 | - typography
8 | args:
9 | - variable: $color
10 | default: inherit
11 | comment: A `border-bottom-color` value. `inherit` will use the text color.
12 | - variable: $style
13 | default: solid
14 | comment: A `border-bottom-style` value.
15 | - variable: $width
16 | default: 1px
17 | comment: A `border-bottom-width` value.
18 | example:
19 | html: |
20 |
22 | ---
23 |
24 | People seem to like this trick, at least some people (I do), because it provides a little extra space between the text and the line. Other pleasing effects are also possible by passing arguments.
25 |
26 | Of course, as always, you can add your own rules after the mixin to further customize. For example, if you want to define a special color for the bottom-border on hover, just do it (see Example 2).
--------------------------------------------------------------------------------
/docs/content/entries/link-unstyled.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: "link: unstyled"
3 | slug: link-unstyled
4 | summary: Remove default styling from a link (anchor tag).
5 | type: mixin, with extension placeholder
6 | categories:
7 | - typography
8 | args:
9 | example:
10 | html: |
11 | Unstyled Link
12 | ---
13 |
14 | Specifically, remove `text-decoration`, and set `color: inherit`.
15 |
--------------------------------------------------------------------------------
/docs/content/entries/list-custom.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: "list: custom"
3 | slug: list-custom
4 | summary: Fully customize your list-item markers, with either characters or counters.
5 | type: mixin only
6 | categories:
7 | - layout
8 | args:
9 | - variable: $content
10 | default: "\"\\2022\" (bullet)"
11 | comment: |
12 | A character to mark list items; *or* enter `count` to indicate that you want to use a counter, optionally followed by 1) a string to follow the counter, and 2) a `list-style-type` for the counter. See examples.
13 | - variable: $marker-width
14 | default: 0.75em
15 | comment: |
16 | A width for the list-item marker-space — a.k.a the left-margin of the list-item content.
17 | - variable: $pad
18 | default: 0
19 | comment: |
20 | Padding *to the left of* the list-item marker.
21 | - variable: $no-margin
22 | default: "false"
23 | comment: If `true`, top and bottom margins will be removed from the list. *Note that the default here is `false`, unlike for the other list mixins.*
24 | contentblock: |
25 | A content block passed to this mixin will be applied to the list-item markers.
26 | example:
27 | html: |
28 |
29 |
short item
30 |
medium item medium item medium item medium item
31 |
long item long item long item long item long item long item long item long item long item long item long item long item long item
32 |
33 |
34 |
short item
35 |
medium item medium item medium item medium item
36 |
long item long item long item long item long item long item long item long item long item long item long item long item long item
37 |
38 |
39 |
short item
40 |
medium item medium item medium item medium item
41 |
long item long item long item long item long item long item long item long item long item long item long item long item long item
42 |
43 |
44 |
short item
45 |
medium item medium item medium item medium item
46 |
long item long item long item long item long item long item long item long item long item long item long item long item long item
47 |
48 | references:
49 | - description: "CSS-Tricks: \"Numbering In Style\""
50 | url: "http://css-tricks.com/numbering-in-style/"
51 | - description: "Gabriele Romanato: \"How To Benefit From CSS Generated Content and Counter\" (Smashing Magazine)"
52 | url: "http://coding.smashingmagazine.com/2013/04/12/css-generated-content-counters/"
53 | - description: "MDN: \"Using CSS Counters\""
54 | url: "https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters"
55 | ---
56 |
57 | This utility creates the list-item marker as an absolutely positioned `:before` psuedo-element, which can be given any `$content` you'd like and styled just like any other element.
58 |
59 | Pass a string or unicode value as `$content` and things should explain themselves. Consider using [`scut-characters`](characters.html).
60 |
61 | Or if you want a counter, pass `count`, optionally followed by 1) a string to follow the counter (e.g. in this list I'm using ")" after the counter), and 2) a `list-style-type` for the counter (refer to MDN's reference list).
62 |
63 | Spacing is set with the `$marker-width` and `$pad` arguments. And any amount of customization can happen in the `@content` block.
64 |
65 | Refer to the examples, please, for further clarification. Please.
--------------------------------------------------------------------------------
/docs/content/entries/list-divided.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: "list: divided"
3 | slug: list-divided
4 | summary: Create a floated list with a dividing pseudo-element between list items.
5 | type: mixin, with extension placeholder(s)
6 | categories:
7 | - layout
8 | args:
9 | - variable: $divider
10 | default: "\"|\""
11 | - variable: $space
12 | default: 0.5em
13 | comment: Spacing to separate your dividers (on both sides) from your list items.
14 | - variable: $dir
15 | default: left
16 | comment: The `float` direction.
17 | - variable: $height
18 | default: false
19 | comment: Manually set a height for the list items so that you can use tall dividers. See examples below.
20 | - variable: $no-margin
21 | default: true
22 | comment: If `true`, top and bottom margins will be removed from the list.
23 | contentblock: |
24 | A content block passed to this mixin will be applied to the dividing pseudo-elements.
25 | example:
26 | html: |
27 |
28 |
list item 1
29 |
list item 2
30 |
list item 3
31 |
32 |
33 |
list item 1
34 |
list item 2
35 |
list item 3
36 |
37 |
38 |
list item 1
39 |
list item 2
40 |
list item 3
41 |
42 |
43 |
list item 1
44 |
list item 2
45 |
list item 3
46 |
47 | ---
48 |
49 | A couple of common variations have their own placeholders:
50 |
51 | - **`%scut-list-bar`**
52 | - **`%scut-list-breadcrumb`**
53 |
54 | But, of course, all things are possible.
55 |
56 | The `$height` argument is kind of tricky: If you want a `$divider` *taller* than your list items, you need include a `$height` argument to ensure nice neat vertical alignment. See the example below.
57 |
58 | Only the list's immediate children are divided (`ul > li`): Scut does not presume to know what you plan to do with sub-lists.
--------------------------------------------------------------------------------
/docs/content/entries/list-floated.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: "list: floated"
3 | slug: list-floated
4 | summary: De-style a list and float its items.
5 | type: mixin, with default-values placeholder
6 | categories:
7 | - layout
8 | args:
9 | - variable: $space
10 | default: "false"
11 | comment: Spacing to separate the floated list items.
12 | - variable: $dir
13 | default: left
14 | comment: The `float` direction.
15 | - variable: $no-margin
16 | default: true
17 | comment: If `true`, top and bottom margins will be removed from the list.
18 | example:
19 | html: |
20 |
21 |
list item 1
22 |
list item 2
23 |
list item 3
24 |
25 |
26 |
list item 1
27 |
list item 2
28 |
list item 3
29 |
30 |
31 |
list item 1
32 |
list item 2
33 |
list item 3
34 |
35 | ---
36 |
37 | Float items to the left or to the right, with or without spacing between them.
38 |
39 | Use a floated list instead of an inline list (see [`scut-list-inline`](list-inline.html)) when you want your list items snuggled right next to each other.
40 |
41 | Only the list's immediate children are floated (`ul > li`): Scut does not presume to know what you might plan to do with sub-lists.
--------------------------------------------------------------------------------
/docs/content/entries/list-inline.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: "list: inline"
3 | slug: list-inline
4 | summary: De-style a list and inline its items.
5 | type: mixin, with default-values placeholder
6 | categories:
7 | - layout
8 | args:
9 | - variable: $space
10 | default: "false"
11 | comment: Spacing to separate the inline list items.
12 | - variable: $no-margin
13 | default: true
14 | comment: If `true`, top and bottom margins will be removed from the list.
15 | example:
16 | html: |
17 |
18 |
list item 1
19 |
list item 2
20 |
list item 3
21 |
22 |
23 |
list item 1
24 |
list item 2
25 |
list item 3
26 |
27 | ---
28 |
29 | Use an inline list if you don't mind that your list items might be spaced out a little extra, like inline words. If you *need* them flush, with no interstitial space, try a [floated list](list-floated.html).
30 |
31 | Only the list's immediate children are inlined (`ul > li`): Scut does not presume to know what you might plan to do with sub-lists.
--------------------------------------------------------------------------------
/docs/content/entries/list-punctuated.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: "list: punctuated"
3 | slug: list-punctuated
4 | summary: Punctuate an HTML list.
5 | type: mixin, with extension placeholder(s)
6 | categories:
7 | - layout
8 | args:
9 | - variable: $divider
10 | default: "\", \""
11 | - variable: $display
12 | default: inline
13 | comment: Change to `inline-block` if you don't want your list items spanning lines.
14 | - variable: $no-margin
15 | default: true
16 | comment: If `true`, top and bottom margins will be removed from the list.
17 | compatibility: |
18 | This utility uses the `:not` and `:last-child` selectors, which are not supported in IE8 without a polyfill.
19 | example:
20 | html: |
21 |
22 |
list item
23 |
list item
24 |
list item
25 |
26 |
27 |
list item
28 |
list item
29 |
list item
30 |
31 |
32 |
list item
33 |
list item
34 |
list item
35 |
36 | ---
37 |
38 | Keep your HTML semantic and your punctuation traditional.
39 |
40 | Since the most common punctuated list uses commas, commas are the default `$divider` and the comma list is available as its own placeholder:
41 |
42 | - **`%scut-list-comma`**
43 |
44 | Only the list's immediate children are punctuated (`ul > li`): Scut does not presume to know what you plan to do with sub-lists.
--------------------------------------------------------------------------------
/docs/content/entries/list-unstyled.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: "list: unstyled"
3 | slug: list-unstyled
4 | summary: Remove default styling from a list.
5 | type: mixin, with default-values placeholder
6 | categories:
7 | - layout
8 | args:
9 | - variable: $no-margin
10 | default: true
11 | comment: If `true`, top and bottom margins will be removed from the list.
12 | example:
13 | html: |
14 |
15 |
list item
16 |
list item
17 |
list item
18 |
19 |
20 |
list-with-margins item
21 |
list-with-margins item
22 |
list-with-margins item
23 |
24 | ---
25 |
26 | Specifically, remove `padding-left`, `list-style-type`, and optionally `margin-top` and `margin-bottom`.
--------------------------------------------------------------------------------
/docs/content/entries/margin.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: margin
3 | slug: margin
4 | summary: A slight but useful variation on vanilla CSS's margin shorthand, to ease development.
5 | type: mixin only
6 | categories:
7 | - layout
8 | args:
9 | - variable: $margin
10 | comment: |
11 | A list (1 to 4 values) will set margin rules on multiple sides. `n` abbreviates `null` and creates no rule.
12 | example:
13 | html: |
14 |
15 |
Variation 1
16 |
17 |
18 |
Variation 2
19 |
20 |
21 |
Variation 3
22 |
23 | ---
24 |
25 | Pass a list (1 to 4 values, not comma-separated) and `scut-margin` will
26 |
27 | - **create all margins as separate rules** (that is, it *will not use the shorthand*, but will instead create `margin-top`, `margin-right`, etc.); and
28 | - **allow you to pass `n` to avoid creating a rule on any side**. (As elsewhere in Scut, `n` stands for `null` and results in no rule being created.)
29 |
30 | By using the mixin in this way, you will avoid some troubles that can occur, especially when *changing* margins on an element (in a media query, for instance; or overriding a cascaded style). *The point is to make it easier to override the values you want to override without affecting those you want to leave alone.*
31 |
32 | If you like this one, you will like [`scut-padding`](padding.html).
--------------------------------------------------------------------------------
/docs/content/entries/padding.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: padding
3 | slug: padding
4 | summary: A slight but useful variation on vanilla CSS's padding shorthand, to ease development.
5 | type: mixin only
6 | categories:
7 | - layout
8 | args:
9 | - variable: $padding
10 | comment: |
11 | A list (1 to 4 values) will set padding rules on multiple sides. `n` abbreviates `null` and creates no rule.
12 | example:
13 | html: |
14 |
15 |
Variation 1
16 |
17 |
18 |
Variation 2
19 |
20 |
21 |
Variation 3
22 |
23 | ---
24 |
25 | Pass a list (1 to 4 values, not comma-separated) and `scut-padding` will
26 |
27 | - **create all paddings as separate rules** (that is, it *will not* use the shorthand, but will instead create `padding-top`, `padding-right`, etc.); and
28 | - **allow you to pass `n` to avoid creating a rule on any side**. (As elsewhere in Scut, `n` stands for `null` and results in no rule being created.)
29 |
30 | By using the mixin in this way, you will avoid some troubles that can occur when *changing* paddings on an element (in a media query, for instance; or overriding a cascaded style). *The point is to make it easier to override the values you want to override without affecting those you want to leave alone.*
31 |
32 | If you like this one, you will like [`scut-margin`](margin.html).
--------------------------------------------------------------------------------
/docs/content/entries/ratio-box.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: ratio-box
3 | slug: ratio-box
4 | summary: Give an element with unknown or fluid width a fixed aspect ratio.
5 | type: mixin, with default-values placeholder
6 | categories:
7 | - layout
8 | args:
9 | - variable: $ratio
10 | default: 1/1
11 | comment: "The ratio-box's ratio: a fraction signifying width / height. The default, 1/1, is a square. Photos and videos usually come in 4/3 or 16/9 ratios."
12 | references:
13 | - description: "Thierry Koblentz: \"Creating Intrinsic Ratios for Video\" (A List Apart)"
14 | url: "http://alistapart.com/article/creating-intrinsic-ratios-for-video"
15 | - description: "Nicholas Gallagher: \"Flexible CSS Cover Images\""
16 | url: "http://nicolasgallagher.com/flexible-css-cover-images/"
17 | example:
18 | show-html: true
19 | html: |
20 |
These containers have different widths, but the ratio-boxes remain squares.
21 |
22 |
23 |
And the same principle applies to these, which maintain a 16/9 ratio and use a different classname for the inner element:
24 |
25 |
26 |
Content inside
27 |
28 | ---
29 |
30 | This is especially useful if you want a `background-image` to preserve a ratio as a regular `` can. (For more details on how you might tailor the presentation of those `background-image`s, have a look at the Nicholas Gallagher reference below.)
31 |
32 | **An important note: Any content you put inside the ratio-boxes needs to be absolutely positioned.** Otherwise it will screw with the ratio. So `position: relative` is set on the ratio-box to ease that. See the last example.
--------------------------------------------------------------------------------
/docs/content/entries/relative.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: "relative"
3 | slug: relative
4 | summary: Relatively position an element and assign its coordinates, all in one line of SCSS.
5 | type: mixin only
6 | categories:
7 | - layout
8 | args:
9 | - variable: $coordinates
10 | default: [n n n n]
11 | comment: "See information about [`scut-coords`](coords.html)."
12 | example:
13 | html: |
14 |
Some of these words are positioned in strange ways.
15 | ---
16 |
--------------------------------------------------------------------------------
/docs/content/entries/rem-fallback.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: REMs with fallback
3 | slug: rem-fallback
4 | summary: Use `rem` values with a `px`-value fallback for IE8- and Opera Mini.
5 | type: mixin only
6 | categories:
7 | - general
8 | args:
9 | - variable: $pixels
10 | comment: |
11 | The `px`-value you wish to convert to `rem`s. No `px` unit necessary (e.g. `20` is fine, so is `20px`). *Passing a list will result in a list of `rem` values* (see examples).
12 | - variable: $property
13 | default: font-size
14 | comment: |
15 | The CSS property to which you'll apply the `rem`-value (along with its `px`-value fallback).
16 | references:
17 | - description: "Jonathan Snook: \"Font Sizing With Rem\""
18 | url: "http://snook.ca/archives/html_and_css/font-size-with-rem"
19 | example:
20 | html: |
21 |
22 | Variation 1: with a font-size of 20px.
23 |
24 |
25 | Variation 2: with a font-size in rems matching 20px, and a true-pixel-value fallback.
26 |
27 |
28 | Variation 3: Demonstrating 1) the $property argument, 2) that you can pass a list of pixels-values, and 3) that you can include or exclude the px-unit.
29 |
30 | ---
31 |
32 | ***Note: The base pixel value with which to calculate your `rem`-value is by default `16px`: to change this for your project, you can set your own `$scut-rem-base` variable prior to using this mixin***.
33 |
34 | Take a look at [Jonathan Snook's article on the issue](http://snook.ca/archives/html_and_css/font-size-with-rem) to learn about this fallback trick — why it's necessary and why it works.
35 |
36 | **If you don't need to support IE8 and Opera Mini, consider using the [`scut-rem` function](rem.html)**, instead, so you don't have to pass the CSS property as an argument.
37 |
38 | Also, have a look at [`scut-rem`'s entry](rem.html) for more information (and references) about `rem` units, how they differ from `em` units, and the compatibility issue.
--------------------------------------------------------------------------------
/docs/content/entries/rem.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: pixels-to-rems
3 | slug: rem
4 | summary: Convert pixel-values to `rem`-values.
5 | type: function
6 | categories:
7 | - functions
8 | args:
9 | - variable: $pixels
10 | comment: |
11 | The `px`-value you wish to convert to `rem`s. No `px` unit necessary (e.g. `20` is fine, so is `20px`). *Passing a list will result in a list of `rem` values* (see examples).
12 | compatibility: |
13 | IE8 and Opera Mini do not support `rem` units. If you want to support these browsers you must provide a fallback in pixels — which Scut can do with the [`scut-rem-fallback` mixin](rem-fallback.html).
14 | example:
15 | show-html: true
16 | html: |
17 |
25 | Variation 3: 24px font-size wide in rems, nested inside a div with a font-size of 1000px. No effect!
26 |
27 |
28 |
29 | Variation 4: Showing that a list of px values can be passed, and that the px unit is optional.
30 |
31 | ---
32 |
33 | *Pass a single value or a list of values.*
34 |
35 | ***Note: The base pixel value with which to calculate your `rem`-value is by default `16px`: to change this for your project, you can set your own `$scut-rem-base` variable prior to using this function***. *(Unlike [`scut-em`](em.html), it is presumed that you will only need to set this variable *once* per project, so it is not also an argument in the function.)*
36 |
37 | Like [`scut-em`](em.html), this function makes (limited parts of) life easier for those of us who appreciate the many benefits of relative units but still find themselves thinking in pixels, or (what's especially common) dealing with tools or other people that speak in pixels.
38 |
39 | For a good description of the differences between `em` and `rem` units, coupled with some examples of why `rem`s are handy, read ["In Defense of Rem Units" on the Harvest blog](http://techtime.getharvest.com/blog/in-defense-of-rem-units). For an alternative perspective, in favor of `em`s, try [Filament Group's "On ems and rems"](http://filamentgroup.com/lab/on_ems_and_rems/). The example below illustrates the main difference: `rem`s are always relative to the root `html` element, not to the subject-element's parent.
40 |
41 | **Please note the compatibility issue with this utility: If you need a `px`-value fallbacks to support IE8 and Opera Mini, use the [`scut-rem-fallback` mixin](rem-fallback.html) instead of this function.**
42 |
43 | If you're *really* worried about this compatibility issue, you might also consider using [`scut-em`](em.html), instead.
--------------------------------------------------------------------------------
/docs/content/entries/reset.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: reset
3 | slug: reset
4 | summary: A small set of modular resets, each one an independent mixin.
5 | type: mixin only
6 | categories:
7 | - general
8 | args:
9 | - variable: $exclude
10 | default: "false"
11 | comment: Names of reset modules to exclude.
12 | references:
13 | - description: "CSS-Tricks: \"Inheriting box-sizing Probably Slightly Better Best-Practice\""
14 | url: "http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/"
15 | ---
16 |
17 | The master mixin, `scut-reset`, calls them all *minus any that you exclude with the `$exclude` argument`*. Alternately, you could pick and choose yourself, calling only those you need.
18 |
19 | Also, you could *scope* (most of) these resets by nesting them within an element. (You can't really scope `antialias` because it sets a rule on the `body` element.)
20 |
21 | The modular reset mixins include the following (*I suggest viewing the source code as well, so you know what you're getting into*):
22 |
23 | - **border-box**: make everything a `border-box` (by setting `border-box` on `` and `inherit` on everything else — so that if you have a component that was built to be `content-box`, you can make that switch by simply changing the parent container to `content-box`, and its children will inherit; see the CSS-Tricks reference about this)
24 | - **antialias**: set `-webkit-font-smoothing: antialiased` on everything. (As with `border-box`, it will set the property on `` and `inherit` on everything else.)
25 | - **semanticize**: make headers (`
`) and `` elements semantic rather than presentational
26 | - **pointer**: give `cursor: pointer` to clickable form elements (`label`, `selected`, `option`, `button`)
27 | - **form**: reset `fieldset` and restrict `textarea` to `resize: vertical`
28 | - **button**: reset default button styles that never get used and nobody seems to like (including `button`, `input[type="button"]`, `input[type="submit"]`, and `input[type="reset"]`)
29 | - **paragraph**: remove `margin-top` from the `first-of-type` paragraph and `margin-bottom` from the `last-of-type` one
30 | - **media**: make `img` and `video` elements fluid-by-default, with `max-width: 100%;` and `height: auto`
31 | - **figure**: remove default margins from `figure`
32 |
33 | *These "reset" modules are not meant to serve the same purpose as a big reset/normalizer like the ol' Eric Meyer, the Compass Reset, or Normalize.* Leave that base-level, grand-scheme-of-things resetting to one of those tried-and-true standards. Scut's "reset" modules, in contrast, are opinionated little attacks on specific elements.
34 |
35 | Here's the reasoning: I've found myself implementing the same element-specific resets over and over again, project after project — making headers semantic rather than presentational; removing all the default button styling; and so on. So I decided to start stashing those resets for future projects. That's what `scut-reset` is.
36 |
37 | If you want to use *all* the `scut-reset` modules, somewhere in your stylesheet (not nested within any other rulesets), do this:
38 |
39 |
@include scut-reset;
40 |
41 | To exclude specific modules, pass their names in a list *without commas* as the `$exclude` argument. For example, to avoid the `semanticize` and `paragraph` modules:
42 |
43 |
@include scut-reset(semanticize paragraph);
44 |
45 | To instead call *only specific modules*, use `@include scut-reset-[name]`. For example:
46 |
47 |
49 |
50 | And to scope the rest, just nest. See!
51 |
52 |
// call all the resets but `paragraph`
53 | @include scut-reset(paragraph);
54 | // but use `scut-reset-paragraph` within a specific context
55 | .article-content {
56 | @include scut-reset-paragraph;
57 | }
58 |
--------------------------------------------------------------------------------
/docs/content/entries/reverse-italics.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: reverse italics
3 | slug: reverse-italics
4 | summary: Italicize a section of text while *de-italicizing* those elements that would normally be italicized — such as ``, ``, and ``.
5 | type: mixin, with default-values placeholder
6 | categories:
7 | - typography
8 | args:
9 | - variable: $elements
10 | default: "false"
11 | comment: "A list (not comma separated) of CSS selectors for elements that you do *not* want italicized (``, ``, and `` are already taken care of: see below). *Wrap your selectors in quotes.*"
12 | example:
13 | show-html: true
14 | html: |
15 |
DEFAULT:
16 | Some <em> text sit amet, consectetuer adipiscing elit.
17 | Some <cite> text, aenean commodo ligula eget dolor.
18 | Some <strong> text Cum sociis natoque penatibus
19 | some <i> text et magnis dis parturient montes, nascetur ridiculus mus
20 | some <b> text.
21 | And a <span> with the classname "no-italics".
22 |
23 |
VARIANT:
24 | Some <em> text sit amet, consectetuer adipiscing elit.
25 | Some <cite> text, aenean commodo ligula eget dolor.
26 | Some <strong> text Cum sociis natoque penatibus
27 | some <i> text et magnis dis parturient montes, nascetur ridiculus mus
28 | some <b> text.
29 | And a <span> with the classname "no-italics".
30 |
31 | ---
32 |
33 | This is common typographical practice: In non-italicized text, italics provide mild stress; but in an italicized passage, it is the *non-italicized* text that is stressed. (Everything is relative and nothing means anything.)
34 |
35 | The elements ``, ``, and ``, which browsers typically italicize, are by default de-italicized. To de-italicize *more* elements, include their selectors in a list that you pass to the mixin.
--------------------------------------------------------------------------------
/docs/content/entries/selected.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: selected
3 | slug: selected
4 | summary: Apply rules to `:hover` and `:focus` (and, optionally, `:active`) states.
5 | type: mixin only
6 | categories:
7 | - general
8 | args:
9 | - variable: $active
10 | default: "false"
11 | comment: Declare whether or not to target the `:active` state, in addition to `:hover` and `:focus`.
12 | contentblock: |
13 | A content block passed to this mixin will apply to the selected states (`:hover` and `:focus` — and, optionally, `:active`).
14 | example:
15 | html: |
16 |
17 |
18 | ---
19 |
20 | Make your site more friendly for keyboard navigation, especially, by accounting for the various means of targeting elements.
--------------------------------------------------------------------------------
/docs/content/entries/side-lined.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: side-lined
3 | slug: side-lined
4 | summary: Create horizontal lines extending from either side of center-aligned text.
5 | type: mixin, with default-values placeholder
6 | categories:
7 | - typography
8 | args:
9 | - variable: $height
10 | default: 1px
11 | comment: The height of the lines.
12 | - variable: $space
13 | default: 0.5em
14 | comment: Horizontal spacing between the text and the lines (on both sides).
15 | - variable: $color
16 | default: inherit
17 | comment: The color of the lines.
18 | - variable: $style
19 | default: solid
20 | comment: The `border-style` of the lines.
21 | - variable: $v-adjust
22 | default: false
23 | comment: Vertical adjustment to the lines, adding space *from the bottom*. See examples below.
24 | - variable: $double
25 | default: false
26 | comment: Double your lines by adding *a value for the distance between the two lines you want*.
27 | example:
28 | html: |
29 |
Variation 1
30 |
Variation 2
31 |
Variation 3
32 |
Variation 4
33 | ---
34 |
35 | Woman- and mankind have always loved this flourish. Look at the examples below. You want to do that!
36 |
37 | By default, the lines will be vertically aligned with the text's centerline — but sometimes that will look off to your discerning eye, and you'll want to tweak that vertical position. So add some height to the `$v-adjust` argument, which will push your lines *up*, away from the bottom of the element.
38 |
39 | By default, the mixin produces one line; but if you add a height value to the `$double` argument, you'll get two lines (separated by that height). (You could also use a `$style` of `double`, which would act the same as any double border-style.)
--------------------------------------------------------------------------------
/docs/content/entries/size.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: size
3 | slug: size
4 | summary: Define both of an element's dimensions in one fell swoop.
5 | type: mixin only
6 | categories:
7 | - layout
8 | args:
9 | - variable: $size
10 | comment: A single value apply to both dimensions, making a square; a list of two (`width` then `height`) will make a rectangle.
11 | example:
12 | html: |
13 |
A square
14 |
A rectangle
15 | ---
16 |
17 | [(You may want to read about the origin of the phrase "one fell swoop.")](http://www.straightdope.com/columns/read/1698/whats-the-origin-of-one-fell-swoop)
18 |
19 | If a single value is passed, it will be applied to both `width` and `height`, producing a square. To make a rectangle, pass a two-value list: `width` then `height`.
--------------------------------------------------------------------------------
/docs/content/entries/sticky-footer-fixed.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: sticky footer, fixed height
3 | slug: sticky-footer-fixed
4 | summary: Ensure that your *fixed-height* footer stays down at the bottom of the viewport, where God intended it to be, even if your content is too short to keep it down naturally.
5 | type: mixin only
6 | categories:
7 | - layout
8 | args:
9 | - variable: $height
10 | comment: The height of the footer
11 | - variable: $wrapper
12 | default: "\".wrapper\""
13 | comment: A CSS selector for the page-wrapper element. *Wrap your selector in quotes.*
14 | - variable: $footer
15 | default: "\".scut-sticky\""
16 | comment: A CSS selector for the footer. Wrap this selector in quotes, too.
17 | references:
18 | - description: "CSS-Tricks: \"Sticky Footer\""
19 | url: http://css-tricks.com/snippets/css/sticky-footer/
20 | ---
21 |
22 | Avoid the weird feeling people get and the weird look they give you when they see your footer in the middle of their browser window with only unsettling emptiness beneath.
23 |
24 | This one takes some commitment — but nothing you can't handle:
25 |
26 | - **Your sticky footer must have a fixed height.** If that's not what you need, check out [`scut-sticky-footer-fluid`](sticky-footer-fluid.html).
27 | - **Your stuff-above-the-footer must be wrapped in a wrapper element.** (The footer itself remains outside of this wrapper.)
28 |
29 | So the wrapper and footer are siblings. Something like this:
30 |
31 |
39 |
40 | **This mixin should not be invoked within a declaration block — i.e. don't nest it.** The mixin needs to add rules for a number of elements — `html`, `body`, the wrapper, and the footer — so it can't be restricted to the context of a different selector.
41 |
42 | Since an example of this utility requires its own `` and `` elements, **[this example is relegated to Codepen](http://codepen.io/davidtheclark/pen/ExjiF)**.
43 |
44 | *Note: For now at least, this mixin can also be called with the deprecated use-name `scut-sticky-footer`.*
--------------------------------------------------------------------------------
/docs/content/entries/sticky-footer-fluid.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: sticky footer, fluid height
3 | slug: sticky-footer-fluid
4 | summary: Ensure that your *fluid-height* footer stays down at the bottom of the viewport, no matter what.
5 | type: mixin only
6 | categories:
7 | - layout
8 | args:
9 | - variable: $wrapper
10 | default: "\".wrapper\""
11 | comment: A CSS selector for the page-wrapper element. *Wrap your selector in quotes.*
12 | - variable: $footer
13 | default: "\".scut-sticky\""
14 | comment: A CSS selector for the footer. Wrap this selector in quotes, too.
15 | references:
16 | - description: "\"Sticky CSS Footers: The Flexible Way\""
17 | url: "http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/"
18 | ---
19 |
20 | To implement this mixin you'll need the following **a full-page wrapper element, with the footer inside of it.** That's it.
21 |
22 | The footer is the wrapper's child, like so:
23 |
24 |
32 |
33 |
34 | Then your footer should stick to the bottom of the page, regardless of the height of the content above it *or its own height*. (If you have a fixed-height footer, you could try [`scut-sticky-footer-fixed`](sticky-footer-fixed.html)).
35 |
36 | **This mixin should not be invoked within a declaration block — i.e. don't nest it.** The mixin needs to add rules for a number of elements — `html`, `body`, the wrapper, and the footer — so it can't be restricted to the context of a different selector.
37 |
38 | Since an example of this utility requires its own `` and `` elements, **[this example is relegated to Codepen](http://codepen.io/davidtheclark/pen/qvngp)**.
--------------------------------------------------------------------------------
/docs/content/entries/strip-unit.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: strip unit
3 | slug: strip-unit
4 | summary: Strip the unit from a number.
5 | type: function
6 | categories:
7 | - functions
8 | args:
9 | - variable: $num
10 | comment: The number whose units you wish to strip.
11 | ---
12 |
13 | This becomes useful when you are building your own mixins and functions and find yourself in an error-littered tangle of units. With this function you can just ditch those units, then put them back later.
14 |
15 | No example necessary.
--------------------------------------------------------------------------------
/docs/content/entries/triangle.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: triangle
3 | slug: triangle
4 | summary: Create a wide variety of CSS triangles.
5 | type: mixin, with a default-values placeholder
6 | categories:
7 | - general
8 | args:
9 | - variable: $direction
10 | default: right
11 | comment: "The direction that the triangle points: `up`, `down`, `right`, `left`. Or, for right triangles, the *corner of the right angle*: `top-right`, `top-left`, `bottom-right` or `bottom-left`."
12 | - variable: $size
13 | default: 0.75em
14 | comment: One or two values determining the size of the triangle. Two values translate to `width` and `height`. One value will make a triangle equally wide and tall.
15 | - variable: $color
16 | default: inherit
17 | example:
18 | show-html: true
19 | html: |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 | ---
32 |
33 | The mixin can produce acute triangles pointing up, down, left, and right; or right triangles with their right angles in the top right, top left, bottom right, and bottom left corners.
34 |
35 | (The default placeholder extension is a little triangle pointing right — the kind you'd see on a "Read More" link, the last example.)
36 |
37 | *When choosing `width` and `height` values, consider how their ratio will determine the form.* For example, to create an equilateral triangle pointing up, you'll want your `height` value to be ~86.6% of your `width` value (1/2 x √3 x `width`). Anybody remember high school geometry?
38 |
39 | The best way to understand this mixin is to play around with it, so besides looking at the examples below, you should [tinker with this Codepen Pen](http://codepen.io/davidtheclark/pen/oelbk).
--------------------------------------------------------------------------------
/docs/content/entries/truncate.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: truncate
3 | slug: truncate
4 | summary: Truncate text to a *single line*, clipped with an ellipsis.
5 | type: mixin, with default-values placeholder
6 | categories:
7 | - typography
8 | example:
9 | show-html: true
10 | html: |
11 |
This string of text is bound to be longer than a single line will allow but you will not see the whole thing because it will be truncated at the end of the displayed line and ended with an ellipsis and just to ensure that that example works even on your gigantic fancy-boy screen I'll duplicate that sentence content starting now this string of text is bound to be longer than a single line will allow but you will not see the whole thing because it will be truncated at the end of the displayed line and ended with an ellipsis.
12 | ---
13 |
14 | A quick and dirty method of tailoring content to fit layout.
15 |
16 | (In order to truncate without clipping words, truncate to character counts, or truncate multi-line strings generally, the most reliable and flexible methods seem to lie outside of CSS (in your templating language, or JavaScript, etc.).)
--------------------------------------------------------------------------------
/docs/content/entries/vcenter-ib.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: "v-center: inline-block method"
3 | slug: vcenter-ib
4 | summary: Vertically center descendent elements with the `inline-block` method.
5 | type: mixin, with default-values placeholder
6 | categories:
7 | - layout
8 | args:
9 | - variable: $inner
10 | default: "\".scut-inner\""
11 | comment: A CSS selector for the inner element. **Can be a single selector or a comma-separated list of selectors.** In either case, *wrap selectors in quotes.*
12 | references:
13 | - description: "CSS-Tricks: \"Centering in the Unknown\""
14 | url: "http://css-tricks.com/centering-in-the-unknown/"
15 | example:
16 | show-html: true
17 | html: |
18 |
19 |
20 | Using the default classname "scut-inner".
21 |
22 |
23 |
24 |
25 | Using a special classname.
26 |
27 |
28 |
And illustrating the use of a list of distinct selectors ...
29 |
30 |
first
31 |
second
32 |
third
33 |
34 | ---
35 |
36 | *This method requires a container and an inner element.* The mixin applies to the container; the to-be-centered inner element is passed (by its selector) as an argument.
37 |
38 | Any to-be-centered element should be an *immediate child* of the container (`container > inner`).
39 |
40 | A word of caution: Because `inline-block` results in some tricky word-like spacing, this method doesn't always work well if you require *exact* widths (or if your inner element has a 100% width). If you require exactitude and nothing stands in the way of giving your container `display: table`, try [vertically centering via table display](vcenter-td.html).
--------------------------------------------------------------------------------
/docs/content/entries/vcenter-lh.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: "v-center: line-height method"
3 | slug: vcenter-lh
4 | summary: Vertically center text (or other inline elements) by equalizing an element's `height` and `line-height`.
5 | type: mixin only
6 | categories:
7 | - layout
8 | args:
9 | - variable: $height
10 | example:
11 | html: |
12 |
13 |
14 | ---
15 |
16 | This method is simple, requires none of the extra `
`'s that make us all second-guess ourselves, and works in many common vertical-centering-situations.
17 |
18 | However, it is also limited. Below I'll list some caveats — and if any of them mean this mixin doesn't fit your situation, try one of the other vertical-centering methods in Scut ([via inline-block](vcenter-ib.html), [via table display](vcenter-td.html), and [via transform](vcenter-tt.html)).
19 |
20 | - This method only works for inline content (usually text) that *will not exceed a single line.* So it's good for buttons and headings with backgrounds and things like that.
21 | - The line-height set by this method will cascade into inner elements, so you have to make sure to override it as needed.
22 | - If your element has a border and `box-sizing: border-box` this method will be a little off, because the `line-height` will start *beneath* the top border but the height will *include* the top border. To avoid this issue, you can either set `box-sizing: content-box` or use a different vertical-centering method.
--------------------------------------------------------------------------------
/docs/content/entries/vcenter-td.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: "v-center: table display method"
3 | slug: vcenter-td
4 | summary: "Vertically center descendent elements with the `display: table` method."
5 | type: mixin, with default-values placeholder
6 | categories:
7 | - layout
8 | args:
9 | - variable: $inner
10 | default: "\".scut-inner\""
11 | comment: A CSS selector for the inner element. **Can be a single selector or a comma-separated list of selectors.** In either case, *wrap selectors in quotes.*
12 | references:
13 | - description: "CSS-Tricks: \"Centering in the Unknown\""
14 | url: http://css-tricks.com/centering-in-the-unknown/
15 | example:
16 | show-html: true
17 | html: |
18 |
19 |
20 | Using the default classname "scut-inner".
21 |
22 |
23 |
24 |
25 | Using a special classname.
26 |
27 |
28 |
And illustrating the use of a list of distinct selectors ...
29 |
30 |
first
31 |
second
32 |
third
33 |
34 | ---
35 |
36 | *This method requires a container and an inner element.* The mixin applies to the container; identify the to-be-centered inner element(s) with the `$inner` argument.
37 |
38 | Any to-be-centered element should be an *immediate child* of the container (`container > inner`).
--------------------------------------------------------------------------------
/docs/content/entries/vcenter-tt.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: "v-center: transform method"
3 | slug: vcenter-tt
4 | summary: Vertically center an element using the clever `transform` method.
5 | type: mixin and placeholder (same)
6 | categories:
7 | - layout
8 | compatibility: |
9 | This utility uses a CSS `transform`, so will not work with IE8. Also note that `transform` requires vendor prefixes (which are included).
10 | ---
11 |
12 | **This utility is simply an alias for [`scut-center-transform`](center-transform.html), but centering only on the vertical axis.** It's included to fit with the `vcenter` naming convention.
13 |
14 | So go see the examples for [`scut-center-transform`](center-transform.html), please.
--------------------------------------------------------------------------------
/docs/content/example-styles/_example-variables.scss:
--------------------------------------------------------------------------------
1 | $eg-dark: #002834;
2 | $eg-light: #9AE9FF;
3 | $eg-muted: #CCCCCC;
4 |
5 |
6 | %eg-light-btn {
7 | border: 1px solid $eg-dark;
8 | color: $eg-dark;
9 | padding: 0.3em 0.5em;
10 | }
11 |
12 | %eg-dark-btn {
13 | background-color: $eg-dark;
14 | color: white;
15 | padding: 0.3em 0.5em;
16 | }
--------------------------------------------------------------------------------
/docs/content/example-styles/absolute.scss:
--------------------------------------------------------------------------------
1 | /* import start */
2 | @import "../../../dist/scut";
3 | @import "example-variables";
4 | /* import end */
5 |
6 | /* hidden rules */
7 | .eg-absolute-container {
8 | border: 5px solid $eg-dark;
9 | height: 10em;
10 | width: 15em;
11 | }
12 | .eg-absolute {
13 | @extend %eg-dark-btn;
14 | }
15 | /* end hidden rules */
16 |
17 | /* example start */
18 | .eg-absolute-container {
19 | position: relative;
20 | }
21 | .eg-absolute-1 {
22 | @include scut-absolute;
23 | // or @extend %scut-absolute;
24 | }
25 | .eg-absolute-2 {
26 | @include scut-absolute(n 0.5em 1em n);
27 | }
28 | /* example end */
--------------------------------------------------------------------------------
/docs/content/example-styles/border.scss:
--------------------------------------------------------------------------------
1 | /* import start */
2 | @import "../../../dist/scut";
3 | @import "example-variables";
4 | /* import end */
5 |
6 | /* hidden rules */
7 | .eg-border {
8 | background-color: $eg-muted;
9 | padding: 1em;
10 | margin-top: 1em;
11 | }
12 | /* end hidden rules */
13 |
14 | /* example start */
15 | .eg-border-1 {
16 | @include scut-border(5px solid, y n);
17 | }
18 | .eg-border-2 {
19 | @include scut-border(0.5em solid $eg-light, n y);
20 | }
21 | .eg-border-3 {
22 | @include scut-border(10px solid $eg-dark, y y n n);
23 | }
24 | .eg-border-4 {
25 | @include scut-border(0.75em solid $eg-dark, n n y y);
26 | @include scut-border(0.75em solid $eg-light, y y n n);
27 | }
28 | /* example end */
--------------------------------------------------------------------------------
/docs/content/example-styles/center-absolutely.scss:
--------------------------------------------------------------------------------
1 | /* import start */
2 | @import "../../../dist/scut";
3 | @import "example-variables";
4 | /* import end */
5 |
6 | /* hidden rules */
7 | .eg-center-absolutely-container {
8 | border: 5px solid $eg-dark;
9 | height: 6em;
10 | font-size: 0.8em;
11 | &:not(:first-child) {
12 | margin-top: 1em;
13 | }
14 | & > div {
15 | background: $eg-muted;
16 | padding: 0.5em;
17 | }
18 | }
19 | /* end hidden rules */
20 |
21 | /* example start */
22 | .eg-center-absolutely-container {
23 | position: relative;
24 | }
25 | .eg-center-absolutely-1 {
26 | @include scut-center-absolutely(22em 2.5em);
27 | }
28 | .eg-center-absolutely-2 {
29 | @include scut-center-absolutely(20em n);
30 | }
31 | .eg-center-absolutely-3 {
32 | @include scut-center-absolutely(n 2.5em);
33 | }
34 | /* example end */
--------------------------------------------------------------------------------
/docs/content/example-styles/center-block.scss:
--------------------------------------------------------------------------------
1 | /* import start */
2 | @import "../../../dist/scut";
3 | @import "example-variables";
4 | /* import end */
5 |
6 | /* hidden rules */
7 | .eg-center-block {
8 | background: $eg-muted;
9 | padding: 1em;
10 | }
11 | /* end hidden rules */
12 |
13 | /* example start */
14 | .eg-center-block-1 {
15 | width: 8em;
16 | @include scut-center-block;
17 | // or @extend %scut-center-block;
18 | }
19 | .eg-center-block-2 {
20 | margin-top: 1em;
21 | @include scut-center-block(80%);
22 | }
23 | /* example end */
--------------------------------------------------------------------------------
/docs/content/example-styles/center-transform.scss:
--------------------------------------------------------------------------------
1 | /* import start */
2 | @import "../../../dist/scut";
3 | @import "example-variables";
4 | /* import end */
5 |
6 | /* hidden rules */
7 | .eg-center-transform-container {
8 | background: $eg-dark;
9 | height: 6em;
10 | &:not(:first-child) {
11 | margin-top: 1em;
12 | }
13 | &.m-large {
14 | height: 10em;
15 | }
16 | }
17 | .eg-center-transform {
18 | background: $eg-muted;
19 | padding: 1em;
20 | }
21 | /* end hidden rules */
22 |
23 | /* example start */
24 | .eg-center-transform-container {
25 | position: relative;
26 | }
27 | .eg-center-transform {
28 | display: inline-block;
29 | }
30 | .eg-center-transform-1 {
31 | @include scut-center-transform;
32 | // or @extend %scut-center-transform;
33 | }
34 | .eg-center-transform-2 {
35 | @include scut-center-transform(x);
36 | // or @extend %scut-center-transform-x;
37 | }
38 | .eg-center-transform-3 {
39 | @include scut-center-transform(y);
40 | // or @extend %scut-center-transform-y;
41 | }
42 | .eg-center-transform-4 {
43 | @include scut-center-transform;
44 | }
45 | /* example end */
--------------------------------------------------------------------------------
/docs/content/example-styles/circle.scss:
--------------------------------------------------------------------------------
1 | /* import start */
2 | @import "../../../dist/scut";
3 | @import "example-variables";
4 | /* import end */
5 |
6 | /* hidden rules */
7 | .eg-circle {
8 | margin-right: 0.5em;
9 | }
10 | /* end hidden rules */
11 |
12 | /* example start */
13 | .eg-circle-1 {
14 | @include scut-circle(1em);
15 | }
16 | .eg-circle-2 {
17 | @include scut-circle(2em, $eg-light);
18 | }
19 | .eg-circle-3 {
20 | @include scut-circle(2em, $eg-dark);
21 | border: 5px solid $eg-light;
22 | }
23 | /* example end */
--------------------------------------------------------------------------------
/docs/content/example-styles/clearfix.scss:
--------------------------------------------------------------------------------
1 | /* import start */
2 | @import "../../../dist/scut";
3 | @import "example-variables";
4 | /* import end */
5 |
6 | /* hidden rules */
7 | .eg-clearfix-floater {
8 | @extend %eg-dark-btn;
9 | }
10 | /* end hidden rules */
11 |
12 | /* example start */
13 | .eg-clearfix-container {
14 | @include scut-clearfix;
15 | // or @extend %scut-clearfix;
16 | background: $eg-muted;
17 | }
18 | .eg-clearfix-floater {
19 | float: left;
20 | margin: 1em;
21 | }
22 | /* example end */
--------------------------------------------------------------------------------
/docs/content/example-styles/color-swap.scss:
--------------------------------------------------------------------------------
1 | /* import start */
2 | @import "../../../dist/scut";
3 | @import "example-variables";
4 | /* import end */
5 |
6 | /* hidden rules */
7 | .eg-color-swap {
8 | padding: 1em;
9 | display: inline-block;
10 | & + & {
11 | margin-left: 1em;
12 | }
13 | }
14 | /* end hidden rules */
15 |
16 | /* example start */
17 | .eg-color-swap-1 {
18 | background: #fff;
19 | // only text `color` changes, with a transition
20 | @include scut-color-swap($eg-dark, $eg-light, 1s);
21 | }
22 | .eg-color-swap-2 {
23 | // both text `color` and `background-color` change,
24 | // with no transition
25 | @include scut-color-swap($eg-light $eg-dark, $eg-dark $eg-light);
26 | }
27 | .eg-color-swap-3 {
28 | color: #fff;
29 | // only `background-color` changes, with a transition
30 | @include scut-color-swap($eg-dark, $eg-light, 0.5s, true);
31 | }
32 | /* example end */
--------------------------------------------------------------------------------
/docs/content/example-styles/em.scss:
--------------------------------------------------------------------------------
1 | /* import start */
2 | @import "../../../dist/scut";
3 | @import "example-variables";
4 | /* import end */
5 |
6 | /* hidden rules */
7 | .eg-em-c {
8 | font-size: 16px;
9 | }
10 | .eg-em {
11 | border: 5px solid $eg-dark;
12 | padding: 10px;
13 | margin-top: 1em;
14 | &.m-1 {
15 | margin-top: 0;
16 | }
17 | }
18 | /* end hidden rules */
19 |
20 | /* example start */
21 | // first pair
22 | .eg-em-1 { width: scut-em(150); }
23 | .eg-em-2 { width: 150px; }
24 | // second pair
25 | .eg-em-3,
26 | .eg-em-4 { font-size: 20px; }
27 | .eg-em-3 { width: scut-em(250, 20); }
28 | .eg-em-4 { width: 250px; }
29 | // third pair
30 | .eg-em-5,
31 | .eg-em-6 { font-size: 0.6em; }
32 | .eg-em-5 { width: scut-em(275, 0.6em); }
33 | .eg-em-6 { width: 275px; }
34 | // list and units demonstration
35 | .eg-em-7 {
36 | margin: scut-em(50 30px 0 60);
37 | padding: scut-em(50 20px 0)
38 | }
39 | // changing the default $scut-em-base value
40 | // (compare to the second pair, above)
41 | $scut-em-base: 20;
42 | .eg-em-8 {
43 | font-size: 20px;
44 | width: scut-em(250);
45 | }
46 | /* example end */
47 |
48 | /* hidden rules */
49 | $scut-em-base: 16;
50 | /* end hidden rules */
--------------------------------------------------------------------------------
/docs/content/example-styles/fill.scss:
--------------------------------------------------------------------------------
1 | /* import start */
2 | @import "../../../dist/scut";
3 | @import "example-variables";
4 | /* import end */
5 |
6 | /* hidden rules */
7 | .eg-fill-container {
8 | border: 5px solid $eg-dark;
9 | height: 6em;
10 | padding: 1em;
11 | &:nth-of-type(2) {
12 | margin-bottom: 2em;
13 | }
14 | }
15 | .eg-fill-1 {
16 | padding: 2.5em 1em 0;
17 | }
18 | /* end hidden rules */
19 |
20 | /* example start */
21 | .eg-fill-container {
22 | color: $eg-light;
23 | position: relative;
24 | }
25 | .eg-fill-1 {
26 | background-color: rgba(0,0,0,0.4);
27 | @include scut-fill;
28 | // or @extend %scut-fill;
29 | }
30 | .eg-fill-2 {
31 | @include scut-fill;
32 | }
33 | .eg-fill-3 {
34 | @include scut-fill(true);
35 | }
36 | /* example end */
--------------------------------------------------------------------------------
/docs/content/example-styles/fixed.scss:
--------------------------------------------------------------------------------
1 | /* import start */
2 | @import "../../../dist/scut";
3 | @import "example-variables";
4 | /* import end */
5 |
6 | /* hidden rules */
7 | .eg-fixed {
8 | @extend %eg-dark-btn;
9 | }
10 | /* end hidden rules */
11 |
12 | /* example start */
13 | .eg-fixed {
14 | @include scut-fixed(n 2em 1em n);
15 | }
16 | /* example end */
--------------------------------------------------------------------------------
/docs/content/example-styles/hanging-indent.scss:
--------------------------------------------------------------------------------
1 | /* import start */
2 | @import "../../../dist/scut";
3 | @import "example-variables";
4 | /* import end */
5 |
6 | /* hidden rules */
7 | .eg-hanging-indent {
8 | max-width: 25em;
9 | }
10 | /* end hidden rules */
11 |
12 | /* example start */
13 | .eg-hanging-indent-1 {
14 | @include scut-hanging-indent;
15 | // or @extend %scut-hanging-indent;
16 | }
17 | .eg-hanging-indent-2 {
18 | @include scut-hanging-indent(2em);
19 | }
20 | /* example end */
--------------------------------------------------------------------------------
/docs/content/example-styles/hd-bp.scss:
--------------------------------------------------------------------------------
1 | /* import start */
2 | @import "../../../dist/scut";
3 | @import "example-variables";
4 | /* import end */
5 |
6 | /* hidden rules */
7 | .eg-hd-bp {
8 | padding: 1em;
9 | }
10 | /* end hidden rules */
11 |
12 | /* example start */
13 | .eg-hd-bp {
14 | background-color: $eg-muted;
15 | @include scut-hd-bp(2.0) {
16 | background-color: $eg-light;
17 | }
18 | }
19 | /* example end */
--------------------------------------------------------------------------------
/docs/content/example-styles/hide-visually.scss:
--------------------------------------------------------------------------------
1 | /* import start */
2 | @import "../../../dist/scut";
3 | @import "example-variables";
4 | /* import end */
5 |
6 | /* example start */
7 | .eg-hide-visually {
8 | @include scut-hide-visually;
9 | // or @extend %scut-hide-visually;
10 | }
11 | /* example end */
--------------------------------------------------------------------------------
/docs/content/example-styles/image-replace.scss:
--------------------------------------------------------------------------------
1 | /* import start */
2 | @import "../../../dist/scut";
3 | @import "example-variables";
4 | /* import end */
5 |
6 | /* hidden start */
7 | .eg-image-replace {
8 | margin-top: 1em;
9 | }
10 | /* hidden end */
11 |
12 | /* example start */
13 | .eg-image-replace {
14 | @include scut-image-replace;
15 | // or @extend %scut-image-replace;
16 | background: url("//placehold.it/200x200") no-repeat;
17 | background-size: contain;
18 | height: 8em;
19 | }
20 | /* example end */
--------------------------------------------------------------------------------
/docs/content/example-styles/indented-ps.scss:
--------------------------------------------------------------------------------
1 | /* import start */
2 | @import "../../../dist/scut";
3 | @import "example-variables";
4 | /* import end */
5 |
6 | /* hidden start */
7 | .eg-indented-ps {
8 | &:not(:first-child) {
9 | margin-top: 1em;
10 | }
11 | }
12 | /* hidden end */
13 |
14 | /* example start */
15 | .eg-indented-ps-1 {
16 | @include scut-indented-ps;
17 | // or @extend %scut-indented-ps;
18 | }
19 | .eg-indented-ps-2 {
20 | @include scut-indented-ps(3em, false);
21 | }
22 | /* example end */
--------------------------------------------------------------------------------
/docs/content/example-styles/key-val.scss:
--------------------------------------------------------------------------------
1 | /* import start */
2 | @import "../../../dist/scut";
3 | @import "example-variables";
4 | /* import end */
5 |
6 | /* hidden rules */
7 | .eg-key-val-c {
8 | max-width: 25em;
9 | }
10 | /* end hidden rules */
11 |
12 | /* example start */
13 | .eg-key-val-1 {
14 | @include scut-key-val;
15 | // or @extend %scut-key-val;
16 | }
17 | .eg-key-val-2 {
18 | @include scut-key-val("\2014", 0.5em, 8em, 1em, 0.5em);
19 | & > dt {
20 | font-weight: bold;
21 | }
22 | }
23 | .eg-key-val-3 {
24 | $dt-width: 6em;
25 | @include scut-key-val("", 0, $dt-width + 1em);
26 | & > dt {
27 | width: $dt-width;
28 | text-align: right;
29 | text-transform: uppercase;
30 | }
31 | }
32 | /* example end */
--------------------------------------------------------------------------------
/docs/content/example-styles/link-bb.scss:
--------------------------------------------------------------------------------
1 | /* import start */
2 | @import "../../../dist/scut";
3 | @import "example-variables";
4 | /* import end */
5 |
6 | /* hidden start */
7 | /* hidden end */
8 |
9 | /* example start */
10 | .eg-link-bb-1 a {
11 | @include scut-link-bb;
12 | // or @extend %scut-link-bb;
13 | }
14 | .eg-link-bb-2 a {
15 | color: $eg-muted;
16 | @include scut-link-bb(inherit, double, 4px);
17 | &:hover {
18 | color: $eg-dark;
19 | border-bottom-color: $eg-light;
20 | }
21 | }
22 | /* example end */
--------------------------------------------------------------------------------
/docs/content/example-styles/link-unstyled.scss:
--------------------------------------------------------------------------------
1 | /* import start */
2 | @import "../../../dist/scut";
3 | @import "example-variables";
4 | /* import end */
5 |
6 | /* hidden rules */
7 | /* end hidden rules */
8 |
9 | /* example start */
10 | .eg-link-unstyled {
11 | @include scut-link-unstyled;
12 | // or @extend %scut-link-unstyled;
13 | }
14 | /* example end */
15 |
--------------------------------------------------------------------------------
/docs/content/example-styles/list-custom.scss:
--------------------------------------------------------------------------------
1 | /* import start */
2 | @import "../../../dist/scut";
3 | @import "example-variables";
4 | /* import end */
5 |
6 | /* hidden rules */
7 | .eg-list-custom {
8 | margin: 0;
9 | &:not(:first-child) {
10 | margin-top: 1em;
11 | }
12 | }
13 | /* end hidden rules */
14 |
15 | /* example start */
16 | .eg-list-custom-1 {
17 | @include scut-list-custom {
18 | color: $eg-light;
19 | }
20 | }
21 | .eg-list-custom-2 {
22 | @include scut-list-custom("\00bb", 1.3em, 1em);
23 | }
24 | .eg-list-custom-3 {
25 | @include scut-list-custom(count, 2em, 2em);
26 | }
27 | .eg-list-custom-4 {
28 | @include scut-list-custom(count ")" lower-alpha, 1.5em) {
29 | color: $eg-dark;
30 | font-size: 1.5em;
31 | font-weight: bold;
32 | top: -0.25em;
33 | }
34 | & > li + li {
35 | margin-top: 1em;
36 | }
37 | }
38 | /* example end */
--------------------------------------------------------------------------------
/docs/content/example-styles/list-divided.scss:
--------------------------------------------------------------------------------
1 | /* import start */
2 | @import "../../../dist/scut";
3 | @import "example-variables";
4 | /* import end */
5 |
6 | /* hidden rules */
7 | /* end hidden rules */
8 |
9 | /* example start */
10 | .eg-list-bar {
11 | @include scut-list-divided;
12 | // or @extend %scut-list-bar;
13 | }
14 | .eg-list-breadcrumb {
15 | @include scut-list-divided("/");
16 | // or @extend %scut-list-breadcrumb;
17 | }
18 | .eg-list-divided-1 {
19 | @include scut-list-divided("...", 0, right, $no-margin: false);
20 | }
21 | .eg-list-divided-2 {
22 | @include scut-list-divided("", 0.5em, left, 3em) {
23 | background-color: $eg-dark;
24 | width: 1em;
25 | }
26 | }
27 | /* example end */
--------------------------------------------------------------------------------
/docs/content/example-styles/list-floated.scss:
--------------------------------------------------------------------------------
1 | /* import start */
2 | @import "../../../dist/scut";
3 | @import "example-variables";
4 | /* import end */
5 |
6 | /* hidden rules */
7 | .eg-list-floated {
8 | & > li {
9 | @extend %eg-dark-btn;
10 | }
11 | }
12 | /* end hidden rules */
13 |
14 | /* example start */
15 | .eg-list-floated-1 {
16 | @include scut-list-floated;
17 | // or @extend %scut-list-floated;
18 | }
19 | .eg-list-floated-2 {
20 | @include scut-list-floated(1em, $no-margin: false);
21 | }
22 | .eg-list-floated-3 {
23 | @include scut-list-floated(2em, right);
24 | }
25 | /* example end */
--------------------------------------------------------------------------------
/docs/content/example-styles/list-inline.scss:
--------------------------------------------------------------------------------
1 | /* import start */
2 | @import "../../../dist/scut";
3 | @import "example-variables";
4 | /* import end */
5 |
6 | /* hidden rules */
7 | .eg-list-inline {
8 | & > li {
9 | @extend %eg-dark-btn;
10 | }
11 | }
12 | /* end hidden rules */
13 |
14 | /* example start */
15 | .eg-list-inline-1 {
16 | @include scut-list-inline;
17 | // or @extend %scut-list-inline;
18 | }
19 | .eg-list-inline-2 {
20 | @include scut-list-inline(1em, false);
21 | }
22 | /* example end */
--------------------------------------------------------------------------------
/docs/content/example-styles/list-punctuated.scss:
--------------------------------------------------------------------------------
1 | /* import start */
2 | @import "../../../dist/scut";
3 | @import "example-variables";
4 | /* import end */
5 |
6 | /* hidden rules */
7 | /* end hidden rules */
8 |
9 | /* example start */
10 | .eg-punctuated-list {
11 | @include scut-list-punctuated;
12 | // or @extend %scut-list-comma;
13 | }
14 | .eg-semicolon-list {
15 | @include scut-list-punctuated("; ", $no-margin: false);
16 | }
17 | .eg-circle-list {
18 | @include scut-list-punctuated("\0020\2022\0020");
19 | }
20 | /* example end */
--------------------------------------------------------------------------------
/docs/content/example-styles/list-unstyled.scss:
--------------------------------------------------------------------------------
1 | /* import start */
2 | @import "../../../dist/scut";
3 | @import "example-variables";
4 | /* import end */
5 |
6 | /* hidden rules */
7 | /* end hidden rules */
8 |
9 | /* example start */
10 | .eg-unstyled-list-1 {
11 | @include scut-list-unstyled;
12 | // or @extend %scut-list-unstyled;
13 | }
14 | .eg-unstyled-list-2 {
15 | @include scut-list-unstyled(false);
16 | }
17 | /* example end */
--------------------------------------------------------------------------------
/docs/content/example-styles/margin.scss:
--------------------------------------------------------------------------------
1 | /* import start */
2 | @import "../../../dist/scut";
3 | @import "example-variables";
4 | /* import end */
5 |
6 | /* hidden rules */
7 | .eg-margin-container {
8 | border: 5px solid;
9 | & + .eg-margin-container {
10 | margin-top: 1em;
11 | }
12 | }
13 | .eg-margin {
14 | @extend %eg-dark-btn;
15 | }
16 | /* end hidden rules */
17 |
18 | /* example start */
19 | .eg-margin-1 {
20 | @include scut-margin(1em n);
21 | }
22 | .eg-margin-2 {
23 | @include scut-margin(0.5em 3em);
24 | }
25 | .eg-margin-3 {
26 | @include scut-margin(3em 1em n);
27 | }
28 | /* example end */
--------------------------------------------------------------------------------
/docs/content/example-styles/padding.scss:
--------------------------------------------------------------------------------
1 | /* import start */
2 | @import "../../../dist/scut";
3 | @import "example-variables";
4 | /* import end */
5 |
6 | /* hidden rules */
7 | .eg-padding {
8 | @extend %eg-dark-btn;
9 | margin-right: 1em;
10 | margin-bottom: 1em;
11 | }
12 | /* end hidden rules */
13 |
14 | /* example start */
15 | .eg-padding {
16 | display: inline-block;
17 | }
18 | .eg-padding-1 {
19 | @include scut-padding(1em n);
20 | }
21 | .eg-padding-2 {
22 | @include scut-padding(0.5em 3em);
23 | }
24 | .eg-padding-3 {
25 | @include scut-padding(n 8em 3em n);
26 | }
27 | /* example end */
--------------------------------------------------------------------------------
/docs/content/example-styles/ratio-box.scss:
--------------------------------------------------------------------------------
1 | /* import start */
2 | @use "sass:math";
3 |
4 | @import "../../../dist/scut";
5 | @import "example-variables";
6 | /* import end */
7 |
8 | /* hidden rules */
9 | .eg-ratio {
10 | margin-top: 1em;
11 | }
12 | /* end hidden rules */
13 |
14 | /* example start */
15 | .eg-ratio {
16 | background: $eg-muted;
17 | }
18 | .eg-ratio-1 {
19 | width: 15em;
20 | @include scut-ratio-box;
21 | // or @extend %scut-ratio-box;
22 | }
23 | .eg-ratio-2 {
24 | width: 7em;
25 | @include scut-ratio-box;
26 | }
27 | .eg-ratio-3 {
28 | width: 15em;
29 | @include scut-ratio-box(math.div(16, 9));
30 | }
31 | .eg-ratio-4 {
32 | width: 7em;
33 | @include scut-ratio-box(math.div(16, 9));
34 | }
35 | .eg-ratio-inner {
36 | position: absolute;
37 | top: 0;
38 | left: 0;
39 | }
40 | /* example end */
--------------------------------------------------------------------------------
/docs/content/example-styles/relative.scss:
--------------------------------------------------------------------------------
1 | /* import start */
2 | @import "../../../dist/scut";
3 | @import "example-variables";
4 | /* import end */
5 |
6 | /* hidden rules */
7 | /* end hidden rules */
8 |
9 | /* example start */
10 | .eg-relative-1 {
11 | @include scut-relative(0.2em 0.2em n n);
12 | }
13 | .eg-relative-2 {
14 | @include scut-relative(a a 1em n);
15 | }
16 | .eg-relative-3 {
17 | @include scut-relative(n n -0.5em 0.2em);
18 | }
19 | /* example end */
--------------------------------------------------------------------------------
/docs/content/example-styles/rem-fallback.scss:
--------------------------------------------------------------------------------
1 | /* import start */
2 | @import "../../../dist/scut";
3 | @import "example-variables";
4 | /* import end */
5 |
6 | /* hidden rules */
7 | /* end hidden rules */
8 |
9 | /* example start */
10 | .eg-rem-fallback-1 { font-size: 20px; }
11 | .eg-rem-fallback-2 { @include scut-rem-fallback(20); }
12 | .eg-rem-fallback-3 {
13 | @include scut-rem-fallback(30 50px 0 25px, margin);
14 | @include scut-rem-fallback(20 30px, padding);
15 | border: 5px solid;
16 | }
17 | /* example end */
--------------------------------------------------------------------------------
/docs/content/example-styles/rem.scss:
--------------------------------------------------------------------------------
1 | /* import start */
2 | @import "../../../dist/scut";
3 | @import "example-variables";
4 | /* import end */
5 |
6 | /* hidden rules */
7 | .eg-rem {
8 | border: 5px solid $eg-dark;
9 | padding: 10px;
10 | margin-top: 1em;
11 | }
12 | .eg-rem-1 {
13 | margin-top: 0;
14 | }
15 | /* end hidden rules */
16 |
17 | /* example start */
18 | .eg-rem-1 { font-size: 24px; }
19 | .eg-rem-2 { font-size: scut-rem(24); }
20 | .eg-rem-3-container { font-size: 1000px; }
21 | .eg-rem-3 { font-size: scut-rem(24); }
22 | .eg-rem-4 {
23 | margin: scut-rem(80 50px 0 100);
24 | padding: scut-rem(30 20px);
25 | }
26 | /* example end */
--------------------------------------------------------------------------------
/docs/content/example-styles/reverse-italics.scss:
--------------------------------------------------------------------------------
1 | /* import start */
2 | @import "../../../dist/scut";
3 | @import "example-variables";
4 | /* import end */
5 |
6 | /* hidden rules */
7 | /* end hidden rules */
8 |
9 | /* example start */
10 | .eg-reverse-italics-default {
11 | @include scut-reverse-italics;
12 | // or @extend %scut-reverse-italics;
13 | }
14 | .eg-reverse-italics-variant {
15 | @include scut-reverse-italics("strong" "b" ".no-italics");
16 | }
17 | /* example end */
--------------------------------------------------------------------------------
/docs/content/example-styles/selected.scss:
--------------------------------------------------------------------------------
1 | /* import start */
2 | @import "../../../dist/scut";
3 | @import "example-variables";
4 | /* import end */
5 |
6 | /* hidden rules */
7 | .eg-selected {
8 | background-color: $eg-muted;
9 | @extend %eg-light-btn;
10 | }
11 | /* end hidden rules */
12 |
13 | /* example start */
14 | .eg-selected-1 {
15 | @include scut-selected {
16 | background-color: $eg-light;
17 | }
18 | }
19 | .eg-selected-2 {
20 | @include scut-selected(true) {
21 | background-color: $eg-light;
22 | }
23 | }
24 | /* example end */
--------------------------------------------------------------------------------
/docs/content/example-styles/side-lined.scss:
--------------------------------------------------------------------------------
1 | /* import start */
2 | @import "../../../dist/scut";
3 | @import "example-variables";
4 | /* import end */
5 |
6 | /* hidden rules */
7 | /* end hidden rules */
8 |
9 | /* example start */
10 | .eg-side-lined-1 {
11 | @include scut-side-lined;
12 | // or @extend %scut-side-lined;
13 | }
14 | .eg-side-lined-2 {
15 | font-size: 2em;
16 | @include scut-side-lined(0.3em, 1em, $eg-light, $v-adjust: 0.1em);
17 | }
18 | .eg-side-lined-3 {
19 | @include scut-side-lined($double: 0.3em, $color: $eg-muted, $v-adjust: 0.05em);
20 | }
21 | .eg-side-lined-4 {
22 | @include scut-side-lined($style: dotted);
23 | }
24 | /* example end */
--------------------------------------------------------------------------------
/docs/content/example-styles/size.scss:
--------------------------------------------------------------------------------
1 | /* import start */
2 | @import "../../../dist/scut";
3 | @import "example-variables";
4 | /* import end */
5 |
6 | /* hidden rules */
7 | .eg-size {
8 | background: $eg-muted;
9 | &:not(:first-child) {
10 | margin-top: 1em;
11 | }
12 | }
13 | /* end hidden rules */
14 |
15 | /* example start */
16 | .eg-size-1 {
17 | @include scut-size(8em);
18 | }
19 | .eg-size-2 {
20 | @include scut-size(10em 5em);
21 | }
22 | /* example end */
--------------------------------------------------------------------------------
/docs/content/example-styles/triangle.scss:
--------------------------------------------------------------------------------
1 | /* import start */
2 | @import "../../../dist/scut";
3 | @import "example-variables";
4 | /* import end */
5 |
6 | /* hidden rules */
7 | .eg-triangle-container > span {
8 | margin-right: 1em;
9 | }
10 | .eg-triangle-button {
11 | @extend %eg-light-btn;
12 | }
13 | /* end hidden rules */
14 |
15 | /* example start */
16 | .eg-triangle-default {
17 | @include scut-triangle;
18 | // or @extend %scut-triangle;
19 | }
20 | .eg-triangle-equilateral {
21 | @include scut-triangle(up, 100px 87px, $eg-muted);
22 | }
23 | .eg-triangle-top-right {
24 | @include scut-triangle(top-right, 2em, $eg-dark);
25 | }
26 | .eg-triangle-bottom-left {
27 | @include scut-triangle(bottom-left, 80px 40px, $eg-light);
28 | }
29 | .eg-triangle-button {
30 | &:after {
31 | content: "";
32 | margin-left: 0.3em;
33 | }
34 | &.m-down:after {
35 | @include scut-triangle(down);
36 | }
37 | &.m-up:after {
38 | @include scut-triangle(up);
39 | }
40 | &.m-right:after {
41 | @include scut-triangle;
42 | }
43 | }
44 | /* example end */
--------------------------------------------------------------------------------
/docs/content/example-styles/truncate.scss:
--------------------------------------------------------------------------------
1 | /* import start */
2 | @import "../../../dist/scut";
3 | @import "example-variables";
4 | /* import end */
5 |
6 | /* hidden start */
7 | /* hidden end */
8 |
9 | /* example start */
10 | .eg-truncate {
11 | @include scut-truncate;
12 | // or @extend %scut-truncate;
13 | }
14 | /* example end */
--------------------------------------------------------------------------------
/docs/content/example-styles/vcenter-ib.scss:
--------------------------------------------------------------------------------
1 | /* import start */
2 | @import "../../../dist/scut";
3 | @import "example-variables";
4 | /* import end */
5 |
6 | /* hidden rules */
7 | .eg-vcenter-ib {
8 | border: 5px solid $eg-dark;
9 | padding: 0 1em;
10 | height: 8em;
11 | &:not(:first-child) {
12 | margin-top: 1em;
13 | }
14 | }
15 | .special-selector-1,
16 | .special-selector-2 {
17 | padding-right: 1em;
18 | }
19 | /* end hidden rules */
20 |
21 | /* example start */
22 | .eg-vcenter-ib > p {
23 | max-width: 90%;
24 | }
25 | .eg-vcenter-ib-1 {
26 | @include scut-vcenter-ib;
27 | // or @extend %scut-vcenter-ib;
28 | }
29 | .eg-vcenter-ib-2 {
30 | @include scut-vcenter-ib(".eg-vcenter-ib-inner");
31 | }
32 | // illustrating a list of selectors
33 | .eg-vcenter-ib-3 {
34 | @include scut-vcenter-ib(".special-selector-1", ".special-selector-2", ".special-selector-3");
35 | }
36 | /* example end */
--------------------------------------------------------------------------------
/docs/content/example-styles/vcenter-lh.scss:
--------------------------------------------------------------------------------
1 | /* import start */
2 | @import "../../../dist/scut";
3 | @import "example-variables";
4 | /* import end */
5 |
6 | /* hidden rules */
7 | .eg-vcenter-lh {
8 | @extend %eg-dark-btn;
9 | border: 0;
10 | padding-top: 0;
11 | padding-bottom: 0;
12 | vertical-align: middle;
13 | }
14 | /* end hidden rules */
15 |
16 | /* example start */
17 | .eg-vcenter-lh-1 {
18 | @include scut-vcenter-lh(50px);
19 | }
20 | .eg-vcenter-lh-2 {
21 | @include scut-vcenter-lh(50px);
22 | font-size: 0.7em;
23 | }
24 | /* example end */
--------------------------------------------------------------------------------
/docs/content/example-styles/vcenter-td.scss:
--------------------------------------------------------------------------------
1 | /* import start */
2 | @import "../../../dist/scut";
3 | @import "example-variables";
4 | /* import end */
5 |
6 | /* hidden rules */
7 | .eg-vcenter-td {
8 | border: 5px solid $eg-dark;
9 | padding: 0 1em;
10 | &:not(:first-child) {
11 | margin-top: 1em;
12 | }
13 | }
14 | .special-selector-1,
15 | .special-selector-2 {
16 | padding-right: 1em;
17 | }
18 | /* end hidden rules */
19 |
20 | /* example start */
21 | .eg-vcenter-td-1 {
22 | @include scut-vcenter-td;
23 | // or @extend %scut-vcenter-td;
24 | height: 8em;
25 | }
26 | .eg-vcenter-td-2 {
27 | @include scut-vcenter-td(".eg-vcenter-td-inner");
28 | height: 12em;
29 | }
30 | // illustrating a list of selectors
31 | .eg-vcenter-td-3 {
32 | @include scut-vcenter-td(".special-selector-1", ".special-selector-2", ".special-selector-3");
33 | height: 9em;
34 | }
35 | /* example end */
--------------------------------------------------------------------------------
/docs/content/help.yml:
--------------------------------------------------------------------------------
1 | - term: use-name
2 | text: |
3 | **use-name** is the name of the utility as it is used (as a mixin, placeholder, function, variable, etc.), including the `scut-` prefix. It's what you plug into your Sass/SCSS. This should be illustrated in the examples.
4 | - term: type
5 | text: |
6 | **type** tells you what kind of Sass feature the utility involves. Is it only available as a mixin (e.g. HD breakpoint)? Or as a mixin and a placeholder that always do the same thing (e.g. clearfix)? Or as a mixin and a placeholder that passes default values (e.g. indented paragraphs)? Or as a mixin with some extension placeholders for common variations (e.g. punctuated list)? As a function, a variable, an import? And so on.
7 | - term: arguments
8 | text: |
9 | **arguments** lists the arguments, in order, that you can pass to the utility's mixin. To learn more about Sass/SCSS mixin arguments [have a look at the Sass documentation](http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixin-arguments).
10 |
11 | If no default value is listed, that means there is no default value, so you'll have to provide a value every time you use the mixin.
12 |
13 | - term: contentblock
14 | text: |
15 | **@content** describes what happens if you pass a content block to the utility's mixin. To understand Sass content blocks, [have a look at the Sass documentation](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#mixin-content).
--------------------------------------------------------------------------------
/docs/content/home/about.md:
--------------------------------------------------------------------------------
1 | ## About
2 |
3 | You can think of the word Scut as an acronym for ***S***ass-***C***SS ***Ut***itilies.
4 |
5 | Or think of it this way: **Scut will help you, the frontend laborer, do your *scut work***.
6 |
7 | (But do be careful how you use the word in polite company. It's meanings are ... many.)
8 |
9 | Visit the Github repository
10 |
11 | Experiment with Scut on Codepen
12 |
13 | **Scut is now at v1.0.0 — so should be stable.** It has been around for a little while and used by some number of people, and during that time has undergone very few breaking changes; so it seems like the structure is sound, and I think it's ready to be called "stable." (Of course new non-breaking features will still be added and bugs will be fixed.)
14 |
15 | Still: *if some part of Scut that you had been using suddenly doesn't work, please check this documentation to see what changed.* Also, you might want to have a look at the changelog.
16 |
17 | For a thorough introduction to Scut, have a look at [my article, "Introducing Scut," on CSS-Tricks](http://css-tricks.com/introducing-scut-new-sass-utility-library/).
18 |
19 | ## Why use Scut?
20 |
21 | ### Avoid repetition
22 |
23 | Scut's primary goal is to save people like you and me from repeating the same few lines of styling code, over and over again, to achieve the same effect in different places.
24 |
25 | ### Do difficult hacky things easily
26 |
27 | Like vertically centering, or creating fluid-width boxes with a consistent aspect ratio.
28 |
29 | ### Organize your rules
30 |
31 | An oft-unsung quality of mixins and placeholders is that they organize your code, *grouping rules according to the effects they combine to achieve*. Even when a mixin applies only a couple of rules (like [`scut-hanging-indent`](hanging-indent.html)), it serves this end.
32 |
33 | ### Implement best practices
34 |
35 | Some of Scut's utilities, such as [`hd-breakpoint`](hd-bp.html) and [`font-face`](font-face.html), are all about implementing "best practices" — without looking them up every time you need them.
36 |
37 | And for any Scut utility, *if you know of a better way to do the same thing, with more flexibility, better browser support, fewer extra `
`s, whatever, Scut should be updated accordingly. **So contribute your discoveries and ideas!***
38 |
39 | ## What makes Scut unique?
40 |
41 | ### Flexible abstractions of common patterns — nothing more
42 |
43 | Scut doesn't require additional setup and processing, doesn't apply any default sizes, spacing, colors, etc. It is nothing like a "framework" — just a stylesheet that you can `@import` at will. Scut utilities should be as simple, flexible, and generic as possible: abstract patterns that you can work into your own designs without having to override anything or set up site-wide parameters. And you should be able to add them into your workflow with a simple `@import` statement, no matter what your stack.
44 |
45 | ### No vendor prefixes
46 |
47 | Most other pre-processor libraries do little more than vendor prefixing. Scut doesn't bother with that. (Do it your own way, of course; but I prefer [Autoprefixer](https://github.com/ai/autoprefixer).)
48 |
49 | ### @extend placeholders
50 |
51 | All mixins that require no arguments — either because they *have* no arguments or because all their arguments have default values — are paired with [placeholder selectors](http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#placeholders), which are good things to use, when you can.
52 |
53 | ### `scut-` prefix
54 |
55 | To avoid confusions and collisions, all Scut utilities — mixins, placeholders, functions, variables, whatever — are prefixed with `scut-`.
--------------------------------------------------------------------------------
/docs/content/home/contributing.md:
--------------------------------------------------------------------------------
1 | ## Contributing
2 |
3 |
You can and should contribute.
4 |
5 | Scut is all about easing the work of frontend laborers; extending tutorials into reusable utilities; encouraging best practices; and sharing good ideas — goals we can all agree on. I hope you'll find it a worthy experiment.
6 |
7 | Visit the repository on Github and file issues and pull requests according to the usual Github methods. A little contribution guide is included in the README there.
--------------------------------------------------------------------------------
/docs/content/home/installation.md:
--------------------------------------------------------------------------------
1 | ## Installation
2 |
3 |
Scut is a single file that can be copied and pasted, downloaded, or installed via Bower or RubyGems (for Compass).
4 |
5 | No trouble at all. Here are the details.
6 |
7 | ### Method 1: Get the File and Use It
8 |
9 | 1. To get the file, you have the following options:
10 | - Use [Bower](http://bower.io/): `bower install scut --save-dev`
11 | - Download (or copy/paste) the latest release from Github.
12 |
13 | 2. To use the file, import `_scut.scss` into your own Sass/SCSS files. Like so: `@import "path/to/scut";`
14 |
15 | ### Method 2: Compass Extension
16 |
17 | 1. Install the RubyGem: `gem install scut`
18 | 2. Include Scut in your project by using `require` and `@import` according to the usual Compass-extension methods. You know: `require 'scut'`. And `@import 'scut'`. That kind of thing.
--------------------------------------------------------------------------------
/docs/content/home/usage.md:
--------------------------------------------------------------------------------
1 | ## Usage
2 |
3 |
Read about specific utilities here; then, having imported `_scut.scss` into your project, use them.
4 |
5 | If you find the Scut documentation inadequate or upsetting, please [file an issue](https://github.com/ramseyinhouse/scut/issues) or [contact us](https://github.com/ramseyinhouse).
6 |
7 | If you have any questions about how to use Sass/SCSS, refer to [the thorough Sass documentation](http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html).
8 |
9 | ### Browser Support
10 |
11 | Most of Scut's utilities should work just fine in any modern browser and IE8+.
12 |
13 | If a specific utility *does* have compatibility issues (and some do), those issues should be noted in the documentation below. (If they are not, please let me know.)
--------------------------------------------------------------------------------
/docs/dev/js/hbs-helpers.js:
--------------------------------------------------------------------------------
1 | var grunt = require('grunt');
2 |
3 | var processedStylesDir = './docs/content/example-styles/processed/';
4 |
5 | module.exports.register = function(Handlebars, options) {
6 |
7 | Handlebars.registerHelper('removeTicks', function(str) {
8 | return str.replace(/\`/g, '');
9 | });
10 |
11 | Handlebars.registerHelper('getExampleScss', function(name) {
12 | var file = grunt.file.read(processedStylesDir + name + '.scss');
13 | return file;
14 | });
15 |
16 | Handlebars.registerHelper('getExampleCss', function(name) {
17 | var file = grunt.file.read(processedStylesDir + name + '.css');
18 | return file;
19 | });
20 |
21 | Handlebars.registerHelper('removeFirstBlank', function(str) {
22 | var result = str.replace('\n', '');
23 | return result;
24 | });
25 |
26 | };
--------------------------------------------------------------------------------
/docs/dev/js/main.js:
--------------------------------------------------------------------------------
1 | var exampleCss = document.getElementById('exampleCss');
2 |
3 | if (exampleCss) {
4 | enableCssToggle();
5 | }
6 |
7 | function enableCssToggle() {
8 | var hiddenClass = 'is-hidden',
9 | exampleScss = document.getElementById('exampleScss'),
10 | example = document.getElementById('example'),
11 | showCssBtn = document.createElement('button'),
12 | cssOpen = false,
13 | showText = 'show compiled CSS',
14 | hideText = 'hide compiled CSS';
15 | // hide CSS
16 | exampleCss.classList.add(hiddenClass);
17 | // insert button
18 | showCssBtn.innerHTML = showText;
19 | showCssBtn.className = 'show-css-btn';
20 | example.insertBefore(showCssBtn, document.getElementById('resultHeading'));
21 | // make button work
22 | function toggleCss() {
23 | if (!cssOpen) {
24 | exampleCss.classList.remove(hiddenClass);
25 | showCssBtn.innerHTML = hideText;
26 | cssOpen = true;
27 | } else {
28 | exampleCss.classList.add(hiddenClass);
29 | exampleScss.scrollIntoView();
30 | showCssBtn.innerHTML = showText;
31 | cssOpen = false;
32 | }
33 | }
34 | showCssBtn.addEventListener('click', toggleCss);
35 | }
--------------------------------------------------------------------------------
/docs/dev/js/prism.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Prism: Lightweight, robust, elegant syntax highlighting
3 | * MIT license http://www.opensource.org/licenses/mit-license.php/
4 | * @author Lea Verou http://lea.verou.me
5 | */(function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var n=t.util.type(e);switch(n){case"Object":var r={};for(var i in e)e.hasOwnProperty(i)&&(r[i]=t.util.clone(e[i]));return r;case"Array":return e.slice()}return e}},languages:{extend:function(e,n){var r=t.util.clone(t.languages[e]);for(var i in n)r[i]=n[i];return r},insertBefore:function(e,n,r,i){i=i||t.languages;var s=i[e],o={};for(var u in s)if(s.hasOwnProperty(u)){if(u==n)for(var a in r)r.hasOwnProperty(a)&&(o[a]=r[a]);o[u]=s[u]}return i[e]=o},DFS:function(e,n){for(var r in e){n.call(e,r,e[r]);t.util.type(e)==="Object"&&t.languages.DFS(e[r],n)}}},highlightAll:function(e,n){var r=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code');for(var i=0,s;s=r[i++];)t.highlightElement(s,e===!0,n)},highlightElement:function(r,i,s){var o,u,a=r;while(a&&!e.test(a.className))a=a.parentNode;if(a){o=(a.className.match(e)||[,""])[1];u=t.languages[o]}if(!u)return;r.className=r.className.replace(e,"").replace(/\s+/g," ")+" language-"+o;a=r.parentNode;/pre/i.test(a.nodeName)&&(a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+o);var f=r.textContent;if(!f)return;f=f.replace(/&/g,"&").replace(/e.length)break e;if(p instanceof i)continue;a.lastIndex=0;var d=a.exec(p);if(d){l&&(c=d[1].length);var v=d.index-1+c,d=d[0].slice(c),m=d.length,g=v+m,y=p.slice(0,v+1),b=p.slice(g+1),w=[h,1];y&&w.push(y);var E=new i(u,f?t.tokenize(d,f):d);w.push(E);b&&w.push(b);Array.prototype.splice.apply(s,w)}}}return s},hooks:{all:{},add:function(e,n){var r=t.hooks.all;r[e]=r[e]||[];r[e].push(n)},run:function(e,n){var r=t.hooks.all[e];if(!r||!r.length)return;for(var i=0,s;s=r[i++];)s(n)}}},n=t.Token=function(e,t){this.type=e;this.content=t};n.stringify=function(e,r,i){if(typeof e=="string")return e;if(Object.prototype.toString.call(e)=="[object Array]")return e.map(function(t){return n.stringify(t,r,e)}).join("");var s={type:e.type,content:n.stringify(e.content,r,i),tag:"span",classes:["token",e.type],attributes:{},language:r,parent:i};s.type=="comment"&&(s.attributes.spellcheck="true");t.hooks.run("wrap",s);var o="";for(var u in s.attributes)o+=u+'="'+(s.attributes[u]||"")+'"';return"<"+s.tag+' class="'+s.classes.join(" ")+'" '+o+">"+s.content+""};if(!self.document){self.addEventListener("message",function(e){var n=JSON.parse(e.data),r=n.language,i=n.code;self.postMessage(JSON.stringify(t.tokenize(i,t.languages[r])));self.close()},!1);return}var r=document.getElementsByTagName("script");r=r[r.length-1];if(r){t.filename=r.src;document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)}})();;
6 | Prism.languages.markup={comment:/<!--[\w\W]*?-->/g,prolog:/<\?.+?\?>/,doctype:/<!DOCTYPE.+?>/,cdata:/<!\[CDATA\[[\w\W]*?]]>/i,tag:{pattern:/<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|\w+))?\s*)*\/?>/gi,inside:{tag:{pattern:/^<\/?[\w:-]+/i,inside:{punctuation:/^<\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{punctuation:/=|>|"/g}},punctuation:/\/?>/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/&#?[\da-z]{1,8};/gi};Prism.hooks.add("wrap",function(e){e.type==="entity"&&(e.attributes.title=e.content.replace(/&/,"&"))});;
7 | Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*{))/gi,inside:{punctuation:/[;:]/g}},url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\};]*(?=\s*\{)/g,property:/(\b|\B)[\w-]+(?=\s*:)/ig,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,ignore:/&(lt|gt|amp);/gi,punctuation:/[\{\};:]/g};Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{style:{pattern:/(<|<)style[\w\W]*?(>|>)[\w\W]*?(<|<)\/style(>|>)/ig,inside:{tag:{pattern:/(<|<)style[\w\W]*?(>|>)|(<|<)\/style(>|>)/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}});;
8 | Prism.languages.scss=Prism.languages.extend("css",{comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|\/\/.*?(\r?\n|$))/g,lookbehind:!0},atrule:/@[\w-]+(?=\s+(\(|\{|;))/gi,url:/([-a-z]+-)*url(?=\()/gi,selector:/([^@;\{\}\(\)]?([^@;\{\}\(\)]|&|\#\{\$[-_\w]+\})+)(?=\s*\{(\}|\s|[^\}]+(:|\{)[^\}]+))/gm});Prism.languages.insertBefore("scss","atrule",{keyword:/@(if|else if|else|for|each|while|import|extend|debug|warn|mixin|include|function|return)|(?=@for\s+\$[-_\w]+\s)+from/i});Prism.languages.insertBefore("scss","property",{variable:/((\$[-_\w]+)|(#\{\$[-_\w]+\}))/i});Prism.languages.insertBefore("scss","ignore",{placeholder:/%[-_\w]+/i,statement:/\B!(default|optional)\b/gi,"boolean":/\b(true|false)\b/g,"null":/\b(null)\b/g,operator:/\s+([-+]{1,2}|={1,2}|!=|\|?\||\?|\*|\/|\%)\s+/g});
9 | ;
10 |
--------------------------------------------------------------------------------
/docs/dev/layouts/base.hbs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | {{title}}
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | {{>banner}}
19 |
20 |