├── css ├── utilities │ ├── spacing.scss │ ├── .DS_Store │ ├── hidden.scss │ ├── invisible.scss │ ├── inline.scss │ ├── clearfix.scss │ ├── vertically-center.scss │ ├── visually-hidden.scss │ ├── page-wrap.scss │ ├── grid.scss │ └── hovers.scss ├── .DS_Store ├── base │ ├── .DS_Store │ ├── shame.scss │ ├── colors.scss │ └── normalize.scss ├── objects │ ├── .DS_Store │ ├── opacity.scss │ ├── floats.scss │ ├── cursor.scss │ ├── white-space.scss │ ├── tap-highlight.scss │ ├── clears.scss │ ├── text-align.scss │ ├── align.scss │ ├── border-radius.scss │ ├── font-weight.scss │ ├── borders.scss │ ├── display.scss │ ├── overflow.scss │ ├── position.scss │ └── spacing.scss ├── components │ ├── .DS_Store │ └── modal.scss ├── styleguide.scss └── styleguide.css ├── js ├── main.js └── jquery-1.10.2.min.js ├── .DS_Store ├── .sass-cache ├── 8741e612e3568c5eaa17627191ff9a06ad3dde54 │ ├── grid.scssc │ ├── hidden.scssc │ ├── inline.scssc │ ├── clearfix.scssc │ ├── invisible.scssc │ ├── page-wrap.scssc │ ├── vertically-center.scssc │ ├── spacing.scssc │ └── visually-hidden.scssc ├── 65478d4986a0f4b7c54fd3a4b2747fcf681b6a6a │ ├── colors.scssc │ ├── shame.scssc │ └── normalize.scssc ├── c0e766c9c1b7caa645900941a28d47a033326d44 │ ├── borders.scssc │ ├── clears.scssc │ ├── display.scssc │ ├── floats.scssc │ ├── spacing.scssc │ ├── overflow.scssc │ ├── position.scssc │ ├── font-weight.scssc │ ├── text-align.scssc │ ├── white-space.scssc │ ├── opacity.scssc │ ├── align.scssc │ └── border-radius.scssc ├── f289b5a4eae04d7f433003a89a566d258b980f73 │ ├── buttons.scssc │ ├── colors.scssc │ ├── inputs.scssc │ ├── modal.scssc │ ├── modals.scssc │ ├── site-footer.scssc │ ├── typography.scssc │ └── tooltip.scssc └── 829dfbd7f908c234f7b387363ab2a9b15f8ae7a8 │ └── styleguide.scssc ├── LICENSE.txt ├── npm-debug.log ├── modal.html └── src └── css-styleguide.css /css/utilities/spacing.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | jQuery(function(){ 2 | 3 | }); -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/css-approach/master/.DS_Store -------------------------------------------------------------------------------- /css/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/css-approach/master/css/.DS_Store -------------------------------------------------------------------------------- /css/base/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/css-approach/master/css/base/.DS_Store -------------------------------------------------------------------------------- /css/objects/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/css-approach/master/css/objects/.DS_Store -------------------------------------------------------------------------------- /css/utilities/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/css-approach/master/css/utilities/.DS_Store -------------------------------------------------------------------------------- /css/components/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/css-approach/master/css/components/.DS_Store -------------------------------------------------------------------------------- /css/objects/opacity.scss: -------------------------------------------------------------------------------- 1 | .opacity0 { 2 | opacity: 0; 3 | } 4 | 5 | .opacity1 { 6 | opacity: 1; 7 | } -------------------------------------------------------------------------------- /.sass-cache/8741e612e3568c5eaa17627191ff9a06ad3dde54/grid.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/css-approach/master/.sass-cache/8741e612e3568c5eaa17627191ff9a06ad3dde54/grid.scssc -------------------------------------------------------------------------------- /.sass-cache/65478d4986a0f4b7c54fd3a4b2747fcf681b6a6a/colors.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/css-approach/master/.sass-cache/65478d4986a0f4b7c54fd3a4b2747fcf681b6a6a/colors.scssc -------------------------------------------------------------------------------- /.sass-cache/65478d4986a0f4b7c54fd3a4b2747fcf681b6a6a/shame.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/css-approach/master/.sass-cache/65478d4986a0f4b7c54fd3a4b2747fcf681b6a6a/shame.scssc -------------------------------------------------------------------------------- /.sass-cache/8741e612e3568c5eaa17627191ff9a06ad3dde54/hidden.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/css-approach/master/.sass-cache/8741e612e3568c5eaa17627191ff9a06ad3dde54/hidden.scssc -------------------------------------------------------------------------------- /.sass-cache/8741e612e3568c5eaa17627191ff9a06ad3dde54/inline.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/css-approach/master/.sass-cache/8741e612e3568c5eaa17627191ff9a06ad3dde54/inline.scssc -------------------------------------------------------------------------------- /.sass-cache/c0e766c9c1b7caa645900941a28d47a033326d44/borders.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/css-approach/master/.sass-cache/c0e766c9c1b7caa645900941a28d47a033326d44/borders.scssc -------------------------------------------------------------------------------- /.sass-cache/c0e766c9c1b7caa645900941a28d47a033326d44/clears.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/css-approach/master/.sass-cache/c0e766c9c1b7caa645900941a28d47a033326d44/clears.scssc -------------------------------------------------------------------------------- /.sass-cache/c0e766c9c1b7caa645900941a28d47a033326d44/display.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/css-approach/master/.sass-cache/c0e766c9c1b7caa645900941a28d47a033326d44/display.scssc -------------------------------------------------------------------------------- /.sass-cache/c0e766c9c1b7caa645900941a28d47a033326d44/floats.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/css-approach/master/.sass-cache/c0e766c9c1b7caa645900941a28d47a033326d44/floats.scssc -------------------------------------------------------------------------------- /.sass-cache/c0e766c9c1b7caa645900941a28d47a033326d44/spacing.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/css-approach/master/.sass-cache/c0e766c9c1b7caa645900941a28d47a033326d44/spacing.scssc -------------------------------------------------------------------------------- /.sass-cache/f289b5a4eae04d7f433003a89a566d258b980f73/buttons.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/css-approach/master/.sass-cache/f289b5a4eae04d7f433003a89a566d258b980f73/buttons.scssc -------------------------------------------------------------------------------- /.sass-cache/f289b5a4eae04d7f433003a89a566d258b980f73/colors.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/css-approach/master/.sass-cache/f289b5a4eae04d7f433003a89a566d258b980f73/colors.scssc -------------------------------------------------------------------------------- /.sass-cache/f289b5a4eae04d7f433003a89a566d258b980f73/inputs.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/css-approach/master/.sass-cache/f289b5a4eae04d7f433003a89a566d258b980f73/inputs.scssc -------------------------------------------------------------------------------- /.sass-cache/f289b5a4eae04d7f433003a89a566d258b980f73/modal.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/css-approach/master/.sass-cache/f289b5a4eae04d7f433003a89a566d258b980f73/modal.scssc -------------------------------------------------------------------------------- /.sass-cache/f289b5a4eae04d7f433003a89a566d258b980f73/modals.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/css-approach/master/.sass-cache/f289b5a4eae04d7f433003a89a566d258b980f73/modals.scssc -------------------------------------------------------------------------------- /.sass-cache/65478d4986a0f4b7c54fd3a4b2747fcf681b6a6a/normalize.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/css-approach/master/.sass-cache/65478d4986a0f4b7c54fd3a4b2747fcf681b6a6a/normalize.scssc -------------------------------------------------------------------------------- /.sass-cache/8741e612e3568c5eaa17627191ff9a06ad3dde54/clearfix.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/css-approach/master/.sass-cache/8741e612e3568c5eaa17627191ff9a06ad3dde54/clearfix.scssc -------------------------------------------------------------------------------- /.sass-cache/8741e612e3568c5eaa17627191ff9a06ad3dde54/invisible.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/css-approach/master/.sass-cache/8741e612e3568c5eaa17627191ff9a06ad3dde54/invisible.scssc -------------------------------------------------------------------------------- /.sass-cache/8741e612e3568c5eaa17627191ff9a06ad3dde54/page-wrap.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/css-approach/master/.sass-cache/8741e612e3568c5eaa17627191ff9a06ad3dde54/page-wrap.scssc -------------------------------------------------------------------------------- /.sass-cache/c0e766c9c1b7caa645900941a28d47a033326d44/overflow.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/css-approach/master/.sass-cache/c0e766c9c1b7caa645900941a28d47a033326d44/overflow.scssc -------------------------------------------------------------------------------- /.sass-cache/c0e766c9c1b7caa645900941a28d47a033326d44/position.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/css-approach/master/.sass-cache/c0e766c9c1b7caa645900941a28d47a033326d44/position.scssc -------------------------------------------------------------------------------- /.sass-cache/c0e766c9c1b7caa645900941a28d47a033326d44/font-weight.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/css-approach/master/.sass-cache/c0e766c9c1b7caa645900941a28d47a033326d44/font-weight.scssc -------------------------------------------------------------------------------- /.sass-cache/c0e766c9c1b7caa645900941a28d47a033326d44/text-align.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/css-approach/master/.sass-cache/c0e766c9c1b7caa645900941a28d47a033326d44/text-align.scssc -------------------------------------------------------------------------------- /.sass-cache/c0e766c9c1b7caa645900941a28d47a033326d44/white-space.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/css-approach/master/.sass-cache/c0e766c9c1b7caa645900941a28d47a033326d44/white-space.scssc -------------------------------------------------------------------------------- /.sass-cache/f289b5a4eae04d7f433003a89a566d258b980f73/site-footer.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/css-approach/master/.sass-cache/f289b5a4eae04d7f433003a89a566d258b980f73/site-footer.scssc -------------------------------------------------------------------------------- /.sass-cache/f289b5a4eae04d7f433003a89a566d258b980f73/typography.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/css-approach/master/.sass-cache/f289b5a4eae04d7f433003a89a566d258b980f73/typography.scssc -------------------------------------------------------------------------------- /.sass-cache/8741e612e3568c5eaa17627191ff9a06ad3dde54/vertically-center.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmrs/css-approach/master/.sass-cache/8741e612e3568c5eaa17627191ff9a06ad3dde54/vertically-center.scssc -------------------------------------------------------------------------------- /.sass-cache/8741e612e3568c5eaa17627191ff9a06ad3dde54/spacing.scssc: -------------------------------------------------------------------------------- 1 | 3.2.19 (Media Mark) 2 | da39a3ee5e6b4b0d3255bfef95601890afd80709 3 | o:Sass::Tree::RootNode :@children[ :@templateI" :ET: 4 | @linei: @options{ -------------------------------------------------------------------------------- /css/utilities/hidden.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Hidden 3 | // ------------------------- 4 | 5 | // Hide from both screenreaders and browsers 6 | 7 | .u-hidden { 8 | display: none !important; 9 | visibility: hidden; 10 | } -------------------------------------------------------------------------------- /css/objects/floats.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Floats 3 | // ------------------------- 4 | 5 | .o-floatL { 6 | float: left; 7 | } 8 | 9 | .o-floatR { 10 | float: right; 11 | } 12 | 13 | .o-floatN { 14 | float: none; 15 | } -------------------------------------------------------------------------------- /css/utilities/invisible.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Invisible 3 | // ------------------------- 4 | 5 | // Hide elements visually and from screenreaders 6 | // but maintain layout. 7 | 8 | .u-invisible { 9 | visibility: hidden; 10 | } -------------------------------------------------------------------------------- /css/base/shame.scss: -------------------------------------------------------------------------------- 1 | // Make everything behave normally 2 | *, 3 | *:before, 4 | *:after { 5 | margin: 0; 6 | padding:0; 7 | -webkit-box-sizing: border-box; 8 | -moz-box-sizing: border-box; 9 | box-sizing: border-box; 10 | } -------------------------------------------------------------------------------- /css/utilities/inline.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Inline 3 | // ------------------------- 4 | 5 | // Place any elements inline. 6 | 7 | .u-inline { 8 | @extend .u-clearfix; 9 | > div { 10 | @extend .o-displayInlineBlock; 11 | } 12 | } -------------------------------------------------------------------------------- /css/objects/cursor.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Cursor 3 | // ------------------------- 4 | 5 | .o-cursorDefault { 6 | cursor: default; 7 | } 8 | 9 | .o-cursorText { 10 | cursor: text; 11 | } 12 | 13 | .o-cursorPointer { 14 | cursor: pointer; 15 | } -------------------------------------------------------------------------------- /css/objects/white-space.scss: -------------------------------------------------------------------------------- 1 | // 2 | // White space 3 | // ------------------------- 4 | 5 | .o-wsNormal { 6 | white-space: normal; 7 | } 8 | 9 | .o-wsNowrap { 10 | white-space: nowrap; 11 | } 12 | 13 | .o-wsPre { 14 | white-space: pre; 15 | } -------------------------------------------------------------------------------- /css/objects/tap-highlight.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Tap Highlight 3 | // ------------------------- 4 | 5 | // iOS adding a black background flash 6 | // when an element gets tapped. 7 | 8 | .o-highlightNone { 9 | -webkit-tap-highlight-color: rgba(0,0,0,0); 10 | } -------------------------------------------------------------------------------- /css/objects/clears.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Clears 3 | // ------------------------- 4 | 5 | .o-clearL { 6 | clear: left; 7 | } 8 | 9 | .o-clearR { 10 | clear: right; 11 | } 12 | 13 | .o-clearB { 14 | clear: both; 15 | } 16 | 17 | .o-clearN { 18 | clear: none; 19 | } -------------------------------------------------------------------------------- /css/objects/text-align.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Text Align 3 | // ------------------------- 4 | 5 | .o-textAlign--left { 6 | text-align: left; 7 | } 8 | 9 | .o-textAlign--right { 10 | text-align: right; 11 | } 12 | 13 | .o-textAlign--center { 14 | text-align: center; 15 | } -------------------------------------------------------------------------------- /css/utilities/clearfix.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Clearfix 3 | // ------------------------- 4 | 5 | // Micro clearfix to clear floats. 6 | 7 | .u-cf { 8 | &:before, 9 | &:after { 10 | content: ""; 11 | @extend .o-displayTable; 12 | } 13 | } 14 | 15 | .u-cf { 16 | &:after { 17 | @extend .o-clearB; 18 | } 19 | } -------------------------------------------------------------------------------- /css/utilities/vertically-center.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Vertically center 3 | // ------------------------- 4 | 5 | .u-verticallyCenter { 6 | @extend .o-posRelative; 7 | top: 50%; 8 | -webkit-transform : translateY(-50%); 9 | -o-transform : translateY(-50%); 10 | -moz-transform : translateY(-50%); 11 | transform : translateY(-50%); 12 | } -------------------------------------------------------------------------------- /css/utilities/visually-hidden.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Visually Hidden 3 | // ------------------------- 4 | 5 | // Hide visually but remain available to screenreaders. 6 | 7 | .u-visuallyHidden { 8 | border: 0; 9 | clip: rect(0 0 0 0); 10 | height: 1px; 11 | margin: -1px; 12 | overflow: hidden; 13 | padding: 0; 14 | position: absolute; 15 | width: 1px; 16 | } -------------------------------------------------------------------------------- /css/objects/align.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Vertical alignment 3 | // ------------------------- 4 | 5 | // Depends on an appropriate `display` value. 6 | 7 | .o-alignBaseline { 8 | vertical-align: baseline; 9 | } 10 | 11 | .o-alignBottom { 12 | vertical-align: bottom; 13 | } 14 | 15 | .o-alignMiddle { 16 | vertical-align: middle; 17 | } 18 | 19 | .o-alignTop { 20 | vertical-align: top; 21 | } -------------------------------------------------------------------------------- /css/utilities/page-wrap.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Page Wrap 3 | // ------------------------- 4 | 5 | // Wrap a piece of content in a horizontally 6 | // centered container. 7 | 8 | // Variables 9 | // ------------------------- 10 | 11 | $pageWrapWidth: 90%; 12 | $pageWrapMaxWidth: 1000px; 13 | 14 | .u-pageWrap { 15 | width: $pageWrapWidth; 16 | max-width: $pageWrapMaxWidth; 17 | margin: 0 auto; // Maybe this should be extended? 18 | } -------------------------------------------------------------------------------- /css/objects/border-radius.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Border radius 3 | // ------------------------- 4 | 5 | // Variables 6 | // ------------------------- 7 | 8 | $br1: 2px; 9 | $br2: 4px; 10 | $br3: 10px; 11 | 12 | // Equal corners 13 | // ------------------------- 14 | 15 | .o-bra1 { 16 | border-radius: $br1; 17 | } 18 | 19 | .o-bra2 { 20 | border-radius: $br2; 21 | } 22 | 23 | .o-bra3 { 24 | border-radius: $br3; 25 | } 26 | 27 | .o-braRound { 28 | border-radius: 50%; 29 | } 30 | 31 | // Unequal corners 32 | // ------------------------- -------------------------------------------------------------------------------- /css/objects/font-weight.scss: -------------------------------------------------------------------------------- 1 | .o-fontWeight100 { 2 | font-weight: 100; 3 | } 4 | 5 | .o-fontWeight200 { 6 | font-weight: 200; 7 | } 8 | 9 | .o-fontWeight300 { 10 | font-weight: 300; 11 | } 12 | 13 | .o-fontWeight400 { 14 | font-weight: 400; 15 | } 16 | 17 | .o-fontWeight500 { 18 | font-weight: 500; 19 | } 20 | 21 | .o-fontWeight600 { 22 | font-weight: 600; 23 | } 24 | 25 | .o-fontWeight700 { 26 | font-weight: 700; 27 | } 28 | 29 | .o-fontWeight800 { 30 | font-weight: 800; 31 | } 32 | 33 | .o-fontWeight900 { 34 | font-weight: 900; 35 | } -------------------------------------------------------------------------------- /css/objects/borders.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Borders 3 | // ------------------------- 4 | 5 | 6 | // Variables 7 | // ------------------------- 8 | 9 | $borderThin: 1px; 10 | $borderThick: 2px; 11 | 12 | 13 | // Component 14 | // ------------------------- 15 | 16 | .borderSolid { 17 | border-style: solid; 18 | } 19 | 20 | .borderDashed { 21 | border-style: dashed; 22 | } 23 | 24 | .borderThin { 25 | border-width: $borderThin; 26 | } 27 | 28 | .borderThick { 29 | border-width: $borderThick; 30 | } 31 | 32 | .borderColorBevel { 33 | border-color: $gray-Ls $gray-L $gray-Lr; 34 | } -------------------------------------------------------------------------------- /css/objects/display.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Display types 3 | // ------------------------- 4 | 5 | .o-displayBlock { 6 | display: block; 7 | } 8 | 9 | .o-displayInline { 10 | display: inline; 11 | } 12 | 13 | // 1. Fix for Firefox bug: an image styled `max-width:100%` within an 14 | // inline-block will display at its default size, and not limit its width to 15 | // 100% of an ancestral container. 16 | 17 | .o-displayInlineBlock { 18 | display: inline-block; 19 | max-width: 100%; // 1 // 20 | } 21 | 22 | .o-displayTable { 23 | display: table; 24 | } 25 | 26 | .o-displayTableCell { 27 | display: table-cell; 28 | } 29 | 30 | .o-displayTableRow { 31 | display: table-row; 32 | } -------------------------------------------------------------------------------- /css/utilities/grid.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Grid 3 | // ------------------------- 4 | 5 | // Variables 6 | // ------------------------- 7 | 8 | $gutter: 40px; 9 | 10 | // Root 11 | // ------------------------- 12 | 13 | .u-grid { 14 | margin-top: -$gutter; 15 | margin-left: -$gutter; 16 | @extend .u-cf; 17 | 18 | > div { 19 | @extend .o-floatL; 20 | margin-top: $gutter; 21 | margin-left: $gutter; 22 | } 23 | 24 | &.u-grid--1 > div { 25 | width: calc(100% - #{$gutter}); 26 | } 27 | 28 | &.u-grid--2 > div { 29 | width: calc(50% - #{$gutter}); 30 | } 31 | 32 | &.u-grid--3 > div { 33 | width: calc(33.3333% - #{$gutter}); 34 | } 35 | 36 | &.u-grid--4 > div { 37 | width: calc(25% - #{$gutter}); 38 | } 39 | } -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | ISC License (ISC) 2 | Copyright (c) 2018, Adam Morse 3 | 4 | Permission to use, copy, modify, and/or distribute this software for any 5 | purpose with or without fee is hereby granted, provided that the above 6 | copyright notice and this permission notice appear in all copies. 7 | 8 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH 9 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND 10 | FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, 11 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM 12 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR 13 | OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR 14 | PERFORMANCE OF THIS SOFTWARE. 15 | -------------------------------------------------------------------------------- /css/base/colors.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Colors 3 | // ------------------------- 4 | 5 | 6 | // Variables 7 | // ------------------------- 8 | 9 | $accent: #0097e9; 10 | $gray-M: #303949; 11 | $gray-Ls: #AAAAB4; 12 | $gray-L: #C5C5CC; 13 | $gray-Lr: #D0D0D5; 14 | $gray-Xl: #f9f9fb; 15 | 16 | 17 | // Components 18 | // ------------------------- 19 | 20 | .bg-White { 21 | background: #fff; 22 | color: $gray-M; 23 | } 24 | 25 | .bg-Light { 26 | background: $gray-Xl; 27 | color: $gray-M; 28 | } 29 | 30 | 31 | // Color balance trick 32 | // ------------------------- 33 | 34 | // This is a handy utility for checking the balance 35 | // of your color scheme. Uncomment this CSS block 36 | // to turn make colors on the colors.html grayscale. 37 | // All colors of a similar shade should be pretty 38 | // closely matched. 39 | 40 | //[class^="bg-"] { 41 | // -webkit-filter: grayscale(1); 42 | //} -------------------------------------------------------------------------------- /css/objects/overflow.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Overflow 3 | // ------------------------- 4 | 5 | // Basic overflows 6 | // ------------------------- 7 | 8 | .o-ofVisible { 9 | overflow: visible; 10 | } 11 | 12 | .o-ofHidden { 13 | overflow: hidden; 14 | } 15 | 16 | .o-ofScroll { 17 | overflow: scroll; 18 | } 19 | 20 | .o-ofAuto { 21 | overflow: auto; 22 | } 23 | 24 | // X-axis 25 | // ------------------------- 26 | 27 | .o-ofxVisible { 28 | overflow-x: visible; 29 | } 30 | 31 | .o-ofxHidden { 32 | overflow-x: hidden; 33 | } 34 | 35 | .o-ofxScroll { 36 | overflow-x: scroll; 37 | } 38 | 39 | .o-ofxAuto { 40 | overflow-x: auto; 41 | } 42 | 43 | // Y-axis 44 | // ------------------------- 45 | 46 | .o-ofyVisible { 47 | overflow-y: visible; 48 | } 49 | 50 | .o-ofyHidden { 51 | overflow-y: hidden; 52 | } 53 | 54 | .o-ofyScroll { 55 | overflow-y: scroll; 56 | } 57 | 58 | .o-ofyAuto { 59 | overflow-y: auto; 60 | } -------------------------------------------------------------------------------- /css/objects/position.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Positioning 3 | // ------------------------- 4 | 5 | .o-posAbsolute { 6 | position: absolute; 7 | } 8 | 9 | // 1. Make sure fixed elements are promoted into a new layer, for performance 10 | // reasons. 11 | 12 | .o-posFixed { 13 | position: fixed; 14 | -webkit-backface-visibility: hidden; /* 1 */ 15 | backface-visibility: hidden; /* 1 */ 16 | } 17 | 18 | .o-posRelative { 19 | position: relative; 20 | } 21 | 22 | .o-posStatic { 23 | position: static; 24 | } 25 | 26 | // Pin an element to the top left edge of its parent. 27 | 28 | .o-posPinTL { 29 | position: absolute; 30 | top: 0; 31 | left: 0; 32 | } 33 | 34 | // Pin an element to all corners. But when a width and/or height are 35 | // provided, the element will be centered in its nearest 36 | // relatively-positioned ancestor. 37 | 38 | .o-posPinAll { 39 | position: absolute; 40 | top: 0; 41 | right: 0; 42 | bottom: 0; 43 | left: 0; 44 | margin: auto; 45 | } -------------------------------------------------------------------------------- /npm-debug.log: -------------------------------------------------------------------------------- 1 | 0 info it worked if it ends with ok 2 | 1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'start' ] 3 | 2 info using npm@3.10.3 4 | 3 info using node@v6.7.0 5 | 4 verbose stack Error: ENOENT: no such file or directory, open '/Users/mrmrs/c/css-approach/package.json' 6 | 4 verbose stack at Error (native) 7 | 5 verbose cwd /Users/mrmrs/c/css-approach 8 | 6 error Darwin 16.1.0 9 | 7 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "start" 10 | 8 error node v6.7.0 11 | 9 error npm v3.10.3 12 | 10 error path /Users/mrmrs/c/css-approach/package.json 13 | 11 error code ENOENT 14 | 12 error errno -2 15 | 13 error syscall open 16 | 14 error enoent ENOENT: no such file or directory, open '/Users/mrmrs/c/css-approach/package.json' 17 | 15 error enoent ENOENT: no such file or directory, open '/Users/mrmrs/c/css-approach/package.json' 18 | 15 error enoent This is most likely not a problem with npm itself 19 | 15 error enoent and is related to npm not being able to find a file. 20 | 16 verbose exit [ -2, true ] 21 | -------------------------------------------------------------------------------- /.sass-cache/c0e766c9c1b7caa645900941a28d47a033326d44/opacity.scssc: -------------------------------------------------------------------------------- 1 | 3.2.19 (Media Mark) 2 | 146a68f881dd6c56721d616d46abe424d66b53fe 3 | o:Sass::Tree::RootNode 4 | :@children[o:Sass::Tree::RuleNode: 5 | @rule[I".opacity0:ET: 6 | @tabsi :@parsed_ruleso:"Sass::Selector::CommaSequence: @members[o:Sass::Selector::Sequence; [o:#Sass::Selector::SimpleSequence 7 | ; [o:Sass::Selector::Class: 8 | @name[I" opacity0; T: 9 | @linei:@filenameI" ; T: @subject0: @sourceso:Set: 10 | @hash{ ;i;@;i;@;[o:Sass::Tree::PropNode;[I"opacity; T:@valueo:Sass::Script::String;I"0; T: 11 | @type:identifier: @options{ ; 12 | i :@prop_syntax:new;[ ;i;@;i:@has_childrenT;@o;;[I".opacity1; T; 13 | i ;o;; [o;; [o; 14 | ; [o;;[I" opacity1; T;i 15 | ;I" ; T;0;o;;{ ;i 16 | ;@*;i 17 | ;@*;[o;;[I"opacity; T;o;;I"1; T;;;@; 18 | i ;;;[ ;i;@;i 19 | ; T;@:@templateI"=.opacity0 { 20 | opacity: 0; 21 | } 22 | 23 | .opacity1 { 24 | opacity: 1; 25 | }; T;i; T;@ -------------------------------------------------------------------------------- /css/utilities/hovers.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Hover Hook 3 | // ------------------------- 4 | 5 | // Hover an element and some child elements change state. 6 | // You can see this in action when you hover a comment 7 | // on Youtube or Facebook causing icons to appear or 8 | // links to change color. Youtube have implemented it 9 | // in a really unusable way. This solves the problem. 10 | // The hover styles should be customized. 11 | 12 | .hover-hook { 13 | .hover1 { 14 | // This hides the element from screenreaders too. 15 | // Dunno if thats a good idea or not but the 16 | // workaround is mental. The workaround would 17 | // work well as a sass placeholder. 18 | visibility: hidden; 19 | } 20 | 21 | .hover2 { 22 | @include opacity(.5); 23 | } 24 | 25 | .hover3 { 26 | color: ; 27 | } 28 | 29 | &:hover { 30 | .hover1 { 31 | visibility: visibile; 32 | } 33 | 34 | .hover2 { 35 | @include opacity(1); 36 | } 37 | 38 | .hover3 { 39 | color: ; 40 | } 41 | } 42 | } -------------------------------------------------------------------------------- /css/objects/spacing.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Spacing 3 | // ------------------------- 4 | 5 | // Variables 6 | // ------------------------- 7 | 8 | $spaceS: 6px; 9 | $spaceM: 12px; 10 | $spaceL: 30px; 11 | 12 | // Root component 13 | // ------------------------- 14 | 15 | .o-pas { 16 | padding: $spaceS; 17 | } 18 | .o-pts { 19 | padding-top: $spaceS; 20 | } 21 | .o-prs { 22 | padding-right: $spaceS; 23 | } 24 | .o-pbs { 25 | padding-bottom: $spaceS; 26 | } 27 | .o-pls { 28 | padding-left: $spaceS; 29 | } 30 | 31 | .o-pam { 32 | padding: $spaceM; 33 | } 34 | .o-ptm { 35 | padding-top: $spaceM; 36 | } 37 | .o-prm { 38 | padding-right: $spaceM; 39 | } 40 | .o-pbm { 41 | padding-bottom: $spaceM; 42 | } 43 | .o-plm { 44 | padding-left: $spaceM; 45 | } 46 | 47 | .o-pal { 48 | padding: $spaceL; 49 | } 50 | .o-ptl { 51 | padding-top: $spaceL; 52 | } 53 | .o-prl { 54 | padding-right: $spaceL; 55 | } 56 | .o-pbl { 57 | padding-bottom: $spaceL; 58 | } 59 | .o-pll { 60 | padding-left: $spaceL; 61 | } 62 | 63 | .o-marginAuto { 64 | margin-left: auto; 65 | margin-right: auto; 66 | } -------------------------------------------------------------------------------- /css/components/modal.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Modal dialog 3 | // ------------------------- 4 | 5 | // Variables 6 | // ------------------------- 7 | 8 | $modalWide: 500px; 9 | 10 | // Component root 11 | // ------------------------- 12 | 13 | .modalDialog { 14 | @extend .o-posAbsolute; 15 | top: 100px; 16 | left: 50%; 17 | @extend .bg-White; 18 | @extend .borderSolid; 19 | @extend .borderThin; 20 | @extend .borderColorBevel; 21 | @extend .o-bra2; 22 | box-shadow: 0 2px 6px rgba(0,0,0,.05); 23 | @extend .u-cf; 24 | @extend .opacity0; 25 | } 26 | 27 | // Component modifiers 28 | // ------------------------- 29 | 30 | .modalDialog--wide { 31 | width: $modalWide; 32 | margin-left: -$modalWide / 2; 33 | } 34 | 35 | // Component descendants 36 | // ------------------------- 37 | 38 | .modalDialog-header { 39 | @extend .o-pal; 40 | @extend .u-cf; 41 | } 42 | 43 | .modalDialog-body { 44 | @extend .o-prl; 45 | @extend .o-pbl; 46 | @extend .o-pll; 47 | @extend .u-cf; 48 | } 49 | 50 | .modalDialog-footer { 51 | @extend .bg-Light; 52 | @extend .o-pal; 53 | @extend .u-cf; 54 | } 55 | 56 | // Component states 57 | // ------------------------- 58 | 59 | .modalDialog.is-active { 60 | @extend .opacity1; 61 | } -------------------------------------------------------------------------------- /css/styleguide.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Compiler 3 | // ------------------------- 4 | 5 | // Include all relevant SCSS files here for 6 | // compilation. Remember, the order matters. 7 | 8 | // Base CSS 9 | // ------------------------- 10 | 11 | @import "base/normalize"; 12 | @import "base/colors"; 13 | 14 | // Objects 15 | // ------------------------- 16 | 17 | @import "objects/display"; 18 | @import "objects/position"; 19 | @import "objects/floats"; 20 | @import "objects/clears"; 21 | @import "objects/spacing"; 22 | @import "objects/font-weight"; 23 | @import "objects/text-align"; 24 | @import "objects/borders"; 25 | @import "objects/align"; 26 | @import "objects/border-radius"; 27 | @import "objects/overflow"; 28 | @import "objects/white-space"; 29 | @import "objects/opacity"; 30 | 31 | 32 | // Utilities 33 | // ------------------------- 34 | 35 | @import "utilities/clearfix"; 36 | @import "utilities/grid"; 37 | @import "utilities/inline"; 38 | @import "utilities/page-wrap"; 39 | @import "utilities/spacing"; 40 | @import "utilities/vertically-center"; 41 | @import "utilities/hidden"; 42 | @import "utilities/invisible"; 43 | @import "utilities/visually-hidden"; 44 | 45 | 46 | // Components 47 | // ------------------------- 48 | 49 | @import "components/modal"; 50 | 51 | 52 | // Other 53 | // ------------------------- 54 | 55 | @import "base/shame"; -------------------------------------------------------------------------------- /modal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 |My money's in that office, right? If she start giving me some bullshit about it ain't there, and we got to go someplace else and get it, I'm gonna shoot you in the head then and there. Then I'm gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when I'm talking to you, motherfucker. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first motherfucker to get shot. You understand?
20 || t |