├── .gitignore ├── .travis.yml ├── LICENSE ├── Makefile ├── README.md ├── lerna.json ├── package.json ├── packages ├── components-arrow │ ├── .npmignore │ ├── .stylelintrc │ ├── .travis.yml │ ├── CHANGELOG.md │ ├── LICENSE.md │ ├── README.md │ ├── index.css │ ├── lib │ │ └── arrow.css │ ├── package.json │ └── test │ │ ├── config.json │ │ ├── index.html │ │ └── test.css ├── components-card │ ├── .npmignore │ ├── .stylelintrc │ ├── .travis.yml │ ├── CHANGELOG.md │ ├── LICENSE.md │ ├── README.md │ ├── index.css │ ├── lib │ │ └── card.css │ ├── package.json │ └── test │ │ ├── config.json │ │ ├── index.html │ │ └── test.css ├── components-dropdown │ ├── .npmignore │ ├── .stylelintrc │ ├── .travis.yml │ ├── CHANGELOG.md │ ├── LICENSE.md │ ├── README.md │ ├── index.css │ ├── lib │ │ └── dropdown.css │ ├── package.json │ └── test │ │ ├── config.json │ │ ├── index.html │ │ ├── index.js │ │ ├── test.css │ │ └── utils.js ├── components-form │ ├── .npmignore │ ├── .stylelintrc │ ├── .travis.yml │ ├── CHANGELOG.md │ ├── LICENSE.md │ ├── README.md │ ├── index.css │ ├── index.js │ ├── lib │ │ └── form.css │ ├── package.json │ └── test │ │ ├── config.json │ │ ├── index.html │ │ └── test.css ├── components-icon │ ├── .npmignore │ ├── .stylelintrc │ ├── .travis.yml │ ├── CHANGELOG.md │ ├── LICENSE.md │ ├── README.md │ ├── index.css │ ├── lib │ │ └── icon.css │ ├── package.json │ └── test │ │ ├── config.json │ │ ├── index.html │ │ └── test.css └── components-module │ ├── .npmignore │ ├── .stylelintrc │ ├── .travis.yml │ ├── CHANGELOG.md │ ├── LICENSE.md │ ├── README.md │ ├── index.css │ ├── lib │ └── module.css │ ├── package.json │ └── test │ ├── config.json │ ├── index.html │ └── test.css └── scripts └── shared-dependencies.js /.gitignore: -------------------------------------------------------------------------------- 1 | **/**/build 2 | node_modules 3 | **/**/node_nodules 4 | temp 5 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | git: 2 | depth: 1 3 | language: node_js 4 | sudo: false 5 | node_js: 6 | - "4" 7 | - "5" 8 | addons: 9 | apt: 10 | packages: 11 | - xvfb 12 | install: 13 | - export DISPLAY=':99.0' 14 | - Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 & 15 | - npm install 16 | script: make test-ci 17 | 18 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | BSD License 2 | 3 | For suitcss-toolkit software and the derived packages (published as standalone) 4 | 5 | Copyright (c) 2016, Giuseppe Gurgone. All rights reserved. 6 | 7 | Redistribution and use in source and binary forms, with or without modification, 8 | are permitted provided that the following conditions are met: 9 | 10 | * Redistributions of source code must retain the above copyright notice, this 11 | list of conditions and the following disclaimer. 12 | 13 | * Redistributions in binary form must reproduce the above copyright notice, 14 | this list of conditions and the following disclaimer in the 15 | documentation and/or other materials provided with the distribution. 16 | 17 | * Neither the name 'Giuseppe Gurgone', 'suitcss toolkit' nor 18 | the names of its contributors may be used to 19 | endorse or promote products derived from this software without specific 20 | prior written permission. 21 | 22 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 23 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 24 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 25 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 26 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 27 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 28 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 29 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 30 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 31 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | ############ 2 | # Variables 3 | 4 | # Node modules bin folder 5 | ## N.B. it holds the absolute path 6 | BIN := $(shell pwd)/node_modules/.bin 7 | export PATH := $(BIN):$(PATH) 8 | 9 | PACKAGES_FOLDER ?= packages 10 | SCRIPTS_FOLDER ?= scripts 11 | PKG_JSON_FILES := $(shell \ 12 | find . \ 13 | -not \( -path './package.json' -prune \) \ 14 | -not \( -path './.git' -prune \) \ 15 | -not \( -path './node_modules' -prune \) \ 16 | -not \( -path './packages/**/node_modules' -prune \) \ 17 | -type f \ 18 | -name 'package.json' \ 19 | ) 20 | 21 | # applications 22 | LERNA ?= $(BIN)/lerna 23 | YO ?= $(BIN)/yo suit 24 | SHARED_DEPENDENCIES ?= $(SCRIPTS_FOLDER)/shared-dependencies.js 25 | 26 | 27 | 28 | ########## 29 | # Targets 30 | 31 | node_modules: package.json 32 | @npm prune 33 | @npm i --global-style 34 | 35 | install: node_modules 36 | 37 | shared-deps: $(SHARED_DEPENDENCIES) $(PKG_JSON_FILES) 38 | @$(SHARED_DEPENDENCIES) $(PKG_JSON_FILES) 39 | 40 | bootstrap: 41 | @$(LERNA) bootstrap 42 | 43 | bootstrap-shared: 44 | @$(LERNA) exec -- npm i --global-style 45 | 46 | # Cleanup 47 | 48 | clean: 49 | @rm -rf node_modules 50 | @rm -rf packages/**/node_modules 51 | 52 | # Testing 53 | 54 | test-base: 55 | @$(LERNA) run test 56 | 57 | test: node_modules bootstrap test-base 58 | 59 | test-ci: 60 | @tar --exclude=temp.tar -cf temp.tar . 61 | @mkdir -p temp 62 | @tar -xf temp.tar -C temp/ 63 | @cd temp && make shared-deps && npm i && make bootstrap-shared test-base 64 | @rm -rf temp* 65 | 66 | # Publishing 67 | 68 | publish: 69 | @git pull --rebase 70 | @$(LERNA) publish --only-explicit-updates 71 | 72 | # Scaffolding 73 | 74 | ## Component 75 | ### Usage: make component name=componentName 76 | component: node_modules 77 | @$(eval LOCAL_$@_PATH := $(PACKAGES_FOLDER)/components-$(name)) 78 | @mkdir -p $(LOCAL_$@_PATH) 79 | @cd $(LOCAL_$@_PATH) && $(YO) $(name) 80 | 81 | ## Utilities 82 | ### Usage: make utils name=utilsName 83 | utils: node_modules 84 | @$(eval LOCAL_$@_PATH := $(PACKAGES_FOLDER)/utils-$(name)) 85 | @mkdir -p $(LOCAL_$@_PATH) 86 | @cd $(LOCAL_$@_PATH) && $(YO) $(name) 87 | 88 | 89 | #################### 90 | # Available targets 91 | 92 | .PHONY: install clean bootstrap bootstrap-shared 93 | .PHONY: publish 94 | .PHONY: test test-ci 95 | .PHONY: component utils 96 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # SUIT CSS Toolkit 2 | 3 | [![Build Status](https://secure.travis-ci.org/giuseppeg/suitcss-toolkit.svg?branch=master)](http://travis-ci.org/giuseppeg/suitcss-toolkit) 4 | 5 | A toolkit of UI components and utilities developed following the [SUIT's design principles](https://github.com/suitcss/suit/tree/master/doc). 6 | 7 | *Toolkit* is developed as a mono-repository and managed with [lernajs](https://lernajs.io/). 8 | 9 | # Contributing 10 | 11 | ```bash 12 | git clone https://github.com/giuseppeg/suitcss-toolkit.git 13 | cd suitcss-toolkit 14 | npm i 15 | ``` 16 | 17 | All of the packages are under the `packages` folder. 18 | 19 | When making a change please *create a new branch* and adhere to the following naming conventions: 20 | 21 | ``` 22 | [packages/packageName/](add|update|fix|try)[/description] 23 | ``` 24 | 25 | Examples: 26 | 27 | ```bash 28 | packages/components-form/add 29 | packages/components-dropdown/fix/alignment 30 | update/packagejson # refers to the monorepo root 31 | ``` 32 | 33 | # Scaffolding 34 | 35 | You can scaffold a new component or utilities with the following commands: 36 | 37 | ```bash 38 | make component name=my-component 39 | make utils name=my-utils 40 | ``` 41 | 42 | # License 43 | 44 | [BSD-3-Clause](./LICENSE) -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "lerna": "2.0.0-beta.23", 3 | "version": "independent", 4 | "publishConfig": { 5 | "ignore": [ 6 | "*.md", 7 | "test/**" 8 | ] 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "license": "BSD-3-Clause", 3 | "devDependencies": { 4 | "generator-suit": "^1.0.2", 5 | "yo": "^1.8.4", 6 | "lerna": "2.0.0-beta.23" 7 | }, 8 | "dependencies": { 9 | "object-assign": "^4.1.0" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/components-arrow/.npmignore: -------------------------------------------------------------------------------- 1 | bower_components 2 | build 3 | components 4 | node_modules 5 | -------------------------------------------------------------------------------- /packages/components-arrow/.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "stylelint-config-suitcss" 3 | } 4 | -------------------------------------------------------------------------------- /packages/components-arrow/.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | sudo: false 3 | node_js: 4 | - "4" 5 | - "5" 6 | -------------------------------------------------------------------------------- /packages/components-arrow/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ### HEAD 2 | 3 | ### 0.1.0 (June 11, 2016) 4 | 5 | * Initial public release. 6 | -------------------------------------------------------------------------------- /packages/components-arrow/LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) Giuseppe Gurgone 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/components-arrow/README.md: -------------------------------------------------------------------------------- 1 | # SUIT Arrow 2 | 3 | [![Build Status](https://secure.travis-ci.org/giuseppeg/suitcss-components-arrow.svg?branch=master)](http://travis-ci.org/giuseppeg/suitcss-components-arrow) 4 | 5 | A SUIT component for an arrow to use with dropdowns, tooltips etc. 6 | 7 | Read more about [SUIT's design principles](https://github.com/suitcss/suit/). 8 | 9 | ## Installation 10 | 11 | * [npm](https://npmjs.org/): `npm install suitcss-components-arrow` 12 | * Download: [releases](https://github.com/giuseppeg/suitcss-components-arrow/releases/latest) 13 | 14 | ## Available classes 15 | 16 | * `Arrow` - The core Arrow class 17 | * `Arrow--[top|right|bottom|left]` – Position modifiers. `Arrow--bottom` is the default. 18 | 19 | ## Configurable variables 20 | 21 | ```css 22 | --Arrow-size 23 | 24 | --Arrow-backgroundColor 25 | 26 | --Arrow-borderColor 27 | --Arrow-borderRadius 28 | 29 | --Arrow-boxShadowColor 30 | --Arrow-boxShadowSpread 31 | ``` 32 | 33 | ## Usage 34 | 35 | ```html 36 | 37 | ``` 38 | 39 | It is recommended to use a wrapper element to control the `Arrow` position. 40 | E.g.: 41 | 42 | ```html 43 | 46 | ``` 47 | 48 | ### Tweaking the Arrow Size 49 | 50 | The arrow size can be changed by overriding the `font-size` of the `.Arrow` element. 51 | 52 | ## Testing 53 | 54 | Install [Node](http://nodejs.org) (comes with npm). 55 | 56 | ``` 57 | npm install 58 | ``` 59 | 60 | To generate a build: 61 | 62 | ``` 63 | npm run build 64 | ``` 65 | 66 | To generate the testing build. 67 | 68 | ``` 69 | npm run build-test 70 | ``` 71 | 72 | Basic visual tests are in `test/index.html`. 73 | 74 | To pre-process: 75 | 76 | ``` 77 | npm run preprocess 78 | ``` 79 | 80 | To pre-process the tests: 81 | 82 | ``` 83 | npm run preprocess-test 84 | ``` 85 | 86 | ## Browser support 87 | 88 | * Google Chrome 4+ 89 | * Opera 11.5+ 90 | * Firefox 3.5+ 91 | * Safari 3.1+ 92 | * Internet Explorer 9+ 93 | -------------------------------------------------------------------------------- /packages/components-arrow/index.css: -------------------------------------------------------------------------------- 1 | @import "./lib/arrow.css"; 2 | 3 | -------------------------------------------------------------------------------- /packages/components-arrow/lib/arrow.css: -------------------------------------------------------------------------------- 1 | /** @define Arrow */ 2 | 3 | :root { 4 | --Arrow-size: 16px; 5 | 6 | --Arrow-backgroundColor: #fff; 7 | 8 | --Arrow-borderColor: transparent; 9 | --Arrow-borderRadius: 0; 10 | 11 | --Arrow-boxShadowColor: transparent; 12 | --Arrow-boxShadowSpread: 0px; /* stylelint-disable-line */ 13 | } 14 | 15 | .Arrow { 16 | display: inline-block; 17 | font-size: var(--Arrow-size); 18 | height: 0.7em; 19 | overflow: hidden; 20 | padding: 1px calc(2 + var(--Arrow-boxShadowSpread)); 21 | text-align: center; 22 | width: 1em; 23 | } 24 | 25 | .Arrow::before { 26 | background-color: var(--Arrow-backgroundColor); 27 | border: 1px solid var(--Arrow-borderColor); 28 | border-radius: var(--Arrow-borderRadius); 29 | bottom: 100%; 30 | box-shadow: 0 0 var(--Arrow-boxShadowSpread) var(--Arrow-boxShadowColor); 31 | box-sizing: border-box; 32 | content: ""; 33 | display: block; 34 | margin-top: -2px; 35 | padding-bottom: 100%; 36 | position: relative; 37 | transform: rotate(45deg); 38 | width: 100%; 39 | } 40 | 41 | /** 42 | * Position modifiers. 43 | * N.B. `Arrow--bottom` is the default 44 | */ 45 | 46 | .Arrow--top { 47 | transform: rotate(180deg); 48 | } 49 | 50 | .Arrow--right { 51 | transform: rotate(-90deg); 52 | } 53 | 54 | .Arrow--bottom { 55 | transform: rotate(0); 56 | } 57 | 58 | .Arrow--left { 59 | transform: rotate(90deg); 60 | } 61 | 62 | -------------------------------------------------------------------------------- /packages/components-arrow/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "suitcss-components-arrow", 3 | "description": "A SUIT component for an arrow to use with dropdowns, tooltips etc.", 4 | "version": "0.1.0", 5 | "license": "MIT", 6 | "style": "index.css", 7 | "files": [ 8 | "index.css", 9 | "index.js", 10 | "lib" 11 | ], 12 | "devDependencies": { 13 | "stylelint": "^6.8.0", 14 | "stylelint-config-suitcss": "^6.0.0", 15 | "suitcss-components-test": "*", 16 | "suitcss-preprocessor": "^2.0.0" 17 | }, 18 | "scripts": { 19 | "build": "npm run setup && npm run preprocess", 20 | "build-test": "npm run setup && npm run preprocess-test", 21 | "preprocess": "suitcss index.css build/build.css", 22 | "preprocess-test": "suitcss -i test test/test.css build/test.css", 23 | "setup": "npm install", 24 | "watch": "npm run preprocess-test -- -w -v", 25 | "test": "suitcss -c test/config.json index.css build/output.css && rm build/output.css" 26 | }, 27 | "repository": { 28 | "type": "git", 29 | "url": "git://github.com/giuseppeg/suitcss-components-arrow.git" 30 | }, 31 | "keywords": [ 32 | "browser", 33 | "css-components", 34 | "suitcss-components-arrow", 35 | "suitcss", 36 | "style" 37 | ] 38 | } 39 | -------------------------------------------------------------------------------- /packages/components-arrow/test/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "lint": true, 3 | "postcss-reporter": { 4 | "throwError": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/components-arrow/test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Arrow [component] - suit 4 | 5 | 12 | 13 |
14 |

