26 |
27 |
28 | ```
29 |
30 | ## Testing
31 |
32 | Install [Node](http://nodejs.org) (comes with npm).
33 |
34 | ```
35 | npm install
36 | ```
37 |
38 | To generate a build:
39 |
40 | ```
41 | npm run build
42 | ```
43 |
44 | To generate the testing build.
45 |
46 | ```
47 | npm run build-test
48 | ```
49 |
50 | Basic visual tests are in `test/index.html`.
51 |
52 | To pre-process:
53 |
54 | ```
55 | npm run preprocess
56 | ```
57 |
58 | To pre-process the tests:
59 |
60 | ```
61 | npm run preprocess-test
62 | ```
63 |
64 | ## Browser support
65 |
66 | * Google Chrome (latest)
67 | * Opera (latest)
68 | * Firefox 4+
69 | * Safari 5+
70 | * Internet Explorer 8+
71 |
--------------------------------------------------------------------------------
/packages/generator-suit/generators/app/templates/gitignore:
--------------------------------------------------------------------------------
1 | bower_components
2 | build
3 | components
4 | node_modules
5 |
--------------------------------------------------------------------------------
/packages/generator-suit/generators/app/templates/index.css:
--------------------------------------------------------------------------------
1 | @import "./lib/<%= moduleName %>.css";
2 |
3 |
--------------------------------------------------------------------------------
/packages/generator-suit/generators/app/templates/lib/component.css:
--------------------------------------------------------------------------------
1 | /** @define <%= moduleCssName %> */
2 |
3 | :root {
4 | --<%= moduleCssName %>-example-property: 1em;
5 | }
6 |
7 | .<%= moduleCssName %> {
8 | font-size: var(--<%= moduleCssName %>-example-property);
9 | }
10 |
--------------------------------------------------------------------------------
/packages/generator-suit/generators/app/templates/lib/utilities.css:
--------------------------------------------------------------------------------
1 | /** @define utilities */
2 |
3 | .<%= moduleCssName %> {
4 | font-size: 1em !important;
5 | }
6 |
--------------------------------------------------------------------------------
/packages/generator-suit/generators/app/templates/packagejson:
--------------------------------------------------------------------------------
1 | {
2 | "name": "<%= modulePackageName %>",
3 | "version": "0.1.0",
4 | "description": "<%= moduleDescription %>",
5 | "keywords": [
6 | "browser",
7 | "css-components",
8 | "<%= modulePackageName %>",
9 | "suitcss",
10 | "style"
11 | ],
12 | "homepage": "https://github.com/<%= moduleAuthorGithubUsername %>/<%= modulePackageName %>#readme",
13 | "bugs": "https://github.com/<%= moduleAuthorGithubUsername %>/<%= modulePackageName %>/labels/bug",
14 | "license": "MIT",
15 | "author": "<%= moduleAuthorName %>",
16 | "files": [
17 | "index.css",
18 | "index.js",
19 | "lib"
20 | ],
21 | "style": "index.css",
22 | "repository": {
23 | "type": "git",
24 | "url": "git://github.com/<%= moduleAuthorGithubUsername %>/<%= modulePackageName %>.git"
25 | },
26 | "scripts": {
27 | "build": "npm run setup && npm run preprocess",
28 | "build-test": "npm run setup && npm run preprocess-test",
29 | "preprocess": "suitcss index.css build/build.css",
30 | "preprocess-test": "suitcss -i test test/test.css build/test.css",
31 | "setup": "npm install",
32 | "watch": "npm run preprocess-test -- -w -v",
33 | "test": "suitcss -c test/config.json index.css build/output.css && rm build/output.css"
34 | },
35 | "devDependencies": {
36 | "stylelint-config-suitcss": "^6.0.0",
37 | "suitcss-components-test": "*",
38 | "suitcss-preprocessor": "^2.0.0"
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/packages/generator-suit/generators/app/templates/stylelintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "stylelint-config-suitcss"
3 | }
4 |
--------------------------------------------------------------------------------
/packages/generator-suit/generators/app/templates/test/config.json:
--------------------------------------------------------------------------------
1 | {
2 | "lint": true,
3 | "postcss-reporter": {
4 | "throwError": true
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/packages/generator-suit/generators/app/templates/test/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
10 |
31 |
--------------------------------------------------------------------------------
/packages/generator-suit/generators/app/templates/test/test.css:
--------------------------------------------------------------------------------
1 | @import "suitcss-components-test";
2 | @import "../index.css";
3 |
--------------------------------------------------------------------------------
/packages/generator-suit/generators/app/templates/travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | sudo: false
3 | node_js:
4 | - "4"
5 | - "5"
6 |
--------------------------------------------------------------------------------
/packages/generator-suit/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "generator-suit",
3 | "version": "1.0.2",
4 | "description": "Generator for scaffolding out a SUIT component or utility",
5 | "keywords": [
6 | "yeoman-generator",
7 | "generator",
8 | "suit",
9 | "web",
10 | "yeoman-generator",
11 | "css component"
12 | ],
13 | "bugs": "https://github.com/suitcss/suit/labels/bug",
14 | "license": "MIT",
15 | "author": "Giuseppe Gurgone",
16 | "files": [
17 | "generators"
18 | ],
19 | "main": "generators/app/index.js",
20 | "repository": "https://github.com/suitcss/suit/tree/master/packages/generator-suit",
21 | "homepage": "https://github.com/suitcss/suit/tree/master/packages/generator-suit",
22 | "scripts": {
23 | "test": "mocha --reporter spec --slow 400 --timeout 3000",
24 | "pretest": "npm run lint",
25 | "lint": "eslint test/app.js generators/app/index.js"
26 | },
27 | "dependencies": {
28 | "chalk": "^1.0.0",
29 | "lodash.camelcase": "^4.1.0",
30 | "yeoman-generator": "^0.21.1",
31 | "yosay": "^1.0.2"
32 | },
33 | "devDependencies": {
34 | "eslint": "^1.10.3",
35 | "eslint-config-airbnb": "^5.0.0",
36 | "mocha": "^5.2.0",
37 | "yeoman-assert": "^2.0.0"
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/packages/preprocessor/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "airbnb-base",
3 | "env": {
4 | "es6": true
5 | },
6 | "globals": {
7 | "Promise": true,
8 | "document": true
9 | },
10 | "rules": {
11 | "comma-dangle": [2, "never"],
12 | "func-names": 0,
13 | "global-require": 0,
14 | "max-len": 0,
15 | "no-console": 0,
16 | "no-param-reassign": [0],
17 | "no-use-before-define": [2, "nofunc"],
18 | "object-curly-spacing": 0,
19 | "one-var": [2, { "uninitialized": "always", "initialized": "never" }],
20 | "space-before-function-paren": 0,
21 | "vars-on-top": 0,
22 | "arrow-parens": 0,
23 | "strict": 0,
24 |
25 | "import/no-dynamic-require": 0
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/packages/preprocessor/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
--------------------------------------------------------------------------------
/packages/preprocessor/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | sudo: required
3 | node_js:
4 | - "4"
5 | - "6"
6 | - "stable"
7 | addons:
8 | apt:
9 | packages:
10 | - xvfb
11 | before_install:
12 | - curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
13 | - echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
14 | - sudo apt-get update && sudo apt-get install yarn
15 | cache:
16 | directories:
17 | - $HOME/.yarn-cache
18 | install:
19 | - export DISPLAY=':99.0'
20 | - Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &
21 | - yarn
22 |
--------------------------------------------------------------------------------
/packages/preprocessor/LICENSE.md:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) Nicolas Gallagher, Segment.io
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
9 | of the Software, and to permit persons to whom the Software is furnished to do
10 | so, 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,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/packages/preprocessor/appveyor.yml:
--------------------------------------------------------------------------------
1 | # http://www.appveyor.com/docs/appveyor-yml
2 |
3 | environment:
4 | matrix:
5 | - nodejs_version: 7
6 | - nodejs_version: 6
7 | - nodejs_version: 4
8 |
9 | version: "{build}"
10 | build: off
11 | deploy: off
12 |
13 | install:
14 | - ps: Install-Product node $env:nodejs_version
15 | - yarn
16 |
17 | test_script:
18 | - node --version
19 | - npm --version
20 | - cmd: "npm test"
21 |
--------------------------------------------------------------------------------
/packages/preprocessor/test/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../.eslintrc",
3 | "env": {
4 | "mocha": true
5 | },
6 | "rules": {
7 | "no-unused-expressions": 0,
8 | "no-underscore-dangle": 0,
9 | "consistent-return": 0,
10 | "one-var-declaration-per-line": 0
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/packages/preprocessor/test/config/cli-undefined-flags.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | minify: true
3 | };
4 |
--------------------------------------------------------------------------------
/packages/preprocessor/test/config/noautoprefixer.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | autoprefixer: {
3 | add: false,
4 | remove: false
5 | }
6 | };
7 |
--------------------------------------------------------------------------------
/packages/preprocessor/test/config/root-fake.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: './foo/bar'
3 | };
4 |
--------------------------------------------------------------------------------
/packages/preprocessor/test/config/root-real.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: './test/fixtures'
3 | };
4 |
--------------------------------------------------------------------------------
/packages/preprocessor/test/config/test.config:
--------------------------------------------------------------------------------
1 | {
2 | "lint": true,
3 | "minify": false,
4 | "use": [
5 | "postcss-property-lookup"
6 | ],
7 | "autoprefixer": {
8 | "add": false,
9 | "remove": false
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/packages/preprocessor/test/config/test.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | lint: true,
3 | minify: false,
4 | use: [
5 | 'postcss-property-lookup'
6 | ],
7 | autoprefixer: {
8 | add: false,
9 | remove: false
10 | }
11 | };
12 |
--------------------------------------------------------------------------------
/packages/preprocessor/test/encapsulation/browser.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const getStyle = require('computed-style');
4 | const test = require('tape-css')(require('tape'));
5 | const styles = require('../fixtures/encapsulation.out.css');
6 |
7 | const dom = (() => {
8 | const container = document.createElement('div');
9 | container.innerHTML = `
10 | SUIT CSS: <%= moduleCssName %> tests
11 | 12 |.<%= moduleCssName %>
13 |renders
14 |
15 |
16 |
17 |
18 | does something else
19 |
20 |
21 |
22 |
23 | <% if (moduleType == 'components') { %>
24 | .<%= moduleCssName %>--modifier
25 |renders differently
26 |
27 |
28 |
29 |
<% } %>
30 |
11 |
18 | `;
19 | return container;
20 | })();
21 |
22 | test(
23 | 'Encapsulated Component\'s Root',
24 | {
25 | dom,
26 | styles
27 | },
28 | is => {
29 | const parent = dom.querySelector('.Component');
30 | const root = dom.querySelector('.Encapsulation');
31 | is.notEqual(
32 | getStyle(root, 'font-size'),
33 | getStyle(parent, 'font-size'),
34 | 'shouldn\'t inherit from the parent scope'
35 | );
36 |
37 | is.equal(
38 | getStyle(root, 'width'),
39 | '50px',
40 | 'can define own styles'
41 | );
42 | is.end();
43 | }
44 | );
45 |
46 | test(
47 | 'Encapsulated Descendant',
48 | {
49 | dom,
50 | styles
51 | },
52 | is => {
53 | const descendant = dom.querySelector('.Encapsulation-descendant');
54 | is.equal(
55 | getStyle(descendant, 'color'),
56 | 'rgb(255, 0, 0)',
57 | 'should inherit from the Component scope'
58 | );
59 |
60 | is.equal(
61 | getStyle(descendant, 'background-color'),
62 | 'rgb(238, 238, 238)',
63 | 'can define own styles'
64 | );
65 | is.end();
66 | }
67 | );
68 |
--------------------------------------------------------------------------------
/packages/preprocessor/test/encapsulation/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const chai = require('chai');
4 | const chaiAsPromised = require('chai-as-promised');
5 | const suitcss = require('../../lib');
6 | const util = require('../util');
7 |
8 | const expect = chai.expect;
9 |
10 | chai.use(chaiAsPromised);
11 |
12 | describe('encapsulation', () => {
13 | it('should reset inherited and non inherited properties', done => {
14 | const input = util.read('fixtures/encapsulation');
15 | const output = util.read('fixtures/encapsulation.out');
16 |
17 | suitcss(input, {
18 | encapsulate: true,
19 | root: 'test/fixtures',
20 | lint: false,
21 | // Set browsers to 'Chrome 50'
22 | // for a predictable result
23 | autoprefixer: {
24 | browsers: 'Chrome 50'
25 | }
26 | }).then(result => {
27 | expect(result.css.trim()).to.be.equal(output.trim());
28 | done();
29 | }).catch(done);
30 | });
31 |
32 | describe('plugins', () => {
33 | const getPluginsNames = result =>
34 | (result.processor.plugins || []).map(plugin => plugin.postcssPlugin);
35 |
36 | it('should insert the encapsulationPlugins to the `plugins` array', done => {
37 | suitcss('body {}', {
38 | encapsulate: true,
39 | lint: false
40 | }).then(result => {
41 | const plugins = getPluginsNames(result);
42 | expect(plugins).to.include('autoreset-suitcss-encapsulation-inherited');
43 | expect(plugins).to.include('autoreset-suitcss-encapsulation-nonInherited');
44 | done();
45 | }).catch(done);
46 | });
47 |
48 | it('should insert the encapsulationPlugins before `autoprefixer`', done => {
49 | suitcss('body {}', {
50 | encapsulate: true,
51 | lint: false
52 | }).then(result => {
53 | const plugins = getPluginsNames(result);
54 | const autoprefixerIndex = plugins.indexOf('autoprefixer');
55 | expect(autoprefixerIndex).to.be.above(plugins.indexOf('autoreset-suitcss-encapsulation-inherited'));
56 | expect(autoprefixerIndex).to.be.above(plugins.indexOf('autoreset-suitcss-encapsulation-nonInherited'));
57 | done();
58 | }).catch(done);
59 | });
60 | });
61 | });
62 |
--------------------------------------------------------------------------------
/packages/preprocessor/test/fixtures/cli/error.css:
--------------------------------------------------------------------------------
1 |
2 | /**
3 | * Variables.
4 | */
5 |
6 | :root {
7 | var-red: red;
8 | }
9 |
10 | /**
11 | * Body.
12 | */
13 |
14 | body {
15 | color: var(green;
16 | }
17 |
--------------------------------------------------------------------------------
/packages/preprocessor/test/fixtures/cli/input.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --red: #f00;
3 | }
4 |
5 | .cli {
6 | color: var(--red);
7 | width: calc(50px * 2);
8 | transition: all 1s;
9 | }
10 |
--------------------------------------------------------------------------------
/packages/preprocessor/test/fixtures/cli/input.out.css:
--------------------------------------------------------------------------------
1 | .cli {
2 | color: #f00;
3 | width: 100px;
4 | transition: all 1s;
5 | }
6 |
7 |
--------------------------------------------------------------------------------
/packages/preprocessor/test/fixtures/component.css:
--------------------------------------------------------------------------------
1 | /** @define Component */
2 |
3 | @import "./util.css";
4 | @custom-media --media-query (min-width: 200px);
5 |
6 | :root {
7 | --Component-size: 26px;
8 | --Component-color: {
9 | color: green;
10 | };
11 | }
12 |
13 | .Component {
14 | background: color(red a(90%));
15 | font-size: var(--Component-size);
16 | width: calc(100% * 1 / 6);
17 | }
18 |
19 | .Component-item {
20 | display: flex;
21 |
22 | @apply --Component-color;
23 | }
24 |
25 | @media (--media-query) {
26 |
27 | .Component-item {
28 | color: red;
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/packages/preprocessor/test/fixtures/component.out.css:
--------------------------------------------------------------------------------
1 | /** @define Component */
2 |
3 | .u-img {
4 | border-radius: 50%;
5 | }
6 |
7 | .Component {
8 | background: rgba(255, 0, 0, 0.9);
9 | font-size: 26px;
10 | width: 16.66667%;
11 | }
12 |
13 | .Component-item {
14 | display: flex;
15 |
16 | color: green;
17 | }
18 |
19 | @media (min-width: 200px) {
20 |
21 | .Component-item {
22 | color: red;
23 | }
24 | }
25 |
26 |
--------------------------------------------------------------------------------
/packages/preprocessor/test/fixtures/config.css:
--------------------------------------------------------------------------------
1 | @import "./component.css";
2 |
3 | .Test {
4 | width: 100px;
5 | height: @width;
6 | }
7 |
--------------------------------------------------------------------------------
/packages/preprocessor/test/fixtures/config.out.css:
--------------------------------------------------------------------------------
1 | /** @define Component */
2 |
3 | .u-img {
4 | border-radius: 50%;
5 | }
6 |
7 | .Component {
8 | background: rgba(255, 0, 0, 0.9);
9 | font-size: 26px;
10 | width: 16.66667%;
11 | }
12 |
13 | .Component-item {
14 | display: flex;
15 |
16 | color: green;
17 | }
18 |
19 | @media (min-width: 200px) {
20 |
21 | .Component-item {
22 | color: red;
23 | }
24 | }
25 |
26 | .Test {
27 | width: 100px;
28 | height: 100px;
29 | }
30 |
31 |
--------------------------------------------------------------------------------
/packages/preprocessor/test/fixtures/encapsulation.css:
--------------------------------------------------------------------------------
1 | @import './component';
2 | @import './util';
3 |
4 | .Encapsulation {
5 | color: red;
6 | width: 50px;
7 | }
8 |
9 | .Encapsulation-descendant {
10 | background-color: #eee;
11 | }
12 |
13 | .Encapsulation-descendant:hover {
14 | background-color: #f00;
15 | }
16 |
17 | .Encapsulation-descendant[aria-hidden="true"] {
18 | display: none;
19 | }
20 |
21 | .Encapsulation.is-inState {
22 | background-color: red;
23 | }
24 |
25 | .Encapsulation-item,
26 | .Encapsulation span {
27 | filter: blur(10px);
28 | }
29 |
--------------------------------------------------------------------------------
/packages/preprocessor/test/fixtures/error.css:
--------------------------------------------------------------------------------
1 | /** @define Component **/
2 |
3 | .component {}
4 |
--------------------------------------------------------------------------------
/packages/preprocessor/test/fixtures/import-error.css:
--------------------------------------------------------------------------------
1 | @import "./error.css"
2 |
--------------------------------------------------------------------------------
/packages/preprocessor/test/fixtures/import.css:
--------------------------------------------------------------------------------
1 | @import "./component.css";
2 |
--------------------------------------------------------------------------------
/packages/preprocessor/test/fixtures/import.out.css:
--------------------------------------------------------------------------------
1 | body {
2 | transition: transform 1s;
3 | }
4 |
--------------------------------------------------------------------------------
/packages/preprocessor/test/fixtures/minify.out.css:
--------------------------------------------------------------------------------
1 | .u-img{border-radius:50%}.Component{background:rgba(255,0,0,.9);font-size:26px;width:16.66667%}.Component-item{display:flex;color:green}@media (min-width:200px){.Component-item{color:red}}
2 |
--------------------------------------------------------------------------------
/packages/preprocessor/test/fixtures/stylelint-import.css:
--------------------------------------------------------------------------------
1 | @import "./stylelint.css";
2 |
--------------------------------------------------------------------------------
/packages/preprocessor/test/fixtures/stylelint.css:
--------------------------------------------------------------------------------
1 | .Component {
2 | box-sizing: content-box;
3 | }
4 |
--------------------------------------------------------------------------------
/packages/preprocessor/test/fixtures/util.css:
--------------------------------------------------------------------------------
1 | .u-img {
2 | border-radius: 50%;
3 | }
4 |
--------------------------------------------------------------------------------
/packages/preprocessor/test/index.js:
--------------------------------------------------------------------------------
1 | require('./cli');
2 | require('./encapsulation');
3 | require('./linting');
4 | require('./node');
5 | require('./options');
6 |
--------------------------------------------------------------------------------
/packages/preprocessor/test/node.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const chai = require('chai');
4 | const suitcss = require('../lib');
5 | const util = require('./util');
6 |
7 | const expect = chai.expect;
8 |
9 | describe('node API', () => {
10 | it('should return a css string', done => {
11 | suitcss('body {}', {
12 | lint: false
13 | }).then(result => {
14 | expect(result.css).to.be.a('string');
15 | done();
16 | });
17 | });
18 |
19 | it('should handle invalid input', () => {
20 | expect(() => {
21 | suitcss(null, {lint: false});
22 | }).to.throw(TypeError);
23 | });
24 |
25 | it('should preprocess CSS correctly', done => {
26 | const input = util.read('fixtures/component');
27 | const output = util.read('fixtures/component.out');
28 |
29 | suitcss(input, {
30 | root: 'test/fixtures',
31 | lint: false,
32 | // disable autoprefixer
33 | autoprefixer: {add: false, remove: false}
34 | }).then(result => {
35 | expect(result.css.trim()).to.be.equal(output.trim());
36 | done();
37 | }).catch(done);
38 | });
39 |
40 | it('should add vendor prefixes', done => {
41 | const input = '.test { filter: blur(1px) }';
42 | const output = '.test { -webkit-filter: blur(1px); filter: blur(1px) }';
43 |
44 | suitcss(input, {
45 | lint: false,
46 | autoprefixer: {
47 | browsers: 'Chrome 50'
48 | }
49 | }).then(result => {
50 | expect(result.css.trim()).to.be.equal(output.trim());
51 | done();
52 | }).catch(done);
53 | });
54 | });
55 |
--------------------------------------------------------------------------------
/packages/preprocessor/test/util.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const fs = require('fs');
4 | const path = require('path');
5 |
6 | function read(filename) {
7 | const file = resolve(filename);
8 | return fs.readFileSync(file, 'utf8');
9 | }
10 |
11 | function remove(filename) {
12 | const file = resolve(filename);
13 | if (!fs.existsSync(file)) return;
14 | fs.unlinkSync(file);
15 | }
16 |
17 | function resolve(filename) {
18 | return path.resolve(__dirname, `${filename}.css`);
19 | }
20 |
21 | module.exports = {
22 | read,
23 | remove,
24 | resolve
25 | };
26 |
--------------------------------------------------------------------------------
/packages/stylelint-config-suitcss/.editorconfig:
--------------------------------------------------------------------------------
1 | # editorconfig.org
2 | root = true
3 |
4 | [*]
5 | charset = utf-8
6 | end_of_line = lf
7 | indent_size = 2
8 | indent_style = space
9 | insert_final_newline = true
10 | trim_trailing_whitespace = true
11 |
12 | [*.md]
13 | trim_trailing_whitespace = false
14 |
--------------------------------------------------------------------------------
/packages/stylelint-config-suitcss/.gitattributes:
--------------------------------------------------------------------------------
1 | * text eol=lf
2 |
--------------------------------------------------------------------------------
/packages/stylelint-config-suitcss/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
--------------------------------------------------------------------------------
/packages/stylelint-config-suitcss/.travis.yml:
--------------------------------------------------------------------------------
1 | sudo: false
2 | before_install:
3 | - curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
4 | - echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
5 | - sudo apt-get update && sudo apt-get install yarn
6 | cache:
7 | directories:
8 | - $HOME/.yarn-cache
9 | install:
10 | - yarn
11 | language: node_js
12 | node_js:
13 | - "node"
14 | - "lts/*"
15 |
--------------------------------------------------------------------------------
/packages/stylelint-config-suitcss/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 stylelint
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, 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,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/packages/stylelint-config-suitcss/README.md:
--------------------------------------------------------------------------------
1 | # stylelint-config-suitcss
2 | [](https://www.npmjs.org/package/stylelint-config-suitcss) [](https://travis-ci.org/suitcss/stylelint-config-suitcss) [](https://ci.appveyor.com/project/simonsmith/stylelint-config-suitcss)
3 |
4 | > SUIT CSS shareable config for stylelint.
5 |
6 | Configuration rules to ensure your CSS code is compliant with [SUIT CSS's code style](https://github.com/suitcss/suit/blob/master/doc/STYLE.md).
7 |
8 | ## Installation
9 |
10 | ```console
11 | $ npm install stylelint-config-suitcss
12 | ```
13 |
14 | ## Usage
15 |
16 | Set your stylelint config to:
17 |
18 | ```json
19 | {
20 | "extends": "stylelint-config-suitcss"
21 | }
22 | ```
23 |
24 | ### Extending the config
25 |
26 | Simply add a `"rules"` key to your config and add your overrides there.
27 |
28 | For example, to change the `indentation` to tabs and turn off the `number-leading-zero` rule:
29 |
30 | ```json
31 | {
32 | "extends": "stylelint-config-suitcss",
33 | "rules": {
34 | "indentation": "tab",
35 | "number-leading-zero": null
36 | }
37 | }
38 | ```
39 |
40 | ## [Changelog](CHANGELOG.md)
41 |
42 | ## [License](LICENSE)
43 |
--------------------------------------------------------------------------------
/packages/stylelint-config-suitcss/appveyor.yml:
--------------------------------------------------------------------------------
1 | # http://www.appveyor.com/docs/appveyor-yml
2 |
3 | environment:
4 | matrix:
5 | - nodejs_version: 6
6 | - nodejs_version: 8
7 | - nodejs_version: 9
8 | version: "{build}"
9 | build: off
10 | deploy: off
11 | install:
12 | - ps: Install-Product node $env:nodejs_version
13 | - yarn
14 | test_script:
15 | - cmd: "yarn test"
16 |
--------------------------------------------------------------------------------
/packages/stylelint-config-suitcss/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "stylelint-config-suitcss",
3 | "version": "14.0.0",
4 | "description": "SUIT CSS config for stylelint",
5 | "keywords": [
6 | "stylelint",
7 | "stylelint-config",
8 | "suitcss"
9 | ],
10 | "author": "stylelint",
11 | "license": "MIT",
12 | "repository": "https://github.com/suitcss/suit/tree/master/packages/stylelint-config-suitcss",
13 | "homepage": "https://github.com/suitcss/suit/tree/master/packages/stylelint-config-suitcss",
14 | "bugs": "https://github.com/suitcss/suit/labels/bug",
15 | "main": "index.js",
16 | "files": [
17 | "index.js"
18 | ],
19 | "devDependencies": {
20 | "ava": "^0.18.2",
21 | "eslint": "^3.17.0",
22 | "eslint-config-stylelint": "^6.0.0",
23 | "npmpub": "^3.0.1",
24 | "stylelint": "^9.0.0"
25 | },
26 | "peerDependencies": {
27 | "stylelint": "^9.0.0"
28 | },
29 | "scripts": {
30 | "ava": "ava --verbose \"__tests__/**/*.js\"",
31 | "lint": "eslint . --ignore-path .gitignore",
32 | "pretest": "yarn run lint",
33 | "release": "npmpub",
34 | "test": "yarn run ava"
35 | },
36 | "eslintConfig": {
37 | "extends": [
38 | "stylelint"
39 | ],
40 | "parserOptions": {
41 | "sourceType": "module"
42 | }
43 | },
44 | "dependencies": {
45 | "stylelint-order": "^0.8.0",
46 | "stylelint-suitcss": "^3.0.0"
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/packages/stylelint-suitcss/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | end_of_line = lf
5 | charset = utf-8
6 | trim_trailing_whitespace = true
7 | insert_final_newline = true
8 | indent_style = space
9 | indent_size = 2
10 |
11 | [*.md]
12 | trim_trailing_whitespace = false
13 |
--------------------------------------------------------------------------------
/packages/stylelint-suitcss/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "eslint:recommended",
3 | "parserOptions": {
4 | "ecmaVersion": 6
5 | },
6 | "env": {
7 | "es6": true,
8 | "node": true
9 | },
10 | "rules": {
11 | "space-before-function-paren": [2, "never"],
12 | "space-in-parens": [2, "never"],
13 | "array-bracket-spacing": [2, "never"],
14 | "object-curly-spacing": [2, "never"],
15 | "semi": 2,
16 | "comma-dangle": [1, "always-multiline"],
17 | "quotes": [2, "single"],
18 | "semi-spacing": 2,
19 | "eqeqeq": 2,
20 | "indent": [2, 2, {"SwitchCase": 1}],
21 | "no-multi-spaces": 2,
22 | "no-var": 2,
23 | "object-shorthand": 2
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/packages/stylelint-suitcss/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .envrc
3 |
--------------------------------------------------------------------------------
/packages/stylelint-suitcss/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | sudo: false
3 | node_js:
4 | - "stable"
5 | - "6"
6 |
--------------------------------------------------------------------------------
/packages/stylelint-suitcss/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | ### HEAD
2 |
3 | ### 3.0.0 (February 24, 2018)
4 |
5 | * Update `stylelint` to `^9.0.0` - Note this drops support for Node 4
6 |
7 | ### 2.0.0 (January 10, 2017)
8 |
9 | * Update `stylelint` to `^8.4.0`
10 |
11 | ### 1.0.0 (March 01, 2017)
12 |
13 | * Initial port of deprecated `:root` rules from Stylelint core
14 |
--------------------------------------------------------------------------------
/packages/stylelint-suitcss/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, 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,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/packages/stylelint-suitcss/README.md:
--------------------------------------------------------------------------------
1 | # stylelint-suitcss
2 |
3 | [](https://travis-ci.org/suitcss/stylelint-suitcss)
4 |
5 | A collection of [stylelint](https://stylelint.io/) plugins for SUIT CSS.
6 |
7 | ## Installation
8 |
9 | ```
10 | npm install stylelint-suitcss --save-dev
11 |
12 | # or
13 |
14 | yarn add stylelint-suitcss --dev
15 | ```
16 |
17 | ## Usage
18 |
19 | Add `stylelint-suitcss` to your stylelint config plugins array, then add rules
20 | you need to the `rules` object.
21 |
22 | ```js
23 | // .stylelintrc
24 | {
25 | "plugins": [
26 | "stylelint-suitcss"
27 | ],
28 | "rules": {
29 | "suitcss/custom-property-no-outside-root": true,
30 | "suitcss/root-no-standard-properties": true,
31 | "suitcss/selector-root-no-composition": true
32 | }
33 | }
34 | ```
35 |
36 | ## Available rules
37 |
38 | * [`custom-property-no-outside-root`](./rules/custom-property-no-outside-root/README.md) - Disallow custom properties outside of `:root` rules.
39 | * [`root-no-standard-properties`](./rules/root-no-standard-properties/README.md) - Disallow standard properties inside `:root` rules.
40 | * [`selector-root-no-composition`](./rules/selector-root-no-composition/README.md) - Disallow the composition of `:root` in selectors.
41 |
--------------------------------------------------------------------------------
/packages/stylelint-suitcss/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const createPlugin = require('stylelint').createPlugin;
4 | const namespace = require('./utils/namespace');
5 | const rules = require('./rules');
6 |
7 | const rulesPlugins = Object.keys(rules).map(ruleName => {
8 | return createPlugin(namespace(ruleName), rules[ruleName]);
9 | });
10 |
11 | module.exports = rulesPlugins;
12 |
--------------------------------------------------------------------------------
/packages/stylelint-suitcss/index.test.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const test = require('ava');
4 | const find = require('lodash.find');
5 | const rule = require('./');
6 |
7 | test('root-no-standard-properties should exist', t => {
8 | t.truthy(find(rule, {ruleName: 'suitcss/root-no-standard-properties'}));
9 | });
10 |
11 | test('selector-root-no-composition should exist', t => {
12 | t.truthy(find(rule, {ruleName: 'suitcss/selector-root-no-composition'}));
13 | });
14 |
15 | test('custom-property-no-outside-root should exist', t => {
16 | t.truthy(find(rule, {ruleName: 'suitcss/custom-property-no-outside-root'}));
17 | });
18 |
--------------------------------------------------------------------------------
/packages/stylelint-suitcss/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "stylelint-suitcss",
3 | "version": "3.0.0",
4 | "description": "A collection of stylelint plugins for SUIT CSS",
5 | "keywords": [
6 | "stylelint-plugin",
7 | "stylelint",
8 | "css",
9 | "lint",
10 | "suitcss"
11 | ],
12 | "repository": "https://github.com/suitcss/suit/tree/master/packages/stylelint-suitcss",
13 | "homepage": "https://github.com/suitcss/suit/tree/master/packages/stylelint-suitcss",
14 | "bugs": "https://github.com/suitcss/suit/labels/bug",
15 | "engines": {
16 | "node": ">=4"
17 | },
18 | "main": "index.js",
19 | "scripts": {
20 | "lint": "eslint rules utils",
21 | "pretest": "npm run lint",
22 | "test": "ava index.test.js **/test/*.js"
23 | },
24 | "author": "Simon Smith",
25 | "license": "MIT",
26 | "devDependencies": {
27 | "ava": "^0.18.2",
28 | "eslint": "^3.16.1",
29 | "stylelint-test-rule-ava": "^0.2.0"
30 | },
31 | "dependencies": {
32 | "lodash.find": "^4.6.0",
33 | "postcss-selector-parser": "^2.2.3",
34 | "stylelint": "^9.0.0"
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/packages/stylelint-suitcss/rules/custom-property-no-outside-root/README.md:
--------------------------------------------------------------------------------
1 | # custom-property-no-outside-root
2 |
3 | Disallow custom properties outside of `:root` rules. This enforces the
4 | limitation set by
5 | [postcss-custom-properties](https://github.com/postcss/postcss-custom-properties):
6 |
7 | > It currently just aims to provide a future-proof way of using a limited subset
8 | (to :root selector) of the features provided by native CSS custom properties.
9 |
10 | ```css
11 | a { --foo: 1px; }
12 | /** ↑ ↑
13 | * These selectors and these types of custom properties */
14 | ```
15 |
16 | ## Options
17 |
18 | ### `true`
19 |
20 | The following patterns are considered warnings:
21 |
22 | ```css
23 | a { --foo: 1px; }
24 | ```
25 |
26 | ```css
27 | :root, a { --foo: 1px; }
28 | ```
29 |
30 | The following patterns are *not* considered warnings:
31 |
32 | ```css
33 | :root { --foo: 1px; }
34 | ```
35 |
--------------------------------------------------------------------------------
/packages/stylelint-suitcss/rules/custom-property-no-outside-root/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const stylelint = require('stylelint');
4 | const isCustomProperty = require('../../utils/isCustomProperty');
5 | const namespace = require('../../utils/namespace');
6 |
7 | const ruleName = namespace('custom-property-no-outside-root');
8 | const messages = stylelint.utils.ruleMessages(ruleName, {
9 | rejected: 'Unexpected custom property',
10 | });
11 |
12 | function rule(actual) {
13 | return function(root, result) {
14 | const validOptions = stylelint.utils.validateOptions(result, ruleName, {actual});
15 | if (!validOptions) {
16 | return;
17 | }
18 |
19 | root.walkRules(rule => {
20 | // Ignore rules whose selector is just `:root`
21 | if (rule.selector.toLowerCase().trim() === ':root') {
22 | return;
23 | }
24 |
25 | rule.walkDecls(decl => {
26 | if (!isCustomProperty(decl.prop)) {
27 | return;
28 | }
29 | stylelint.utils.report({
30 | message: messages.rejected,
31 | node: decl,
32 | result,
33 | ruleName,
34 | });
35 | });
36 | });
37 | };
38 | }
39 |
40 | rule.ruleName = ruleName;
41 | rule.messages = messages;
42 |
43 | module.exports = rule;
44 |
--------------------------------------------------------------------------------
/packages/stylelint-suitcss/rules/custom-property-no-outside-root/test/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const testRule = require('stylelint-test-rule-ava');
4 | const rule = require('..');
5 |
6 | const messages = rule.messages;
7 | const ruleName = rule.ruleName;
8 |
9 | testRule(rule, {
10 | ruleName,
11 | config: [true],
12 |
13 | accept: [{
14 | code: ':root { --foo-bar: 1px; }',
15 | }, {
16 | code: ':rOoT { --foo-bar: 1px; }',
17 | }, {
18 | code: ':ROOT { --foo-bar: 1px; }',
19 | }, {
20 | code: 'a { color: pink; }',
21 | }, {
22 | code: 'a { -webkit-transform: 1px; }',
23 | }],
24 |
25 | reject: [{
26 | code: 'a { --foo-bar: 1px; }',
27 | message: messages.rejected,
28 | }, {
29 | code: 'a { color: pink; -webkit-transform: 1px; --foo-bar: 1px; }',
30 | message: messages.rejected,
31 | }, {
32 | code: ':root, a { --foo-bar: 1px; }',
33 | message: messages.rejected,
34 | }, {
35 | code: ':root a { --foo-bar: 1px; }',
36 | message: messages.rejected,
37 | }, {
38 | code: ':rOoT a { --foo-bar: 1px; }',
39 | message: messages.rejected,
40 | }, {
41 | code: ':ROOT a { --foo-bar: 1px; }',
42 | message: messages.rejected,
43 | }],
44 | });
45 |
--------------------------------------------------------------------------------
/packages/stylelint-suitcss/rules/index.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | 'custom-property-no-outside-root': require('./custom-property-no-outside-root'),
3 | 'root-no-standard-properties': require('./root-no-standard-properties'),
4 | 'selector-root-no-composition': require('./selector-root-no-composition'),
5 | };
6 |
--------------------------------------------------------------------------------
/packages/stylelint-suitcss/rules/root-no-standard-properties/README.md:
--------------------------------------------------------------------------------
1 | # root-no-standard-properties
2 |
3 | Disallow standard properties inside `:root` rules. This is treated as a global
4 | namespace which means setting a property like `color` in more than one component
5 | would cause collisions.
6 |
7 | ```css
8 | :root { color: #333 }
9 | /** ↑ ↑
10 | * This selector and these types of standard properties */
11 | ```
12 |
13 | This rule ignores `$sass` and `@less` variables.
14 |
15 | ## Options
16 |
17 | ### `true`
18 |
19 | The following patterns are considered warnings:
20 |
21 | ```css
22 | :root { color: pink; }
23 | ```
24 |
25 | ```css
26 | a, :root { top: 0; }
27 | ```
28 |
29 | The following patterns are *not* considered warnings:
30 |
31 | ```css
32 | :root { --foo: 0; }
33 | ```
34 |
35 | ```css
36 | a, :root { --foo: 0; }
37 | ```
38 |
--------------------------------------------------------------------------------
/packages/stylelint-suitcss/rules/root-no-standard-properties/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const stylelint = require('stylelint');
4 | const isCustomProperty = require('../../utils/isCustomProperty');
5 | const isStandardSyntaxProperty = require('../../utils/isStandardSyntaxProperty');
6 | const parseSelector = require('../../utils/parseSelector');
7 | const namespace = require('../../utils/namespace');
8 |
9 | const ruleName = namespace('root-no-standard-properties');
10 | const messages = stylelint.utils.ruleMessages(ruleName, {
11 | rejected: property => `Unexpected standard property "${property}"`,
12 | });
13 |
14 | const rule = function(actual) {
15 | return (root, result) => {
16 | const validOptions = stylelint.utils.validateOptions(result, ruleName, {actual});
17 | if (!validOptions) {
18 | return;
19 | }
20 |
21 | root.walkRules(rule => {
22 | if (rule.selector.toLowerCase().indexOf(':root') === -1) {
23 | return;
24 | }
25 | parseSelector(rule.selector, result, rule, checkSelector);
26 |
27 | function checkSelector(selectorAST) {
28 | if (ignoreRule(selectorAST)) {
29 | return;
30 | }
31 |
32 | rule.each(function(node) {
33 | if (node.type !== 'decl') {
34 | return;
35 | }
36 |
37 | const prop = node.prop;
38 |
39 | if (!isStandardSyntaxProperty(prop)) {
40 | return;
41 | }
42 | if (isCustomProperty(prop)) {
43 | return;
44 | }
45 |
46 | stylelint.utils.report({
47 | message: messages.rejected(prop),
48 | node,
49 | result,
50 | ruleName,
51 | });
52 | });
53 | }
54 | });
55 | };
56 | };
57 |
58 | function ignoreRule(selectorAST) {
59 | let ignore = false;
60 | selectorAST.walk(selectorNode => {
61 | // ignore `:root` selector inside a `:not()` selector
62 | if (selectorNode.value && selectorNode.value.toLowerCase() === ':root' && selectorNode.parent.parent.value && selectorNode.parent.parent.value.toLowerCase() === ':not') {
63 | ignore = true;
64 | }
65 | });
66 | return ignore;
67 | }
68 |
69 | rule.ruleName = ruleName;
70 | rule.messages = messages;
71 | module.exports = rule;
72 |
--------------------------------------------------------------------------------
/packages/stylelint-suitcss/rules/selector-root-no-composition/README.md:
--------------------------------------------------------------------------------
1 | # selector-root-no-composition
2 |
3 | Disallow the composition of `:root` in selectors.
4 |
5 | ```css
6 | a, :root {}
7 | /** ↑ ↑
8 | * This type of composite selector */
9 | ```
10 |
11 | ## Options
12 |
13 | ### `true`
14 |
15 | The following patterns are considered warnings:
16 |
17 | ```css
18 | a, :root {}
19 | ```
20 |
21 | ```css
22 | :root + a {}
23 | ```
24 |
25 | ```css
26 | html:root {}
27 | ```
28 |
29 | The following patterns are *not* considered warnings:
30 |
31 | ```css
32 | :root {}
33 | ```
34 |
--------------------------------------------------------------------------------
/packages/stylelint-suitcss/rules/selector-root-no-composition/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const stylelint = require('stylelint');
4 | const namespace = require('../../utils/namespace');
5 |
6 | const ruleName = namespace('selector-root-no-composition');
7 | const messages = stylelint.utils.ruleMessages(ruleName, {
8 | rejected: 'Unexpected composition',
9 | });
10 |
11 | function rule(actual) {
12 | return (root, result) => {
13 | const validOptions = stylelint.utils.validateOptions(result, ruleName, {actual});
14 | if (!validOptions) {
15 | return;
16 | }
17 |
18 | root.walkRules(rule => {
19 | if (rule.selector.toLowerCase().indexOf(':root') === -1 || rule.selector.toLowerCase().trim() === ':root') {
20 | return;
21 | }
22 |
23 | stylelint.utils.report({
24 | message: messages.rejected,
25 | node: rule,
26 | result,
27 | ruleName,
28 | });
29 | });
30 | };
31 | }
32 |
33 | rule.ruleName = ruleName;
34 | rule.messages = messages;
35 | module.exports = rule;
36 |
--------------------------------------------------------------------------------
/packages/stylelint-suitcss/rules/selector-root-no-composition/test/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const testRule = require('stylelint-test-rule-ava');
4 | const rule = require('..');
5 |
6 | const messages = rule.messages;
7 | const ruleName = rule.ruleName;
8 |
9 | testRule(rule, {
10 | ruleName,
11 | config: [true],
12 |
13 | accept: [{
14 | code: ':root {}',
15 | }, {
16 | code: ':rOoT {}',
17 | }, {
18 | code: ':ROOT {}',
19 | }, {
20 | code: ' :root\n {}',
21 | }],
22 |
23 | reject: [{
24 | code: 'a, :root {}',
25 | message: messages.rejected,
26 | }, {
27 | code: 'a, :rOoT {}',
28 | message: messages.rejected,
29 | }, {
30 | code: 'a, :ROOT {}',
31 | message: messages.rejected,
32 | }, {
33 | code: ':root, a {}',
34 | message: messages.rejected,
35 | }, {
36 | code: ':root + a {}',
37 | message: messages.rejected,
38 | }, {
39 | code: 'body, .foo, :root + a {}',
40 | message: messages.rejected,
41 | }, {
42 | code: 'html:root {}',
43 | message: messages.rejected,
44 | }, {
45 | code: 'html :root {}',
46 | message: messages.rejected,
47 | }],
48 | });
49 |
--------------------------------------------------------------------------------
/packages/stylelint-suitcss/utils/hasInterpolation.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const hasLessInterpolation = require('./hasLessInterpolation');
4 | const hasPsvInterpolation = require('./hasPsvInterpolation');
5 | const hasScssInterpolation = require('./hasScssInterpolation');
6 | /**
7 | * Check whether a string has interpolation
8 | *
9 | * @param {string} string
10 | * @return {boolean} If `true`, a string has interpolation
11 | */
12 | module.exports = function(string) {
13 | // SCSS or Less interpolation
14 | if (hasLessInterpolation(string) || hasScssInterpolation(string) || hasPsvInterpolation(string)) {
15 | return true;
16 | }
17 |
18 | return false;
19 | };
--------------------------------------------------------------------------------
/packages/stylelint-suitcss/utils/hasLessInterpolation.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | /**
4 | * Check whether a string has less interpolation
5 | *
6 | * @param {string} string
7 | * @return {boolean} If `true`, a string has less interpolation
8 | */
9 | module.exports = function(string) {
10 | if (/@{.+?}/.test(string)) {
11 | return true;
12 | }
13 |
14 | return false;
15 | };
16 |
--------------------------------------------------------------------------------
/packages/stylelint-suitcss/utils/hasPsvInterpolation.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | /**
4 | * Check whether a string has postcss-simple-vars interpolation
5 | *
6 | * @param {string} string
7 | * @return {boolean} If `true`, a string has postcss-simple-vars interpolation
8 | */
9 | module.exports = function(string) {
10 | if (/\$\(.+?\)/.test(string)) {
11 | return true;
12 | }
13 |
14 | return false;
15 | };
16 |
--------------------------------------------------------------------------------
/packages/stylelint-suitcss/utils/hasScssInterpolation.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | /**
4 | * Check whether a string has scss interpolation
5 | *
6 | * @param {string} string
7 | * @return {boolean} If `true`, a string has scss interpolation
8 | */
9 | module.exports = function(string) {
10 | if (/#{.+?}/.test(string)) {
11 | return true;
12 | }
13 |
14 | return false;
15 | };
--------------------------------------------------------------------------------
/packages/stylelint-suitcss/utils/isCustomProperty.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | /**
4 | * Check whether a property is a custom one
5 | *
6 | * @param {string} property
7 | * @return {boolean} If `true`, property is a custom one
8 | */
9 | module.exports = function(property) {
10 | return property.slice(0, 2) === '--';
11 | };
12 |
--------------------------------------------------------------------------------
/packages/stylelint-suitcss/utils/isStandardSyntaxProperty.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const hasInterpolation = require('../utils/hasInterpolation');
4 | /**
5 | * Check whether a property is standard
6 | *
7 | * @param {string} property
8 | * @return {boolean} If `true`, the property is standard
9 | */
10 | module.exports = function(property) {
11 | // SCSS var (e.g. $var: x), list (e.g. $list: (x)) or map (e.g. $map: (key:value))
12 | if (property[0] === '$') {
13 | return false;
14 | }
15 |
16 | // Less var (e.g. @var: x)
17 | if (property[0] === '@') {
18 | return false;
19 | }
20 |
21 | // SCSS or Less interpolation
22 | if (hasInterpolation(property)) {
23 | return false;
24 | }
25 |
26 | return true;
27 | };
--------------------------------------------------------------------------------
/packages/stylelint-suitcss/utils/namespace.js:
--------------------------------------------------------------------------------
1 | const prefix = 'suitcss';
2 |
3 | module.exports = function namespace(ruleName) {
4 | return `${prefix}/${ruleName}`;
5 | };
6 |
--------------------------------------------------------------------------------
/packages/stylelint-suitcss/utils/parseSelector.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const selectorParser = require('postcss-selector-parser');
4 |
5 | module.exports = function(selector, result, node, cb) {
6 | try {
7 | selectorParser(cb).process(selector);
8 | } catch (e) {
9 | result.warn('Cannot parse selector', {node});
10 | }
11 | };
--------------------------------------------------------------------------------
/packages/suit/LICENSE.md:
--------------------------------------------------------------------------------
1 | Copyright (c) Nicolas Gallagher
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of
4 | this software and associated documentation files (the "Software"), to deal in
5 | the Software without restriction, including without limitation the rights to
6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
7 | of the Software, and to permit persons to whom the Software is furnished to do
8 | so, subject to the following conditions:
9 |
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 |
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.
20 |
--------------------------------------------------------------------------------
/packages/suit/index.css:
--------------------------------------------------------------------------------
1 | @import "suitcss-base";
2 | @import "suitcss-utils";
3 | @import "suitcss-components";
4 |
--------------------------------------------------------------------------------
/packages/suit/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "suitcss",
3 | "version": "3.0.0",
4 | "description": "CSS base styles, utilities, and structural components for web apps",
5 | "style": "index.css",
6 | "files": [
7 | "index.css"
8 | ],
9 | "dependencies": {
10 | "suitcss-base": "^3.0.0",
11 | "suitcss-components": "^2.0.0",
12 | "suitcss-utils": "^3.0.0"
13 | },
14 | "devDependencies": {
15 | "suitcss-preprocessor": "^4.0.0"
16 | },
17 | "scripts": {
18 | "build": "npm run setup && npm run preprocess",
19 | "preprocess": "suitcss index.css build/build.css",
20 | "setup": "npm install"
21 | },
22 | "repository": "https://github.com/suitcss/suit/tree/master/packages/suit",
23 | "homepage": "https://github.com/suitcss/suit/tree/master/packages/suit",
24 | "bugs": "https://github.com/suitcss/suit/labels/bug",
25 | "keywords": [
26 | "browser",
27 | "css-components",
28 | "css-utilities",
29 | "suitcss",
30 | "style"
31 | ]
32 | }
33 |
--------------------------------------------------------------------------------
/packages/suit/yarn.lock:
--------------------------------------------------------------------------------
1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
2 | # yarn lockfile v1
3 |
4 |
5 | normalize.css@^6.0.0:
6 | version "6.0.0"
7 | resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-6.0.0.tgz#22188c2707c911fb3ad3c1aac0677ff68661bea8"
8 |
9 | suitcss-base@^3.0.0:
10 | version "3.0.0"
11 | resolved "https://registry.yarnpkg.com/suitcss-base/-/suitcss-base-3.0.0.tgz#83dd53629c37adbdeac11ef6439a7f2ed955f05e"
12 | dependencies:
13 | normalize.css "^6.0.0"
14 |
--------------------------------------------------------------------------------
/packages/theme/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components
2 | build
3 | components
4 | node_modules
5 |
--------------------------------------------------------------------------------
/packages/theme/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - "0.10"
4 |
--------------------------------------------------------------------------------
/packages/theme/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | ### HEAD
2 |
3 | * Update naming of variables according to the conventions.
4 |
5 | ### 1.0.0 (February 28, 2016)
6 |
7 | * Update preprocessor to `^1.0.1`.
8 | * Update custom properties to correct format.
9 | * Add `.css` extension to imports for interoperability.
10 |
11 | ### 0.1.0 (June 23, 2014)
12 |
13 | * Initial release.
14 |
--------------------------------------------------------------------------------
/packages/theme/LICENSE.md:
--------------------------------------------------------------------------------
1 | Copyright (c) Nicolas Gallagher
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of
4 | this software and associated documentation files (the "Software"), to deal in
5 | the Software without restriction, including without limitation the rights to
6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
7 | of the Software, and to permit persons to whom the Software is furnished to do
8 | so, subject to the following conditions:
9 |
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 |
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.
20 |
--------------------------------------------------------------------------------
/packages/theme/README.md:
--------------------------------------------------------------------------------
1 | # SUIT CSS example theme
2 |
3 | Example theme for SUIT CSS.
4 |
5 | Read more about [SUIT CSS](https://github.com/suitcss/suit/).
6 |
7 | ## Installation
8 |
9 | * [npm](https://npmjs.org/): `npm install suitcss-theme`
10 | * Download: [zip](https://github.com/suitcss/theme/zipball/master)
11 |
12 | ## Testing
13 |
14 | Install [Node](http://nodejs.org) (comes with npm).
15 |
16 | ```
17 | npm install
18 | ```
19 |
20 | To generate a build.
21 |
22 | ```
23 | npm run build
24 | ```
25 |
26 | ## Browser support
27 |
28 | * Google Chrome (latest)
29 | * Opera (latest)
30 | * Firefox 4+
31 | * Safari 5+
32 | * Internet Explorer 9+
33 |
--------------------------------------------------------------------------------
/packages/theme/index.css:
--------------------------------------------------------------------------------
1 | @import "suitcss";
2 | @import "./lib/theme.css";
3 | @import "./lib/theme-map.css";
4 |
--------------------------------------------------------------------------------
/packages/theme/lib/theme-map.css:
--------------------------------------------------------------------------------
1 | /**
2 | * components-arrange
3 | */
4 |
5 | :root {
6 | --Arrange-gutterSize: var(--spaceSmall);
7 | }
8 |
9 | /**
10 | * components-grid
11 | */
12 |
13 | :root {
14 | --Grid-gutterSize: var(--spaceLarge);
15 | }
16 |
--------------------------------------------------------------------------------
/packages/theme/lib/theme.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Theme definition
3 | *
4 | * This defines the theme in fundamental terms, but not how it is applied to
5 | * the components. That is done in `theme-map.css`.
6 | */
7 |
8 | /**
9 | * Breakpoints
10 | */
11 |
12 | @custom-media --sm-viewport (min-width:320px) and (max-width:640px);
13 | @custom-media --md-viewport (min-width:640px) and (max-width:960px);
14 | @custom-media --lg-viewport (min-width:960px);
15 |
16 | /**
17 | * Colors
18 | */
19 |
20 | :root {
21 | --colorTwitterBlue: #55acee;
22 | --colorWhite: #fff;
23 |
24 | /* Primary grays */
25 | --colorCharcoal: #292f33;
26 | --colorDarkGray: #66757f;
27 | --colorMediumGray: #8899a6;
28 | --colorGray: #ccd6dd;
29 | --colorBorderGray: #e1e8ed;
30 | --colorFaintGray: #f5f8fa;
31 |
32 | /* Primary blues */
33 | --colorDarkBlue: #226699;
34 | --colorDeepBlue: #3b88c3;
35 | --colorLightBlue: #88c9f9;
36 |
37 | /* Secondary colors */
38 | --colorOrange: #ffac33;
39 | --colorGreen: #77b255;
40 | --colorPurple: #9266cc;
41 | --colorRed: #dd2e44;
42 | --colorYellow: #ffcc4d;
43 |
44 | /* Secondary color variants */
45 | --colorDarkOrange: #f4900c;
46 | --colorDarkGreen: #3e721d;
47 | --colorDarkPurple: #553788;
48 | --colorDarkRed: #a0041e;
49 | --colorDeepGreen: #5c913b;
50 | --colorDeepPurple: #744eaa;
51 | --colorDeepRed: #be1931;
52 | --colorLightYellow: #ffd983;
53 | --colorLightGreen: #a6d388;
54 | --colorLightPurple: #aa8dd8;
55 | --colorLightRed: #ea596e;
56 | --colorFadedYellow: #ffe8b6;
57 | --colorFadedGreen: #c6e5b3;
58 | --colorFadedBlue: #bbddf5;
59 | --colorFadedPurple: #cbb7ea;
60 | --colorFadedRed: #f4abba;
61 | }
62 |
63 | /**
64 | * Fonts
65 | */
66 |
67 | :root {
68 | --fontSize: 16px;
69 | --fontFamily: sans-serif;
70 | --lineHeight: 1.4;
71 | }
72 |
73 | /**
74 | * Spacing
75 | */
76 |
77 | :root {
78 | --spaceSmall: 10px;
79 | --spaceMedium: 15px;
80 | --spaceLarge: 20px;
81 | }
82 |
--------------------------------------------------------------------------------
/packages/theme/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "suitcss-theme",
3 | "version": "1.0.0",
4 | "description": "Example theme for SUIT CSS",
5 | "keywords": [
6 | "browser",
7 | "css-theme",
8 | "suitcss",
9 | "style"
10 | ],
11 | "bugs": "https://github.com/suitcss/suit/labels/bug",
12 | "license": "MIT",
13 | "author": "Nicolas Gallagher",
14 | "files": [
15 | "index.css",
16 | "lib"
17 | ],
18 | "style": "theme.css",
19 | "repository": "https://github.com/suitcss/suit/tree/master/packages/theme",
20 | "homepage": "https://github.com/suitcss/suit/tree/master/packages/theme",
21 | "scripts": {
22 | "build": "npm run setup && npm run preprocess",
23 | "preprocess": "suitcss index.css build/build.css",
24 | "setup": "npm install"
25 | },
26 | "dependencies": {
27 | "suitcss": "^2.0.0"
28 | },
29 | "devDependencies": {
30 | "suitcss-preprocessor": "^2.0.0"
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/packages/utils-after/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components
2 | build
3 | components
4 | node_modules
5 |
--------------------------------------------------------------------------------
/packages/utils-after/.stylelintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "stylelint-config-suitcss"
3 | }
4 |
--------------------------------------------------------------------------------
/packages/utils-after/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | sudo: false
3 | node_js:
4 | - "4"
5 | - "5"
6 |
--------------------------------------------------------------------------------
/packages/utils-after/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | ### HEAD
2 |
3 | ### 1.0.1 (February 27, 2016)
4 |
5 | * Fix incorrect margin direction on `afterNone`
6 |
7 | ### 1.0.0 (February 12, 2016)
8 |
9 | * Upgrade to latest preprocessor
10 |
11 | ### 0.3.2 (October 28, 2014)
12 |
13 | * Add support for JS module bundling (e.g., webpack, AMD loaders)
14 |
15 | ### 0.3.1 (June 24, 2014)
16 |
17 | * Add `.css` extension to imports for interoperability.
18 |
19 | ### 0.3.0 (June 21, 2014)
20 |
21 | * npm-based workflow.
22 | * Add new preprocessor build tool.
23 |
24 | ### 0.2.2 (March 26, 2014)
25 |
26 | * Remove MQ files from component.json (6f61ebd3)
27 | * Add `files` to package.json.
28 |
29 | ### 0.2.1 (March 25, 2014)
30 |
31 | * Fix npm support.
32 |
33 | ### 0.2.0 (March 25, 2014)
34 |
35 | * Use `calc()` to increase precision of percentage values.
36 | * Change the file and class names.
37 | * Stop using CSSLint.
38 |
39 | ### 0.1.0 (February 7, 2014)
40 |
41 | * Initial public release.
42 |
--------------------------------------------------------------------------------
/packages/utils-after/LICENSE.md:
--------------------------------------------------------------------------------
1 | Copyright (c) Nicolas Gallagher
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of
4 | this software and associated documentation files (the "Software"), to deal in
5 | the Software without restriction, including without limitation the rights to
6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
7 | of the Software, and to permit persons to whom the Software is furnished to do
8 | so, subject to the following conditions:
9 |
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 |
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.
20 |
--------------------------------------------------------------------------------
/packages/utils-after/README.md:
--------------------------------------------------------------------------------
1 | # SUIT CSS utilities: after
2 |
3 | [](https://travis-ci.org/suitcss/utils-after)
4 |
5 | SUIT CSS trailing offset utilities.
6 |
7 | Read more about [SUIT CSS's design principles](https://github.com/suitcss/suit/).
8 |
9 | ## Installation
10 |
11 | * [npm](http://npmjs.org/): `npm install suitcss-utils-after`
12 | * Download: [zip](https://github.com/suitcss/utils-after/releases/latest)
13 |
14 | ## Available classes
15 |
16 | * `u-afterXofY` (numerous) - Specify the proportional offset after an object.
17 |
18 | `X` must be an integer less than `Y`.
19 |
20 | `Y` can be any of the following numbers: 2, 3, 4, 5, 6, 8, 10, 12.
21 |
22 | ### Plugins
23 |
24 | Utilities that can be limited to specific Media Query breakpoints.
25 |
26 | * `u-sm-afterXofY` - To use at the smallest Media Query breakpoint.
27 | * `u-md-afterXofY` - To use at the medium Media Query breakpoint.
28 | * `u-lg-afterXofY` - To use at the large Media Query breakpoint.
29 |
30 | ### Configuration
31 |
32 | There are 3 Media Query breakpoints:
33 |
34 | * `--sm-viewport`
35 | * `--md-viewport`
36 | * `--lg-viewport`
37 |
38 | When using the [SUIT CSS preprocessor](https://github.com/suitcss/preprocessor),
39 | breakpoints can be configured using `@custom-media`. For example:
40 |
41 | ```css
42 | @custom-media --sm-viewport (min-width:320px) and (max-width:640px);
43 | @custom-media --md-viewport (min-width:640px) and (max-width:960px);
44 | @custom-media --lg-viewport (min-width:960px);
45 | ```
46 |
47 | ## Usage
48 |
49 | Please refer to the README for [SUIT CSS utils](https://github.com/suitcss/utils/)
50 |
51 | ## Testing
52 |
53 | Install [Node](http://nodejs.org) (comes with npm).
54 |
55 | ```
56 | npm install
57 | ```
58 |
59 | To generate a build:
60 |
61 | ```
62 | npm run build
63 | ```
64 |
65 | To lint code with [postcss-bem-linter](https://github.com/postcss/postcss-bem-linter) and [stylelint](http://stylelint.io/)
66 |
67 | ```
68 | npm run lint
69 | ```
70 |
71 | To generate the testing build.
72 |
73 | ```
74 | npm run build-test
75 | ```
76 |
77 | To watch the files for making changes to test:
78 |
79 | ```
80 | npm run watch
81 | ```
82 |
83 | Basic visual tests are in `test/index.html`.
84 |
85 | ## Browser support
86 |
87 | * Google Chrome (latest)
88 | * Opera (latest)
89 | * Firefox 4+
90 | * Safari 5+
91 | * Internet Explorer 8+
92 |
--------------------------------------------------------------------------------
/packages/utils-after/index.css:
--------------------------------------------------------------------------------
1 | @import "./lib/after.css";
2 | @import "./lib/after-sm.css";
3 | @import "./lib/after-md.css";
4 | @import "./lib/after-lg.css";
5 |
--------------------------------------------------------------------------------
/packages/utils-after/index.js:
--------------------------------------------------------------------------------
1 | require('./lib/after.css');
2 | require('./lib/after-sm.css');
3 | require('./lib/after-md.css');
4 | require('./lib/after-lg.css');
5 |
--------------------------------------------------------------------------------
/packages/utils-after/lib/after.css:
--------------------------------------------------------------------------------
1 | /**
2 | * @define utilities
3 | * Specify the proportional offset after an element.
4 | * Intentional redundancy build into each set of unit classes.
5 | * Supports: 2, 4, 5, 6, 8, 10, 12 section
6 | */
7 |
8 | .u-after1of12 {
9 | margin-right: calc(100% * 1 / 12) !important;
10 | }
11 |
12 | .u-after1of10 {
13 | margin-right: 10% !important;
14 | }
15 |
16 | .u-after1of8 {
17 | margin-right: 12.5% !important;
18 | }
19 |
20 | .u-after1of6,
21 | .u-after2of12 {
22 | margin-right: calc(100% * 1 / 6) !important;
23 | }
24 |
25 | .u-after1of5,
26 | .u-after2of10 {
27 | margin-right: 20% !important;
28 | }
29 |
30 | .u-after1of4,
31 | .u-after2of8,
32 | .u-after3of12 {
33 | margin-right: 25% !important;
34 | }
35 |
36 | .u-after3of10 {
37 | margin-right: 30% !important;
38 | }
39 |
40 | .u-after1of3,
41 | .u-after2of6,
42 | .u-after4of12 {
43 | margin-right: calc(100% * 1 / 3) !important;
44 | }
45 |
46 | .u-after3of8 {
47 | margin-right: 37.5% !important;
48 | }
49 |
50 | .u-after2of5,
51 | .u-after4of10 {
52 | margin-right: 40% !important;
53 | }
54 |
55 | .u-after5of12 {
56 | margin-right: calc(100% * 5 / 12) !important;
57 | }
58 |
59 | .u-after1of2,
60 | .u-after2of4,
61 | .u-after3of6,
62 | .u-after4of8,
63 | .u-after5of10,
64 | .u-after6of12 {
65 | margin-right: 50% !important;
66 | }
67 |
68 | .u-after7of12 {
69 | margin-right: calc(100% * 7 / 12) !important;
70 | }
71 |
72 | .u-after3of5,
73 | .u-after6of10 {
74 | margin-right: 60% !important;
75 | }
76 |
77 | .u-after5of8 {
78 | margin-right: 62.5% !important;
79 | }
80 |
81 | .u-after2of3,
82 | .u-after4of6,
83 | .u-after8of12 {
84 | margin-right: calc(100% * 2 / 3) !important;
85 | }
86 |
87 | .u-after7of10 {
88 | margin-right: 70% !important;
89 | }
90 |
91 | .u-after3of4,
92 | .u-after6of8,
93 | .u-after9of12 {
94 | margin-right: 75% !important;
95 | }
96 |
97 | .u-after4of5,
98 | .u-after8of10 {
99 | margin-right: 80% !important;
100 | }
101 |
102 | .u-after5of6,
103 | .u-after10of12 {
104 | margin-right: calc(100% * 5 / 6) !important;
105 | }
106 |
107 | .u-after7of8 {
108 | margin-right: 87.5% !important;
109 | }
110 |
111 | .u-after9of10 {
112 | margin-right: 90% !important;
113 | }
114 |
115 | .u-after11of12 {
116 | margin-right: calc(100% * 11 / 12) !important;
117 | }
118 |
--------------------------------------------------------------------------------
/packages/utils-after/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "suitcss-utils-after",
3 | "version": "1.0.1",
4 | "description": "Trailing offset utilities for SUIT CSS",
5 | "keywords": [
6 | "browser",
7 | "css-utilities",
8 | "offset",
9 | "style",
10 | "suitcss"
11 | ],
12 | "bugs": "https://github.com/suitcss/suit/labels/bug",
13 | "license": "MIT",
14 | "author": "Nicolas Gallagher",
15 | "files": [
16 | "index.css",
17 | "index.js",
18 | "lib"
19 | ],
20 | "style": "index.css",
21 | "repository": "https://github.com/suitcss/suit/tree/master/packages/utils-after",
22 | "homepage": "https://github.com/suitcss/suit/tree/master/packages/utils-after",
23 | "scripts": {
24 | "build": "npm run setup && npm run preprocess",
25 | "build-test": "npm run setup && npm run preprocess-test",
26 | "lint": "suitcss -c test/config.json index.css build/lint.css && rm build/lint.css",
27 | "preprocess": "suitcss index.css build/build.css",
28 | "preprocess-test": "suitcss test/test.css build/test.css",
29 | "setup": "npm install",
30 | "watch": "npm run preprocess-test -- -w -v",
31 | "test": "npm run lint"
32 | },
33 | "devDependencies": {
34 | "stylelint": "^5.4.0",
35 | "stylelint-config-suitcss": "^5.0.0",
36 | "suitcss-components-test": "*",
37 | "suitcss-preprocessor": "^2.0.0"
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/packages/utils-after/test/config.json:
--------------------------------------------------------------------------------
1 | {
2 | "lint": true,
3 | "postcss-reporter": {
4 | "plugins": ["stylelint", "postcss-bem-linter"],
5 | "throwError": true
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/packages/utils-after/test/test.css:
--------------------------------------------------------------------------------
1 | @import "suitcss-components-test";
2 | @import "./index.css";
3 | @custom-media --sm-viewport (min-width:320px) and (max-width:640px);
4 | @custom-media --md-viewport (min-width:640px) and (max-width:960px);
5 | @custom-media --lg-viewport (min-width:960px);
6 |
--------------------------------------------------------------------------------
/packages/utils-align/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components
2 | build
3 | components
4 | node_modules
5 |
--------------------------------------------------------------------------------
/packages/utils-align/.stylelintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "stylelint-config-suitcss"
3 | }
4 |
--------------------------------------------------------------------------------
/packages/utils-align/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | sudo: false
3 | node_js:
4 | - "4"
5 | - "5"
6 |
--------------------------------------------------------------------------------
/packages/utils-align/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | ### HEAD
2 |
3 | ### 1.0.0 (February 27, 2016)
4 |
5 | * Upgrade to latest preprocessor
6 | * Enable BEM linting
7 |
8 | ### 0.2.2. (October 28, 2014)
9 |
10 | * Add support for JS module bundling (e.g., webpack, AMD loaders)
11 |
12 | ### 0.2.1 (June 24, 2014)
13 |
14 | Add `.css` extension to imports for interoperability.
15 |
16 | ### 0.2.0 (June 21, 2014)
17 |
18 | * npm-based workflow.
19 | * Add new preprocessor build tool.
20 |
21 | ### 0.1.1 (March 26, 2014)
22 |
23 | * Fix npm support.
24 |
25 | ### 0.1.0 (March 24, 2014)
26 |
27 | * Initial release.
28 |
--------------------------------------------------------------------------------
/packages/utils-align/LICENSE.md:
--------------------------------------------------------------------------------
1 | Copyright (c) Nicolas Gallagher
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of
4 | this software and associated documentation files (the "Software"), to deal in
5 | the Software without restriction, including without limitation the rights to
6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
7 | of the Software, and to permit persons to whom the Software is furnished to do
8 | so, subject to the following conditions:
9 |
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 |
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.
20 |
--------------------------------------------------------------------------------
/packages/utils-align/README.md:
--------------------------------------------------------------------------------
1 | # SUIT CSS utilities: align
2 |
3 | [](https://travis-ci.org/suitcss/utils-align)
4 |
5 | SUIT CSS utility classes for vertically aligning elements.
6 |
7 | Read more about [SUIT CSS's design principles](https://github.com/suitcss/suit/).
8 |
9 | ## Installation
10 |
11 | * [npm](http://npmjs.org/): `npm install suitcss-utils-align`
12 | * Download: [zip](https://github.com/suitcss/utils-align/releases/latest)
13 |
14 | ## Available classes
15 |
16 | * `u-alignBaseline` -Vertically align to baseline.
17 | * `u-alignBottom` - Vertically align to bottom.
18 | * `u-alignMiddle` - Vertically align to middle.
19 | * `u-alignTop` - Vertically align to top.
20 |
21 | ## Usage
22 |
23 | Please refer to the README for [SUIT CSS utils](https://github.com/suitcss/utils/)
24 |
25 | ## Testing
26 |
27 | Install [Node](http://nodejs.org) (comes with npm).
28 |
29 | ```
30 | npm install
31 | ```
32 |
33 | To generate a build:
34 |
35 | ```
36 | npm run build
37 | ```
38 |
39 | To lint code with [postcss-bem-linter](https://github.com/postcss/postcss-bem-linter) and [stylelint](http://stylelint.io/)
40 |
41 | ```
42 | npm run lint
43 | ```
44 |
45 | To generate the testing build.
46 |
47 | ```
48 | npm run build-test
49 | ```
50 |
51 | To watch the files for making changes to test:
52 |
53 | ```
54 | npm run watch
55 | ```
56 |
57 | Basic visual tests are in `test/index.html`.
58 |
59 | ## Browser support
60 |
61 | * Google Chrome (latest)
62 | * Opera (latest)
63 | * Firefox 4+
64 | * Safari 5+
65 | * Internet Explorer 8+
66 |
--------------------------------------------------------------------------------
/packages/utils-align/index.css:
--------------------------------------------------------------------------------
1 | @import "./lib/align.css";
2 |
--------------------------------------------------------------------------------
/packages/utils-align/index.js:
--------------------------------------------------------------------------------
1 | require('./lib/align.css');
2 |
--------------------------------------------------------------------------------
/packages/utils-align/lib/align.css:
--------------------------------------------------------------------------------
1 | /**
2 | * @define utilities
3 | * Vertical alignment utilities
4 | * Depends on an appropriate `display` value.
5 | */
6 |
7 | .u-alignBaseline {
8 | vertical-align: baseline !important;
9 | }
10 |
11 | .u-alignBottom {
12 | vertical-align: bottom !important;
13 | }
14 |
15 | .u-alignMiddle {
16 | vertical-align: middle !important;
17 | }
18 |
19 | .u-alignTop {
20 | vertical-align: top !important;
21 | }
22 |
--------------------------------------------------------------------------------
/packages/utils-align/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "suitcss-utils-align",
3 | "version": "1.0.0",
4 | "description": "Vertical alignment utilities for SUIT CSS",
5 | "keywords": [
6 | "browser",
7 | "css-utilities",
8 | "align",
9 | "suitcss",
10 | "style"
11 | ],
12 | "bugs": "https://github.com/suitcss/suit/labels/bug",
13 | "license": "MIT",
14 | "author": "Nicolas Gallagher",
15 | "files": [
16 | "index.css",
17 | "index.js",
18 | "lib"
19 | ],
20 | "style": "index.css",
21 | "repository": "https://github.com/suitcss/suit/tree/master/packages/utils-align",
22 | "homepage": "https://github.com/suitcss/suit/tree/master/packages/utils-align",
23 | "scripts": {
24 | "build": "npm run setup && npm run preprocess",
25 | "build-test": "npm run setup && npm run preprocess-test",
26 | "lint": "suitcss -c test/config.json index.css build/lint.css && rm build/lint.css",
27 | "preprocess": "suitcss index.css build/build.css",
28 | "preprocess-test": "suitcss test/test.css build/test.css",
29 | "setup": "npm install",
30 | "watch": "npm run preprocess-test -- -w -v",
31 | "test": "npm run lint"
32 | },
33 | "devDependencies": {
34 | "stylelint-config-suitcss": "^4.0.0",
35 | "suitcss-components-test": "*",
36 | "suitcss-preprocessor": "^1.0.0"
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/packages/utils-align/test/config.json:
--------------------------------------------------------------------------------
1 | {
2 | "lint": true,
3 | "postcss-reporter": {
4 | "plugins": ["stylelint", "postcss-bem-linter"],
5 | "throwError": true
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/packages/utils-align/test/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
12 |
17 |
13 |
16 |
14 |
15 |
20 |
46 |
--------------------------------------------------------------------------------
/packages/utils-align/test/test.css:
--------------------------------------------------------------------------------
1 | @import "suitcss-components-test";
2 | @import "./index.css";
3 |
--------------------------------------------------------------------------------
/packages/utils-before/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components
2 | build
3 | components
4 | node_modules
5 |
--------------------------------------------------------------------------------
/packages/utils-before/.stylelintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "stylelint-config-suitcss"
3 | }
4 |
--------------------------------------------------------------------------------
/packages/utils-before/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | sudo: false
3 | node_js:
4 | - "4"
5 | - "5"
6 |
--------------------------------------------------------------------------------
/packages/utils-before/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | ### HEAD
2 |
3 | ### 1.0.1 (February 27, 2016)
4 |
5 | * Enable BEM linting
6 |
7 | ### 1.0.0 (February 13, 2016)
8 |
9 | * Upgrade to latest preprocessor
10 |
11 | ### 0.3.2 (October 28, 2014)
12 |
13 | * Add support for JS bundling.
14 |
15 | ### 0.3.1 (June 24, 2014)
16 |
17 | Add `.css` extension to imports for interoperability.
18 |
19 | ### 0.3.0 (June 21, 2014)
20 |
21 | * npm-based workflow.
22 | * Add new preprocessor build tool.
23 |
24 | ### 0.2.2 (March 26, 2014)
25 |
26 | * Remove MQ files from component.json (6d22c69).
27 | * Add 'files' to package.json.
28 |
29 | ### 0.2.1 (March 25, 2014)
30 |
31 | * Fix npm support.
32 |
33 | ### 0.2.0 (March 25, 2014)
34 |
35 | * Use `calc()` to increase precision of percentage values.
36 | * Change the file and class names.
37 | * Stop using CSSLint.
38 |
39 | ### 0.1.0 (February 7, 2014)
40 |
41 | * Initial public release.
42 |
--------------------------------------------------------------------------------
/packages/utils-before/LICENSE.md:
--------------------------------------------------------------------------------
1 | Copyright (c) Nicolas Gallagher
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of
4 | this software and associated documentation files (the "Software"), to deal in
5 | the Software without restriction, including without limitation the rights to
6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
7 | of the Software, and to permit persons to whom the Software is furnished to do
8 | so, subject to the following conditions:
9 |
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 |
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.
20 |
--------------------------------------------------------------------------------
/packages/utils-before/README.md:
--------------------------------------------------------------------------------
1 | # SUIT CSS utilities: before
2 |
3 | [](https://travis-ci.org/suitcss/utils-before)
4 |
5 | SUIT CSS leading offset utilities.
6 |
7 | Read more about [SUIT CSS's design principles](https://github.com/suitcss/suit/).
8 |
9 | ## Installation
10 |
11 | * [npm](http://npmjs.org/): `npm install suitcss-utils-before`
12 | * Download: [zip](https://github.com/suitcss/utils-before/releases/latest)
13 |
14 | ## Available classes
15 |
16 | * `u-beforeXofY` (numerous) - Specify the proportional offset before an object.
17 |
18 | `X` must be an integer less than `Y`.
19 |
20 | `Y` can be any of the following numbers: 2, 3, 4, 5, 6, 8, 10, 12.
21 |
22 | ### Plugins
23 |
24 | Utilities that can be limited to specific Media Query breakpoints.
25 |
26 | * `u-sm-beforeXofY` - To use at the small Media Query breakpoint.
27 | * `u-md-beforeXofY` - To use at the medium Media Query breakpoint.
28 | * `u-lg-beforeXofY` - To use at the large Media Query breakpoint.
29 |
30 | ### Configuration
31 |
32 | There are 3 Media Query breakpoints:
33 |
34 | * `--sm-viewport`
35 | * `--md-viewport`
36 | * `--lg-viewport`
37 |
38 | When using the [SUIT CSS preprocessor](https://github.com/suitcss/preprocessor),
39 | breakpoints can be configured using `@custom-media`. For example:
40 |
41 | ```css
42 | @custom-media --sm-viewport (min-width:320px) and (max-width:640px);
43 | @custom-media --md-viewport (min-width:640px) and (max-width:960px);
44 | @custom-media --lg-viewport (min-width:960px);
45 | ```
46 |
47 | ## Usage
48 |
49 | Please refer to the README for [SUIT utils](https://github.com/suitcss/utils/)
50 |
51 | ## Testing
52 |
53 | Install [Node](http://nodejs.org) (comes with npm).
54 |
55 | ```
56 | npm install
57 | ```
58 |
59 | To generate a build:
60 |
61 | ```
62 | npm run build
63 | ```
64 |
65 | To lint code with [postcss-bem-linter](https://github.com/postcss/postcss-bem-linter) and [stylelint](http://stylelint.io/)
66 |
67 | ```
68 | npm run lint
69 | ```
70 |
71 | To generate the testing build.
72 |
73 | ```
74 | npm run build-test
75 | ```
76 |
77 | To watch the files for making changes to test:
78 |
79 | ```
80 | npm run watch
81 | ```
82 |
83 | Basic visual tests are in `test/index.html`.
84 |
85 | ## Browser support
86 |
87 | * Google Chrome (latest)
88 | * Opera (latest)
89 | * Firefox 4+
90 | * Safari 5+
91 | * Internet Explorer 8+
92 |
--------------------------------------------------------------------------------
/packages/utils-before/index.css:
--------------------------------------------------------------------------------
1 | @import "./lib/before.css";
2 | @import "./lib/before-sm.css";
3 | @import "./lib/before-md.css";
4 | @import "./lib/before-lg.css";
5 |
--------------------------------------------------------------------------------
/packages/utils-before/index.js:
--------------------------------------------------------------------------------
1 | require('./lib/before.css');
2 | require('./lib/before-sm.css');
3 | require('./lib/before-md.css');
4 | require('./lib/before-lg.css');
5 |
--------------------------------------------------------------------------------
/packages/utils-before/lib/before.css:
--------------------------------------------------------------------------------
1 | /**
2 | * @define utilities
3 | * Specify the proportional offset before an object.
4 | * Intentional redundancy build into each set of unit classes.
5 | * Supports: 2, 3, 4, 5, 6, 8, 10, 12 section
6 | */
7 |
8 | .u-before1of12 {
9 | margin-left: calc(100% * 1 / 12) !important;
10 | }
11 |
12 | .u-before1of10 {
13 | margin-left: 10% !important;
14 | }
15 |
16 | .u-before1of8 {
17 | margin-left: 12.5% !important;
18 | }
19 |
20 | .u-before1of6,
21 | .u-before2of12 {
22 | margin-left: calc(100% * 1 / 6) !important;
23 | }
24 |
25 | .u-before1of5,
26 | .u-before2of10 {
27 | margin-left: 20% !important;
28 | }
29 |
30 | .u-before1of4,
31 | .u-before2of8,
32 | .u-before3of12 {
33 | margin-left: 25% !important;
34 | }
35 |
36 | .u-before3of10 {
37 | margin-left: 30% !important;
38 | }
39 |
40 | .u-before1of3,
41 | .u-before2of6,
42 | .u-before4of12 {
43 | margin-left: calc(100% * 1 / 3) !important;
44 | }
45 |
46 | .u-before3of8 {
47 | margin-left: 37.5% !important;
48 | }
49 |
50 | .u-before2of5,
51 | .u-before4of10 {
52 | margin-left: 40% !important;
53 | }
54 |
55 | .u-before5of12 {
56 | margin-left: calc(100% * 5 / 12) !important;
57 | }
58 |
59 | .u-before1of2,
60 | .u-before2of4,
61 | .u-before3of6,
62 | .u-before4of8,
63 | .u-before5of10,
64 | .u-before6of12 {
65 | margin-left: 50% !important;
66 | }
67 |
68 | .u-before7of12 {
69 | margin-left: calc(100% * 7 / 12) !important;
70 | }
71 |
72 | .u-before3of5,
73 | .u-before6of10 {
74 | margin-left: 60% !important;
75 | }
76 |
77 | .u-before5of8 {
78 | margin-left: 62.5% !important;
79 | }
80 |
81 | .u-before2of3,
82 | .u-before4of6,
83 | .u-before8of12 {
84 | margin-left: calc(100% * 2 / 3) !important;
85 | }
86 |
87 | .u-before7of10 {
88 | margin-left: 70% !important;
89 | }
90 |
91 | .u-before3of4,
92 | .u-before6of8,
93 | .u-before9of12 {
94 | margin-left: 75% !important;
95 | }
96 |
97 | .u-before4of5,
98 | .u-before8of10 {
99 | margin-left: 80% !important;
100 | }
101 |
102 | .u-before5of6,
103 | .u-before10of12 {
104 | margin-left: calc(100% * 5 / 6) !important;
105 | }
106 |
107 | .u-before7of8 {
108 | margin-left: 87.5% !important;
109 | }
110 |
111 | .u-before9of10 {
112 | margin-left: 90% !important;
113 | }
114 |
115 | .u-before11of12 {
116 | margin-left: calc(100% * 11 / 12) !important;
117 | }
118 |
--------------------------------------------------------------------------------
/packages/utils-before/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "suitcss-utils-before",
3 | "version": "1.0.1",
4 | "description": "Leading offset utilities for SUIT CSS",
5 | "keywords": [
6 | "browser",
7 | "css-utilities",
8 | "offset",
9 | "suitcss",
10 | "style"
11 | ],
12 | "bugs": "https://github.com/suitcss/suit/labels/bug",
13 | "license": "MIT",
14 | "author": "Nicolas Gallagher",
15 | "files": [
16 | "index.css",
17 | "index.js",
18 | "lib"
19 | ],
20 | "style": "index.css",
21 | "repository": "https://github.com/suitcss/suit/tree/master/packages/utils-before",
22 | "homepage": "https://github.com/suitcss/suit/tree/master/packages/utils-before",
23 | "scripts": {
24 | "build": "npm run setup && npm run preprocess",
25 | "build-test": "npm run setup && npm run preprocess-test",
26 | "lint": "suitcss -c test/config.json index.css build/lint.css && rm build/lint.css",
27 | "preprocess": "suitcss index.css build/build.css",
28 | "preprocess-test": "suitcss test/test.css build/test.css",
29 | "setup": "npm install",
30 | "watch": "npm run preprocess-test -- -w -v",
31 | "test": "npm run lint"
32 | },
33 | "devDependencies": {
34 | "stylelint-config-suitcss": "^4.0.0",
35 | "suitcss-components-test": "*",
36 | "suitcss-preprocessor": "^1.0.0"
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/packages/utils-before/test/config.json:
--------------------------------------------------------------------------------
1 | {
2 | "lint": true,
3 | "postcss-reporter": {
4 | "plugins": ["stylelint", "postcss-bem-linter"],
5 | "throwError": true
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/packages/utils-before/test/test.css:
--------------------------------------------------------------------------------
1 | @import "suitcss-components-test";
2 | @import "./index.css";
3 | @custom-media --sm-viewport (min-width:320px) and (max-width:640px);
4 | @custom-media --md-viewport (min-width:640px) and (max-width:960px);
5 | @custom-media --lg-viewport (min-width:960px);
6 |
--------------------------------------------------------------------------------
/packages/utils-display/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components
2 | build
3 | components
4 | node_modules
5 |
--------------------------------------------------------------------------------
/packages/utils-display/.stylelintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "stylelint-config-suitcss"
3 | }
4 |
--------------------------------------------------------------------------------
/packages/utils-display/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | sudo: false
3 | node_js:
4 | - "4"
5 | - "5"
6 |
--------------------------------------------------------------------------------
/packages/utils-display/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | ### HEAD
2 |
3 | ### 1.0.2 (February 23, 2016)
4 |
5 | * Enable BEM linting
6 |
7 | ### 1.0.1 (February 08, 2016)
8 |
9 | * Update `preprocessor` to `1.0.0`
10 | * Fix stylelint conformance
11 |
12 | ### 1.0.0 (November 20, 2015)
13 |
14 | * Revert `u-flex` and `u-inlineFlex` in favour of [utils-flex](https://github.com/suitcss/utils-flex)
15 |
16 | ### 0.5.0 (November 01, 2015)
17 |
18 | * Add `u-flex`
19 | * Add `u-inlineFlex`
20 | * Add PostCSS as preprocessor
21 |
22 | ### 0.4.2 (October 28, 2014)
23 |
24 | * Add support for JS bundling.
25 |
26 | ### 0.4.1 (June 24, 2014)
27 |
28 | * Add `.css` extension to imports for interoperability.
29 |
30 | ### 0.4.0 (June 21, 2014)
31 |
32 | * npm-based workflow.
33 | * Add new preprocessor build tools.
34 | * Add `u-hiddenVisually`.
35 | * Add `u-hidden`.
36 |
37 | ### 0.3.0 (May 15, 2014)
38 |
39 | * Add `u-tableRow`.
40 |
41 | ### 0.2.4 (March 26, 2014)
42 |
43 | * Add 'files' to package.json.
44 | * Fix a Firefox bug related to images within inline-block.
45 |
46 | ### 0.2.3 (March 25, 2014)
47 |
48 | * Add npm support.
49 |
50 | ### 0.2.2 (September 1, 2013)
51 |
52 | * Fix Bower ignores.
53 |
54 | ### 0.2.1 (August 30, 2013)
55 |
56 | * Add CSS linting and configuration.
57 | * Add Component(1) support.
58 |
59 | ### 0.2.0 (May 25, 2013)
60 |
61 | * Add table display utilities.
62 | * Rename `component.json` to `bower.json`.
63 | * Add a test file.
64 |
65 | ### 0.1.0 (March 3, 2013)
66 |
67 | * Public release.
68 |
--------------------------------------------------------------------------------
/packages/utils-display/LICENSE.md:
--------------------------------------------------------------------------------
1 | Copyright (c) Nicolas Gallagher
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of
4 | this software and associated documentation files (the "Software"), to deal in
5 | the Software without restriction, including without limitation the rights to
6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
7 | of the Software, and to permit persons to whom the Software is furnished to do
8 | so, subject to the following conditions:
9 |
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 |
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.
20 |
--------------------------------------------------------------------------------
/packages/utils-display/README.md:
--------------------------------------------------------------------------------
1 | # SUIT CSS utilities: display
2 |
3 | [](http://travis-ci.org/suitcss/utils-display)
4 |
5 | SUIT CSS display utilities.
6 |
7 | Read more about [SUIT CSS's design principles](https://github.com/suitcss/suit/).
8 |
9 | ## Installation
10 |
11 | * [npm](http://npmjs.org/): `npm install suitcss-utils-display`
12 | * Download: [zip](https://github.com/suitcss/utils-display/releases/latest)
13 |
14 | ## Available classes
15 |
16 | * `u-block` - Display `block`.
17 | * `u-hidden` - Display `none`.
18 | * `u-hiddenVisually` - Visually hidden but available to screenreaders.
19 | * `u-inline` - Display `inline`.
20 | * `u-inlineBlock` - Display `inline-block`.
21 | * `u-table` - Display `table`.
22 | * `u-tableCell` - Display `table-cell`.
23 | * `u-tableRow` - Display `table-row`.
24 |
25 | ## Usage
26 |
27 | Please refer to the README for [SUIT CSS utils](https://github.com/suitcss/utils/)
28 |
29 | ## Testing
30 |
31 | Install [Node](http://nodejs.org) (comes with npm).
32 |
33 | ```
34 | npm install
35 | ```
36 |
37 | To generate a build:
38 |
39 | ```
40 | npm run build
41 | ```
42 |
43 | To lint code with [postcss-bem-linter](https://github.com/postcss/postcss-bem-linter) and [stylelint](http://stylelint.io/)
44 |
45 | ```
46 | npm run lint
47 | ```
48 |
49 | To generate the testing build.
50 |
51 | ```
52 | npm run build-test
53 | ```
54 |
55 | To watch the files for making changes to test:
56 |
57 | ```
58 | npm run watch
59 | ```
60 |
61 | Basic visual tests are in `test/index.html`.
62 |
63 | ## Browser support
64 |
65 | * Google Chrome (latest)
66 | * Opera (latest)
67 | * Firefox (latest)
68 | * Safari 5+
69 | * Internet Explorer 9+
70 |
--------------------------------------------------------------------------------
/packages/utils-display/index.css:
--------------------------------------------------------------------------------
1 | @import "./lib/display.css";
2 |
--------------------------------------------------------------------------------
/packages/utils-display/index.js:
--------------------------------------------------------------------------------
1 | require('./lib/display.css');
2 |
--------------------------------------------------------------------------------
/packages/utils-display/lib/display.css:
--------------------------------------------------------------------------------
1 | /**
2 | * @define utilities
3 | * Display-type utilities
4 | */
5 |
6 | .u-block {
7 | display: block !important;
8 | }
9 |
10 | .u-hidden {
11 | display: none !important;
12 | }
13 |
14 | /**
15 | * Completely remove from the flow but leave available to screen readers.
16 | */
17 |
18 | .u-hiddenVisually {
19 | border: 0 !important;
20 | clip: rect(1px, 1px, 1px, 1px) !important;
21 | height: 1px !important;
22 | overflow: hidden !important;
23 | padding: 0 !important;
24 | position: absolute !important;
25 | width: 1px !important;
26 | }
27 |
28 | .u-inline {
29 | display: inline !important;
30 | }
31 |
32 | /**
33 | * 1. Fix for Firefox bug: an image styled `max-width:100%` within an
34 | * inline-block will display at its default size, and not limit its width to
35 | * 100% of an ancestral container.
36 | */
37 |
38 | .u-inlineBlock {
39 | display: inline-block !important;
40 | max-width: 100%; /* 1 */
41 | }
42 |
43 | .u-table {
44 | display: table !important;
45 | }
46 |
47 | .u-tableCell {
48 | display: table-cell !important;
49 | }
50 |
51 | .u-tableRow {
52 | display: table-row !important;
53 | }
54 |
--------------------------------------------------------------------------------
/packages/utils-display/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "suitcss-utils-display",
3 | "description": "Display utilities for SUIT CSS",
4 | "version": "1.0.2",
5 | "style": "index.css",
6 | "files": [
7 | "index.css",
8 | "index.js",
9 | "lib"
10 | ],
11 | "devDependencies": {
12 | "stylelint-config-suitcss": "^3.0.0",
13 | "suitcss-components-test": "*",
14 | "suitcss-preprocessor": "^1.0.0"
15 | },
16 | "scripts": {
17 | "build": "npm run setup && npm run preprocess",
18 | "build-test": "npm run setup && npm run preprocess-test",
19 | "lint": "suitcss -c test/config.json index.css build/lint.css && rm build/lint.css",
20 | "preprocess": "suitcss index.css build/build.css",
21 | "preprocess-test": "suitcss -i test test/test.css build/test.css",
22 | "setup": "npm install",
23 | "watch": "npm run preprocess-test -- -w -v",
24 | "test": "npm run lint"
25 | },
26 | "repository": "https://github.com/suitcss/suit/tree/master/packages/utils-display",
27 | "homepage": "https://github.com/suitcss/suit/tree/master/packages/utils-display",
28 | "bugs": "https://github.com/suitcss/suit/labels/bug",
29 | "keywords": [
30 | "browser",
31 | "css-utilities",
32 | "display",
33 | "suitcss",
34 | "style"
35 | ]
36 | }
37 |
--------------------------------------------------------------------------------
/packages/utils-display/test/config.json:
--------------------------------------------------------------------------------
1 | {
2 | "lint": true,
3 | "postcss-reporter": {
4 | "throwError": true
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/packages/utils-display/test/test.css:
--------------------------------------------------------------------------------
1 | @import "suitcss-components-test";
2 | @import "../index.css";
3 |
--------------------------------------------------------------------------------
/packages/utils-flex/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | build
3 |
--------------------------------------------------------------------------------
/packages/utils-flex/.stylelintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "stylelint-config-suitcss"
3 | }
4 |
--------------------------------------------------------------------------------
/packages/utils-flex/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | sudo: false
3 | node_js:
4 | - "stable"
5 |
--------------------------------------------------------------------------------
/packages/utils-flex/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | ### HEAD
2 |
3 | ### 2.0.1 (February 16, 2018)
4 | * Fix comments
5 |
6 | ### 2.0.0 (February 28, 2017)
7 |
8 | * Add utils for `flex-basis` and `flex` shorthand (initial, auto, none)
9 | * Add `flex-shrink` utility
10 | * Remove IE10 hack for applying `flex-shrink` to all children
11 | * Update suitcss-preprocessor to `3.0.1`
12 | * Move custom media below imports to fix warning
13 |
14 | ### 1.1.1 (February 08, 2016)
15 |
16 | * Update `preprocessor` to `1.0.0`
17 | * Fix `maxlen` warning on comments
18 |
19 | ### 1.1.0 (January 27, 2016)
20 |
21 | * Add additional auto-margin utils (`u-flexExpandTop` / `u-flexExpandBottom` / `u-flexExpand`)
22 |
23 | ### 1.0.0 (December 29, 2015)
24 |
25 | * Add auto-margin centering (`u-flexExpandRight` / `u-flexExpandLeft`)
26 |
27 | ### 0.3.2 (December 02, 2015)
28 |
29 | * Use suitcss-preprocessor `0.8.0`
30 | * Ensure `utils-flex` conforms to SUIT CSS style rules with stylelint
31 |
32 | ### 0.3.1 (November 19, 2015)
33 |
34 | * URL updates for move to SUIT org
35 |
36 | ### 0.3.0 (November 19, 2015)
37 |
38 | * Add missing `!important` rule
39 | * Add `u-flexInline`
40 |
41 | ### 0.2.0 (November 18, 2015)
42 |
43 | * Add `u-flexGrow` utility
44 |
45 | ### 0.1.0 (November 18, 2015)
46 |
47 | * Public release.
48 |
--------------------------------------------------------------------------------
/packages/utils-flex/LICENSE.md:
--------------------------------------------------------------------------------
1 | Copyright (c) Simon Smith
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of
4 | this software and associated documentation files (the "Software"), to deal in
5 | the Software without restriction, including without limitation the rights to
6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
7 | of the Software, and to permit persons to whom the Software is furnished to do
8 | so, subject to the following conditions:
9 |
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 |
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.
--------------------------------------------------------------------------------
/packages/utils-flex/index.css:
--------------------------------------------------------------------------------
1 | @import "./lib/flex.css";
2 | @import "./lib/flex-sm.css";
3 | @import "./lib/flex-md.css";
4 | @import "./lib/flex-lg.css";
5 |
--------------------------------------------------------------------------------
/packages/utils-flex/index.js:
--------------------------------------------------------------------------------
1 | require('./lib/flex.css');
2 | require('./lib/flex-sm.css');
3 | require('./lib/flex-md.css');
4 | require('./lib/flex-lg.css');
5 |
--------------------------------------------------------------------------------
/packages/utils-flex/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "suitcss-utils-flex",
3 | "version": "2.0.1",
4 | "description": "Flexbox utilities for SUIT CSS",
5 | "keywords": [
6 | "browser",
7 | "css-utilities",
8 | "flex",
9 | "flexbox",
10 | "suitcss",
11 | "style"
12 | ],
13 | "bugs": "https://github.com/suitcss/suit/labels/bug",
14 | "license": "MIT",
15 | "author": "Simon Smith",
16 | "files": [
17 | "index.css",
18 | "index.js",
19 | "lib"
20 | ],
21 | "style": "index.css",
22 | "repository": "https://github.com/suitcss/suit/tree/master/packages/utils-flex",
23 | "homepage": "https://github.com/suitcss/suit/tree/master/packages/utils-flex",
24 | "scripts": {
25 | "build": "npm run setup && npm run preprocess",
26 | "build-test": "npm run setup && npm run preprocess-test",
27 | "lint": "suitcss index.css build/lint.css",
28 | "preprocess": "suitcss index.css build/build.css",
29 | "preprocess-test": "suitcss -i test test/test.css build/test.css",
30 | "setup": "npm install",
31 | "watch": "npm run preprocess-test -- -w -v",
32 | "test": "npm run lint"
33 | },
34 | "devDependencies": {
35 | "suitcss-components-test": "*",
36 | "suitcss-preprocessor": "^3.0.1",
37 | "suitcss-utils-display": "^1.0.0",
38 | "suitcss-utils-size": "^2.0.0"
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/packages/utils-flex/test/config.json:
--------------------------------------------------------------------------------
1 | {
2 | "postcss-reporter": {
3 | "plugins": ["stylelint", "postcss-bem-linter"],
4 | "throwError": true
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/packages/utils-flex/test/test.css:
--------------------------------------------------------------------------------
1 | @import "suitcss-components-test";
2 | @import "suitcss-utils-size";
3 | @import "../index.css";
4 |
5 | @custom-media --sm-viewport (min-width:480px) and (max-width:640px);
6 | @custom-media --md-viewport (min-width:640px) and (max-width:960px);
7 | @custom-media --lg-viewport (min-width:960px);
8 |
--------------------------------------------------------------------------------
/packages/utils-layout/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components
2 | build
3 | components
4 | node_modules
5 |
--------------------------------------------------------------------------------
/packages/utils-layout/.stylelintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "stylelint-config-suitcss"
3 | }
4 |
--------------------------------------------------------------------------------
/packages/utils-layout/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | sudo: false
3 | node_js:
4 | - "4"
5 | - "5"
6 |
--------------------------------------------------------------------------------
/packages/utils-layout/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | ### HEAD
2 |
3 | ### 1.0.1 (February 23, 2016)
4 |
5 | * Enable BEM linting
6 |
7 | ### 1.0.0 (February 21, 2016)
8 |
9 | * Update `preprocessor` to `1.0.1`
10 | * Fix stylelint conformance
11 |
12 | ### 0.4.2 (October 28, 2014)
13 |
14 | * Add support for JS bundling.
15 |
16 | ### 0.4.1 (June 24, 2014)
17 |
18 | * Add `.css` extension to imports for interoperability.
19 |
20 | ### 0.4.0 (June 21, 2014)
21 |
22 | * npm-based workflow.
23 | * Add new preprocessor build tools.
24 | * `u-pullLeft` -> `u-floatLeft`
25 | * `u-pullRight` -> `u-floatRight`
26 |
27 | ### 0.3.0 (March 24, 2014)
28 |
29 | * Add npm support.
30 | * Remove `u-objLeft` and `u-objRight`.
31 | * Move alignment utilities to 'utils-align'.
32 |
33 | ### 0.2.1 (August 30, 2013)
34 |
35 | * Add `!important` to more declarations.
36 | * Add CSS linting.
37 | * Add Component(1) support.
38 |
39 | ### 0.2.0 (May 25, 2013)
40 |
41 | * Add `!important` to various utilities.
42 | * Rename float helpers.
43 | * Rename `component.json` to `bower.json`.
44 | * Add a test file.
45 |
46 | ### 0.1.0 (March 3, 2013)
47 |
48 | * Public release.
49 |
--------------------------------------------------------------------------------
/packages/utils-layout/LICENSE.md:
--------------------------------------------------------------------------------
1 | Copyright (c) Nicolas Gallagher
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of
4 | this software and associated documentation files (the "Software"), to deal in
5 | the Software without restriction, including without limitation the rights to
6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
7 | of the Software, and to permit persons to whom the Software is furnished to do
8 | so, subject to the following conditions:
9 |
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 |
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.
20 |
--------------------------------------------------------------------------------
/packages/utils-layout/README.md:
--------------------------------------------------------------------------------
1 | # SUIT CSS utilities: layout
2 |
3 | [](https://travis-ci.org/suitcss/utils-layout)
4 |
5 | A SUIT CSS collection of utility classes for low-level CSS layout traits.
6 |
7 | Read more about [SUIT CSS's design principles](https://github.com/suitcss/suit/).
8 |
9 | ## Installation
10 |
11 | * [npm](http://npmjs.org/): `npm install suitcss-utils-layout`
12 | * Download: [zip](https://github.com/suitcss/utils-layout/releases/latest)
13 |
14 | ## Available classes
15 |
16 | * `u-cf` - Contain floats (micro clearfix).
17 | * `u-nbfc` - Create a new block formatting context.
18 | * `u-nbfcAlt` - Create a new block formatting context (alternative technique).
19 | * `u-floatLeft` - Float left.
20 | * `u-floatRight` - Float right.
21 |
22 | ## Usage
23 |
24 | Please refer to the README for [SUIT CSS utils](https://github.com/suitcss/utils/)
25 |
26 | ## Testing
27 |
28 | Install [Node](http://nodejs.org) (comes with npm).
29 |
30 | ```
31 | npm install
32 | ```
33 |
34 | To generate a build:
35 |
36 | ```
37 | npm run build
38 | ```
39 |
40 | To lint code with [postcss-bem-linter](https://github.com/postcss/postcss-bem-linter) and [stylelint](http://stylelint.io/)
41 |
42 | ```
43 | npm run lint
44 | ```
45 |
46 | To generate the testing build.
47 |
48 | ```
49 | npm run build-test
50 | ```
51 |
52 | To watch the files for making changes to test:
53 |
54 | ```
55 | npm run watch
56 | ```
57 |
58 | Basic visual tests are in `test/index.html`.
59 |
60 | ## Browser support
61 |
62 | * Google Chrome (latest)
63 | * Opera (latest)
64 | * Firefox 4+
65 | * Safari 5+
66 | * Internet Explorer 8+
67 |
--------------------------------------------------------------------------------
/packages/utils-layout/index.css:
--------------------------------------------------------------------------------
1 | @import "./lib/layout.css";
2 |
--------------------------------------------------------------------------------
/packages/utils-layout/index.js:
--------------------------------------------------------------------------------
1 | require('./lib/layout.css');
2 |
--------------------------------------------------------------------------------
/packages/utils-layout/lib/layout.css:
--------------------------------------------------------------------------------
1 | /**
2 | * @define utilities
3 | * Contain floats
4 | *
5 | * Make an element expand to contain floated children.
6 | * Uses pseudo-elements (micro clearfix).
7 | *
8 | * 1. The space content is one way to avoid an Opera bug when the
9 | * `contenteditable` attribute is included anywhere else in the document.
10 | * Otherwise it causes space to appear at the top and bottom of the
11 | * element.
12 | * 2. The use of `table` rather than `block` is only necessary if using
13 | * `:before` to contain the top-margins of child elements.
14 | */
15 |
16 | .u-cf::before,
17 | .u-cf::after {
18 | content: " "; /* 1 */
19 | display: table; /* 2 */
20 | }
21 |
22 | .u-cf::after {
23 | clear: both;
24 | }
25 |
26 | /**
27 | * New block formatting context
28 | *
29 | * This affords some useful properties to the element. It won't wrap under
30 | * floats. Will also contain any floated children.
31 |
32 | * N.B. This will clip overflow. Use the alternative method below if this is
33 | * problematic.
34 | */
35 |
36 | .u-nbfc {
37 | overflow: hidden !important;
38 | }
39 |
40 | /**
41 | * New block formatting context (alternative)
42 | *
43 | * Alternative method when overflow must not be clipped.
44 | *
45 | * 1. Create a new block formatting context (NBFC).
46 | * 2. Avoid shrink-wrap behaviour of table-cell.
47 | *
48 | * N.B. This breaks down in some browsers when elements within this element
49 | * exceed its width.
50 | */
51 |
52 | .u-nbfcAlt {
53 | display: table-cell !important; /* 1 */
54 | width: 10000px !important; /* 2 */
55 | }
56 |
57 | /**
58 | * Floats
59 | */
60 |
61 | .u-floatLeft {
62 | float: left !important;
63 | }
64 |
65 | .u-floatRight {
66 | float: right !important;
67 | }
68 |
--------------------------------------------------------------------------------
/packages/utils-layout/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "suitcss-utils-layout",
3 | "description": "Layout utilities for SUIT CSS",
4 | "version": "1.0.1",
5 | "style": "index.css",
6 | "files": [
7 | "index.css",
8 | "index.js",
9 | "lib"
10 | ],
11 | "devDependencies": {
12 | "suitcss-components-test": "*",
13 | "suitcss-preprocessor": "^1.0.1",
14 | "stylelint-config-suitcss": "^4.0.0"
15 | },
16 | "scripts": {
17 | "build": "npm run setup && npm run preprocess",
18 | "build-test": "npm run setup && npm run preprocess-test",
19 | "lint": "suitcss -c test/config.json index.css build/lint.css && rm build/lint.css",
20 | "preprocess": "suitcss index.css build/build.css",
21 | "preprocess-test": "suitcss -i test test/test.css build/test.css",
22 | "setup": "npm install",
23 | "watch": "npm run preprocess-test -- -w -v",
24 | "test": "npm run lint"
25 | },
26 | "repository": "https://github.com/suitcss/suit/tree/master/packages/utils-layout",
27 | "homepage": "https://github.com/suitcss/suit/tree/master/packages/utils-layout",
28 | "bugs": "https://github.com/suitcss/suit/labels/bug",
29 | "keywords": [
30 | "browser",
31 | "css-utilities",
32 | "layout",
33 | "suitcss",
34 | "style"
35 | ]
36 | }
37 |
--------------------------------------------------------------------------------
/packages/utils-layout/test/config.json:
--------------------------------------------------------------------------------
1 | {
2 | "lint": true,
3 | "postcss-reporter": {
4 | "throwError": true
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/packages/utils-layout/test/test.css:
--------------------------------------------------------------------------------
1 | @import "suitcss-components-test";
2 | @import "../index.css";
3 |
--------------------------------------------------------------------------------
/packages/utils-link/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components
2 | build
3 | components
4 | node_modules
5 |
--------------------------------------------------------------------------------
/packages/utils-link/.stylelintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "stylelint-config-suitcss"
3 | }
4 |
--------------------------------------------------------------------------------
/packages/utils-link/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | sudo: false
3 | node_js:
4 | - "4"
5 | - "5"
6 |
--------------------------------------------------------------------------------
/packages/utils-link/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | ### HEAD
2 |
3 | ### 1.0.1 (February 23, 2016)
4 |
5 | * Enable BEM linting
6 |
7 | ### 1.0.0 (February 18, 2016)
8 |
9 | * Update `preprocessor` to `1.0.1`
10 |
11 | ### 0.5.2 (October 28, 2014)
12 |
13 | * Add support for JS bundling.
14 |
15 | ### 0.5.1 (June 24, 2014)
16 |
17 | * Add `.css` extension to imports for interoperability.
18 |
19 | ### 0.5.0 (June 21, 2014)
20 |
21 | * npm-based workflow.
22 | * Add new preprocessor build tool.
23 |
24 | ### 0.4.0 (May 15, 2014)
25 |
26 | * Remove `u-linkPseudo`.
27 |
28 | ### 0.3.1 (March 26, 2014)
29 |
30 | * Fix npm support.
31 |
32 | ### 0.3.0 (March 25, 2014)
33 |
34 | * Add npm support.
35 | * Include configurable variables.
36 | * More `u-linkPseudo` fixes.
37 | * Use 'component-builder-suit' for development.
38 | * Remove CSSLint.
39 | * Rename 'u-linkComplex-target' to 'u-linkComplexTarget'.
40 |
41 | ### 0.2.0 (November 26, 2013)
42 |
43 | * Fix `u-linkPseudo`.
44 | * Use 'suit-test' for development.
45 | * Use Component(1) for development.
46 |
47 | ### 0.1.3 (August 30, 2013)
48 |
49 | * Add CSS linting and configuration.
50 | * Add `!important` to each declaration.
51 | * Add `role="presentation"` to `linkPseudo` markup examples.
52 |
53 | ### 0.1.2 (May 26, 2013)
54 |
55 | * Add bower ignores.
56 | * Rename `component.json` to `bower.json`.
57 |
58 | ### 0.1.1 (March 9, 2013)
59 |
60 | * Remove `text-decoration` from default `linkComplex`.
61 | * Fix the pseudo-link styles.
62 | * Add a test file.
63 |
64 | ### 0.1.0 (March 3, 2013)
65 |
66 | * Public release.
67 |
--------------------------------------------------------------------------------
/packages/utils-link/LICENSE.md:
--------------------------------------------------------------------------------
1 | Copyright (c) Nicolas Gallagher
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of
4 | this software and associated documentation files (the "Software"), to deal in
5 | the Software without restriction, including without limitation the rights to
6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
7 | of the Software, and to permit persons to whom the Software is furnished to do
8 | so, subject to the following conditions:
9 |
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 |
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.
20 |
--------------------------------------------------------------------------------
/packages/utils-link/README.md:
--------------------------------------------------------------------------------
1 | # SUIT CSS utilities: link
2 |
3 | [](https://travis-ci.org/suitcss/utils-link)
4 |
5 | SUIT CSS link utilities.
6 |
7 | Read more about [SUIT CSS's design principles](https://github.com/suitcss/suit/).
8 |
9 | ## Installation
10 |
11 | * [npm](http://npmjs.org/): `npm install suitcss-utils-link`
12 | * Download: [zip](https://github.com/suitcss/utils-link/releases/latest)
13 |
14 | ## Available classes
15 |
16 | * `u-linkBlock` - Block-level link with no `text-decoration` for any state.
17 |
18 | * `u-linkClean` - A link without no `text-decoration` for any state.
19 |
20 | * `u-linkComplex` - Limit a link's interactive `text-decoration` underline to a
21 | sub-section of the link text.
22 |
23 | ```html
24 |
25 | Link complex
26 | target
27 |
28 | ```
29 |
30 | ## Usage
31 |
32 | Please refer to the README for [SUIT CSS utils](https://github.com/suitcss/utils/)
33 |
34 | ## Testing
35 |
36 | Install [Node](http://nodejs.org) (comes with npm).
37 |
38 | ```
39 | npm install
40 | ```
41 |
42 | To generate a build:
43 |
44 | ```
45 | npm run build
46 | ```
47 |
48 | To lint code with [postcss-bem-linter](https://github.com/postcss/postcss-bem-linter) and [stylelint](http://stylelint.io/)
49 |
50 | ```
51 | npm run lint
52 | ```
53 |
54 | To generate the testing build.
55 |
56 | ```
57 | npm run build-test
58 | ```
59 |
60 | To watch the files for making changes to test:
61 |
62 | ```
63 | npm run watch
64 | ```
65 |
66 | Basic visual tests are in `test/index.html`.
67 |
68 | ## Browser support
69 |
70 | * Google Chrome (latest)
71 | * Opera (latest)
72 | * Firefox 4+
73 | * Safari 5+
74 | * Internet Explorer 8+
75 |
--------------------------------------------------------------------------------
/packages/utils-link/index.css:
--------------------------------------------------------------------------------
1 | @import "./lib/link.css";
2 |
--------------------------------------------------------------------------------
/packages/utils-link/index.js:
--------------------------------------------------------------------------------
1 | require('./lib/link.css');
2 |
--------------------------------------------------------------------------------
/packages/utils-link/lib/link.css:
--------------------------------------------------------------------------------
1 | /**
2 | * @define utilities
3 | * Clean link
4 | *
5 | * A link without any text-decoration at all.
6 | */
7 |
8 | .u-linkClean,
9 | .u-linkClean:hover,
10 | .u-linkClean:focus,
11 | .u-linkClean:active {
12 | text-decoration: none !important;
13 | }
14 |
15 | /**
16 | * Link complex
17 | *
18 | * A common pattern is to have a link with several pieces of text and/or an
19 | * icon, where only one piece of text should display the underline when the
20 | * link is the subject of user interaction.
21 | *
22 | * Example HTML:
23 | *
24 | *
25 | * Link complex
26 | * target
27 | *
28 | */
29 |
30 | .u-linkComplex,
31 | .u-linkComplex:hover,
32 | .u-linkComplex:focus,
33 | .u-linkComplex:active {
34 | text-decoration: none !important;
35 | }
36 |
37 | .u-linkComplex:hover .u-linkComplexTarget,
38 | .u-linkComplex:focus .u-linkComplexTarget,
39 | .u-linkComplex:active .u-linkComplexTarget {
40 | text-decoration: underline !important;
41 | }
42 |
43 | /**
44 | * Block-level link
45 | *
46 | * Combination of traits commonly used in vertical navigation lists.
47 | */
48 |
49 | .u-linkBlock,
50 | .u-linkBlock:hover,
51 | .u-linkBlock:focus,
52 | .u-linkBlock:active {
53 | display: block !important;
54 | text-decoration: none !important;
55 | }
56 |
--------------------------------------------------------------------------------
/packages/utils-link/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "suitcss-utils-link",
3 | "description": "Link utilities for SUIT CSS",
4 | "version": "1.0.1",
5 | "style": "index.css",
6 | "files": [
7 | "index.css",
8 | "index.js",
9 | "lib"
10 | ],
11 | "devDependencies": {
12 | "stylelint-config-suitcss": "^4.0.0",
13 | "suitcss-components-test": "*",
14 | "suitcss-preprocessor": "^1.0.1"
15 | },
16 | "scripts": {
17 | "build": "npm run setup && npm run preprocess",
18 | "build-test": "npm run setup && npm run preprocess-test",
19 | "lint": "suitcss -c test/config.json index.css build/lint.css && rm build/lint.css",
20 | "preprocess": "suitcss index.css build/build.css",
21 | "preprocess-test": "suitcss -i test test/test.css build/test.css",
22 | "setup": "npm install",
23 | "watch": "npm run preprocess-test -- -w -v",
24 | "test": "npm run lint"
25 | },
26 | "repository": "https://github.com/suitcss/suit/tree/master/packages/utils-link",
27 | "homepage": "https://github.com/suitcss/suit/tree/master/packages/utils-link",
28 | "bugs": "https://github.com/suitcss/suit/labels/bug",
29 | "keywords": [
30 | "browser",
31 | "css-utilities",
32 | "link",
33 | "suitcss",
34 | "style"
35 | ]
36 | }
37 |
--------------------------------------------------------------------------------
/packages/utils-link/test/config.json:
--------------------------------------------------------------------------------
1 | {
2 | "lint": true,
3 | "postcss-reporter": {
4 | "throwError": true
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/packages/utils-link/test/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | SUIT CSS: alignment utilities tests
21 | 22 |.u-alignBaseline
23 |aligns to the baseline
24 |
25 | text
26 |
27 |
28 | .u-alignBottom
29 |aligns to the bottom
30 |
31 | text
32 |
33 |
34 | .u-alignMiddle
35 |aligns to the middle
36 |
37 | text
38 |
39 |
40 | .u-alignTop
41 |aligns to the top
42 |
43 | text
44 |
45 |
13 |
40 |
--------------------------------------------------------------------------------
/packages/utils-link/test/test.css:
--------------------------------------------------------------------------------
1 | @import "suitcss-components-test";
2 | @import "../index.css";
3 |
--------------------------------------------------------------------------------
/packages/utils-offset/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components
2 | build
3 | components
4 | node_modules
5 |
--------------------------------------------------------------------------------
/packages/utils-offset/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | ### HEAD
2 |
3 | ### 1.0.0 (February 14, 2016)
4 |
5 | * Update to preprocessor `^1.0.0`
6 | * Update to 'utils-after' `^1.0.0`.
7 | * Update to 'utils-before' `^1.0.0`.
8 |
9 | ### 0.5.1 (October 28, 2014)
10 |
11 | * Add support for JS bundling.
12 |
13 | ### 0.5.0 (June 21, 2014)
14 |
15 | * Update to 'utils-after' 0.3.0.
16 | * Update to 'utils-before' 0.3.0.
17 | * npm-based workflow.
18 | * Add new preprocessor build tools.
19 |
20 | ### 0.4.2 (March 26, 2014)
21 |
22 | * Update to 'utils-after' 0.2.2.
23 | * Update to 'utils-before' 0.2.2.
24 |
25 | ### 0.4.1 (March 26, 2014)
26 |
27 | * Fix npm dependency names.
28 |
29 | ### 0.4.0 (March 25, 2014)
30 |
31 | * Add npm support.
32 | * Update to 'utils-after' 0.2.0.
33 | * Update to 'utils-before' 0.2.0.
34 | * Depend on 'utils-before' and 'utils-after'.
35 |
36 | ### 0.3.0 (September 26, 2013)
37 |
38 | * Add responsive offset plugins.
39 | * Add CSS linting and configuration.
40 | * Add Component(1) support.
41 |
42 | ### 0.2.0 (August 14, 2013)
43 |
44 | * Add `!important` to every declaration.
45 | * Remove stray `before3of9` and `after3of9` selectors.
46 |
47 | ### 0.1.0 (June 2, 2013)
48 |
49 | * Initial public release.
50 |
--------------------------------------------------------------------------------
/packages/utils-offset/LICENSE.md:
--------------------------------------------------------------------------------
1 | Copyright (c) Nicolas Gallagher
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of
4 | this software and associated documentation files (the "Software"), to deal in
5 | the Software without restriction, including without limitation the rights to
6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
7 | of the Software, and to permit persons to whom the Software is furnished to do
8 | so, subject to the following conditions:
9 |
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 |
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.
20 |
--------------------------------------------------------------------------------
/packages/utils-offset/README.md:
--------------------------------------------------------------------------------
1 | # SUIT CSS utilities: offset
2 |
3 | SUIT CSS offset utilities.
4 |
5 | Read more about [SUIT CSS's design principles](https://github.com/suitcss/suit/).
6 |
7 | ## Installation
8 |
9 | * [npm](http://npmjs.org/): `npm install suitcss-utils-offset`
10 | * Download: [zip](https://github.com/suitcss/utils-offset/releases/latest)
11 |
12 | …is a convenient way to install the SUIT CSS offset utilities:
13 |
14 | * [utils-after](https://github.com/suitcss/utils-after)
15 | * [utils-before](https://github.com/suitcss/utils-before)
16 |
17 | ### Configuration
18 |
19 | There are 3 Media Query breakpoints:
20 |
21 | * `--sm-viewport`
22 | * `--md-viewport`
23 | * `--lg-viewport`
24 |
25 | When using the [SUIT CSS preprocessor](https://github.com/suitcss/preprocessor),
26 | breakpoints can be configured using `@custom-media`. For example:
27 |
28 | ```css
29 | @custom-media --sm-viewport (min-width:320px) and (max-width:640px);
30 | @custom-media --md-viewport (min-width:640px) and (max-width:960px);
31 | @custom-media --lg-viewport (min-width:960px);
32 | ```
33 |
34 | ## Usage
35 |
36 | Please refer to the individual packages and the README for [SUIT
37 | CSS utils](https://github.com/suitcss/utils/).
38 |
--------------------------------------------------------------------------------
/packages/utils-offset/index.css:
--------------------------------------------------------------------------------
1 | @import "suitcss-utils-after";
2 | @import "suitcss-utils-before";
3 |
--------------------------------------------------------------------------------
/packages/utils-offset/index.js:
--------------------------------------------------------------------------------
1 | require('suitcss-utils-after');
2 | require('suitcss-utils-before');
3 |
--------------------------------------------------------------------------------
/packages/utils-offset/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "suitcss-utils-offset",
3 | "version": "1.0.0",
4 | "description": "Offset utilities for SUIT CSS",
5 | "keywords": [
6 | "browser",
7 | "css-utilities",
8 | "offset",
9 | "suitcss",
10 | "style"
11 | ],
12 | "bugs": "https://github.com/suitcss/suit/labels/bug",
13 | "license": "MIT",
14 | "author": "Nicolas Gallagher",
15 | "files": [
16 | "index.css",
17 | "index.js"
18 | ],
19 | "style": "index.css",
20 | "repository": "https://github.com/suitcss/suit/tree/master/packages/utils-offset",
21 | "homepage": "https://github.com/suitcss/suit/tree/master/packages/utils-offset",
22 | "scripts": {
23 | "build": "npm run setup && npm run preprocess",
24 | "preprocess": "suitcss index.css build/build.css",
25 | "setup": "npm install"
26 | },
27 | "dependencies": {
28 | "suitcss-utils-after": "^1.0.0",
29 | "suitcss-utils-before": "^1.0.0"
30 | },
31 | "devDependencies": {
32 | "suitcss-components-test": "*",
33 | "suitcss-preprocessor": "^1.0.0"
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/packages/utils-position/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components
2 | build
3 | components
4 | node_modules
5 |
--------------------------------------------------------------------------------
/packages/utils-position/.stylelintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "stylelint-config-suitcss"
3 | }
4 |
--------------------------------------------------------------------------------
/packages/utils-position/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | sudo: false
3 | node_js:
4 | - "4"
5 | - "5"
6 |
--------------------------------------------------------------------------------
/packages/utils-position/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | ### HEAD
2 |
3 | ### 1.0.1 (February 22, 2016)
4 |
5 | * Enable BEM linting
6 |
7 | ### 1.0.0 (February 21, 2016)
8 |
9 | * Changed `u-posAbsoluteCenter` to use `transform` to centre and no longer requires a
10 | width and height.
11 | * Added `u-posFit` to fit an element to the size of its parent
12 | * Added `u-posFullScreen` to fit an element over the viewport
13 | * Added `u-posFixedCenter` to centre an element in a fixed position
14 | * Update `preprocessor` to `1.0.1`
15 | * Fix stylelint conformance
16 |
17 | ### 0.2.2 (October 28, 2014)
18 |
19 | * Add support for JS bundling.
20 |
21 | ### 0.2.1. (June 24, 2014)
22 |
23 | * Add `.css` extension to imports for interoperability.
24 |
25 | ### 0.2.0 (June 21, 2014)
26 |
27 | * npm-based workflow.
28 | * Add new preprocessor build tools.
29 |
30 | ### 0.1.0 (March 25, 2014)
31 |
32 | * Initial release.
33 |
--------------------------------------------------------------------------------
/packages/utils-position/LICENSE.md:
--------------------------------------------------------------------------------
1 | Copyright (c) Nicolas Gallagher
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of
4 | this software and associated documentation files (the "Software"), to deal in
5 | the Software without restriction, including without limitation the rights to
6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
7 | of the Software, and to permit persons to whom the Software is furnished to do
8 | so, subject to the following conditions:
9 |
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 |
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.
20 |
--------------------------------------------------------------------------------
/packages/utils-position/README.md:
--------------------------------------------------------------------------------
1 | # SUIT CSS utilities: position
2 |
3 | [](https://travis-ci.org/suitcss/utils-position)
4 |
5 | SUIT CSS utility classes for positioning.
6 |
7 | Read more about [SUIT CSS's design principles](https://github.com/suitcss/suit/).
8 |
9 | ## Installation
10 |
11 | * [npm](http://npmjs.org/): `npm install suitcss-utils-position`
12 | * Download: [zip](https://github.com/suitcss/utils-position/releases/latest)
13 |
14 | ## Available classes
15 |
16 | * `u-posAbsolute` - Absolutely position an element.
17 | * `u-posAbsoluteCenter` - Absolutely position and centre an element.
18 | * `u-posFit` - Fit an element to the dimensions of its parent
19 | * `u-posFullScreen` - Fixes an element over the viewport
20 | * `u-posFixed` - Fixed position an element.
21 | * `u-posFixedCenter` - Fix an element in the centre of the viewport
22 | * `u-posRelative` - Relatively position an element.
23 | * `u-posStatic` - Static position an element.
24 |
25 | ## Usage
26 |
27 | ### Creating a dialog overlay
28 |
29 | ``` html
30 | SUIT CSS: link utilities tests
14 | 15 |16 | Control link 17 |
18 | 19 |u-linkBlock
20 |renders a block-level link with no text decoration for any state
21 |
22 | Link text
23 |
24 |
25 | u-linkClean
26 |renders a link with no text decoration for any state
27 |
28 | Link text
29 |
30 |
31 | u-linkComplex / u-linkComplexTarget
32 |renders a link with only the 'target' receiving text decoration on hover/focus/active
33 |
34 |
35 | Link complex
36 | target
37 |
38 |
39 |
31 | 
32 |
33 |
34 | ```
35 |
36 | [Demo](http://codepen.io/simonsmith/pen/qbGaPK)
37 |
38 | Please refer to the README for [SUIT CSS utils](https://github.com/suitcss/utils/)
39 |
40 | ## Testing
41 |
42 | Install [Node](http://nodejs.org) (comes with npm).
43 |
44 | ```
45 | npm install
46 | ```
47 |
48 | To generate a build:
49 |
50 | ```
51 | npm run build
52 | ```
53 |
54 | To lint code with [postcss-bem-linter](https://github.com/postcss/postcss-bem-linter) and [stylelint](http://stylelint.io/)
55 |
56 | ```
57 | npm run lint
58 | ```
59 |
60 | To generate the testing build.
61 |
62 | ```
63 | npm run build-test
64 | ```
65 |
66 | To watch the files for making changes to test:
67 |
68 | ```
69 | npm run watch
70 | ```
71 |
72 | Basic visual tests are in `test/index.html`.
73 |
74 | ## Browser support
75 |
76 | * Google Chrome (latest)
77 | * Opera (latest)
78 | * Firefox (latest)
79 | * Safari 5+
80 | * Internet Explorer 9+
81 | * Android 2.3+
82 | * iOS 5.1+
83 | * Windows Phone 8.1
84 |
--------------------------------------------------------------------------------
/packages/utils-position/browserslist:
--------------------------------------------------------------------------------
1 | IE 9
2 | > 1%
3 | Last 2 versions
4 |
--------------------------------------------------------------------------------
/packages/utils-position/index.css:
--------------------------------------------------------------------------------
1 | @import "./lib/position.css";
2 |
--------------------------------------------------------------------------------
/packages/utils-position/index.js:
--------------------------------------------------------------------------------
1 | require('./lib/position.css')
2 |
--------------------------------------------------------------------------------
/packages/utils-position/lib/position.css:
--------------------------------------------------------------------------------
1 | /** @define utilities */
2 |
3 | .u-posFit,
4 | .u-posAbsoluteCenter,
5 | .u-posAbsolute {
6 | position: absolute !important;
7 | }
8 |
9 | /**
10 | * Element will be centered to its nearest relatively-positioned
11 | * ancestor.
12 | */
13 |
14 | .u-posFixedCenter,
15 | .u-posAbsoluteCenter {
16 | left: 50% !important;
17 | top: 50% !important;
18 | transform: translate(-50%, -50%) !important;
19 | }
20 |
21 | .u-posFit,
22 | .u-posFullScreen {
23 | bottom: 0 !important;
24 | left: 0 !important;
25 | margin: auto !important;
26 | right: 0 !important;
27 | top: 0 !important;
28 | }
29 |
30 | /**
31 | * 1. Make sure fixed elements are promoted into a new layer, for performance
32 | * reasons.
33 | */
34 |
35 | .u-posFullScreen,
36 | .u-posFixedCenter,
37 | .u-posFixed {
38 | backface-visibility: hidden; /* 1 */
39 | position: fixed !important;
40 | }
41 |
42 | .u-posRelative {
43 | position: relative !important;
44 | }
45 |
46 | .u-posStatic {
47 | position: static !important;
48 | }
49 |
--------------------------------------------------------------------------------
/packages/utils-position/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "suitcss-utils-position",
3 | "description": "Positioning utilities for SUIT CSS",
4 | "version": "1.0.1",
5 | "style": "index.css",
6 | "files": [
7 | "index.css",
8 | "index.js",
9 | "lib"
10 | ],
11 | "devDependencies": {
12 | "stylelint-config-suitcss": "^4.0.0",
13 | "suitcss-components-test": "*",
14 | "suitcss-preprocessor": "^1.0.1"
15 | },
16 | "scripts": {
17 | "build": "npm run setup && npm run preprocess",
18 | "build-test": "npm run setup && npm run preprocess-test",
19 | "lint": "suitcss -c test/config.json index.css build/lint.css && rm build/lint.css",
20 | "preprocess": "suitcss index.css build/build.css",
21 | "preprocess-test": "suitcss -i test test/test.css build/test.css",
22 | "setup": "npm install",
23 | "watch": "npm run preprocess-test -- -w -v",
24 | "test": "npm run lint"
25 | },
26 | "repository": "https://github.com/suitcss/suit/tree/master/packages/utils-position",
27 | "homepage": "https://github.com/suitcss/suit/tree/master/packages/utils-position",
28 | "bugs": "https://github.com/suitcss/suit/labels/bug",
29 | "keywords": [
30 | "browser",
31 | "css-utilities",
32 | "position",
33 | "suitcss",
34 | "style"
35 | ]
36 | }
37 |
--------------------------------------------------------------------------------
/packages/utils-position/test/config.json:
--------------------------------------------------------------------------------
1 | {
2 | "lint": true,
3 | "postcss-reporter": {
4 | "throwError": true
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/packages/utils-position/test/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
45 |
79 |
--------------------------------------------------------------------------------
/packages/utils-position/test/test.css:
--------------------------------------------------------------------------------
1 | @import "suitcss-components-test";
2 | @import "../index.css";
3 |
--------------------------------------------------------------------------------
/packages/utils-size/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components
2 | build
3 | components
4 | node_modules
5 |
--------------------------------------------------------------------------------
/packages/utils-size/.stylelintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "stylelint-config-suitcss"
3 | }
4 |
--------------------------------------------------------------------------------
/packages/utils-size/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | sudo: false
3 | node_js:
4 | - "4"
5 | - "5"
6 |
--------------------------------------------------------------------------------
/packages/utils-size/LICENSE.md:
--------------------------------------------------------------------------------
1 | Copyright (c) Nicolas Gallagher
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of
4 | this software and associated documentation files (the "Software"), to deal in
5 | the Software without restriction, including without limitation the rights to
6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
7 | of the Software, and to permit persons to whom the Software is furnished to do
8 | so, subject to the following conditions:
9 |
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 |
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.
20 |
--------------------------------------------------------------------------------
/packages/utils-size/index.css:
--------------------------------------------------------------------------------
1 | @import "./lib/size.css";
2 | @import "./lib/size-sm.css";
3 | @import "./lib/size-md.css";
4 | @import "./lib/size-lg.css";
5 |
--------------------------------------------------------------------------------
/packages/utils-size/index.js:
--------------------------------------------------------------------------------
1 | require('./lib/size.css');
2 | require('./lib/size-sm.css');
3 | require('./lib/size-md.css');
4 | require('./lib/size-lg.css');
5 |
--------------------------------------------------------------------------------
/packages/utils-size/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "suitcss-utils-size",
3 | "version": "2.0.1",
4 | "description": "Sizing utilities for SUIT CSS",
5 | "keywords": [
6 | "browser",
7 | "css-utilities",
8 | "size",
9 | "suitcss",
10 | "style"
11 | ],
12 | "bugs": "https://github.com/suitcss/suit/labels/bug",
13 | "license": "MIT",
14 | "author": "Nicolas Gallagher",
15 | "files": [
16 | "index.css",
17 | "index.js",
18 | "lib"
19 | ],
20 | "style": "index.css",
21 | "repository": "https://github.com/suitcss/suit/tree/master/packages/utils-size",
22 | "homepage": "https://github.com/suitcss/suit/tree/master/packages/utils-size",
23 | "scripts": {
24 | "build": "npm i && npm run preprocess",
25 | "build-test": "npm i && npm run preprocess-test",
26 | "lint": "suitcss index.css build/lint.css",
27 | "preprocess": "suitcss index.css build/build.css",
28 | "preprocess-test": "suitcss -i test test/test.css build/test.css",
29 | "watch": "npm run preprocess-test -- -w -v",
30 | "test": "npm run lint"
31 | },
32 | "devDependencies": {
33 | "suitcss-components-test": "*",
34 | "suitcss-preprocessor": "^4.0.0",
35 | "suitcss-utils-display": "^1.0.1"
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/packages/utils-size/test/config.json:
--------------------------------------------------------------------------------
1 | {
2 | "lint": true,
3 | "postcss-reporter": {
4 | "plugins": ["stylelint", "postcss-import", "postcss-bem-linter"],
5 | "throwError": true
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/packages/utils-size/test/test.css:
--------------------------------------------------------------------------------
1 | @import "suitcss-components-test";
2 | @import "suitcss-utils-display";
3 | @import "../index.css";
4 |
5 | @custom-media --sm-viewport (min-width:320px) and (max-width:640px);
6 | @custom-media --md-viewport (min-width:640px) and (max-width:960px);
7 | @custom-media --lg-viewport (min-width:960px);
8 |
--------------------------------------------------------------------------------
/packages/utils-text/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components
2 | build
3 | components
4 | node_modules
5 |
--------------------------------------------------------------------------------
/packages/utils-text/.stylelintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "stylelint-config-suitcss"
3 | }
4 |
--------------------------------------------------------------------------------
/packages/utils-text/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | sudo: false
3 | node_js:
4 | - "4"
5 | - "5"
6 |
7 |
--------------------------------------------------------------------------------
/packages/utils-text/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # HEAD
2 |
3 | ### 1.0.0 (February 08, 2016)
4 |
5 | * Update `preprocessor` to `1.0.0`
6 | * Add stylelint config
7 |
8 | ### 0.4.3 (September 22, 2015)
9 |
10 | * Fix import path in test.css.
11 |
12 | ### 0.4.2 (October 28, 2014)
13 |
14 | * Add support for JS bundling.
15 |
16 | ### 0.4.1 (June 24, 2014)
17 |
18 | * Add `.css` extension to imports for interoperability.
19 |
20 | ### 0.4.0 (June 21, 2014)
21 |
22 | * npm-based workflow.
23 | * Add new preprocessor build tools.
24 | * Add `u-textKern` utility.
25 |
26 | ### 0.3.0 (March 25, 2014)
27 |
28 | * Add npm support.
29 | * Add `u-textNoWrap` utility.
30 | * Remove `u-textInheritAllColor` utility. [a2693a5d](https://github.com/suitcss/utils-text/commit/a2693a5d7dd6d86993ca22a35a0fe452b85d7761)
31 | * Stop using CSSLint.
32 |
33 | ### 0.2.3 (October 15, 2013)
34 |
35 | * Fix `u-textBreak` utility.
36 |
37 | ### 0.2.2 (October 9, 2013)
38 |
39 | * Add `!important` to color inheritance utilities.
40 |
41 | ### 0.2.1 (September 1, 2013)
42 |
43 | * Fix Bower ignores.
44 |
45 | ### 0.2.0 (August 28, 2013)
46 |
47 | * Add CSS linting.
48 | * Remove `word-break: break-word`.
49 | * Add `color` inheritance utilities.
50 | * Add `!important` to declarations.
51 | * Add Component(1) support.
52 |
53 | ### 0.1.1 (May 26, 2013)
54 |
55 | * Add Bower ignores.
56 | * Add a test file.
57 | * Rename `component.json` to `bower.json`.
58 |
59 | ### 0.1.0 (March 3, 2013)
60 |
61 | * Public release.
62 |
--------------------------------------------------------------------------------
/packages/utils-text/LICENSE.md:
--------------------------------------------------------------------------------
1 | Copyright (c) Nicolas Gallagher
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of
4 | this software and associated documentation files (the "Software"), to deal in
5 | the Software without restriction, including without limitation the rights to
6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
7 | of the Software, and to permit persons to whom the Software is furnished to do
8 | so, subject to the following conditions:
9 |
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 |
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.
20 |
--------------------------------------------------------------------------------
/packages/utils-text/README.md:
--------------------------------------------------------------------------------
1 | # SUIT CSS utilities: text
2 |
3 | [](http://travis-ci.org/suitcss/utils-text)
4 |
5 | SUIT CSS text utilities.
6 |
7 | Read more about [SUIT CSS's design principles](https://github.com/suitcss/suit/).
8 |
9 | ## Installation
10 |
11 | * [npm](http://npmjs.org/): `npm install suitcss-utils-text`
12 | * Download: [zip](https://github.com/suitcss/utils-text/releases/latest)
13 |
14 | ## Available classes
15 |
16 | * `u-textBreak` - Break strings when their length exceeds the width of their container.
17 | * `u-textCenter` - Center-align text.
18 | * `u-textLeft` - Left-align text.
19 | * `u-textRight` - Right-align text.
20 | * `u-textInheritColor` - Inherit the ancestor's text color.
21 | * `u-textKern` - Enable kerning in supporting browsers.
22 | * `u-textNoWrap` - Prevent wrapping at whitespace.
23 | * `u-textTruncate` - Truncate a single line of text, with ellipsis.
24 |
25 | ## Usage
26 |
27 | Please refer to the README for [SUIT CSS utils](https://github.com/suitcss/utils/)
28 |
29 | ## Testing
30 |
31 | Install [Node](http://nodejs.org) (comes with npm).
32 |
33 | ```
34 | npm install
35 | ```
36 |
37 | To generate a build:
38 |
39 | ```
40 | npm run build
41 | ```
42 |
43 | To lint code with [postcss-bem-linter](https://github.com/postcss/postcss-bem-linter) and [stylelint](http://stylelint.io/)
44 |
45 | ```
46 | npm run lint
47 | ```
48 |
49 | To generate the testing build.
50 |
51 | ```
52 | npm run build-test
53 | ```
54 |
55 | To watch the files for making changes to test:
56 |
57 | ```
58 | npm run watch
59 | ```
60 |
61 | Basic visual tests are in `test/index.html`.
62 |
63 | ## Browser support
64 |
65 | * Google Chrome (latest)
66 | * Opera (latest)
67 | * Firefox (latest)
68 | * Safari 5+
69 | * Internet Explorer 8+
70 |
--------------------------------------------------------------------------------
/packages/utils-text/index.css:
--------------------------------------------------------------------------------
1 | @import "./lib/text.css";
2 |
--------------------------------------------------------------------------------
/packages/utils-text/index.js:
--------------------------------------------------------------------------------
1 | require('./lib/text.css');
2 |
--------------------------------------------------------------------------------
/packages/utils-text/lib/text.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Word breaking
3 | *
4 | * Break strings when their length exceeds the width of their container.
5 | */
6 |
7 | .u-textBreak {
8 | word-wrap: break-word !important;
9 | }
10 |
11 | /**
12 | * Horizontal text alignment
13 | */
14 |
15 | .u-textCenter {
16 | text-align: center !important;
17 | }
18 |
19 | .u-textLeft {
20 | text-align: left !important;
21 | }
22 |
23 | .u-textRight {
24 | text-align: right !important;
25 | }
26 |
27 | /**
28 | * Inherit the ancestor's text color.
29 | */
30 |
31 | .u-textInheritColor {
32 | color: inherit !important;
33 | }
34 |
35 | /**
36 | * Enables font kerning in all browsers.
37 | * http://blog.typekit.com/2014/02/05/kerning-on-the-web/
38 | *
39 | * 1. Chrome (not Windows), Firefox, IE 10+
40 | * 2. Safari 7 and future browsers
41 | * 3. Chrome (not Windows), Firefox, Safari 6+, iOS, Android
42 | */
43 |
44 | .u-textKern {
45 | font-feature-settings: "kern" 1; /* 1 */
46 | font-kerning: normal; /* 2 */
47 | text-rendering: optimizeLegibility; /* 3 */
48 | }
49 |
50 | /**
51 | * Prevent whitespace wrapping
52 | */
53 |
54 | .u-textNoWrap {
55 | white-space: nowrap !important;
56 | }
57 |
58 | /**
59 | * Text truncation
60 | *
61 | * Prevent text from wrapping onto multiple lines, and truncate with an
62 | * ellipsis.
63 | *
64 | * 1. Ensure that the node has a maximum width after which truncation can
65 | * occur.
66 | * 2. Fix for IE 8/9 if `word-wrap: break-word` is in effect on ancestor
67 | * nodes.
68 | */
69 |
70 | .u-textTruncate {
71 | max-width: 100%; /* 1 */
72 | overflow: hidden !important;
73 | text-overflow: ellipsis !important;
74 | white-space: nowrap !important;
75 | word-wrap: normal !important; /* 2 */
76 | }
77 |
--------------------------------------------------------------------------------
/packages/utils-text/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "suitcss-utils-text",
3 | "version": "1.0.0",
4 | "description": "Text utilities for SUIT CSS",
5 | "keywords": [
6 | "browser",
7 | "css-utilities",
8 | "text",
9 | "suitcss",
10 | "style"
11 | ],
12 | "bugs": "https://github.com/suitcss/suit/labels/bug",
13 | "license": "MIT",
14 | "author": "Nicolas Gallagher",
15 | "files": [
16 | "index.css",
17 | "index.js",
18 | "lib"
19 | ],
20 | "style": "index.css",
21 | "repository": "https://github.com/suitcss/suit/tree/master/packages/utils-text",
22 | "homepage": "https://github.com/suitcss/suit/tree/master/packages/utils-text",
23 | "scripts": {
24 | "build": "npm run setup && npm run preprocess",
25 | "build-test": "npm run setup && npm run preprocess-test",
26 | "lint": "suitcss -c test/config.json index.css build/lint.css && rm build/lint.css",
27 | "preprocess": "suitcss index.css build/build.css",
28 | "preprocess-test": "suitcss -i test test/test.css build/test.css",
29 | "setup": "npm install",
30 | "watch": "npm run preprocess-test -- -w -v",
31 | "test": "npm run lint"
32 | },
33 | "devDependencies": {
34 | "stylelint-config-suitcss": "^3.0.0",
35 | "suitcss-components-test": "*",
36 | "suitcss-preprocessor": "^1.0.0"
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/packages/utils-text/test/config.json:
--------------------------------------------------------------------------------
1 | {
2 | "lint": true,
3 | "postcss-reporter": {
4 | "plugins": ["stylelint"],
5 | "throwError": true
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/packages/utils-text/test/test.css:
--------------------------------------------------------------------------------
1 | @import "suitcss-components-test";
2 | @import "../index.css";
3 |
--------------------------------------------------------------------------------
/packages/utils/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components
2 | build
3 | components
4 | node_modules
5 |
--------------------------------------------------------------------------------
/packages/utils/LICENSE.md:
--------------------------------------------------------------------------------
1 | Copyright (c) Nicolas Gallagher
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of
4 | this software and associated documentation files (the "Software"), to deal in
5 | the Software without restriction, including without limitation the rights to
6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
7 | of the Software, and to permit persons to whom the Software is furnished to do
8 | so, subject to the following conditions:
9 |
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 |
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.
20 |
--------------------------------------------------------------------------------
/packages/utils/index.css:
--------------------------------------------------------------------------------
1 | @import "suitcss-utils-align";
2 | @import "suitcss-utils-display";
3 | @import "suitcss-utils-layout";
4 | @import "suitcss-utils-link";
5 | @import "suitcss-utils-offset";
6 | @import "suitcss-utils-position";
7 | @import "suitcss-utils-size";
8 | @import "suitcss-utils-text";
9 | @import "suitcss-utils-flex";
10 |
--------------------------------------------------------------------------------
/packages/utils/index.js:
--------------------------------------------------------------------------------
1 | require('suitcss-utils-align');
2 | require('suitcss-utils-display');
3 | require('suitcss-utils-layout');
4 | require('suitcss-utils-link');
5 | require('suitcss-utils-offset');
6 | require('suitcss-utils-position');
7 | require('suitcss-utils-size');
8 | require('suitcss-utils-text');
9 | require('suitcss-utils-flex');
10 |
--------------------------------------------------------------------------------
/packages/utils/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "suitcss-utils",
3 | "description": "Utilities for SUIT CSS",
4 | "version": "3.0.0",
5 | "style": "index.css",
6 | "dependencies": {
7 | "suitcss-utils-align": "^1.0.0",
8 | "suitcss-utils-display": "^1.0.2",
9 | "suitcss-utils-flex": "^2.0.0",
10 | "suitcss-utils-layout": "^1.0.1",
11 | "suitcss-utils-link": "^1.0.1",
12 | "suitcss-utils-offset": "^1.0.0",
13 | "suitcss-utils-position": "^1.0.1",
14 | "suitcss-utils-size": "^2.0.0",
15 | "suitcss-utils-text": "^1.0.0"
16 | },
17 | "devDependencies": {
18 | "suitcss-preprocessor": "^4.0.0"
19 | },
20 | "scripts": {
21 | "build": "npm run setup && npm run preprocess",
22 | "preprocess": "suitcss index.css build/build.css",
23 | "setup": "npm install"
24 | },
25 | "repository": "https://github.com/suitcss/suit/tree/master/packages/utils",
26 | "homepage": "https://github.com/suitcss/suit/tree/master/packages/utils",
27 | "bugs": "https://github.com/suitcss/suit/labels/bug"
28 | }
29 |
--------------------------------------------------------------------------------
SUIT CSS: positioning utilities tests
46 | 47 |.u-posAbsoluteCenter
48 |absolutely centers the element
49 |
50 |
51 |
52 | centers without width and height
53 |
54 | Testing
55 |
56 |
57 | .u-posFullScreen
58 |covers the entire viewport
59 |
60 |
61 |
62 |
63 |
64 |
65 | .u-posFixedCenter
66 |fix and centre an element in the viewport
67 |
68 |
69 |
70 |
72 |
73 | Text in the centre
71 | .u-posFit
74 |fits element to its parent
75 |
76 |
77 |
78 |