├── Organisms ├── _SiteFooter.scss └── _SiteHeader.scss ├── .gitignore ├── _Framework ├── _Index.scss ├── _Head.scss ├── _MediaQueries.scss ├── _Mixins.scss ├── _Functions.scss └── _Normalize.scss ├── Atoms ├── _Quote.scss ├── _Table.scss ├── _Form.scss ├── _Ruler.scss ├── _Label.scss ├── _Code.scss ├── _Base.scss ├── _Link.scss ├── _List.scss ├── _Alert.scss ├── _Typography.scss ├── _Heading.scss ├── _Media.scss ├── _Input.scss └── _Button.scss ├── .travis.yml ├── Molecules ├── _ButtonGroup.scss ├── _Grid.scss ├── _Form.scss ├── _Navigation.scss ├── _Spinner.scss ├── _Flag.scss ├── _FlexibleEmbed.scss ├── _Media.scss └── _Table.scss ├── Utilities ├── _Display.scss ├── _Layout.scss ├── _Brand.scss ├── _Animations.scss ├── _Typography.scss ├── _Spacings.scss └── _Widths.scss ├── Templates └── _Print.scss ├── package.json ├── Main.scss ├── README.md ├── CHANGELOG.md └── _Variables.scss /Organisms/_SiteFooter.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Site Footer 3 | */ 4 | 5 | .siteFooter { } -------------------------------------------------------------------------------- /Organisms/_SiteHeader.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Site Header 3 | */ 4 | 5 | .siteHeader { } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Installed Node dependencies. 2 | node_modules 3 | 4 | # Future gh-pages and compiled files. 5 | _Tests/ 6 | -------------------------------------------------------------------------------- /_Framework/_Index.scss: -------------------------------------------------------------------------------- 1 | @import "_Functions"; 2 | @import "_Mixins"; 3 | @import "_MediaQueries"; 4 | @import "Head"; 5 | @import "Normalize"; 6 | -------------------------------------------------------------------------------- /Atoms/_Quote.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Quotes 3 | */ 4 | 5 | q { 6 | // Sets consistent quote types. 7 | quotes: "\201C" "\201D" "\2018" "\2019"; 8 | } 9 | 10 | blockquote { 11 | margin: 0 0 rs($basic-spacing); 12 | } 13 | -------------------------------------------------------------------------------- /Atoms/_Table.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Tables 3 | */ 4 | 5 | table { 6 | max-width: 100%; 7 | border-collapse: collapse; 8 | border-spacing: 0; 9 | } 10 | 11 | th { 12 | text-align: $start; 13 | vertical-align: bottom; 14 | } 15 | 16 | td { 17 | vertical-align: top; 18 | } 19 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 0.10 4 | 5 | before_install: 6 | - gem update --system 7 | - gem install sass 8 | 9 | notifications: 10 | email: false 11 | 12 | branches: 13 | only: 14 | - development 15 | 16 | cache: 17 | directories: 18 | - node_modules -------------------------------------------------------------------------------- /Atoms/_Form.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Form 3 | */ 4 | 5 | /* 6 | * Form wrapper elements 7 | */ 8 | form { 9 | margin: 0; 10 | } 11 | 12 | fieldset { 13 | // Reset border, margin, and padding to define a consistend style accross all browsers. 14 | border: 0; 15 | margin: 0; 16 | padding: 0; 17 | } -------------------------------------------------------------------------------- /_Framework/_Head.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Declarations which should be put at the top of the document e.g. @font-face declarations and CSS viewports. 3 | */ 4 | 5 | /* 6 | * Global border-box 7 | */ 8 | html { 9 | box-sizing: border-box; 10 | } 11 | 12 | * { 13 | &, 14 | &:before, 15 | &:after { 16 | box-sizing: inherit; 17 | } 18 | } -------------------------------------------------------------------------------- /Atoms/_Ruler.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Rulers 3 | */ 4 | 5 | hr { 6 | // Address differences between Firefox and other browsers. 7 | -moz-box-sizing: content-box; 8 | box-sizing: content-box; 9 | 10 | display: block; 11 | height: 0; 12 | padding: 0; 13 | margin: rs($basic-spacing * 2) 0 rs($basic-spacing * 2); 14 | border: 0; 15 | border-top: 1px $basic-border-style $basic-border-color; 16 | } 17 | -------------------------------------------------------------------------------- /Molecules/_ButtonGroup.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Button group 3 | * Displays a set of buttons in a group. 4 | */ 5 | 6 | .btnGroup { 7 | @include u-cf(); 8 | } 9 | 10 | .btnGroup__btn { 11 | float: $start; 12 | border-radius: 0; 13 | border-right: 0; 14 | 15 | &:first-child { 16 | border-radius: $brand-border-radius 0 0 $brand-border-radius; 17 | } 18 | &:last-child { 19 | border-radius: 0 $brand-border-radius $brand-border-radius 0; 20 | border-right: 1px solid; 21 | } 22 | } -------------------------------------------------------------------------------- /Molecules/_Grid.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Grids 3 | */ 4 | 5 | $grid-gutter: $column-gutter / 2; 6 | 7 | /* 8 | * Grid object which is based on the util width classes. 9 | */ 10 | .g, 11 | .grid { 12 | margin-left: -#{$grid-gutter}; 13 | margin-right: -#{$grid-gutter}; 14 | 15 | @include u-cf(); 16 | } 17 | 18 | /* 19 | * Grid item, floats itself into the grid and depends on the u-w#/# util classes. 20 | */ 21 | .gi, 22 | .grid__item { 23 | float: $start; 24 | padding-left: $grid-gutter; 25 | padding-right: $grid-gutter; 26 | } 27 | -------------------------------------------------------------------------------- /Atoms/_Label.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Form elements 3 | */ 4 | 5 | /* 6 | * Base styling for all labels. 7 | */ 8 | label { 9 | display: block; 10 | font-weight: $regular; 11 | font-size: rs(14, $unit: rem); 12 | 13 | &[for] { 14 | cursor: pointer; 15 | } 16 | } 17 | 18 | /* 19 | * Base styling for all legends. 20 | */ 21 | legend { 22 | display: block; 23 | width: 100%; 24 | padding: 0; 25 | margin-bottom: rs($basic-spacing); 26 | border-bottom: 1px $basic-border-style $basic-border-color; 27 | font-size: rs($base-font-size + 4, $unit: rem); 28 | } 29 | -------------------------------------------------------------------------------- /Atoms/_Code.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Code & pre-formatted text elements 3 | */ 4 | 5 | code, 6 | kbd, 7 | pre, 8 | samp { 9 | // Corrects font family set oddly in Safari 5 and Chrome. 10 | font-family: $mono-font-family; 11 | font-size: .8em; 12 | } 13 | 14 | code { 15 | background: color-adjust($content-background, 5%); 16 | padding: .3em .5em; 17 | border-radius: 2px; 18 | 19 | pre & { 20 | padding: 0; 21 | } 22 | } 23 | 24 | pre { 25 | // Improves readability of pre-formatted text in all browsers. 26 | white-space: pre-wrap; 27 | margin: 0 0 rs($basic-spacing); 28 | } 29 | -------------------------------------------------------------------------------- /Atoms/_Base.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Base and high-level wrapper elements 3 | */ 4 | 5 | body { 6 | $line-height: $base-line-height/$base-font-size; 7 | $font-size: $base-font-size / 16 * 100%; 8 | // Remove default margin. 9 | margin: 0; 10 | 11 | font: $base-font-weight #{$font-size }/#{$line-height} $base-font-family; 12 | text-align: $start; 13 | color: $base-text-color; 14 | background: $body-background; 15 | } 16 | 17 | .siteWrapper { 18 | position: relative; 19 | width: $layout-width; 20 | max-width: $layout-max-width; 21 | 22 | @if $centered-layout { 23 | margin-left: auto; 24 | margin-right: auto; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /Molecules/_Form.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Form 3 | */ 4 | 5 | /* 6 | * The base class for all forms. 7 | */ 8 | .form { 9 | margin-bottom: rs($basic-spacing, $unit: rem); 10 | } 11 | .form__item { 12 | margin-bottom: rs($half-spacing, $unit: rem); 13 | } 14 | 15 | /* 16 | * Display a `
` and all it's content in a horizontal order. 17 | */ 18 | .form--inline { 19 | label, 20 | button, 21 | input, 22 | select, 23 | textarea, 24 | .form__item { 25 | display: inline-block; 26 | margin-bottom: 0; 27 | vertical-align: middle; 28 | } 29 | 30 | .form__item { 31 | margin-#{$end}: 1em; 32 | } 33 | 34 | label { 35 | margin-#{$end}: .3em; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /Molecules/_Navigation.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Navigations 3 | */ 4 | 5 | /* 6 | * Throws a list into horizontal mode. 7 | */ 8 | .nav { 9 | @include u-resetList(); 10 | 11 | > li { 12 | display: inline-block; 13 | 14 | > a { 15 | display: block; 16 | 17 | @include u-linkReset(); 18 | } 19 | } 20 | } 21 | 22 | /* 23 | * Throws a list into vertical mode. 24 | */ 25 | .nav--stacked { 26 | > li { 27 | display: list-item; 28 | } 29 | } 30 | 31 | /* 32 | * Forces a list to occupy 100% of the available width of it's parent. 33 | */ 34 | .nav--fit { 35 | display: table; 36 | width: 100%; 37 | 38 | > li { 39 | display: table-cell; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /Utilities/_Display.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Display utilities 3 | */ 4 | 5 | /* 6 | * Display the target as an block element. 7 | */ 8 | @mixin u-isBlock() { 9 | display: block !important; 10 | } 11 | .u-isBlock { 12 | @include u-isBlock(); 13 | } 14 | 15 | /* 16 | * Hide from both screenreaders and browsers: http://www.h5bp.com/u 17 | */ 18 | @mixin u-isHidden() { 19 | display: none !important; 20 | visibility: hidden; 21 | } 22 | .u-isHidden { 23 | @include u-isHidden(); 24 | } 25 | 26 | /* 27 | * Hide visually and from screenreaders, but maintain layout. 28 | */ 29 | @mixin u-isInvisible() { 30 | visibility: hidden; 31 | } 32 | .u-isInvisible { 33 | @include u-isInvisible(); 34 | } -------------------------------------------------------------------------------- /Utilities/_Layout.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Layout utilities 3 | */ 4 | 5 | /* 6 | * Floats the element to the right boundary. 7 | */ 8 | @mixin u-floatRight() { 9 | float: $end; 10 | } 11 | .u-floatRight { 12 | @include u-floatRight(); 13 | } 14 | 15 | /* 16 | * Floats the element to the left boundary. 17 | */ 18 | @mixin u-floatLeft() { 19 | float: $start; 20 | } 21 | .u-floatLeft { 22 | @include u-floatLeft(); 23 | } 24 | 25 | /* 26 | * Clearfix for floated elements. 27 | */ 28 | @mixin u-cf() { 29 | &:before, 30 | &:after { 31 | content: ''; 32 | display: table; 33 | } 34 | &:after { 35 | clear: both; 36 | } 37 | } 38 | .u-cf, 39 | .u-clearfix { 40 | @include u-cf(); 41 | } -------------------------------------------------------------------------------- /Atoms/_Link.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Anchors 3 | */ 4 | 5 | /* 6 | * Base styling for all anchors/links. 7 | */ 8 | a { 9 | color: $link-color; 10 | text-decoration: none; 11 | 12 | // Removes the gray background color from active links in IE 10. 13 | background: transparent; 14 | 15 | &:hover, 16 | &:active, 17 | &:focus { 18 | text-decoration: underline; 19 | } 20 | 21 | &:active, 22 | &:hover { 23 | // Improves readability when focused and also mouse hovered in all browsers. 24 | outline: 0; 25 | } 26 | 27 | // Increasing the clickable area of inline links inside a paragraph. 28 | p & { 29 | position: relative; 30 | margin: -.33em; 31 | padding: .33em; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /Atoms/_List.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Lists 3 | */ 4 | 5 | menu, 6 | ol, 7 | ul { 8 | padding: 0 0 0 rs(40); 9 | margin: 0 0 rs($basic-spacing); 10 | } 11 | 12 | li > ul, 13 | li > ol { 14 | // Remove vertical spacing from nested lists. 15 | margin-bottom: 0; 16 | } 17 | 18 | /** 19 | * Definitions 20 | */ 21 | dl { 22 | margin: 0 0 rs($basic-spacing); 23 | } 24 | 25 | /* 26 | * Displays the definition element in a horizontal order. 27 | */ 28 | .dl--horizontal { 29 | @include u-cf(); 30 | 31 | dt { 32 | width: 19%; 33 | float: $start; 34 | overflow: hidden; 35 | clear: $start; 36 | text-align: $end; 37 | 38 | @include u-textBreak(); 39 | } 40 | 41 | dd { 42 | margin-#{$start}: 21%; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /Molecules/_Spinner.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Spinner (Displays a loading animation) 3 | */ 4 | 5 | .spinner { 6 | position: relative; 7 | display: inline-block; 8 | width: 31px; 9 | height: 7px; 10 | vertical-align: middle; 11 | text-align: center; 12 | } 13 | .spinner--invert {} 14 | 15 | .spinner__dot { 16 | display: inline-block; 17 | width: 7px; 18 | height: 7px; 19 | vertical-align: top; 20 | border-radius: 50%; 21 | background: color-adjust($content-background, 20%); 22 | 23 | animation: Pulsate 1s infinite ease-in-out; 24 | 25 | &:first-child { 26 | animation-delay: -0.16s; 27 | } 28 | &:last-child { 29 | animation-delay: .16s; 30 | } 31 | 32 | .spinner--invert > & { 33 | background: color-adjust($base-text-color, 100%); 34 | } 35 | } -------------------------------------------------------------------------------- /Molecules/_Flag.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Flag - Displays text like content vertically centered besides an image. 3 | */ 4 | 5 | /* 6 | * The base class for the Flag wrapper. 7 | */ 8 | .flag { 9 | display: table; 10 | width: 100%; 11 | } 12 | 13 | /* 14 | * The image wrapper cell. 15 | */ 16 | .flag__image { 17 | display: table-cell; 18 | vertical-align: middle; 19 | padding-right: $column-gutter; 20 | 21 | > img { 22 | display: block; 23 | max-width: none; 24 | } 25 | } 26 | .flag__image--rev { 27 | padding-right: 0; 28 | padding-left: $column-gutter; 29 | } 30 | 31 | /* 32 | * The content wrapper cell. 33 | */ 34 | .flag__body { 35 | display: table-cell; 36 | vertical-align: middle; 37 | width: 100%; 38 | 39 | // Removes the bottom margin of the last element. 40 | &, 41 | > :last-child { 42 | margin-bottom: 0; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /Atoms/_Alert.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Alert 3 | */ 4 | 5 | /* 6 | * The base class for all alerts. 7 | */ 8 | @mixin alert() { 9 | padding: rs($half-spacing); 10 | margin-bottom: rs($basic-spacing); 11 | border-radius: $brand-border-radius; 12 | background-color: $color-info; 13 | color: color-adjust($color-info, 100%); 14 | 15 | :last-child { 16 | margin-bottom: 0; 17 | } 18 | } 19 | .alert { 20 | @include alert(); 21 | } 22 | 23 | /* 24 | * Display a positive / success alert to the user. 25 | */ 26 | @mixin alert--success() { 27 | background-color: $color-positive; 28 | color: color-adjust($color-positive, 100%); 29 | } 30 | .alert--success { 31 | @include alert--success(); 32 | } 33 | 34 | /* 35 | * Display a negative / failure alert to the user. 36 | */ 37 | @mixin alert--failure() { 38 | background-color: $color-negative; 39 | color: color-adjust($color-negative, 100%); 40 | } 41 | .alert--failure { 42 | @include alert--failure(); 43 | } -------------------------------------------------------------------------------- /Templates/_Print.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Print styles - Inlined to avoid another HTTP connection. 3 | */ 4 | 5 | @media print { 6 | * { 7 | background: transparent !important; 8 | 9 | // Black prints faster: h5bp.com/s 10 | color: black !important; 11 | box-shadow: none !important; 12 | text-shadow: none !important; 13 | } 14 | @page { 15 | margin: 0.5cm; 16 | } 17 | 18 | pre, 19 | blockquote { 20 | border: 1px solid #999; 21 | page-break-inside: avoid; 22 | } 23 | thead { 24 | // h5bp.com/t 25 | display: table-header-group; 26 | } 27 | tr, 28 | img { 29 | page-break-inside: avoid; 30 | } 31 | p, h2, h3 { 32 | orphans: 3; 33 | widows: 3; 34 | } 35 | h2, h3 { 36 | page-break-after: avoid; 37 | } 38 | a, 39 | a:visited { 40 | text-decoration: underline; 41 | } 42 | abbr[title]:after { 43 | content: " (" attr(title) ")"; 44 | } 45 | %print-hidden, 46 | .print-hidden { 47 | display: none; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Brics", 3 | "version": "1.3.3", 4 | "description": "A Starter Sass-Kit which embraces OOCSS, BEM and the Atomic Design-Approach", 5 | "main": "Main.scss", 6 | "scripts": { 7 | "test": "./node_modules/.bin/node-sass --o ./_Tests/ Main.scss && sass Main.scss > ./_Tests/RubySass.css --trace" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/Inkdpixels/Brics.git" 12 | }, 13 | "keywords": [ 14 | "Sass", 15 | "Scss", 16 | "BEM", 17 | "Node-sass", 18 | "Starter", 19 | "kit", 20 | "Boilerplate", 21 | "Atomic", 22 | "Design" 23 | ], 24 | "author": "Tyll Weiß (https://github.com/Inkdpixels)", 25 | "license": "MIT", 26 | "bugs": { 27 | "url": "https://github.com/Inkdpixels/Brics/issues" 28 | }, 29 | "homepage": "https://github.com/Inkdpixels/Brics", 30 | "devDependencies": { 31 | "node-sass": "^3.0.0" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /Molecules/_FlexibleEmbed.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Embed a external iframe or media file with a fluid width/height ratio. 3 | */ 4 | 5 | /* 6 | * The base class for all embed containers. 7 | */ 8 | .flexibleEmbed { 9 | position: relative; 10 | display: block; 11 | overflow: hidden; 12 | } 13 | 14 | /* 15 | * The class for the embedded content. 16 | */ 17 | .flexibleEmbed__content { 18 | position: absolute; 19 | top: 0; 20 | left: 0; 21 | width: 100%; 22 | height: 100%; 23 | } 24 | 25 | /* 26 | * The class for the desired width/height ratio. Default ratio is 1:1. 27 | */ 28 | .flexibleEmbed__ratio { 29 | display: block; 30 | width: 100%; 31 | padding-bottom: 100%; 32 | } 33 | 34 | .flexibleEmbed__ratio--16#{\/}9 { 35 | padding-bottom: 56.25%; 36 | } 37 | 38 | .flexibleEmbed__ratio--3#{\/}1 { 39 | padding-bottom: 33.333% 40 | } 41 | 42 | .flexibleEmbed__ratio--2#{\/}1 { 43 | padding-bottom: 50%; 44 | } 45 | 46 | .flexibleEmbed__ratio--4#{\/}3 { 47 | padding-bottom: 75%; 48 | } -------------------------------------------------------------------------------- /Molecules/_Media.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Media 3 | */ 4 | 5 | /* 6 | * The base class for all media elements. 7 | */ 8 | .media { 9 | display: block; 10 | 11 | @include u-cf(); 12 | } 13 | 14 | /* 15 | * The class for the floated media element. 16 | */ 17 | .media__img { 18 | float: left; 19 | margin-right: $column-gutter; 20 | 21 | > img { 22 | display: block; 23 | } 24 | } 25 | 26 | /* 27 | * Reverts the order of the elements. 28 | */ 29 | .media__img--rev { 30 | float: right; 31 | margin-left: $column-gutter; 32 | margin-right: 0; 33 | } 34 | .media__img--compact { 35 | margin-right: $column-gutter / 2; 36 | 37 | &.media__img--rev { 38 | margin-left: $column-gutter / 2; 39 | margin-right: 0; 40 | } 41 | } 42 | 43 | 44 | /* 45 | * The class for the content beside the media element. 46 | */ 47 | .media__body { 48 | overflow: hidden; 49 | display: block; 50 | 51 | // Removes the bottom margin of the last element. 52 | &, 53 | > :last-child { 54 | margin-bottom: 0; 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /Utilities/_Brand.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Helper classes for brand related stylings. 3 | */ 4 | 5 | /* 6 | * Brand text styles. 7 | */ 8 | @mixin u-brand() { 9 | font-family: $brand-font-family; 10 | color: map-get($brand-colors, primary); 11 | } 12 | .u-brand { 13 | @include u-brand(); 14 | } 15 | 16 | /* 17 | * Brand color helpers. 18 | */ 19 | @each $key, $value in $brand-colors { 20 | .u-brandColor-#{$key} { 21 | color: $value; 22 | } 23 | } 24 | 25 | /* 26 | * Brand font-family helper. 27 | */ 28 | @mixin u-brandFace() { 29 | font-family: $brand-font-family; 30 | } 31 | .u-brandFace { 32 | @include u-brandFace(); 33 | } 34 | 35 | /* 36 | * Brand logos. 37 | */ 38 | .u-brandLogo { 39 | display: inline-block; 40 | background-size: cover; 41 | background-repeat: no-repeat; 42 | } 43 | @each $key, $brand-logo in $brand-logos { 44 | .u-brandLogo--#{$key} { 45 | width: map-get($brand-logo, width); 46 | height: map-get($brand-logo, height); 47 | background-image: image-url(map-get($brand-logo, image)); 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /Atoms/_Typography.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Typographic elements 3 | */ 4 | 5 | p { 6 | margin: 0 0 rs($basic-spacing); 7 | } 8 | 9 | b, 10 | strong { 11 | // Addresses style set to `bolder` in FF3+, S4/5, Chrome. 12 | font-weight: $bold; 13 | } 14 | 15 | small { 16 | font-size: 80%; 17 | } 18 | 19 | abbr[title] { 20 | // Addresses styling not present in IE7/8/9, S5, Chrome. 21 | border-bottom: 1px dotted; 22 | cursor: help; 23 | } 24 | 25 | mark { 26 | padding-left: .2em; 27 | padding-right: .2em; 28 | 29 | // Addresses styling not present in IE6/7/8/9. 30 | background: map-get($brand-colors, primary); 31 | color: color-adjust(map-get($brand-colors, primary), 100%); 32 | } 33 | 34 | dfn { 35 | // Addresses styling not present in S5, Chrome. 36 | font-style: italic; 37 | } 38 | 39 | sub, 40 | sup { 41 | // Prevents `sub` and `sup` affecting `line-height` in all browsers. gist.github.com/413930 42 | font-size: 75%; 43 | line-height: 0; 44 | position: relative; 45 | vertical-align: baseline; 46 | } 47 | 48 | sup { 49 | top: -0.5em; 50 | } 51 | 52 | sub { 53 | bottom: -0.25em; 54 | } 55 | -------------------------------------------------------------------------------- /Atoms/_Heading.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Headings 3 | */ 4 | 5 | /* 6 | * The base class for all headings. 7 | */ 8 | @mixin h() { 9 | margin-top: 0; 10 | margin-bottom: .3em; 11 | font-weight: $thin; 12 | 13 | // Optimized kerning for large font sizes. 14 | // Use this only on large font-sizes (f.e. headings) to avoid performance issues. 15 | text-rendering: optimizeLegibility; 16 | } 17 | .h, %h { 18 | @include h(); 19 | } 20 | 21 | /* 22 | * Heading modifiers 23 | * Styles the heading without changing it's importance for SEO robots etc. 24 | */ 25 | @mixin h1() { 26 | font-size: 40px; 27 | 28 | @extend %h; 29 | } 30 | @mixin h2() { 31 | font-size: 30px; 32 | 33 | @extend %h; 34 | } 35 | @mixin h3() { 36 | font-size: 24px; 37 | 38 | @extend %h; 39 | } 40 | @mixin h4() { 41 | font-size: 20px; 42 | font-weight: 200; 43 | 44 | @extend %h; 45 | } 46 | @mixin h5() { 47 | font-size: 16px; 48 | font-weight: $regular; 49 | 50 | @extend %h; 51 | } 52 | @mixin h6() { 53 | font-size: 14px; 54 | font-weight: $regular; 55 | text-transform: uppercase; 56 | 57 | @extend %h; 58 | } 59 | 60 | h1, .h1 { 61 | @include h1(); 62 | } 63 | h2, .h2 { 64 | @include h2(); 65 | } 66 | h3, .h3 { 67 | @include h3(); 68 | } 69 | h4, .h4 { 70 | @include h4(); 71 | } 72 | h5, .h5 { 73 | @include h5(); 74 | } 75 | h6, .h6 { 76 | @include h6(); 77 | } -------------------------------------------------------------------------------- /Atoms/_Media.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Media elements 3 | */ 4 | 5 | embed, 6 | iframe, 7 | object, 8 | img { 9 | // Make images and other media related elements responsive. 10 | max-width: 100%; 11 | 12 | // Removes standard border, as well as the border when inside `a` element in IE6/7/8/9, FF3. 13 | border: 0; 14 | } 15 | 16 | img { 17 | // Styling the alt="" Text on images. 18 | font-style: italic; 19 | 20 | // Remove the gap between images and the bottom of their containers. 21 | vertical-align: middle; 22 | 23 | // Make sure every image is fully scalable in the height as well. 24 | &[height] { 25 | height: auto; 26 | } 27 | } 28 | 29 | figure { 30 | // Resets margin in IE6/7/8/9, S5, O11. 31 | margin: 0; 32 | } 33 | 34 | figcaption { 35 | // Decrease font-size on figcaption elements 36 | font-size: rs($base-font-size - 2, $unit: rem); 37 | } 38 | 39 | audio, 40 | video, 41 | iframe { 42 | margin: 0 0 rs($basic-spacing); 43 | } 44 | 45 | audio { 46 | // Set a min-width to prevent oddly looking audio controls. 47 | min-width: 65%; 48 | 49 | &:not([controls]) { 50 | // Prevents modern browsers from displaying `audio` without controls. 51 | display: none; 52 | 53 | // Remove excess height in iOS5 devices. 54 | height: 0; 55 | } 56 | } 57 | 58 | svg { 59 | &:not(:root) { 60 | // Corrects overflow displayed oddly in IE9. 61 | overflow: hidden; 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /_Framework/_MediaQueries.scss: -------------------------------------------------------------------------------- 1 | // Wraps rules around the desired media query context. 2 | // 3 | // For example: 4 | // @include min-screen(width) {} - shortcut for @media screen and (min-width ...) 5 | // @include max-screen(width) {} - shortcut for @media screen and (max-width ...) 6 | // @include screen(min-width, max-width) {} - shortcut for @media screen and (min-width ...) and (max-width ...) 7 | // @include hdpi {} - devices with high-density screens 8 | @mixin screen($res-min, $res-max) { 9 | @media screen and (min-width: if(unitless($res-min), $res-min*$mq-unit, $res-min)) and (max-width: if(unitless($res-max), $res-max*$mq-unit, $res-max)) { 10 | @content; 11 | } 12 | } 13 | 14 | @mixin max-screen($res) { 15 | @media screen and (max-width: if(unitless($res), $res*$mq-unit, $res)) { 16 | @content; 17 | } 18 | } 19 | 20 | @mixin min-screen($res) { 21 | @media screen and (min-width: if(unitless($res), $res*$mq-unit, $res)) { 22 | @content; 23 | } 24 | } 25 | 26 | @mixin hdpi { 27 | @media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { 28 | @content; 29 | } 30 | } 31 | 32 | // Shorthand to get a media query registered in the $mq-breakpoints sass-map. 33 | @mixin mq($key) { 34 | $mq-definition: map-get($mq-breakpoints, $key); 35 | 36 | @media #{map-get($mq-definition, 'query')} { 37 | @content; 38 | } 39 | } -------------------------------------------------------------------------------- /Main.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /** 3 | * Brics - A Starter Sass-Kit which embraces OOCSS, BEM and the Atomic Design-Approach. 4 | * @version 1.3.3 5 | * @see https://inkdpixels.github.io/Brics/ 6 | */ 7 | 8 | // SASS Functions, Mixins and Variables 9 | @import '_Framework/_Index'; 10 | @import '_Variables'; 11 | 12 | // Utilities 13 | @import 'Utilities/_Animations'; 14 | @import 'Utilities/_Brand'; 15 | @import 'Utilities/_Display'; 16 | @import 'Utilities/_Layout'; 17 | @import 'Utilities/_Spacings'; 18 | @import 'Utilities/_Typography'; 19 | @import 'Utilities/_Widths'; 20 | 21 | // Atoms 22 | @import 'Atoms/_Alert'; 23 | @import 'Atoms/_Base'; 24 | @import 'Atoms/_Button'; 25 | @import 'Atoms/_Code'; 26 | @import 'Atoms/_Form'; 27 | @import 'Atoms/_Heading'; 28 | @import 'Atoms/_Input'; 29 | @import 'Atoms/_Label'; 30 | @import 'Atoms/_Link'; 31 | @import 'Atoms/_List'; 32 | @import 'Atoms/_Media'; 33 | @import 'Atoms/_Quote'; 34 | @import 'Atoms/_Ruler'; 35 | @import 'Atoms/_Table'; 36 | @import 'Atoms/_Typography'; 37 | 38 | // Molecules 39 | @import 'Molecules/_ButtonGroup'; 40 | @import 'Molecules/_Flag'; 41 | @import 'Molecules/_FlexibleEmbed'; 42 | @import 'Molecules/_Form'; 43 | @import 'Molecules/_Grid'; 44 | @import 'Molecules/_Media'; 45 | @import 'Molecules/_Navigation'; 46 | @import 'Molecules/_Spinner'; 47 | @import 'Molecules/_Table'; 48 | 49 | // Organisms 50 | @import 'Organisms/SiteHeader'; 51 | @import 'Organisms/SiteFooter'; 52 | 53 | // Templates 54 | @import 'Templates/_Print'; 55 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Brics](https://raw.githubusercontent.com/Inkdpixels/Brics/gh-pages/Assets/Dist/Images/Brics.png) 2 | 3 | # Brics [![Build Status](https://travis-ci.org/Inkdpixels/Brics.svg)](https://travis-ci.org/Inkdpixels/Brics) [![Dependency Status](https://david-dm.org/Inkdpixels/Brics.svg)](https://david-dm.org/Inkdpixels/Brics) [![devDependency Status](https://david-dm.org/Inkdpixels/Brics/dev-status.svg)](https://david-dm.org/Inkdpixels/Brics#info=devDependencies) 4 | 5 | > Brics is a Sass starter kit for small and large projects. It provides guidelines and methodologies for writing a scalable Sass-Project. Brics embraces OOCSS, BEM, the Atomic Design-Approach and delivers a bunch of example components to get you started for your next project. 6 | 7 | ## Install 8 | Just download a release from the [releases page](https://github.com/Inkdpixels/Brics/releases) and start of by either modifying the Sass, or get some tips on the [documentation page](http://inkdpixels.github.io/Brics/#installation). 9 | 10 | ## Contributing 11 | In lieu of a formal styleguide, take care to maintain the existing coding style. 12 | 13 | ## License 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /Molecules/_Table.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Table 3 | */ 4 | 5 | /* 6 | * Base class for all table-styles. 7 | */ 8 | .table { 9 | width: 100%; 10 | margin-bottom: rs($basic-spacing); 11 | 12 | td, th { 13 | padding: 0.5em; 14 | font-size: 90%; 15 | } 16 | 17 | th { 18 | font-weight: $regular; 19 | } 20 | } 21 | 22 | /* 23 | * Adds a border around the table and in between the rows and cells. 24 | */ 25 | .table--bordered { 26 | border: 1px solid $basic-border-color; 27 | border-collapse: separate; 28 | border-radius: $brand-border-radius; 29 | 30 | td, th { 31 | border-left: 1px solid $basic-border-color; 32 | border-bottom: 1px solid $basic-border-color; 33 | &:first-child { 34 | border-left: 0; 35 | } 36 | } 37 | 38 | tr:last-child > td { 39 | border-bottom: 0; 40 | } 41 | } 42 | 43 | /* 44 | * Adds a border below each row. 45 | */ 46 | .table--striped { 47 | td, th { 48 | border-bottom: 1px solid $basic-border-color; 49 | } 50 | 51 | th { 52 | padding-top: 0; 53 | box-shadow: 0 1px 0 rgba(231, 231, 236, 0.7), 0 3px 0 rgba(231, 231, 236, 0.3); 54 | } 55 | } 56 | 57 | /* 58 | * Reduces the visual gap between each table row. 59 | */ 60 | .table--condensed { 61 | td, th { 62 | padding: 0.25em 0.5em 0.25em; 63 | } 64 | } 65 | 66 | /* 67 | * Displays each odd/even row with a changing background to enhance the visual difference between each row element. 68 | */ 69 | .table--zebra { 70 | tbody { 71 | tr:nth-child(even) { 72 | background: $content-background; 73 | } 74 | 75 | tr:nth-child(odd) { 76 | background: color-adjust($content-background, 5%); 77 | } 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /Utilities/_Animations.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Collection of CSS3 Keyframe Animations. 3 | */ 4 | 5 | /* 6 | * Scales the element up to it's initial proportions and fades it into the viewport. 7 | */ 8 | @keyframes ScaledUpFadeIn { 9 | 0% { 10 | transform: scale(.4); 11 | opacity: 0; 12 | } 13 | 100% { 14 | transform: scale(1); 15 | opacity: 1; 16 | } 17 | } 18 | @mixin u-aniScaledUpFadeIn($dur: $transition-duration) { 19 | animation: ScaledUpFadeIn $dur both; 20 | } 21 | .u-aniScaledUpFadeIn { 22 | @include u-aniScaledUpFadeIn(); 23 | } 24 | 25 | /* 26 | * Moves the element from the top into the users viewport. 27 | */ 28 | @keyframes FlyDown { 29 | 0% { 30 | transform: translateY(-20px); 31 | opacity: 0; 32 | } 33 | 100% { 34 | transform: translateY(0); 35 | opacity: 1; 36 | } 37 | } 38 | @mixin u-aniFlyDown($dur: $transition-duration) { 39 | animation: FlyDown $dur both; 40 | } 41 | .u-aniFlyDown { 42 | @include u-aniFlyDown(); 43 | } 44 | 45 | /* 46 | * Moves the element from the bottom out of the users viewport. 47 | */ 48 | @keyframes FlyUpOut { 49 | 0% { 50 | transform: translateY(0); 51 | opacity: 1; 52 | } 53 | 100% { 54 | transform: translateY(-20px); 55 | opacity: 0; 56 | } 57 | } 58 | @mixin u-aniFlyUpOut($dur: $transition-duration) { 59 | pointer-events: none; 60 | animation: FlyUpOut $dur both; 61 | } 62 | .u-aniFlyUpOut { 63 | @include u-aniFlyUpOut(); 64 | } 65 | 66 | /* 67 | * Pulsates(fade out and in) an element. 68 | */ 69 | @keyframes Pulsate { 70 | 0% { 71 | opacity: 1; 72 | } 73 | 50% { 74 | opacity: 0; 75 | } 76 | 100% { 77 | opacity: 1; 78 | } 79 | } 80 | @mixin u-aniPulsate($dur: $transition-duration) { 81 | animation: Pulsate $dur infinite both; 82 | } 83 | .u-aniPulsate { 84 | @include u-aniPulsate(); 85 | } -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ## 1.3.3 4 | **Implemented enhancements:** 5 | - Add a consistent column gutter for both the Grid, Media and Flag Molecule 6 | 7 | **Fixed issues:** 8 | - Adjust the base font declaration to fix errors in newer builds of node-sass 9 | 10 | ## 1.3.2 11 | **Implemented enhancements:** 12 | - Added a shorthand function to the `$brand-colors` Sass map. 13 | - The target color for the `.btn--invert` modifier is now the `$base-text-color`. 14 | 15 | ## 1.3.1 16 | **Implemented enhancements:** 17 | - Reset the bottom margin for each last child in the `.media__content` and `.flag__content` wrapper. 18 | 19 | **Fixed issues:** 20 | - Fixed the unit addition in the rs() function while using ruby Sass. 21 | 22 | ## 1.3.0 23 | **Implemented enhancements:** 24 | - Added a media Molecule 25 | - Added a flexible embeds Molecule 26 | - Added a flag Molecule 27 | 28 | ## 1.2.0 29 | **Implemented enhancements:** 30 | - Added a duration argument for each predefined CSS Animation mixin 31 | - Added a webFont mixin for centralised handling of different font-families. 32 | - Generate the media-query specific utility widths only if a classNameShortHand was provided in the mq declaration. 33 | 34 | **Fixed issues:** 35 | - Fixed the CSS animation name reference for the u-aniScaledUpFadeIn class/mixin. 36 | 37 | ## 1.1.1 38 | **Fixed issues:** 39 | - Removed all pointer events if the u-aniFlyUpOut @mixin was applied 40 | 41 | ## 1.1.0 42 | **Implemented enhancements:** 43 | - Added a consistent transition duration variable. 44 | - Added a new spinner molecule and Pulsate CSS Animation. 45 | 46 | **Breaking changes:** 47 | - All display utility classes have an 'is' prefix to create a clear reference to the state of the class. 48 | 49 | **Fixed issues:** 50 | - Fixed the compatibility with Node-Sass 3.0.0. 51 | - Fixed a compile error with Ruby-Sass while using the placeholder @mixin. 52 | -------------------------------------------------------------------------------- /Utilities/_Typography.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Typographic utilities 3 | */ 4 | 5 | /* 6 | * Centers the text. 7 | */ 8 | @mixin u-alignCenter() { 9 | text-align: center; 10 | } 11 | .u-alignCenter { 12 | @include u-alignCenter(); 13 | } 14 | 15 | /* 16 | * Aligns the text to the right boundary. 17 | */ 18 | @mixin u-alignRight() { 19 | text-align: $end; 20 | } 21 | .u-alignRight { 22 | @include u-alignRight(); 23 | } 24 | 25 | /* 26 | * Aligns the text to the left boundary. 27 | */ 28 | @mixin u-alignLeft() { 29 | text-align: $start; 30 | } 31 | .u-alignLeft { 32 | @include u-alignLeft(); 33 | } 34 | 35 | /* 36 | * Reduces the font-size to the smallest value. 37 | */ 38 | @mixin u-tinyText() { 39 | font-size: rs($base-font-size - 3, $unit: rem); 40 | } 41 | .u-tinyText { 42 | @include u-tinyText(); 43 | } 44 | 45 | /* 46 | * Enlarges the font-size to the smallest value. 47 | */ 48 | @mixin u-largeText() { 49 | font-size: rs($base-font-size + 6, $unit: rem); 50 | } 51 | .u-largeText { 52 | @include u-largeText(); 53 | } 54 | 55 | /* 56 | * Break strings/text if it exceeds the boundaries of their container. 57 | */ 58 | @mixin u-textBreak() { 59 | word-wrap: break-word; 60 | hyphens: auto; 61 | } 62 | .u-textBreak { 63 | @include u-textBreak(); 64 | } 65 | 66 | /* 67 | * Inverts the text on the element and it's siblings. 68 | */ 69 | @mixin u-invertText() { 70 | &, 71 | h1, h2, h3, 72 | h4, h5, h6 { 73 | color: color-adjust($base-text-color, 100%); 74 | } 75 | } 76 | .u-invertText { 77 | @include u-invertText(); 78 | } 79 | 80 | /* 81 | * Removes all standard stylings for a list element and it's siblings. 82 | */ 83 | @mixin u-resetList() { 84 | padding-left: 0; 85 | margin-bottom: 0; 86 | list-style: none; 87 | } 88 | .u-resetList { 89 | @include u-resetList(); 90 | } 91 | 92 | /* 93 | * Removes all standard stylings for an anchor/link element. 94 | */ 95 | @mixin u-linkReset() { 96 | color: currentColor; 97 | 98 | &:hover, 99 | &:active, 100 | &:focus { 101 | text-decoration: none; 102 | } 103 | 104 | p & { 105 | padding: 0; 106 | margin: 0; 107 | } 108 | } 109 | .u-linkReset { 110 | @include u-linkReset(); 111 | } -------------------------------------------------------------------------------- /_Framework/_Mixins.scss: -------------------------------------------------------------------------------- 1 | // Creates an css arrow as on http://cssarrowplease.com/. 2 | // 3 | // For example: 4 | // .selector:after { 5 | // position: absolute; 6 | // top: -5px; 7 | // left: 50%; 8 | // margin-left: -2.5px; 9 | // @include cssArrow(5px, #fff, bottom); 10 | // } 11 | @mixin cssArrow($triangleSize, $triangleColor, $triangleDirection) { 12 | @if (not ($triangleDirection == "top") and not ($triangleDirection == "bottom") and not ($triangleDirection == "left") and not ($triangleDirection == "right")) { 13 | @warn 'Argument $triangleDirection of cssTriangle() should be either "top", "bottom", "left" or "right" to work appropriately'; 14 | } 15 | 16 | content: ""; 17 | display: block; 18 | width: 0; 19 | height: 0; 20 | border: solid $triangleSize; 21 | 22 | @if ($triangleDirection == "bottom") { 23 | border-color: $triangleColor transparent transparent transparent; 24 | } 25 | @if ($triangleDirection == "top") { 26 | border-color: transparent transparent $triangleColor transparent; 27 | } 28 | @if ($triangleDirection == "right") { 29 | border-color: transparent transparent transparent $triangleColor; 30 | } 31 | @if ($triangleDirection == "left") { 32 | border-color: transparent $triangleColor transparent transparent; 33 | } 34 | } 35 | 36 | // Adds vendor prefixed styling for HTML input placeholders. 37 | // 38 | // For example: 39 | // .textInput { 40 | // @include placeholder() { 41 | // color: #ccc; 42 | // }; 43 | // } 44 | @mixin placeholder() { 45 | &::-webkit-input-placeholder { 46 | @content; 47 | } 48 | 49 | &:-moz-placeholder { 50 | @content; 51 | } 52 | 53 | &::-moz-placeholder { 54 | @content; 55 | } 56 | 57 | &:-ms-input-placeholder { 58 | @content; 59 | } 60 | 61 | &:placeholder { 62 | @content; 63 | } 64 | } 65 | 66 | // Shorthand for embedding different webfont families. 67 | // Useful for webfonts where each weight is delivered under a separate font-family name. 68 | // 69 | // For example: 70 | // .selector { 71 | // @include webFont('ff-din', 'condensed-light'); 72 | // } 73 | // .selector2 { 74 | // @include webFont('ff-din', 'light-italic'); 75 | // } 76 | @mixin webFont($group, $id: regular) { 77 | @if($webFonts) { 78 | @each $font in $webFonts { 79 | @if($group == map-get($font, group) and $id == map-get($font, id)) { 80 | font-family: map-get($font, font); 81 | font-weight: map-get($font, weight); 82 | 83 | @if(map-get($font, style) != normal) { 84 | font-style: map-get($font, style); 85 | } 86 | } 87 | } 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /_Framework/_Functions.scss: -------------------------------------------------------------------------------- 1 | // Returns the path of an Image asset. 2 | // 3 | // For example: 4 | // .selector { 5 | // background-image: image-url('logo.png'); 6 | // } 7 | @function image-url($imagePath) { 8 | @if (type-of($imagePath) != 'string') { 9 | @warn 'Argument $imagePath of image-url() must be a string'; 10 | } 11 | 12 | @return url(#{$image-base-path + $imagePath}); 13 | } 14 | 15 | // Calculates em's based on pixel values. 16 | // 17 | // For example: 18 | // .selector { 19 | // font-size: rs(19, 16); 20 | // } 21 | @function rs($target-size, $context: $base-font-size, $unit: em) { 22 | @if (type-of($target-size) != 'number') { 23 | @warn 'Argument $target-size of rs() must be a number'; 24 | } 25 | 26 | @if (type-of($context) != 'number') { 27 | @warn 'Argument $context of rs() must be a number'; 28 | } 29 | 30 | @if (type-of($unit) != 'string') { 31 | @warn 'Argument $unit of rs() must be a string'; 32 | } 33 | 34 | @if (not ($unit == 'em' or $unit == 'rem')) { 35 | @warn 'Argument $unit of rs() must be either "em" or "rem"'; 36 | } 37 | 38 | @return #{$target-size/$context}#{$unit}; 39 | } 40 | 41 | // Text direction check 42 | // 43 | // Checks the reading-direction of the site based on the '$direction' variable and sets the correct $start and $end variables 44 | // 45 | $direction: ltr !default; 46 | $start: left !default; 47 | $end: right !default; 48 | @if $direction == rtl { 49 | $start: right; 50 | $end: left; 51 | } 52 | 53 | // Adjusts a color based on the lightness which is passed as a second parameter, this function was written by @necolas(https://github.com/necolas/). 54 | // 55 | // For example: 56 | // .selector { 57 | // background: color-adjust(#0097d7, 100%); 58 | // } 59 | @function color-adjust($color, $contrast: 100%) { 60 | @if (type-of($color) != 'color') { 61 | @warn 'Argument $color of color-adjust() must be a color'; 62 | } 63 | 64 | @if (type-of($contrast) != 'number') { 65 | @warn 'Argument $contrast of color-adjust() must be a number'; 66 | } 67 | 68 | @if (lightness($color) > 50) { 69 | @return darken($color, $contrast); 70 | } @else { 71 | @return lighten($color, $contrast); 72 | } 73 | } 74 | 75 | // Returns the z-index value for the given key. 76 | // 77 | // For example: 78 | // .selector { 79 | // z-index: z('myElement'); 80 | // } 81 | @function z($key) { 82 | @return map-get($zIndexes, $key); 83 | } 84 | 85 | // Returns a brand-color for the given key. 86 | // 87 | // For example: 88 | // .selector { 89 | // color: brand('myElement'); 90 | // } 91 | @function brand($key) { 92 | @return map-get($brand-colors, $key); 93 | } 94 | -------------------------------------------------------------------------------- /Atoms/_Input.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Form inputs 3 | */ 4 | 5 | /* 6 | * Base styling for form input fields. 7 | */ 8 | textarea { 9 | // Resets the height since textareas have the rows="" attribute. 10 | height: auto; 11 | 12 | // Sets a min-height for textareas of 3 rows. 13 | min-height: ($base-line-height *3) +px; 14 | 15 | // Prevent expanding the textarea over it's horizontal boundaries. 16 | resize: vertical; 17 | 18 | // Removes default vertical scrollbar in IE6/7/8/9. 19 | overflow: auto; 20 | 21 | // Improves readability and alignment in all browsers. 22 | vertical-align: top; 23 | } 24 | 25 | input { 26 | // A possible shadow-dom fix for webkit control spacing on input[type="time"]. 27 | &::-webkit-datetime-edit { 28 | margin-top: -.17em; 29 | margin-bottom: -.17em; 30 | } 31 | 32 | // Base styling for checkboxes and radio buttons. 33 | &[type="checkbox"], 34 | &[type="radio"] { 35 | margin-right: .35em; 36 | cursor: pointer; 37 | } 38 | } 39 | 40 | // Fix the font-settings for input placeholders since they wont get inherited from parent elements e.g. . 41 | input, textarea { 42 | @include placeholder() { 43 | $line-height: $base-line-height/$base-font-size; 44 | $font-size: $base-font-size / 16 * 100%; 45 | 46 | font: $base-font-weight #{$font-size }/#{$line-height} $base-font-family; 47 | } 48 | } 49 | 50 | /* 51 | * The base class for all textInputs. 52 | */ 53 | @mixin textInput() { 54 | height: $base-line-height*1.5 + px; 55 | padding: .2em .5em; 56 | 57 | background: $content-background; 58 | border: 1px $basic-border-style $basic-border-color; 59 | border-radius: $brand-border-radius; 60 | box-shadow: inset 0 1px 1px rgba($basic-border-color, 0.4); 61 | 62 | font-size: rs(14, $unit: rem); 63 | color: lighten($base-text-color, 5%); 64 | } 65 | 66 | .textInput { 67 | @include textInput(); 68 | } 69 | 70 | /* 71 | * Disabled state for inputs. 72 | */ 73 | @mixin textInput--disabled() { 74 | opacity: .5; 75 | pointer-events: none; 76 | } 77 | .textInput[disabled], 78 | .textInput--disabled { 79 | @include textInput--disabled(); 80 | } 81 | 82 | /* 83 | * Positive validated state for inputs. 84 | */ 85 | @mixin textInput--success() { 86 | border-color: $color-positive; 87 | } 88 | .textInput--success { 89 | @include textInput--success(); 90 | } 91 | 92 | /* 93 | * Negative validated state for inputs. 94 | */ 95 | @mixin textInput--failure() { 96 | border-color: $color-negative; 97 | } 98 | .textInput--failure { 99 | @include textInput--failure(); 100 | } 101 | -------------------------------------------------------------------------------- /Atoms/_Button.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Buttons 3 | */ 4 | 5 | /* 6 | * The base class for all buttons. 7 | */ 8 | @mixin btn() { 9 | display: inline-block; 10 | 11 | // Set in em's so we can change the size of the button depending on the font-size. 12 | padding: .8em 1.5em; 13 | border: 1px solid currentColor; 14 | background: 0; 15 | border-radius: $brand-border-radius; 16 | cursor: pointer; 17 | 18 | font-size: .8em; 19 | 20 | // Normalize some rules across the targeted elements (,