├── CNAME ├── .nojekyll ├── 404.html ├── imgs └── scout-app-corner.svg ├── .gitignore ├── LICENSE ├── sass ├── _ven.svglinegraph.sass ├── style.scss ├── _ven.meyer.sass └── _ven.normalize.sass ├── README.md ├── example.scss ├── js ├── ven.selectorstoarray.js ├── ven.svglinegraph.js ├── ven.specificity.js ├── ven.reworkcss.js └── ven.jquery-2.2.3.min.js ├── css └── style.css └── index.html /CNAME: -------------------------------------------------------------------------------- 1 | graphmycss.com 2 | -------------------------------------------------------------------------------- /.nojekyll: -------------------------------------------------------------------------------- 1 | Without this file github.io ignores files and folders that start with _. 2 | -------------------------------------------------------------------------------- /404.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | -------------------------------------------------------------------------------- /imgs/scout-app-corner.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # nyc test coverage 18 | .nyc_output 19 | 20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 21 | .grunt 22 | 23 | # node-waf configuration 24 | .lock-wscript 25 | 26 | # Compiled binary addons (http://nodejs.org/api/addons.html) 27 | build/Release 28 | 29 | # Dependency directories 30 | node_modules 31 | jspm_packages 32 | 33 | # Optional npm cache directory 34 | .npm 35 | 36 | # Optional REPL history 37 | .node_repl_history 38 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 The Jared Wilcurt 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /sass/_ven.svglinegraph.sass: -------------------------------------------------------------------------------- 1 | body 2 | background: #F2F2F2 3 | color: $graphBg 4 | font: 400 16px roboto, helvetica, arial 5 | 6 | h1 7 | margin-bottom: 0px 8 | 9 | #wrapper 10 | width: 650px 11 | background: white 12 | margin: 2em auto 13 | padding: 1em 14 | box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1) 15 | 16 | .explanation 17 | display: inline-block 18 | margin-bottom: 3em 19 | 20 | .chart 21 | position: relative 22 | display: flex 23 | width: 600px 24 | height: 300px 25 | border-bottom: 1px solid lighten($graphBg, 35%) 26 | margin: auto 27 | padding-left: 50px 28 | justify-content: space-between 29 | .chartMeasurements 30 | position: absolute 31 | top: 0px 32 | left: 0px 33 | display: flex 34 | width: 100% 35 | height: 100% 36 | text-align: left 37 | justify-content: space-between 38 | flex-direction: column 39 | z-index: 1 40 | .chartMeasurement 41 | width: 100% 42 | border-top: 1px solid lighten($graphBg, 35%) 43 | flex-grow: 1 44 | svg 45 | position: relative 46 | z-index: 2 47 | polygon 48 | box-shadow: inset 2px 0px red 49 | fill: rgba($graphBg, 0.6) 50 | -------------------------------------------------------------------------------- /sass/style.scss: -------------------------------------------------------------------------------- 1 | $graphBg: #4183D7; 2 | 3 | @mixin user-select-none { 4 | -webkit-touch-callout: none; 5 | -webkit-user-select: none; 6 | -khtml-user-select: none; 7 | -moz-user-select: none; 8 | -ms-user-select: none; 9 | user-select: none; 10 | } 11 | 12 | @import "ven.meyer"; 13 | @import "ven.normalize"; 14 | @import "ven.svglinegraph"; 15 | 16 | .chart { 17 | margin: 0px auto 30px; 18 | } 19 | 20 | .explanation { 21 | display: none; 22 | } 23 | 24 | textarea { 25 | font-family: monospace; 26 | font-size: 15px; 27 | } 28 | 29 | #paste { 30 | width: 100%; 31 | height: 90px; 32 | margin: 8px 0px 20px 0px; 33 | } 34 | 35 | #data { 36 | display: inline-block; 37 | margin: 10px 0px 38 | } 39 | 40 | .data { 41 | width: 100%; 42 | height: 300px; 43 | margin: 0px 0px 28px 0px; 44 | } 45 | 46 | #pills { 47 | @include user-select-none; 48 | position: relative; 49 | top: 1px; 50 | display: inline-block; 51 | margin: 13px 0px 0px 0px; 52 | float: right; 53 | li { 54 | display: inline-block; 55 | border: 1px solid $graphBg; 56 | border-radius: 11px 11px 0px 0px; 57 | margin: 0px; 58 | padding: 3px 5px; 59 | cursor: pointer; 60 | &.selected { 61 | background: $graphBg; 62 | color: #FFF; 63 | cursor: default; 64 | } 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ITCSS: CSS Specificity Graph 2 | 3 | A CSS Selector Specificity graph based on the Inverted Triangle CSS Methodology 4 | 5 | * **[View and use the graph online](http://TheJaredWilcurt.github.io/itcss-specificity-graph)** :arrow_left: (this is what you want) 6 | * [Harry Roberts - Managing CSS Projects with ITCSS](https://www.youtube.com/watch?v=1OKZOV-iLj4&t=6m47s) (YouTube) 7 | * [ITCSS Slides from the above talk](https://speakerdeck.com/dafed/managing-css-projects-with-itcss) 8 | 9 | 10 | ## This repo uses: 11 | 12 | * [Alan Menhennet's SVG Line Graph](http://codepen.io/alanmenhennet/pen/WxrXww) 13 | * [CSS Selectors to JS Array](http://github.com/TheJaredWilcurt/css-selectors-to-js-array) 14 | * [SPECIFICITY](https://github.com/keeganstreet/specificity) 15 | * [GitHub Corners](http://tholman.com/github-corners/) 16 | * [jQuery](http://jquery.com) 17 | * [Meyer Resets](http://github.com/TheJaredWilcurt/meyer-sass) 18 | * [Normalize](https://necolas.github.io/normalize.css/) 19 | 20 | 21 | ## Contribute: 22 | 23 | * The design could be improved 24 | * Need to go and clean up the Sass folder, it should *really* be set up to use ITCSS (yeah, that needs fixed) 25 | * We need lots of testing of the [CSS Selectors to JS Array](http://github.com/TheJaredWilcurt/css-selectors-to-js-array) library. To make sure all valid CSS can be parsed correctly. 26 | * Add in a CSS Validator library. Prevent CSS parsing unless the file is valid. If the file is invalid, display a warning. 27 | * Would be nice to have some simple ITCSS [explaination](http://imgur.com/a/6fS7V) on the page. 28 | 29 | 30 | ## License 31 | 32 | MIT License (2016) 33 | -------------------------------------------------------------------------------- /sass/_ven.meyer.sass: -------------------------------------------------------------------------------- 1 | 2 | //Resets the default styles in all browsers so they don't render things differently by default. 3 | // 4 | //The Meyer resets a great at catching fringe cases and old browser compatibility. 5 | //It is recommended that you load "Normalize.css" after this file as it is more up to date and 6 | //will support more modern browsers and mobile better. They work very good together. 7 | 8 | // http://github.com/TheJaredWilcurt/meyer-sass 9 | // http://meyerweb.com/eric/tools/css/reset/ 10 | // v2.0 | 20110126 11 | // License: none (public domain) 12 | 13 | html, body, div, span, applet, object, iframe, 14 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 15 | a, abbr, acronym, address, big, cite, code, 16 | del, dfn, em, img, ins, kbd, q, s, samp, 17 | small, strike, strong, sub, sup, tt, var, 18 | b, u, i, center, 19 | dl, dt, dd, ol, ul, li, 20 | fieldset, form, label, legend, 21 | table, caption, tbody, tfoot, thead, tr, th, td, 22 | article, aside, canvas, details, embed, 23 | figure, figcaption, footer, header, hgroup, 24 | menu, nav, output, ruby, section, summary, 25 | time, mark, audio, video 26 | margin: 0 27 | padding: 0 28 | border: 0 29 | font-size: 100% 30 | font: inherit 31 | vertical-align: baseline 32 | 33 | // HTML5 display-role reset for older browsers 34 | 35 | article, aside, details, figcaption, figure, 36 | footer, header, hgroup, menu, nav, section 37 | display: block 38 | 39 | body 40 | line-height: 1 41 | 42 | ol, ul 43 | list-style: none 44 | 45 | blockquote, q 46 | quotes: none 47 | &:before, &:after 48 | content: '' 49 | content: none 50 | 51 | table 52 | border-collapse: collapse 53 | border-spacing: 0 54 | -------------------------------------------------------------------------------- /example.scss: -------------------------------------------------------------------------------- 1 | 2 | @charset "utf-8"; // Character type for the stylesheet 3 | 4 | // ITCSS: SETTINGS 5 | @import "_var.sass"; // Sass Variables - Does not effect page, but other Sass files reference this file. 6 | 7 | 8 | // ITCSS: TOOLS 9 | @import "_mixins.sass"; // Sass Mixins - Does not effect page, but other Sass files reference this file. 10 | @import "_functions.sass"; // Sass Functions - Does not effect page, but other Sass files reference this file. 11 | 12 | 13 | // ITCSS: RESETS - Remove inconsistencies in the way different browsers render elements by default 14 | // npm install --save-dev meyer-sass normalize.css 15 | @import "../node_modules/meyer-sass/_meyer.sass"; // The Eric Meyers resets - Good for older browsers and fringe cases. 16 | @import "../node_modules/normalize.css/normalize"; // Normalize.css - Good for mobile and modern browsers 17 | 18 | 19 | // ITCSS: FRAMEWORKS/THEMES 20 | 21 | 22 | // ITCSS: PLUGINS 23 | 24 | 25 | // ITCSS: GENERIC (ELEMENTS/BASE) 26 | @import "_base.sass"; // h1, h2, h3, p, etc. 27 | @import "_layout.sass"; // General layout classes, like .col-xs-4 28 | @import "_utility.sass"; // Utility classes, like .wrapper or .text-center 29 | 30 | 31 | // ITCSS: OBJECTS - Grouped reusable chunks 32 | @import "_hamburger.sass"; // pure css hamburger menu that animates on click 33 | 34 | 35 | // ITCSS: COMPONENTS - Component-specific styles 36 | @import "_nav.sass"; // General navigation styles used in the top/side nav 37 | 38 | 39 | // ITCSS: CONTAINERS 40 | @import "_topnav.sass"; // Nav styles unique to when it is in the header 41 | @import "_sidenav.sass"; // Nav styles unique to when it is in the sidebar 42 | 43 | 44 | // ITCSS: TRUMPS 45 | @import "_atomic.sass"; // Atomic classes are typically added to elements to override a specific css property 46 | @import "_mediaqueries.sass"; // Adjusts the CSS of elements depending on browser or device resolution. Adaptive Web Design. 47 | @import "_trumps.sass"; // Use sparingly. These are meant to override above styles by using more specific selectors 48 | @import "_shame.sass"; // This is code you wrote to meet a deadline and need to come back and fix later 49 | -------------------------------------------------------------------------------- /js/ven.selectorstoarray.js: -------------------------------------------------------------------------------- 1 | // github.com/TheJaredWilcurt/css-selectors-to-js-array | Public Domain | v1.0.2 2 | 3 | function selectorsToArray (css) { 4 | // Regex to detect @media (stuff) then { 5 | var mediaQ = /(?:@media.*?\{)/igm; 6 | // Regex to detect //single line comments 7 | var comment = /(?:\/\/.*?\n)/ig; 8 | // Regex to detext /* multi-line comments */ 9 | var comments = /(?:\/\*(.|\n)*?\*\/)/igm; 10 | // Check if the CSS contains any media queries 11 | if (mediaQ.test(css)) { 12 | // Remove all media queries, they are not selectors 13 | css = css.replace(mediaQ, ''); 14 | } 15 | // Check if the CSS contains single line comments 16 | if (comment.test(css)) { 17 | // Remove all comments, they are not selectors 18 | css = css.replace(comment, ''); 19 | } 20 | // Check if the CSS contains multi-line comments 21 | if (comments.test(css)) { 22 | // Remove all comments, they are not selectors 23 | css = css.replace(comments, ''); 24 | } 25 | 26 | // Split the whole thing based on opening curly braces 27 | css = css.split("{"); 28 | // Loop through the split in the most performant way possible 29 | for (var i = (css.length - 1); i >= 0; i--) { 30 | // Remove excess whitespace and split on the ending curly brace 31 | var splitEndBracket = css[i].trim().split("}"); 32 | // If there was a ending curly brace grab the last item in the split array 33 | // I'm not sure if that .trim(); actually does anything here, but leaving it in case it fixes fringe cases. 34 | css[i] = splitEndBracket[splitEndBracket.length - 1] || css[i].trim(); 35 | // If there are comma separated CSS selectors 36 | if (css[i].indexOf(',') > -1) { 37 | // Split based on comma separation 38 | css[i] = css[i].split(',') 39 | // Loop through the comma separated selectors performantly 40 | for (var j = (css[i].length - 1); j >= 0; j--) { 41 | // Remove excess white space from each selector 42 | css[i][j] = css[i][j].trim(); 43 | } 44 | // Flatten the CSS array so it does not contain arrays within arrays 45 | // .me, .you, .everyone-we-know ==> [[".me", ".you", ".everyone-we-know"]] ==> [".me", ".you", ".everyone-we-know"] 46 | css = [].concat.apply([], css); 47 | } 48 | // One last remove whitespace (this does actually catch things) 49 | css[i] = css[i].trim(); 50 | } 51 | 52 | // Remove the last property/value pair and ending closing brace 53 | // [".thing", "", "h1", "font-size: 20px;}"] ==> [".thing", "", "h1"] 54 | css.pop(); 55 | 56 | // Remove any empty strings from the array 57 | // [".thing", "", "h1"] ==> [".thing", "h1"] 58 | css = css.filter(Boolean) 59 | 60 | var arrayOfSelectors = css; 61 | 62 | // Return an array of CSS Selectors in the order they were in the CSS file with none removed/missing 63 | return(arrayOfSelectors); 64 | } 65 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}/*!normalize.css v2.1.3|MIT License|git.io/normalize*/article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-webkit-text-size-adjust:100%}body{margin:0}a{background:transparent}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:0.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#FF0;color:#000}code,kbd,pre,samp{font-family:monospace, serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid #C0C0C0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}body{background:#F2F2F2;color:#4183D7;font:400 16px roboto, helvetica, arial}h1{margin-bottom:0px}#wrapper{width:650px;background:white;margin:2em auto;padding:1em;box-shadow:0px 5px 10px rgba(0,0,0,0.1)}.explanation{display:inline-block;margin-bottom:3em}.chart{position:relative;display:flex;width:600px;height:300px;border-bottom:1px solid #d4e3f6;margin:auto;padding-left:50px;justify-content:space-between}.chart .chartMeasurements{position:absolute;top:0px;left:0px;display:flex;width:100%;height:100%;text-align:left;justify-content:space-between;flex-direction:column;z-index:1}.chart .chartMeasurements .chartMeasurement{width:100%;border-top:1px solid #d4e3f6;flex-grow:1}.chart svg{position:relative;z-index:2}.chart svg polygon{box-shadow:inset 2px 0px red;fill:rgba(65,131,215,0.6)}.chart{margin:0px auto 30px}.explanation{display:none}textarea{font-family:monospace;font-size:15px}#paste{width:100%;height:90px;margin:8px 0px 20px 0px}#data{display:inline-block;margin:10px 0px}.data{width:100%;height:300px;margin:0px 0px 28px 0px}#pills{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;top:1px;display:inline-block;margin:13px 0px 0px 0px;float:right}#pills li{display:inline-block;border:1px solid #4183D7;border-radius:11px 11px 0px 0px;margin:0px;padding:3px 5px;cursor:pointer}#pills li.selected{background:#4183D7;color:#FFF;cursor:default} 2 | -------------------------------------------------------------------------------- /js/ven.svglinegraph.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | //http://codepen.io/alanmenhennet/pen/WxrXww 4 | 5 | 6 | var chart = { 7 | element : "", 8 | chart : "", 9 | polygon : "", 10 | width : 100, 11 | height : 50, 12 | maxValue : 0, 13 | values : [], 14 | points : [], 15 | vSteps : 5, 16 | measurements : [], 17 | 18 | calcMeasure: function () { 19 | this.measurements = []; 20 | for (var x = 0; x < this.vSteps; x++) { 21 | var measurement = Math.ceil((this.maxValue / this.vSteps) * (x +1)); 22 | this.measurements.push(measurement); 23 | } 24 | 25 | this.measurements.reverse(); 26 | }, 27 | /** 28 | * Get Element 29 | * Take the selector being passed, determine if 30 | * the selector is a class (".") or an id ("#"), and get the element 31 | * @param {String} element - the element selector 32 | */ 33 | getElement: function (element) { 34 | if (element.indexOf(".") == 0) { 35 | this.element = document.getElementsByClassName("chart")[0] 36 | } 37 | else if (element.indexOf("#") == 0) { 38 | this.element = document.getElementById("chart"); 39 | } 40 | else { 41 | console.error("Please select a valid element"); 42 | } 43 | }, 44 | /** 45 | * Create Chart 46 | * - calc the max value 47 | * - calc the points for the polygon 48 | * - create a chart