├── CNAME ├── docs ├── CNAME ├── scripts │ └── dependencies │ │ ├── safe-blur.js │ │ ├── prism-less.min.js │ │ ├── data.js │ │ ├── safe-active-element.js │ │ ├── plugin.js │ │ ├── prism-scss.min.js │ │ ├── scroll-parent.js │ │ ├── prism-stylus.min.js │ │ ├── svg4everybody.min.js │ │ ├── jquery.ui.touch-punch.js │ │ ├── mouse.js │ │ ├── scrollMonitor.js │ │ ├── jquery.deserialize.js │ │ ├── clipboard.min.js │ │ ├── esds-doc.js │ │ └── widget.js ├── styles │ └── dependencies │ │ └── prism.css └── icons │ ├── esds.svg │ └── eightshapes-text-crop.svg ├── gulpfile.js ├── components ├── text_crop_samples │ ├── text_crop_samples.js │ ├── text_crop_samples.scss │ └── text_crop_samples.njk ├── step_row │ └── step_row.scss ├── code_snippet │ ├── code_snippet.scss │ ├── code_snippet.js │ └── code_snippet.njk ├── icon │ └── icon.njk ├── hero │ └── hero.scss ├── headcrumb │ └── headcrumb.scss ├── tabs │ └── tabs.scss ├── text_crop_measurement_tool │ ├── text_crop_measurement_tool.njk │ └── text_crop_measurement_tool.scss └── font_form │ ├── font_form.njk │ └── font_form.scss ├── README.md ├── icons ├── caret-down.svg ├── angle-left.svg ├── angle-right.svg ├── bars.svg ├── clipboard.svg ├── close.svg ├── medium.svg ├── linkedin.svg ├── arrow-circle-up.svg ├── arrow-circle-down.svg ├── stopwatch.svg ├── twitter.svg ├── github.svg ├── eightshapes-mark.svg ├── participants.svg └── eightshapes-logo.svg ├── styles ├── _esds-doc-theming.scss ├── _variables.scss └── eightshapes-text-crop.scss ├── .npmignore ├── .gitignore ├── package.json ├── includes ├── stylus_mixin.njk ├── less_mixin.njk └── scss_mixin.njk ├── .eslintrc ├── esds-build-config.json ├── .sass-lint.yml ├── pages └── index.njk └── scripts └── eightshapes-text-crop.js /CNAME: -------------------------------------------------------------------------------- 1 | text-crop.eightshapes.com 2 | -------------------------------------------------------------------------------- /docs/CNAME: -------------------------------------------------------------------------------- 1 | text-crop.eightshapes.com 2 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require('esds-build'); -------------------------------------------------------------------------------- /components/text_crop_samples/text_crop_samples.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Text Crop 2 | 3 | This tool generates scss, less, and stylus mixins to remove the extra whitespace above and below text on the web. 4 | 5 | See [text-crop.eightshapes.com](http://text-crop.eightshapes.com). 6 | -------------------------------------------------------------------------------- /icons/caret-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/step_row/step_row.scss: -------------------------------------------------------------------------------- 1 | .eswt-step-row__step-number { 2 | @include esds-eyebrow-heading; 3 | text-align: center; 4 | } 5 | 6 | .eswt-step-row__title { 7 | @include esds-text-color('primary'); 8 | @include esds-level-2-heading; 9 | text-align: center; 10 | } 11 | -------------------------------------------------------------------------------- /styles/_esds-doc-theming.scss: -------------------------------------------------------------------------------- 1 | // ESDS Doc Globals 2 | $esds-doc-font-family-sans-serif: $esds-font-family-sans-serif; 3 | 4 | // ESDS Doc Button 5 | $esds-doc-button-text-transform: none; 6 | 7 | // ESDS Doc Code Snippet 8 | $esds-doc-code-snippet-source-background-color: $esds-background-color-white; 9 | -------------------------------------------------------------------------------- /components/code_snippet/code_snippet.scss: -------------------------------------------------------------------------------- 1 | .es-text-crop-code-snippet__tabs-wrap { 2 | text-align: center; 3 | } 4 | 5 | .mixin-code-tab-pane { 6 | position: relative; 7 | } 8 | 9 | // Shouldn't need this, defect in esds-doc 10 | .esds-doc-code-snippet__pre { 11 | margin: 0; 12 | } 13 | -------------------------------------------------------------------------------- /components/icon/icon.njk: -------------------------------------------------------------------------------- 1 | {% macro icon(icon_name="arrow-circle-down", class="false") %} 2 | 3 | {{ icon_name }} 4 | 5 | 6 | {% endmacro %} 7 | -------------------------------------------------------------------------------- /icons/angle-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/angle-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/bars.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | npm-debug.log* 4 | 5 | # Bower dependency directory (https://bower.io/) 6 | bower_components 7 | 8 | # Dependency directories 9 | node_modules/ 10 | jspm_packages/ 11 | 12 | # Optional npm cache directory 13 | .npm 14 | 15 | # Optional eslint cache 16 | .eslintcache 17 | 18 | # dotenv environment variables file 19 | .env 20 | 21 | # default webroot build directory 22 | /_site 23 | 24 | # MacOS folder attributes 25 | *.DS_Store 26 | -------------------------------------------------------------------------------- /icons/clipboard.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/close.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/code_snippet/code_snippet.js: -------------------------------------------------------------------------------- 1 | /* 2 | global $ 3 | */ 4 | 5 | "use strict"; 6 | $(document).ready(function(){ 7 | function showMixinTab() { 8 | const language = $("[name='style-preprocessor']:checked").attr("id"); 9 | 10 | $(".mixin-code-tab-pane").hide(); 11 | $("#style-preprocessor-" + language).show(); 12 | } 13 | 14 | $("#style-preprocessor-less, #style-preprocessor-stylus").hide(); 15 | $("[name='style-preprocessor']").on("change", showMixinTab); 16 | }); 17 | -------------------------------------------------------------------------------- /icons/medium.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/linkedin.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/arrow-circle-up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/arrow-circle-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/stopwatch.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/hero/hero.scss: -------------------------------------------------------------------------------- 1 | .eswt-hero { 2 | @include esds-text-color('primary'); 3 | @include esds-font-reset; 4 | } 5 | 6 | .eswt-hero__title { 7 | @include esds-text-crop; 8 | @include esds-level-1-heading; 9 | margin: $esds-space-stack-2-x; 10 | text-align: center; 11 | } 12 | 13 | .eswt-hero__lead { 14 | @include esds-text-crop; 15 | @include esds-text-color('primary'); 16 | font-size: $esds-font-size-heading-level-2-default; 17 | font-weight: $esds-font-weight-light; 18 | margin: 0 auto; 19 | max-width: 640px; 20 | } 21 | -------------------------------------------------------------------------------- /docs/scripts/dependencies/safe-blur.js: -------------------------------------------------------------------------------- 1 | ( function( factory ) { 2 | if ( typeof define === "function" && define.amd ) { 3 | 4 | // AMD. Register as an anonymous module. 5 | define( [ "jquery", "./version" ], factory ); 6 | } else { 7 | 8 | // Browser globals 9 | factory( jQuery ); 10 | } 11 | } ( function( $ ) { 12 | return $.ui.safeBlur = function( element ) { 13 | 14 | // Support: IE9 - 10 only 15 | // If the is blurred, IE will switch windows, see #9420 16 | if ( element && element.nodeName.toLowerCase() !== "body" ) { 17 | $( element ).trigger( "blur" ); 18 | } 19 | }; 20 | 21 | } ) ); 22 | -------------------------------------------------------------------------------- /icons/twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/scripts/dependencies/prism-less.min.js: -------------------------------------------------------------------------------- 1 | Prism.languages.less=Prism.languages.extend("css",{comment:[/\/\*[\s\S]*?\*\//,{pattern:/(^|[^\\])\/\/.*/,lookbehind:!0}],atrule:{pattern:/@[\w-]+?(?:\((?:[^(){}]|\([^(){}]*\))*\)|[^(){};])*?(?=\s*\{)/,inside:{punctuation:/[:()]/}},selector:{pattern:/(?:@\{[\w-]+\}|[^{};\s@])(?:@\{[\w-]+\}|\((?:[^(){}]|\([^(){}]*\))*\)|[^(){};@])*?(?=\s*\{)/,inside:{variable:/@+[\w-]+/}},property:/(?:@\{[\w-]+\}|[\w-])+(?:\+_?)?(?=\s*:)/i,operator:/[+\-*\/]/}),Prism.languages.insertBefore("less","property",{variable:[{pattern:/@[\w-]+\s*:/,inside:{punctuation:/:/}},/@@?[\w-]+/],"mixin-usage":{pattern:/([{;]\s*)[.#](?!\d)[\w-]+.*?(?=[(;])/,lookbehind:!0,alias:"function"}}); -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .env 2 | # Logs 3 | logs 4 | npm-debug.log* 5 | 6 | # Bower dependency directory (https://bower.io/) 7 | bower_components 8 | 9 | # Dependency directories 10 | node_modules/ 11 | jspm_packages/ 12 | 13 | # Optional npm cache directory 14 | .npm 15 | 16 | # Optional eslint cache 17 | .eslintcache 18 | 19 | # dotenv environment variables file 20 | .env 21 | 22 | # Auto-generated files 23 | /dist 24 | /data/icons.json 25 | 26 | /tokens/* 27 | # Keep yaml token source file 28 | !/tokens/*.yaml 29 | 30 | # Ignore root .njk files in /components 31 | /components/* 32 | # keep files in subdirectories in /components 33 | !/components/*/ 34 | 35 | 36 | # MacOS folder attributes 37 | *.DS_Store 38 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "eightshapes-text-crop", 3 | "version": "1.0.1", 4 | "description": "This tool generates scss, less, and stylus mixins to remove the extra whitespace above and below text on the web.", 5 | "main": "docs/index.html", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "prepack": "gulp build:all" 9 | }, 10 | "contributors": [ 11 | "Kevin Powell ", 12 | "Nathan Curtis " 13 | ], 14 | "license": "MIT", 15 | "devDependencies": { 16 | "esds-build": "^0.47.0", 17 | "esds-library": "^0.4.1" 18 | }, 19 | "dependencies": { 20 | "clipboard": "^1.7.1", 21 | "esds-doc": "^0.29.2", 22 | "jquery": "^3.2.1", 23 | "jquery-deserialize": "^2.0.0-rc1", 24 | "jquery-ui": "^1.12.1", 25 | "jquery-ui-touch-punch": "^0.2.3", 26 | "svg4everybody": "^2.1.9" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /icons/github.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/headcrumb/headcrumb.scss: -------------------------------------------------------------------------------- 1 | .eswt-headcrumb { 2 | @include esds-text-color('primary'); 3 | @include esds-font-reset; 4 | } 5 | 6 | .eswt-headcrumb__link { 7 | @include esds-text-color('primary'); 8 | align-items: baseline; 9 | display: flex; 10 | justify-content: center; 11 | position: relative; 12 | text-decoration: none; 13 | top: -6px; 14 | 15 | &:hover { 16 | text-decoration: none; 17 | } 18 | } 19 | 20 | .eswt-headcrumb__delimiter { 21 | fill: $esds-color-white; 22 | position: relative; 23 | top: 4px; 24 | } 25 | 26 | .eswt-headcrumb__brand-mark { 27 | fill: $esds-color-white; 28 | height: 30px; 29 | margin-right: $esds-space-generic-half-x; 30 | position: relative; 31 | top: 6px; 32 | width: 30px; 33 | } 34 | 35 | .eswt-headcrumb__brand-name { 36 | @include esds-text-crop; 37 | font-size: $esds-font-size-heading-level-2-default; 38 | } 39 | 40 | .eswt-headcrumb__crumb-text { 41 | @include esds-text-crop; 42 | font-size: $esds-font-size-body-l-default; 43 | } 44 | -------------------------------------------------------------------------------- /docs/scripts/dependencies/data.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * jQuery UI :data 1.12.1 3 | * http://jqueryui.com 4 | * 5 | * Copyright jQuery Foundation and other contributors 6 | * Released under the MIT license. 7 | * http://jquery.org/license 8 | */ 9 | 10 | //>>label: :data Selector 11 | //>>group: Core 12 | //>>description: Selects elements which have data stored under the specified key. 13 | //>>docs: http://api.jqueryui.com/data-selector/ 14 | 15 | ( function( factory ) { 16 | if ( typeof define === "function" && define.amd ) { 17 | 18 | // AMD. Register as an anonymous module. 19 | define( [ "jquery", "./version" ], factory ); 20 | } else { 21 | 22 | // Browser globals 23 | factory( jQuery ); 24 | } 25 | } ( function( $ ) { 26 | return $.extend( $.expr[ ":" ], { 27 | data: $.expr.createPseudo ? 28 | $.expr.createPseudo( function( dataName ) { 29 | return function( elem ) { 30 | return !!$.data( elem, dataName ); 31 | }; 32 | } ) : 33 | 34 | // Support: jQuery <1.8 35 | function( elem, i, match ) { 36 | return !!$.data( elem, match[ 3 ] ); 37 | } 38 | } ); 39 | } ) ); 40 | -------------------------------------------------------------------------------- /docs/scripts/dependencies/safe-active-element.js: -------------------------------------------------------------------------------- 1 | ( function( factory ) { 2 | if ( typeof define === "function" && define.amd ) { 3 | 4 | // AMD. Register as an anonymous module. 5 | define( [ "jquery", "./version" ], factory ); 6 | } else { 7 | 8 | // Browser globals 9 | factory( jQuery ); 10 | } 11 | } ( function( $ ) { 12 | return $.ui.safeActiveElement = function( document ) { 13 | var activeElement; 14 | 15 | // Support: IE 9 only 16 | // IE9 throws an "Unspecified error" accessing document.activeElement from an