SUIT CSS: Arrow tests

15 | 16 |

.Arrow

17 |

renders

18 |
19 |
20 |
21 |

scales when increasing the element's `font-size`

22 |
23 |
24 |
25 |
26 |
27 |

border

28 |
29 |
30 |
31 |

box-shadow

32 |
33 |
34 |
35 |

border and box-shadow

36 |
37 |
38 |
39 | 40 |

.Arrow--[side] modifier

41 |

Arrow--top

42 |
43 |
44 |
45 |

Arrow--right

46 |
47 |
48 |
49 |

Arrow--bottom (default)

50 |
51 |
52 |
53 |

Arrow--left

54 |
55 |
56 |
57 |
58 | -------------------------------------------------------------------------------- /packages/components-arrow/test/test.css: -------------------------------------------------------------------------------- 1 | @import "suitcss-components-test"; 2 | @import "../index.css"; 3 | -------------------------------------------------------------------------------- /packages/components-card/.npmignore: -------------------------------------------------------------------------------- 1 | bower_components 2 | build 3 | components 4 | node_modules 5 | -------------------------------------------------------------------------------- /packages/components-card/.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "stylelint-config-suitcss" 3 | } 4 | -------------------------------------------------------------------------------- /packages/components-card/.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | sudo: false 3 | node_js: 4 | - "4" 5 | - "5" 6 | -------------------------------------------------------------------------------- /packages/components-card/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ### HEAD 2 | 3 | ### 0.1.0 (June 28, 2016) 4 | 5 | * Initial public release. 6 | -------------------------------------------------------------------------------- /packages/components-card/LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) Giuseppe Gurgone 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/components-card/README.md: -------------------------------------------------------------------------------- 1 | # SUIT Card 2 | 3 | A SUIT component for Cards like containers 4 | 5 | Read more about [SUIT's design principles](https://github.com/suitcss/suit/). 6 | 7 | ## Installation 8 | 9 | * [npm](https://npmjs.org/packages/suitcss-components-card): `npm install suitcss-components-card` 10 | * [releases history](https://github.com/giuseppeg/suitcss-toolkit/packages/components-card/CHANGELOG.md) 11 | 12 | ## Available classes 13 | 14 | * `Card` - The core Card class 15 | 16 | ## Configurable variables 17 | 18 | ```css 19 | --Card-backgroundColor 20 | --Card-borderColor 21 | --Card-borderRadius 22 | --Card-boxShadow 23 | ``` 24 | If you want to turn off the card border you can set `--Card-borderColor` to `transparent`. 25 | 26 | ## Usage 27 | 28 | ```html 29 |
30 | Howdy 31 |
32 | ``` 33 | 34 | N.B. `Card` is just a container and it doesn't have default `padding` or styles to arrange its content. 35 | You can combine it with a layout component like [Module](https://npmjs.org/package/suitcss-components-module) to achieve more complex structures. 36 | 37 | ## Testing 38 | 39 | Install [Node](http://nodejs.org) (comes with npm). 40 | 41 | ``` 42 | npm install 43 | ``` 44 | 45 | To generate a build: 46 | 47 | ``` 48 | npm run build 49 | ``` 50 | 51 | To generate the testing build. 52 | 53 | ``` 54 | npm run build-test 55 | ``` 56 | 57 | Basic visual tests are in `test/index.html`. 58 | 59 | To pre-process: 60 | 61 | ``` 62 | npm run preprocess 63 | ``` 64 | 65 | To pre-process the tests: 66 | 67 | ``` 68 | npm run preprocess-test 69 | ``` 70 | 71 | ## Browser support 72 | 73 | * Google Chrome (latest) 74 | * Opera (latest) 75 | * Firefox 4+ 76 | * Safari 5+ 77 | * Internet Explorer 8+ 78 | -------------------------------------------------------------------------------- /packages/components-card/index.css: -------------------------------------------------------------------------------- 1 | @import "./lib/card.css"; 2 | 3 | -------------------------------------------------------------------------------- /packages/components-card/lib/card.css: -------------------------------------------------------------------------------- 1 | /** @define Card */ 2 | 3 | :root { 4 | --Card-backgroundColor: #fff; 5 | --Card-borderColor: #ccc; 6 | --Card-borderRadius: 2px; 7 | --Card-boxShadow: 0 1px 2px rgba(0, 0, 0, 0.3); 8 | } 9 | 10 | .Card { 11 | background-clip: padding-box; 12 | background-color: var(--Card-backgroundColor); 13 | border: 1px solid var(--Card-borderColor); 14 | border-radius: var(--Card-borderRadius); 15 | box-shadow: var(--Card-boxShadow); 16 | margin: 0; 17 | } 18 | -------------------------------------------------------------------------------- /packages/components-card/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "suitcss-components-card", 3 | "description": "A SUIT component for Cards like containers", 4 | "version": "0.1.0", 5 | "license": "MIT", 6 | "style": "index.css", 7 | "files": [ 8 | "index.css", 9 | "index.js", 10 | "lib" 11 | ], 12 | "devDependencies": { 13 | "stylelint": "^6.8.0", 14 | "stylelint-config-suitcss": "^6.0.0", 15 | "suitcss-components-test": "*", 16 | "suitcss-preprocessor": "^2.0.0" 17 | }, 18 | "scripts": { 19 | "build": "npm run setup && npm run preprocess", 20 | "build-test": "npm run setup && npm run preprocess-test", 21 | "preprocess": "suitcss index.css build/build.css", 22 | "preprocess-test": "suitcss -i test test/test.css build/test.css", 23 | "setup": "npm install", 24 | "watch": "npm run preprocess-test -- -w -v", 25 | "test": "suitcss -c test/config.json index.css build/output.css && rm build/output.css" 26 | }, 27 | "repository": { 28 | "type": "git", 29 | "url": "git://github.com/giuseppeg/suitcss-components-card.git" 30 | }, 31 | "keywords": [ 32 | "browser", 33 | "css-components", 34 | "suitcss-components-card", 35 | "suitcss", 36 | "suitcss toolkit", 37 | "style" 38 | ] 39 | } 40 | -------------------------------------------------------------------------------- /packages/components-card/test/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "lint": true, 3 | "postcss-reporter": { 4 | "throwError": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/components-card/test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Card [component] - suit 4 | 5 | 8 | 9 |
10 |

SUIT CSS: Card tests

11 | 12 |

.Card

13 |

renders

14 |
15 |
howdy
16 |
17 |
18 | -------------------------------------------------------------------------------- /packages/components-card/test/test.css: -------------------------------------------------------------------------------- 1 | @import "suitcss-components-test"; 2 | @import "../index.css"; 3 | -------------------------------------------------------------------------------- /packages/components-dropdown/.npmignore: -------------------------------------------------------------------------------- 1 | bower_components 2 | build 3 | components 4 | node_modules 5 | -------------------------------------------------------------------------------- /packages/components-dropdown/.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "stylelint-config-suitcss" 3 | } 4 | -------------------------------------------------------------------------------- /packages/components-dropdown/.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | sudo: false 3 | node_js: 4 | - "4" 5 | - "5" 6 | addons: 7 | apt: 8 | packages: 9 | - xvfb 10 | install: 11 | - export DISPLAY=':99.0' 12 | - Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 & 13 | - npm install 14 | -------------------------------------------------------------------------------- /packages/components-dropdown/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ### HEAD 2 | 3 | ### 0.1.0 (May 12, 2016) 4 | 5 | * Initial public release. 6 | -------------------------------------------------------------------------------- /packages/components-dropdown/LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) 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/components-dropdown/README.md: -------------------------------------------------------------------------------- 1 | # SUIT Dropdown 2 | 3 | [![Build Status](https://secure.travis-ci.org/giuseppeg/suitcss-components-dropdown.svg?branch=master)](http://travis-ci.org/giuseppeg/suitcss-components-dropdown) 4 | 5 | A SUIT component for dropdowns 6 | 7 | Read more about [SUIT's design principles](https://github.com/suitcss/suit/). 8 | 9 | ## Usage 10 | 11 | ```html 12 |
13 | 22 | 36 |
37 | ``` 38 | 39 | See the [test page](http://giuseppeg.github.io/suitcss-components-dropdown/test) for more examples. 40 | 41 | ### Dropdown-menu toggling 42 | 43 | Toggle the `is-expanded` state class on `Dropdown` to show/hide the `Dropdown-menu`. 44 | 45 | ## Accessibility 46 | 47 | For better accessibility it is recommended to use `aria` attributes and `role` like in the examples. 48 | 49 | You can use a tiny script like [a11y-toggle](http://edenspiekermann.github.io/a11y-toggle/) or write your own to toggle the `Dropdown-menu` while preserving accessibility. 50 | 51 | When writing a JavaScript component for the Dropdown it is highly recommended to implement basic keyboard navigation and other [common accessibility features](https://github.com/paypal/bootstrap-accessibility-plugin/#dropdown). 52 | 53 | ## Installation 54 | 55 | * [npm](https://npmjs.org/): `npm install suitcss-components-dropdown` 56 | * Download: [releases](https://github.com/giuseppeg/suitcss-components-dropdown/releases/latest) 57 | 58 | ## Available classes 59 | 60 | * `Dropdown` - The core class 61 | * `Dropdown-toggle` – The element to toggle the dropdown menu, not styled. 62 | * `Dropdown-menu` - The dropdown menu 63 | * `Dropdown-item` - A dropdown menu item 64 | * `Dropdown-link` - A dropdown menu link 65 | 66 | ### Modifiers 67 | 68 | * `Dropdown-menu--inversePlacement` - Inverts the dropdown menu position by placing it on the right or left if any anchestor has `[dir="rtl"]` 69 | * `Dropdown-menu--upPlacement` – Shows the dropdown menu at the top 70 | * `Dropdown-item--separated` – Separates the `Dropdown-item` by adding a `border-top` to it 71 | 72 | ### State 73 | 74 | * `is-expanded` – Can be set on `Dropdown` to show the `Dropdown-menu` 75 | * `is-active` – Can be set on `Dropdown-item` and `Dropdown-link` to mark them as active 76 | 77 | ## Configurable variables 78 | 79 | * `--Dropdown-menu-backgroundColor` 80 | * `--Dropdown-menu-borderColor` 81 | * `--Dropdown-menu-borderRadius` 82 | * `--Dropdown-menu-boxShadow` 83 | * `--Dropdown-menu-zIndex` 84 | 85 | * `--Dropdown-item-borderColor` 86 | * `--Dropdown-item-padding-horizontal` 87 | * `--Dropdown-item-padding-vertical` 88 | 89 | * `--Dropdown-link-color` 90 | * `--Dropdown-link-onHover-backgroundColor` 91 | * `--Dropdown-link-onHover-color` 92 | 93 | ## Testing 94 | 95 | Install [Node](http://nodejs.org) (comes with npm). 96 | 97 | ``` 98 | npm install 99 | ``` 100 | 101 | To generate a build: 102 | 103 | ``` 104 | npm run build 105 | ``` 106 | 107 | To generate the testing build. 108 | 109 | ``` 110 | npm run build-test 111 | ``` 112 | 113 | Unit tests: 114 | 115 | ``` 116 | npm test 117 | ``` 118 | 119 | Basic visual tests are in `test/index.html`. 120 | 121 | To pre-process: 122 | 123 | ``` 124 | npm run preprocess 125 | ``` 126 | 127 | To pre-process the tests: 128 | 129 | ``` 130 | npm run preprocess-test 131 | ``` 132 | 133 | ## Browser support 134 | 135 | * Google Chrome (latest) 136 | * Opera (latest) 137 | * Firefox 4+ 138 | * Safari 5+ 139 | * Internet Explorer 8+ 140 | -------------------------------------------------------------------------------- /packages/components-dropdown/index.css: -------------------------------------------------------------------------------- 1 | @import "./lib/dropdown.css"; 2 | 3 | -------------------------------------------------------------------------------- /packages/components-dropdown/lib/dropdown.css: -------------------------------------------------------------------------------- 1 | /** @define Dropdown */ 2 | 3 | :root { 4 | --Dropdown-menu-backgroundColor: #fff; 5 | --Dropdown-menu-borderColor: currentColor; 6 | --Dropdown-menu-borderRadius: 2px; 7 | --Dropdown-menu-boxShadow: 0 1px 2px rgba(0, 0, 0, 0.2); 8 | --Dropdown-menu-zIndex: 1; 9 | 10 | --Dropdown-item-borderColor: currentColor; 11 | --Dropdown-item-padding-horizontal: 0.75rem; 12 | --Dropdown-item-padding-vertical: 0.25rem; 13 | 14 | --Dropdown-link-color: currentColor; 15 | --Dropdown-link-onHover-backgroundColor: #eee; 16 | --Dropdown-link-onHover-color: currentColor; 17 | 18 | } 19 | 20 | .Dropdown { 21 | display: inline-block; 22 | position: relative; 23 | } 24 | 25 | .Dropdown-menu { 26 | background-clip: padding-box; 27 | background-color: var(--Dropdown-menu-backgroundColor); 28 | border: 1px solid var(--Dropdown-menu-borderColor); 29 | border-radius: var(--Dropdown-menu-borderRadius); 30 | box-shadow: var(--Dropdown-menu-boxShadow); 31 | left: -99999px; 32 | margin: 0; 33 | padding: var(--Dropdown-item-padding-vertical) 0; 34 | position: absolute; 35 | z-index: var(--Dropdown-menu-zIndex); 36 | } 37 | 38 | /* postcss-bem-linter: ignore */ 39 | 40 | [dir="rtl"] .Dropdown-menu { 41 | left: auto; 42 | right: -99999px; 43 | } 44 | 45 | .Dropdown.is-expanded .Dropdown-menu { 46 | left: auto; 47 | } 48 | 49 | /* postcss-bem-linter: ignore */ 50 | 51 | [dir="rtl"] .Dropdown.is-expanded .Dropdown-menu { 52 | right: auto; 53 | } 54 | 55 | /** 56 | * Modifier: Dropdown-menu--inversePlacement 57 | * Inverts the dropdown menu position by placing it on the right. 58 | * If the direction is explicitly set to rtl [dir="rtl"] 59 | * then it places the dropdown menu on the left. 60 | */ 61 | 62 | .Dropdown.is-expanded .Dropdown-menu--inversePlacement { 63 | left: auto; 64 | right: 0; 65 | } 66 | 67 | /* postcss-bem-linter: ignore */ 68 | 69 | [dir="rtl"] .Dropdown.is-expanded .Dropdown-menu--inversePlacement { 70 | left: 0; 71 | right: auto; 72 | } 73 | 74 | /** 75 | * Modifier: Dropdown-menu--upPlacement 76 | * Shows the dropdown menu at the bottom 77 | */ 78 | 79 | .Dropdown-menu--upPlacement { 80 | bottom: 100%; 81 | } 82 | 83 | .Dropdown-item, 84 | .Dropdown-link { 85 | display: block; 86 | padding: 87 | var(--Dropdown-item-padding-vertical) 88 | var(--Dropdown-item-padding-horizontal); 89 | } 90 | 91 | .Dropdown-item { 92 | white-space: nowrap; 93 | } 94 | 95 | .Dropdown-item--separated { 96 | border-top: 1px solid var(--Dropdown-item-borderColor); 97 | } 98 | 99 | .Dropdown-link { 100 | color: var(--Dropdown-link-color); 101 | margin: 102 | calc(-1 * var(--Dropdown-item-padding-vertical)) 103 | calc(-1 * var(--Dropdown-item-padding-horizontal)); 104 | text-decoration: none; 105 | } 106 | 107 | .Dropdown-link:active, 108 | .Dropdown-link:hover, 109 | .Dropdown-link:focus, 110 | .Dropdown-link.is-active, 111 | .Dropdown-item.is-active, 112 | .Dropdown-item.is-active > .Dropdown-link { 113 | background-color: var(--Dropdown-link-onHover-backgroundColor); 114 | color: var(--Dropdown-link-onHover-color); 115 | } 116 | 117 | .Dropdown-link:active { 118 | box-shadow: inset 0 0 99999px rgba(0, 0, 0, 0.3); 119 | } 120 | -------------------------------------------------------------------------------- /packages/components-dropdown/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "suitcss-components-dropdown", 3 | "description": "A SUIT component for dropdowns", 4 | "version": "0.1.0", 5 | "license": "MIT", 6 | "style": "index.css", 7 | "files": [ 8 | "index.css", 9 | "index.js", 10 | "lib" 11 | ], 12 | "devDependencies": { 13 | "babel-preset-es2015": "^6.9.0", 14 | "babelify": "^7.3.0", 15 | "browserify": "^13.0.1", 16 | "browserify-css": "^0.9.1", 17 | "computed-style": "^0.3.0", 18 | "hyperscript": "^1.4.7", 19 | "postcss-pseudo-classes": "^0.1.0", 20 | "stylelint": "^6.8.0", 21 | "stylelint-config-suitcss": "^6.0.0", 22 | "suitcss-components-test": "*", 23 | "suitcss-preprocessor": "^2.0.0", 24 | "tape": "^4.5.1", 25 | "tape-css": "^1.0.2-beta", 26 | "tape-run": "^2.1.4" 27 | }, 28 | "scripts": { 29 | "build": "npm run setup && npm run preprocess", 30 | "build-test": "npm run setup && npm run preprocess-test", 31 | "preprocess": "suitcss index.css build/build.css", 32 | "preprocess-test": "suitcss -c test/config.json -i test test/test.css build/test.css", 33 | "setup": "npm install", 34 | "watch": "npm run preprocess-test -- -w -v", 35 | "test": "browserify test/index.js -t [ browserify-css --autoInject=false ] -t [ babelify --presets [ es2015 ] ] | tape-run -b firefox", 36 | "pretest": "npm run preprocess-test" 37 | }, 38 | "repository": { 39 | "type": "git", 40 | "url": "git://github.com/giuseppeg/suitcss-components-dropdown.git" 41 | }, 42 | "keywords": [ 43 | "browser", 44 | "css-components", 45 | "components-dropdown", 46 | "suitcss", 47 | "style" 48 | ] 49 | } 50 | -------------------------------------------------------------------------------- /packages/components-dropdown/test/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "lint": true, 3 | "postcss-reporter": { 4 | "throwError": true 5 | }, 6 | "use": ["postcss-pseudo-classes"] 7 | } 8 | -------------------------------------------------------------------------------- /packages/components-dropdown/test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Dropdown [component] - suit 4 | 5 | 6 |
7 |

SUIT CSS: Dropdown tests

8 | 9 |

.Dropdown

10 |

renders

11 |
12 |
13 | 22 | 36 |
37 |
38 |

visually hide the `Dropdown-menu` when not in the `is-expanded` state

39 | 66 | 67 |

.Dropdown-menu

68 |

contains mixed text and link items.

69 | 85 |

default placement

86 | 113 |

default rtl placement

114 | 141 |

Dropdown-menu--inversePlacement

142 | 169 |

Dropdown-menu--inversePlacement rtl

170 | 197 |

Dropdown-menu--upPlacement

198 | 225 | 226 |

.Dropdown-item

227 |

.is-active

228 |
229 |
230 | 242 |
243 |
244 |

can be separated with .Dropdown-item--separated

245 |
246 |
247 | 262 |
263 |
264 | 265 |

.Dropdown-link states

266 |

hover

267 | 280 |

focus

281 | 294 |

active

295 | 308 | 309 |

Accessibility: show an error when Dropdown-toggle doesn't have

310 |

[aria-controls]

311 |
312 |
313 | 318 |
319 |
320 |

[aria-expanded]

321 |
322 |
323 | 328 |
329 |
330 |

[aria-haspopup]

331 |
332 |
333 | 338 |
339 |
340 | 341 |

Accessibility: show an error when Dropdown-menu doesn't have

342 |

role="menu"

343 |
344 |
345 |
    349 | 352 |
353 |
354 |
355 |

[aria-hidden]

356 |
357 |
358 | 366 |
367 |
368 | 369 |

Accessibility: show an error when Dropdown-item doesn't have

370 |

role="menuitem"

371 |
372 |
373 | 382 |
383 |
384 |
385 | 386 | 417 | -------------------------------------------------------------------------------- /packages/components-dropdown/test/index.js: -------------------------------------------------------------------------------- 1 | const test = require('tape-css')(require('tape')); 2 | 3 | const styles = require('../build/test.css'); 4 | 5 | const dom = require('hyperscript'); 6 | const getStyle = require('computed-style'); 7 | const { 8 | isOffscreen, 9 | getMaxItemsWidth, 10 | getRect, 11 | prepare, 12 | select, 13 | toggleClass, 14 | toggleRtl 15 | } = require('./utils.js'); 16 | 17 | { 18 | const { 19 | dropdown, 20 | dropdownMenu, 21 | settings 22 | } = prepare(styles); 23 | 24 | test( 25 | '.Dropdown-menu', 26 | settings, 27 | (is) => { 28 | toggleClass(dropdown, 'is-expanded'); 29 | 30 | is.ok( 31 | isOffscreen(dropdownMenu), 32 | 'is offscreen by default' 33 | ); 34 | 35 | toggleClass(dropdown, 'is-expanded'); 36 | 37 | is.ok( 38 | !isOffscreen(dropdownMenu), 39 | 'is visible when expanded' 40 | ); 41 | 42 | is.equal( 43 | getMaxItemsWidth(dropdownMenu), 44 | ( 45 | getRect(dropdownMenu).width 46 | - parseInt(getStyle(dropdownMenu, 'border-left-width'), 10) 47 | - parseInt(getStyle(dropdownMenu, 'border-right-width'), 10) 48 | ), 49 | 'is as wide as the most wide Dropdown-item' 50 | ); 51 | 52 | is.equal( 53 | getRect(dropdownMenu).top, 54 | getRect(dropdown).bottom, 55 | 'is positioned at the bottom' 56 | ); 57 | 58 | is.equal( 59 | getRect(dropdownMenu).left, 60 | getRect(dropdown).left, 61 | 'is left aligned by default' 62 | ); 63 | 64 | toggleRtl(); 65 | 66 | is.equal( 67 | getRect(dropdownMenu).right, 68 | getRect(dropdown).right, 69 | 'is right aligned in RTL mode' 70 | ); 71 | 72 | toggleRtl(); 73 | 74 | is.end(); 75 | } 76 | ); 77 | } 78 | 79 | { 80 | const { 81 | dropdown, 82 | dropdownMenu, 83 | settings 84 | } = prepare(styles); 85 | 86 | toggleClass(dropdownMenu, 'Dropdown-menu--inversePlacement'); 87 | 88 | test( 89 | '.Dropdown-menu--inversePlacement', 90 | settings, 91 | (is) => { 92 | is.equal( 93 | getRect(dropdownMenu).right, 94 | getRect(dropdown).right, 95 | 'is right aligned' 96 | ); 97 | 98 | toggleRtl(); 99 | 100 | is.equal( 101 | getRect(dropdownMenu).left, 102 | getRect(dropdown).left, 103 | 'is left aligned in RTL mode' 104 | ); 105 | 106 | toggleRtl(); 107 | 108 | is.end(); 109 | } 110 | ); 111 | } 112 | 113 | { 114 | const { 115 | dropdown, 116 | dropdownMenu, 117 | settings 118 | } = prepare(styles); 119 | 120 | toggleClass(dropdownMenu, 'Dropdown-menu--upPlacement'); 121 | 122 | test( 123 | '.Dropdown-menu--upPlacement', 124 | settings, 125 | (is) => { 126 | is.equal( 127 | getRect(dropdownMenu).bottom, 128 | getRect(dropdown).top, 129 | 'is positioned at the top' 130 | ); 131 | is.end(); 132 | } 133 | ); 134 | } 135 | 136 | { 137 | const { 138 | dropdown, 139 | dropdownMenu, 140 | settings 141 | } = prepare(styles); 142 | 143 | const dropdownLink = dropdownMenu.querySelector('.Dropdown-link'); 144 | 145 | test( 146 | '.Dropdown-link', 147 | settings, 148 | (is) => { 149 | const initialBgColor = getStyle(dropdownLink, 'background-color'); 150 | 151 | [ 152 | ':active', 153 | ':focus', 154 | ':hover', 155 | 'is-active' 156 | ].forEach(state => { 157 | const description = ` 158 | is highlighted on \`${state.charAt(0) == ':' ? state : '.' + state}\` 159 | `.trim(); 160 | 161 | toggleClass(dropdownLink, state); 162 | 163 | is.notEqual( 164 | getStyle(dropdownLink, 'background-color'), 165 | initialBgColor, 166 | description 167 | ); 168 | 169 | if (state == ':active') { 170 | is.notEqual( 171 | getStyle(dropdownLink, 'box-shadow'), 172 | 'none', 173 | description 174 | ); 175 | } 176 | 177 | toggleClass(dropdownLink, state); 178 | }); 179 | 180 | is.end(); 181 | } 182 | ); 183 | } 184 | -------------------------------------------------------------------------------- /packages/components-dropdown/test/test.css: -------------------------------------------------------------------------------- 1 | @import "suitcss-components-test"; 2 | @import "../index.css"; 3 | 4 | /* Accessibility checks */ 5 | 6 | .Dropdown-toggle::after { 7 | content: "Dropdown-toggle not accessible: missing aria-controls, aria-expanded or aria-haspopup attributes"; 8 | } 9 | 10 | .Dropdown-menu::after { 11 | content: "Dropdown-menu not accessible: missing role=\"menu\" or aria-hidden attributes"; 12 | } 13 | 14 | .Dropdown-item::after { 15 | content: "Dropdown-item not accessible: missing role=\"menuitem\" attribute"; 16 | } 17 | 18 | .Dropdown-toggle::after, 19 | .Dropdown-menu::after, 20 | .Dropdown-item::after { 21 | background-color: #f00; 22 | bottom: 100%; 23 | color: #fff; 24 | display: block; 25 | padding: 0.5em; 26 | } 27 | 28 | .Dropdown-toggle[aria-controls][aria-expanded][aria-haspopup]::after, 29 | .Dropdown-menu[role="menu"][aria-hidden]::after, 30 | .Dropdown-item[role="menuitem"]::after { 31 | content: ""; 32 | display: none; 33 | } 34 | 35 | -------------------------------------------------------------------------------- /packages/components-dropdown/test/utils.js: -------------------------------------------------------------------------------- 1 | const isOffscreen = el => { 2 | const rect = getRect(el); 3 | return ( 4 | rect.bottom < 0 || 5 | rect.right < 0 || 6 | rect.left > window.innerWidth || 7 | rect.top > window.innerHeight 8 | ); 9 | }; 10 | 11 | const getMaxItemsWidth = (dropdownMenu) => ( 12 | select( 13 | '.Dropdown-item, .Dropdown-link', 14 | dropdownMenu 15 | ).reduce((max, item) => { 16 | const itemWidth = getRect(item).width; 17 | return itemWidth > max ? itemWidth : max; 18 | }, 0) 19 | ); 20 | 21 | const getRect = el => { 22 | const { 23 | top, 24 | right, 25 | bottom, 26 | left, 27 | height = 0, 28 | width = 0 29 | } = el.getBoundingClientRect(); 30 | 31 | const info = { 32 | top, 33 | right, 34 | bottom, 35 | left, 36 | height, 37 | width 38 | }; 39 | 40 | return Object.keys(info).reduce((rectInfo, k) => { 41 | rectInfo[k] = Math.round(info[k]*100)/100; 42 | return rectInfo; 43 | }, {}); 44 | }; 45 | 46 | const makeDropdown = () => { 47 | const container = document.createElement('div'); 48 | container.innerHTML = ` 49 |
50 | 51 | 59 |
60 | `; 61 | return container.children[0]; 62 | }; 63 | 64 | const select = (selector, root) => { 65 | const rootElem = ((root.nodeType === 1 || root === window) && root || document); 66 | return [].slice.call(rootElem.querySelectorAll(selector)); 67 | }; 68 | 69 | const toggleClass = (el, classname) => el.classList.toggle(classname); 70 | 71 | const toggleRtl = () => { 72 | const b = document.body; 73 | b.setAttribute('dir', b.getAttribute('dir') === 'rtl' ? 'ltr' : 'rtl'); 74 | }; 75 | 76 | const prepare = styles => { 77 | const dropdown = makeDropdown(); 78 | const dropdownMenu = dropdown.querySelector('.Dropdown-menu'); 79 | const settings = { 80 | dom: dropdown, 81 | styles 82 | }; 83 | 84 | return { 85 | dropdown, 86 | dropdownMenu, 87 | settings 88 | }; 89 | }; 90 | 91 | module.exports = { 92 | isOffscreen, 93 | getMaxItemsWidth, 94 | getRect, 95 | prepare, 96 | select, 97 | toggleClass, 98 | toggleRtl 99 | }; 100 | -------------------------------------------------------------------------------- /packages/components-form/.npmignore: -------------------------------------------------------------------------------- 1 | bower_components 2 | build 3 | components 4 | node_modules 5 | -------------------------------------------------------------------------------- /packages/components-form/.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "stylelint-config-suitcss", 3 | "rules": { 4 | "function-url-quotes": "none" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/components-form/.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | sudo: false 3 | node_js: 4 | - "4.2.2" 5 | -------------------------------------------------------------------------------- /packages/components-form/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ### HEAD 2 | 3 | ### 1.0.0 (May 03, 2016) 4 | 5 | * Rewritten and simplified codebase. 6 | * Deleted `Form--horizontal` and `Form-field--horizontal` – same results can be achieved with a layout component. 7 | * Deleted `Form-field--fit`. 8 | * Deleted `Form-inputWrapper`. 9 | * Removed default spacing for `Form-label` and `Form-message`. 10 | * The custom select icon is now an svg. 11 | * Added `Form-wrapButton`. 12 | 13 | ### 0.1.0 (Decenmber 26, 2015) 14 | 15 | * Initial public release. 16 | -------------------------------------------------------------------------------- /packages/components-form/LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) Giuseppe Gurgone 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/components-form/README.md: -------------------------------------------------------------------------------- 1 | # SUIT CSS components-form 2 | 3 | [![Build Status](https://secure.travis-ci.org/giuseppeg/suitcss-components-form.png?branch=master)](http://travis-ci.org/giuseppeg/suitcss-components-form) 4 | 5 | Component CSS for forms. Provides general styling to build hightly composable and consistent forms. 6 | 7 | Read more about [SUIT CSS](https://github.com/suitcss/suit/). 8 | 9 | ## Installation 10 | 11 | * [npm](https://www.npmjs.org/package/suitcss-components-form): `npm install suitcss-components-form` 12 | * Download: [zip](https://github.com/giuseppeg/suitcss-components-form/releases/latest) 13 | 14 | ## Features 15 | 16 | * Full-width forms 17 | * Inter-fields vertical spacing 18 | * Fields adapt to the dimensions of an ancestral context 19 | * Simple Custom Select 20 | * Basic validation states 21 | 22 | ## Available classes 23 | 24 | * `Form` core component 25 | * `Form--spaced` adds spacing between form fields 26 | * `Form-field` a form field container 27 | * `Form-field--checkbox` checkbox input modifier 28 | * `Form-field--radio` radio input modifier 29 | * `Form-label` form label text 30 | * `Form-input` the actual form input 31 | * `Form-message` an (optional) form message 32 | 33 | ## Use 34 | 35 | A form can have any number of fields. Each form field must contain a single 36 | form input, label and optionally a message. 37 | 38 | ```html 39 |
40 |
41 | 42 | 43 |

Hello there

44 |
45 |
46 | ``` 47 | 48 | ### Special form fields 49 | 50 | Basic styles for more complex form fields are included in this component. 51 | 52 | #### Buttons 53 | 54 | Buttons are not styled. You are free to style buttons as you please or use an existing component like [suitcss-button](https://github.com/suitcss/components-button). 55 | 56 | SUIT CSS Form however provides two classes: 57 | 58 | * `.Form-button` – Attaches to a nested component 59 | * `.Form-wrapButton` – Wraps a nested component 60 | 61 | Both make buttons [full-width](https://github.com/suitcss/suit/blob/master/doc/components.md#adapting-to-ancestral-context) and consistent with the `Form` styles by tweaking padding, borders and border radii only. 62 | 63 | Read more about how to [style dependencies](https://github.com/suitcss/suit/blob/master/doc/components.md#styling-dependencies). 64 | 65 | 66 | ```html 67 |
68 |
69 | 70 | 71 |
72 |
73 | 74 | 77 |
78 |
79 | 80 | 81 | 82 | 83 | 84 |
85 |
86 | ``` 87 | 88 | Tip: Use an utility class e.g. `u-inlineBlock` when you don't want full-width buttons. 89 | 90 | #### Checkbox and Radio inputs 91 | 92 | * `Form-field--checkbox` 93 | * `Form-field--radio` 94 | 95 | Checkbox and radio inputs are `Form-field` modifiers.
96 | Use one `Form-field` per `Form-input`. 97 | 98 | ```html 99 |
100 |
101 | 102 | 103 |
104 | 108 |
109 | ``` 110 | 111 | #### Custom Select 112 | 113 | Modern browsers that support the CSS3 `appearance` property 114 | get basic custom select styles without any additional class 115 | needed: 116 | 117 | * Padding, border and border radii match other inputs styles. 118 | * Custom arrow. 119 | 120 | ### Horizontal forms 121 | 122 | Use a layout component like [suitcss-grid](https://github.com/suitcss/components-grid). 123 | 124 | ### Vertical spacing between Form-field 125 | 126 | `Form--spaced` adds uniform vertical space between `Form-field`. 127 | 128 | ```html 129 |
130 |
131 | 132 | 133 |
134 |
135 | 136 | 137 |
138 |
139 | 140 | 141 |
142 |
143 | ``` 144 | 145 | N.B. Checkboxes or radio inputs are grouped and the space between each 146 | is half of the regular `Form-field` margin. 147 | 148 | ### Basic Form validation styles 149 | 150 | Basic styles for **visual** validation state classes for the `Form-field`: 151 | 152 | * `is-valid` 153 | * `is-invalid` 154 | * `is-warning` 155 | 156 | 157 | ## Configurable properties 158 | 159 | Properties names are self explainatory. 160 | 161 | #### .Form-label 162 | 163 | * `--Form-label-color` 164 | * `--Form-label-font-size` 165 | * `--Form-label-font-weight` 166 | 167 | #### .Form-input 168 | 169 | * `--Form-input-border-color` 170 | * `--Form-input-border-radius` 171 | * `--Form-input-color` 172 | * `--Form-input-font-size` 173 | * `--Form-input-padding` 174 | 175 | #### checkbox and radio 176 | 177 | * `--Form-checkradio-gutter` vertical space between the form input and the label. 178 | 179 | #### Custom <select> arrow 180 | 181 | * `--Form-select-arrow` `url(imageUrl|base64 encoded image)` – must include `url()` 182 | * `--Form-select-arrow-width` 183 | 184 | #### .Form-message 185 | 186 | * `--Form-message-color` 187 | * `--Form-message-font-size` 188 | 189 | #### .Form--spaced 190 | 191 | * `--Form--spaced-margin` 192 | 193 | ### .Form-field's State 194 | 195 | #### .Form-field.is-valid 196 | 197 | * `--Form-state-valid-border-color` 198 | * `--Form-state-valid-label-color` 199 | * `--Form-state-valid-message-color` 200 | 201 | #### .Form-field.is-invalid 202 | 203 | * `--Form-state-invalid-border-color` 204 | * `--Form-state-invalid-label-color` 205 | * `--Form-state-invalid-message-color` 206 | 207 | #### .Form-field.is-warning 208 | 209 | * `--Form-state-warning-border-color` 210 | * `--Form-state-warning-label-color` 211 | * `--Form-state-warning-message-color` 212 | 213 | ## Testing 214 | 215 | Install [Node](http://nodejs.org) (comes with npm). 216 | 217 | ``` 218 | npm install 219 | ``` 220 | 221 | To generate a build: 222 | 223 | ``` 224 | npm run build 225 | ``` 226 | 227 | To generate the testing build: 228 | 229 | ``` 230 | npm run build-test 231 | ``` 232 | 233 | To watch the files for making changes to test: 234 | 235 | ``` 236 | npm run watch 237 | ``` 238 | 239 | Basic visual tests are in `test/index.html`. 240 | 241 | ## Browser support 242 | 243 | * Google Chrome (latest) 244 | * Opera (latest) 245 | * Firefox (latest) 246 | * Safari 5.1+ 247 | * Internet Explorer 8+ 248 | * Android 2.2+ 249 | * iOS 5.1+ 250 | * Windows Phone 8.1 251 | -------------------------------------------------------------------------------- /packages/components-form/index.css: -------------------------------------------------------------------------------- 1 | @import "./lib/form.css"; 2 | -------------------------------------------------------------------------------- /packages/components-form/index.js: -------------------------------------------------------------------------------- 1 | require('./lib/form.css'); 2 | -------------------------------------------------------------------------------- /packages/components-form/lib/form.css: -------------------------------------------------------------------------------- 1 | /** @define Form */ 2 | 3 | :root { 4 | 5 | /* .Form-label properties */ 6 | 7 | --Form-label-color: inherit; 8 | --Form-label-font-size: inherit; 9 | --Form-label-font-weight: bold; 10 | 11 | /* .Form-input properties */ 12 | 13 | --Form-input-border-color: currentColor; 14 | --Form-input-border-radius: 3px; 15 | --Form-input-color: inherit; 16 | --Form-input-font-size: inherit; 17 | --Form-input-padding: 0.5em; 18 | 19 | /* checkbox and radio properties */ 20 | 21 | --Form-checkradio-gutter: 0.5em; 22 | 23 | /* Custom . 121 | * 122 | * 1. Change the `appearance` so that padding and custom arrow applies. 123 | */ 124 | 125 | @supports (appearance: none) { 126 | 127 | /* postcss-bem-linter: ignore */ 128 | 129 | select.Form-input { 130 | appearance: none; /* 1 */ 131 | 132 | /* Custom arrow styles. */ 133 | 134 | background-image: var(--Form-select-arrow); 135 | background-position: right var(--Form-input-padding) center; 136 | background-repeat: no-repeat; 137 | background-size: var(--Form-select-arrow-width); 138 | padding-right: 139 | calc( 140 | var(--Form-select-arrow-width) + (2 * var(--Form-input-padding)) 141 | ); 142 | } 143 | } 144 | 145 | /** 146 | * Range input resets. 147 | */ 148 | 149 | .Form-input[type="range"] { 150 | border: 0; 151 | padding: 0; 152 | } 153 | 154 | /** 155 | * Form field message. 156 | */ 157 | 158 | .Form-message { 159 | color: var(--Form-message-color); 160 | display: block; 161 | font-size: var(--Form-message-font-size); 162 | font-weight: var(--Form-label-font-weight) \9; 163 | margin: 0; 164 | } 165 | 166 | /** 167 | * Form button 168 | * and form 109 | 110 |
111 | 112 | 113 | 114 |
115 | 116 | 117 |

adapt to the ancestor `width` and/or `display` property.

118 |
119 |
120 |
121 | 122 |
123 |
124 | 125 | 126 | 127 |
128 |
129 |
130 | 131 |

.Form--spaced

132 |

renders full-width form fields with uniform vertical space

133 |
134 |
135 | 142 | 149 |
150 | 151 | 152 | 153 |
154 |
155 |
156 | 157 |

collapses the first Form-field margins

158 |
159 |

An element with margin-bottom.

160 |
161 | 168 | 175 |
176 |
177 | 178 |

Form-field state

179 |

highlights valid fields

180 |
181 |
182 | 189 |
190 |
191 |

highlights invalid fields

192 |
193 |
194 | 201 |
202 |
203 |

highlights warning fields

204 |
205 |
206 | 213 |
214 |
215 | -------------------------------------------------------------------------------- /packages/components-form/test/test.css: -------------------------------------------------------------------------------- 1 | @import "suitcss-components-test"; 2 | @import "../index.css"; 3 | -------------------------------------------------------------------------------- /packages/components-icon/.npmignore: -------------------------------------------------------------------------------- 1 | bower_components 2 | build 3 | components 4 | node_modules 5 | -------------------------------------------------------------------------------- /packages/components-icon/.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "stylelint-config-suitcss" 3 | } 4 | -------------------------------------------------------------------------------- /packages/components-icon/.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | sudo: false 3 | node_js: 4 | - "4" 5 | - "5" 6 | -------------------------------------------------------------------------------- /packages/components-icon/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ### HEAD 2 | 3 | ### 0.1.0 (Jun 4, 2016) 4 | 5 | * Initial public release. 6 | -------------------------------------------------------------------------------- /packages/components-icon/LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) Giuseppe Gurgone 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/components-icon/README.md: -------------------------------------------------------------------------------- 1 | # SUIT Icon 2 | 3 | [![Build Status](https://secure.travis-ci.org/giuseppeg/components-icon.svg?branch=master)](http://travis-ci.org/giuseppeg/suitcss-components-icon) 4 | 5 | A SUIT component for SVG Icons 6 | 7 | Read more about [SUIT's design principles](https://github.com/suitcss/suit/). 8 | 9 | ## Installation 10 | 11 | * [npm](https://npmjs.org/): `npm install suitcss-components-icon` 12 | * Download: [releases](https://github.com/giuseppeg/suitcss-components-icon/releases/latest) 13 | 14 | ## Available classes 15 | 16 | * `Icon` - The core class 17 | 18 | ## Usage 19 | 20 | ```html 21 | ... 22 | ``` 23 | 24 | ## Colors 25 | 26 | By default the Icon's `fill` is set to [`currentColor`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentColor_keyword). 27 | 28 | There are two ways to change the Icon's color: 29 | 30 | * Override its `fill` property 31 | * Set its parent's `color` to something else 32 | 33 | N.B. you must strip out all of the `fill` attributes from your SVG images otherwise what described above won't work (including default color). 34 | 35 | ## Scaling 36 | 37 | There are two ways to scale Icons: 38 | 39 | * Override its `height` 40 | * Override the `font-size` of the Icon or its parent 41 | 42 | ## Alignment 43 | 44 | By default the bottom of the Icons is aligned with the bottom of the parent element's font. 45 | 46 | Different alignments can be achieved with flexbox or by overriding the Icon's `vertical-align` property. 47 | Read More about [vertical alignment](http://christopheraue.net/2014/03/05/vertical-align/). 48 | 49 | ## Testing 50 | 51 | Install [Node](http://nodejs.org) (comes with npm). 52 | 53 | ``` 54 | npm install 55 | ``` 56 | 57 | To generate a build: 58 | 59 | ``` 60 | npm run build 61 | ``` 62 | 63 | To generate the testing build. 64 | 65 | ``` 66 | npm run build-test 67 | ``` 68 | 69 | Basic visual tests are in `test/index.html`. 70 | 71 | To pre-process: 72 | 73 | ``` 74 | npm run preprocess 75 | ``` 76 | 77 | To pre-process the tests: 78 | 79 | ``` 80 | npm run preprocess-test 81 | ``` 82 | 83 | ## Browser support 84 | 85 | * Google Chrome 4+ 86 | * Opera 10.1+ 87 | * Firefox 3+ 88 | * Safari 3.2+ 89 | * Internet Explorer 9+ 90 | * Android Browser 3+ 91 | -------------------------------------------------------------------------------- /packages/components-icon/index.css: -------------------------------------------------------------------------------- 1 | @import "./lib/icon.css"; 2 | 3 | -------------------------------------------------------------------------------- /packages/components-icon/lib/icon.css: -------------------------------------------------------------------------------- 1 | /** @define Icon */ 2 | 3 | .Icon { 4 | display: inline-block; 5 | fill: currentColor; 6 | height: 1em; 7 | max-width: 100%; 8 | user-select: none; 9 | vertical-align: text-bottom; 10 | } 11 | -------------------------------------------------------------------------------- /packages/components-icon/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "suitcss-components-icon", 3 | "description": "A SUIT component for SVG Icons", 4 | "version": "0.1.1", 5 | "license": "MIT", 6 | "style": "index.css", 7 | "files": [ 8 | "index.css", 9 | "index.js", 10 | "lib" 11 | ], 12 | "devDependencies": { 13 | "stylelint": "^6.8.0", 14 | "stylelint-config-suitcss": "^6.0.0", 15 | "suitcss-components-test": "*", 16 | "suitcss-preprocessor": "^2.0.0" 17 | }, 18 | "scripts": { 19 | "build": "npm run setup && npm run preprocess", 20 | "build-test": "npm run setup && npm run preprocess-test", 21 | "preprocess": "suitcss index.css build/build.css", 22 | "preprocess-test": "suitcss -i test test/test.css build/test.css", 23 | "setup": "npm install", 24 | "watch": "npm run preprocess-test -- -w -v", 25 | "test": "suitcss -c test/config.json index.css build/output.css && rm build/output.css" 26 | }, 27 | "repository": { 28 | "type": "git", 29 | "url": "git://github.com/giuseppeg/suitcss-components-icon.git" 30 | }, 31 | "keywords": [ 32 | "browser", 33 | "css-components", 34 | "components-icon", 35 | "suitcss", 36 | "style" 37 | ] 38 | } 39 | -------------------------------------------------------------------------------- /packages/components-icon/test/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "lint": true, 3 | "postcss-reporter": { 4 | "throwError": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/components-icon/test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Icon [component] - suit 4 | 5 | 6 |
7 |

SUIT CSS: Icon tests

8 | 9 |

.Icon

10 |

renders

11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 |

inherits the parent `color`

24 |
25 | skiing by Gem.icons from the Noun Project 26 |
27 |

scales with the text

28 |
29 | 30 | skiing 31 | 32 | 33 | skiing 34 | 35 |
36 |

is aligned with `text-bottom`

37 |
38 |
39 | skiing 40 |
41 |
42 | skiing 43 |
44 |
45 |
46 | -------------------------------------------------------------------------------- /packages/components-icon/test/test.css: -------------------------------------------------------------------------------- 1 | @import "suitcss-components-test"; 2 | @import "../index.css"; 3 | -------------------------------------------------------------------------------- /packages/components-module/.npmignore: -------------------------------------------------------------------------------- 1 | bower_components 2 | build 3 | components 4 | node_modules 5 | -------------------------------------------------------------------------------- /packages/components-module/.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "stylelint-config-suitcss" 3 | } 4 | -------------------------------------------------------------------------------- /packages/components-module/.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | sudo: false 3 | node_js: 4 | - "4" 5 | - "5" 6 | -------------------------------------------------------------------------------- /packages/components-module/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ### HEAD 2 | 3 | ### 0.1.0 (June 7, 2016) 4 | 5 | * Initial public release. 6 | -------------------------------------------------------------------------------- /packages/components-module/LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) Giuseppe Gurgone 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/components-module/README.md: -------------------------------------------------------------------------------- 1 | # SUIT Module 2 | 3 | [![Build Status](https://secure.travis-ci.org/giuseppeg/components-module.svg?branch=master)](http://travis-ci.org/giuseppeg/components-module) 4 | 5 | A SUIT component for OOCSS Module / Section layouts – inspired by Nicole Sullivan's [Module component](https://github.com/stubbornella/oocss/wiki/standard-module-format). 6 | 7 | Read more about [SUIT's design principles](https://github.com/suitcss/suit/). 8 | 9 | ## Installation 10 | 11 | * [npm](https://npmjs.org/): `npm install suitcss-components-module` 12 | * Download: [releases](https://github.com/giuseppeg/components-module/releases/latest) 13 | 14 | ## Available classes 15 | 16 | * `Module` - The core class 17 | * `Module-block` - A block unit, can contain headers, content, footers etc. 18 | * `Module-block--separated` - Separates a Module-block from the Module-block above 19 | * `Module--withGutter[Sm|Lg]` – Adds vertical spacing between `Module-block` where Sm = small, Lg = large 20 | * `Module--withPadding[Sm|Lg]` – Adds inner spacing to each `Module-block` where Sm = small, Lg = large 21 | 22 | ## Configurable variables 23 | 24 | Gutter is the vertical space between Module-block(s) 25 | 26 | ```css 27 | --Module-gutter 28 | --Module-gutter-sm 29 | --Module-gutter-lg 30 | ``` 31 | 32 | Padding for the Module-block 33 | 34 | ```css 35 | --Module-padding 36 | --Module-padding-sm 37 | --Module-padding-lg 38 | ``` 39 | 40 | Separator border for the Module-block 41 | 42 | ```css 43 | --Module-block-separated-borderColor 44 | ``` 45 | 46 | ## Usage 47 | 48 | ```html 49 |
50 |
...
51 |
...
52 | ... 53 |
54 | ``` 55 | 56 | See the [test](./test/index.html) file for more examples. 57 | 58 | ## Testing 59 | 60 | Install [Node](http://nodejs.org) (comes with npm). 61 | 62 | ``` 63 | npm install 64 | ``` 65 | 66 | To generate a build: 67 | 68 | ``` 69 | npm run build 70 | ``` 71 | 72 | To generate the testing build. 73 | 74 | ``` 75 | npm run build-test 76 | ``` 77 | 78 | Basic visual tests are in `test/index.html`. 79 | 80 | To pre-process: 81 | 82 | ``` 83 | npm run preprocess 84 | ``` 85 | 86 | To pre-process the tests: 87 | 88 | ``` 89 | npm run preprocess-test 90 | ``` 91 | 92 | ## Browser support 93 | 94 | * Google Chrome (latest) 95 | * Opera (latest) 96 | * Firefox 4+ 97 | * Safari 5+ 98 | * Internet Explorer 8+ 99 | -------------------------------------------------------------------------------- /packages/components-module/index.css: -------------------------------------------------------------------------------- 1 | @import "./lib/module.css"; 2 | 3 | -------------------------------------------------------------------------------- /packages/components-module/lib/module.css: -------------------------------------------------------------------------------- 1 | /** @define Module */ 2 | 3 | :root { 4 | 5 | /* gutter is the vertical space between Module-block(s) */ 6 | --Module-gutter: 1rem; 7 | --Module-gutter-sm: 0.5rem; 8 | --Module-gutter-lg: 3rem; 9 | 10 | /* padding for the Module-block */ 11 | --Module-padding: 1rem; 12 | --Module-padding-sm: 0.5rem; 13 | --Module-padding-lg: 3rem; 14 | 15 | /* Separator border for the Module-block */ 16 | --Module-block-separated-borderColor: #ccc; 17 | } 18 | 19 | .Module, 20 | .Module-block { 21 | margin: 0; 22 | padding: 0; 23 | } 24 | 25 | /** 26 | * Modifier: Module-block--separated 27 | * Separates a Module-block from the Module-block above 28 | */ 29 | 30 | .Module-block--separated { 31 | border-top: 1px solid var(--Module-block-separated-borderColor); 32 | } 33 | 34 | /** 35 | * Modifier: Module--withGutter[Sm|Lg] where Sm = small, Lg = large 36 | * Adds vertical spacing between Module-block 37 | */ 38 | 39 | .Module--withGutter > .Module-block + .Module-block { 40 | margin-top: var(--Module-gutter); 41 | } 42 | 43 | .Module--withGutterSm > .Module-block + .Module-block { 44 | margin-top: var(--Module-gutter-sm); 45 | } 46 | 47 | .Module--withGutterLg > .Module-block + .Module-block { 48 | margin-top: var(--Module-gutter-lg); 49 | } 50 | 51 | /** 52 | * Modifier: Module--withPadding[Sm|Lg] where Sm = small, Lg = large 53 | * Adds inner spacing to each Module-block 54 | */ 55 | 56 | .Module--withPadding > .Module-block { 57 | padding: var(--Module-padding); 58 | } 59 | 60 | .Module--withPaddingSm > .Module-block { 61 | padding: var(--Module-padding-sm); 62 | } 63 | 64 | .Module--withPaddingLg > .Module-block { 65 | padding: var(--Module-padding-lg); 66 | } 67 | 68 | -------------------------------------------------------------------------------- /packages/components-module/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "suitcss-components-module", 3 | "description": "A SUIT component for OOCSS Module / Section layouts", 4 | "version": "0.1.0", 5 | "style": "index.css", 6 | "files": [ 7 | "index.css", 8 | "index.js", 9 | "lib" 10 | ], 11 | "devDependencies": { 12 | "stylelint": "^6.8.0", 13 | "stylelint-config-suitcss": "^6.0.0", 14 | "suitcss-components-test": "*", 15 | "suitcss-preprocessor": "^2.0.0" 16 | }, 17 | "scripts": { 18 | "build": "npm run setup && npm run preprocess", 19 | "build-test": "npm run setup && npm run preprocess-test", 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": "suitcss -c test/config.json index.css build/output.css && rm build/output.css" 25 | }, 26 | "repository": { 27 | "type": "git", 28 | "url": "git://github.com/giuseppeg/components-module.git" 29 | }, 30 | "keywords": [ 31 | "browser", 32 | "css-components", 33 | "OOCSS", 34 | "css card", 35 | "suitcss", 36 | "style" 37 | ] 38 | } 39 | -------------------------------------------------------------------------------- /packages/components-module/test/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "lint": true, 3 | "postcss-reporter": { 4 | "throwError": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/components-module/test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Module [component] - suit 4 | 5 | 11 | 12 |
13 |

SUIT CSS: Module tests

14 | 15 |

.Module

16 |

renders

17 |
18 |
19 |
20 | Header 21 |
22 |
23 | Content 24 |
25 |
26 | Footer 27 |
28 |
29 |
30 | 31 |

.Module--withGutter

32 |

adds vertical space between each `.Module-block`

33 |
34 |
35 |
36 | Header 37 |
38 |
39 | Content 40 |
41 |
42 | Footer 43 |
44 |
45 |
46 |

.Module--withGutterSm

47 |
48 |
49 |
50 | Header 51 |
52 |
53 | Content 54 |
55 |
56 | Footer 57 |
58 |
59 |
60 |

.Module--withGutterLg

61 |
62 |
63 |
64 | Header 65 |
66 |
67 | Content 68 |
69 |
70 | Footer 71 |
72 |
73 |
74 | 75 |

.Module--withPadding

76 |

adds inner space to each `.Module-block`

77 |
78 |
79 |
80 | Header 81 |
82 |
83 | Content 84 |
85 |
86 | Footer 87 |
88 |
89 |
90 |

.Module--withPaddingSm

91 |
92 |
93 |
94 | Header 95 |
96 |
97 | Content 98 |
99 |
100 | Footer 101 |
102 |
103 |
104 |

.Module--withPaddingLg

105 |
106 |
107 |
108 | Header 109 |
110 |
111 | Content 112 |
113 |
114 | Footer 115 |
116 |
117 |
118 | 119 |

.Module-block--separated

120 |

adds separator at the top

121 |
122 |
123 |
124 | Header 125 |
126 |
127 | Content 128 |
129 |
130 | Footer 131 |
132 |
133 |
134 |

(showcase) separated Module-block

135 |
136 |
137 |
138 | Header 139 |
140 |
141 | Content 142 |
143 |
144 | Footer 145 |
146 |
147 |
148 | 149 |

Nested Module

150 |

modifiers don't affect nested Module

151 |
152 |
153 |
154 |
155 |
156 | Header 157 |
158 |
159 | Content 160 |
161 | 164 |
165 |
166 |
167 |
168 |
169 | -------------------------------------------------------------------------------- /packages/components-module/test/test.css: -------------------------------------------------------------------------------- 1 | @import "suitcss-components-test"; 2 | @import "../index.css"; 3 | -------------------------------------------------------------------------------- /scripts/shared-dependencies.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | var assign = require('object-assign'); 4 | var fs = require('fs'); 5 | var path = require('path'); 6 | 7 | var basePath = path.join(__dirname, '..'); 8 | 9 | function getPackagesJson(basePath, fileList) { 10 | var paths = fileList 11 | .filter(function (p) { 12 | return path.basename(p) === 'package.json'; 13 | }) 14 | .map(function (p) { 15 | return p.replace(/\.\//, ''); 16 | }); 17 | 18 | return paths.map(function (pkgPath) { 19 | return { 20 | path: pkgPath, 21 | content: require(path.join(basePath, pkgPath)) 22 | }; 23 | }); 24 | } 25 | 26 | var globalPackageJson = getPackagesJson( 27 | basePath, 28 | ['package.json'] 29 | )[0]; 30 | 31 | var packagesJson = getPackagesJson( 32 | basePath, 33 | process.argv.splice(2, process.argv.length) 34 | ); 35 | 36 | if (!packagesJson.length) { 37 | throw new Error('You must provide a list of paths to `package.json` files.'); 38 | } 39 | 40 | function getNewDeps(deps, globDeps) { 41 | return Object.keys(deps) 42 | .reduce(function (dest, depName) { 43 | var depVer = deps[depName]; 44 | if ( 45 | globDeps[depName] && 46 | globDeps[depName] != depVer 47 | ) { 48 | dest.local[depName] = depVer; 49 | } else { 50 | dest.glob[depName] = depVer; 51 | } 52 | return dest; 53 | }, { glob: {}, local: {} }); 54 | } 55 | 56 | var resolved = packagesJson 57 | .reduce(function (fin, pkgInfo) { 58 | var pkgPath = pkgInfo.path; 59 | var pkgJson = pkgInfo.content; 60 | var deps = pkgJson.dependencies || {}; 61 | var devDeps = pkgJson.devDependencies || {}; 62 | 63 | var newDeps = getNewDeps(deps, fin.glob.deps); 64 | var newDevDeps = getNewDeps(devDeps, fin.glob.devDeps); 65 | var newPkgJson = assign({}, pkgJson); 66 | newPkgJson.dependencies = newDeps.local; 67 | newPkgJson.devDependencies = newDevDeps.local; 68 | 69 | return { 70 | glob: { 71 | deps: assign({}, fin.glob.deps, newDeps.glob), 72 | devDeps: assign({}, fin.glob.devDeps, newDevDeps.glob) 73 | }, 74 | local: fin.local.concat([{ 75 | path: pkgPath, 76 | content: newPkgJson 77 | }]) 78 | }; 79 | }, { 80 | glob: { 81 | deps: assign({}, globalPackageJson.content.dependencies), 82 | devDeps: assign({}, globalPackageJson.content.devDependencies) 83 | }, 84 | local: [] 85 | }); 86 | 87 | // root package.json 88 | 89 | var newGlobalPackageJson = assign({}, globalPackageJson); 90 | newGlobalPackageJson.content.dependencies = resolved.glob.deps; 91 | newGlobalPackageJson.content.devDependencies = resolved.glob.devDeps; 92 | 93 | fs.writeFile( 94 | path.join(basePath, newGlobalPackageJson.path), 95 | JSON.stringify(newGlobalPackageJson.content) 96 | ); 97 | 98 | // packages/**/package.json 99 | 100 | resolved.local.forEach(function (pkgInfo) { 101 | var pkgPath = pkgInfo.path; 102 | var pkgJson = pkgInfo.content; 103 | 104 | fs.writeFile( 105 | path.join(basePath, pkgPath), 106 | JSON.stringify(pkgJson) 107 | ); 108 | }) 109 | --------------------------------------------------------------------------------