├── .gitmodules ├── _config.yml ├── .gitignore ├── src ├── base │ ├── prototypes │ │ ├── img │ │ │ ├── logo@2x.png │ │ │ ├── search@2x.png │ │ │ └── search.svg │ │ ├── _includes │ │ │ ├── wireframe--tk.html │ │ │ ├── head.html │ │ │ ├── form--text-entry.html │ │ │ ├── swatch.html │ │ │ └── portal--header.html │ │ ├── css │ │ │ └── united.app.css.zip │ │ ├── fonts │ │ │ ├── 18Franklin-Bold.eot │ │ │ ├── 18Franklin-Bold.ttf │ │ │ ├── 18Franklin-Thin.eot │ │ │ ├── 18Franklin-Thin.ttf │ │ │ ├── 18Franklin-Black.eot │ │ │ ├── 18Franklin-Black.ttf │ │ │ ├── 18Franklin-Black.woff │ │ │ ├── 18Franklin-Bold.woff │ │ │ ├── 18Franklin-Bold.woff2 │ │ │ ├── 18Franklin-Italic.eot │ │ │ ├── 18Franklin-Italic.ttf │ │ │ ├── 18Franklin-Light.eot │ │ │ ├── 18Franklin-Light.ttf │ │ │ ├── 18Franklin-Light.woff │ │ │ ├── 18Franklin-Medium.eot │ │ │ ├── 18Franklin-Medium.ttf │ │ │ ├── 18Franklin-Thin.woff │ │ │ ├── 18Franklin-Thin.woff2 │ │ │ ├── 18Franklin-Black.woff2 │ │ │ ├── 18Franklin-ExtraBold.eot │ │ │ ├── 18Franklin-ExtraBold.ttf │ │ │ ├── 18Franklin-Italic.woff │ │ │ ├── 18Franklin-Italic.woff2 │ │ │ ├── 18Franklin-Light.woff2 │ │ │ ├── 18Franklin-Medium.woff │ │ │ ├── 18Franklin-Medium.woff2 │ │ │ ├── 18Franklin-Regular.eot │ │ │ ├── 18Franklin-Regular.ttf │ │ │ ├── 18Franklin-Regular.woff │ │ │ ├── 18Franklin-Regular.woff2 │ │ │ ├── 18Franklin-SemiBold.eot │ │ │ ├── 18Franklin-SemiBold.ttf │ │ │ ├── 18Franklin-SemiBold.woff │ │ │ ├── 18Franklin-BlackItalic.eot │ │ │ ├── 18Franklin-BlackItalic.ttf │ │ │ ├── 18Franklin-BoldItalic.eot │ │ │ ├── 18Franklin-BoldItalic.ttf │ │ │ ├── 18Franklin-BoldItalic.woff │ │ │ ├── 18Franklin-ExtraBold.woff │ │ │ ├── 18Franklin-ExtraBold.woff2 │ │ │ ├── 18Franklin-ExtraLight.eot │ │ │ ├── 18Franklin-ExtraLight.ttf │ │ │ ├── 18Franklin-ExtraLight.woff │ │ │ ├── 18Franklin-LightItalic.eot │ │ │ ├── 18Franklin-LightItalic.ttf │ │ │ ├── 18Franklin-SemiBold.woff2 │ │ │ ├── 18Franklin-ThinItalic.eot │ │ │ ├── 18Franklin-ThinItalic.ttf │ │ │ ├── 18Franklin-ThinItalic.woff │ │ │ ├── 18Franklin-BlackItalic.woff │ │ │ ├── 18Franklin-BlackItalic.woff2 │ │ │ ├── 18Franklin-BoldItalic.woff2 │ │ │ ├── 18Franklin-ExtraLight.woff2 │ │ │ ├── 18Franklin-LightItalic.woff │ │ │ ├── 18Franklin-LightItalic.woff2 │ │ │ ├── 18Franklin-MediumItalic.eot │ │ │ ├── 18Franklin-MediumItalic.ttf │ │ │ ├── 18Franklin-MediumItalic.woff │ │ │ ├── 18Franklin-MediumItalic.woff2 │ │ │ ├── 18Franklin-SemiBoldItalic.eot │ │ │ ├── 18Franklin-SemiBoldItalic.ttf │ │ │ ├── 18Franklin-ThinItalic.woff2 │ │ │ ├── 18Franklin-ExtraBoldItalic.eot │ │ │ ├── 18Franklin-ExtraBoldItalic.ttf │ │ │ ├── 18Franklin-ExtraBoldItalic.woff │ │ │ ├── 18Franklin-ExtraLightItalic.eot │ │ │ ├── 18Franklin-ExtraLightItalic.ttf │ │ │ ├── 18Franklin-SemiBoldItalic.woff │ │ │ ├── 18Franklin-SemiBoldItalic.woff2 │ │ │ ├── 18Franklin-ExtraBoldItalic.woff2 │ │ │ ├── 18Franklin-ExtraLightItalic.woff │ │ │ └── 18Franklin-ExtraLightItalic.woff2 │ │ ├── _layouts │ │ │ └── default.html │ │ ├── portal-search.html │ │ ├── index.html │ │ ├── grid.html │ │ ├── portal-m1.html │ │ ├── portal-m2.html │ │ ├── portal-m4.html │ │ ├── portal-m6.html │ │ ├── portal-m3.html │ │ ├── portal-m5.html │ │ ├── forms.html │ │ ├── type-scale.html │ │ ├── mono.html │ │ ├── sans.html │ │ ├── serif.html │ │ ├── portal.html │ │ └── whitespace.html │ ├── united.scss │ ├── utilities │ │ ├── opacity.scss │ │ ├── font-style.scss │ │ ├── background.scss │ │ ├── color.scss │ │ ├── flex-wrap.scss │ │ ├── font-weight.scss │ │ ├── line-height.scss │ │ ├── order.scss │ │ ├── flex-direction.scss │ │ ├── float.scss │ │ ├── flex-size.scss │ │ ├── letter-spacing.scss │ │ ├── line-length.scss │ │ ├── opentype.scss │ │ ├── text-align.scss │ │ ├── text-decoration.scss │ │ ├── text-transform.scss │ │ ├── border-radius.scss │ │ ├── outline-2-color.scss │ │ ├── display.scss │ │ ├── min-width.scss │ │ ├── flex-align.scss │ │ ├── max-width.scss │ │ ├── square.scss │ │ ├── max-height.scss │ │ ├── min-height.scss │ │ ├── height.scss │ │ ├── outline-1-width.scss │ │ ├── position.scss │ │ ├── clear.scss │ │ ├── whitespace.scss │ │ ├── row.scss │ │ ├── column.scss │ │ ├── width.scss │ │ ├── border-style.scss │ │ ├── list-reset.scss │ │ ├── clearfix.scss │ │ ├── font-family.scss │ │ ├── vertical-align.scss │ │ ├── padding.scss │ │ ├── font-size.scss │ │ ├── border-color.scss │ │ ├── border-width.scss │ │ ├── manual-position.scss │ │ ├── margin.scss │ │ └── _all.scss │ ├── _utilities.scss │ ├── _functions.scss │ ├── _defaults.scss │ ├── _fonts.scss │ ├── _vars.scss │ └── _mixins.scss ├── prototypes │ ├── css │ │ └── united.app.css.zip │ └── fonts │ │ ├── 18Franklin-Bold.eot │ │ ├── 18Franklin-Bold.ttf │ │ ├── 18Franklin-Thin.eot │ │ ├── 18Franklin-Thin.ttf │ │ ├── 18Franklin-Black.eot │ │ ├── 18Franklin-Black.ttf │ │ ├── 18Franklin-Black.woff │ │ ├── 18Franklin-Bold.woff │ │ ├── 18Franklin-Bold.woff2 │ │ ├── 18Franklin-Italic.eot │ │ ├── 18Franklin-Italic.ttf │ │ ├── 18Franklin-Light.eot │ │ ├── 18Franklin-Light.ttf │ │ ├── 18Franklin-Light.woff │ │ ├── 18Franklin-Medium.eot │ │ ├── 18Franklin-Medium.ttf │ │ ├── 18Franklin-Thin.woff │ │ ├── 18Franklin-Thin.woff2 │ │ ├── 18Franklin-Black.woff2 │ │ ├── 18Franklin-ExtraBold.eot │ │ ├── 18Franklin-ExtraBold.ttf │ │ ├── 18Franklin-Italic.woff │ │ ├── 18Franklin-Italic.woff2 │ │ ├── 18Franklin-Light.woff2 │ │ ├── 18Franklin-Medium.woff │ │ ├── 18Franklin-Medium.woff2 │ │ ├── 18Franklin-Regular.eot │ │ ├── 18Franklin-Regular.ttf │ │ ├── 18Franklin-Regular.woff │ │ ├── 18Franklin-Regular.woff2 │ │ ├── 18Franklin-SemiBold.eot │ │ ├── 18Franklin-SemiBold.ttf │ │ ├── 18Franklin-SemiBold.woff │ │ ├── 18Franklin-BlackItalic.eot │ │ ├── 18Franklin-BlackItalic.ttf │ │ ├── 18Franklin-BoldItalic.eot │ │ ├── 18Franklin-BoldItalic.ttf │ │ ├── 18Franklin-BoldItalic.woff │ │ ├── 18Franklin-ExtraBold.woff │ │ ├── 18Franklin-ExtraBold.woff2 │ │ ├── 18Franklin-ExtraLight.eot │ │ ├── 18Franklin-ExtraLight.ttf │ │ ├── 18Franklin-ExtraLight.woff │ │ ├── 18Franklin-LightItalic.eot │ │ ├── 18Franklin-LightItalic.ttf │ │ ├── 18Franklin-SemiBold.woff2 │ │ ├── 18Franklin-ThinItalic.eot │ │ ├── 18Franklin-ThinItalic.ttf │ │ ├── 18Franklin-ThinItalic.woff │ │ ├── 18Franklin-BlackItalic.woff │ │ ├── 18Franklin-BlackItalic.woff2 │ │ ├── 18Franklin-BoldItalic.woff2 │ │ ├── 18Franklin-ExtraLight.woff2 │ │ ├── 18Franklin-LightItalic.woff │ │ ├── 18Franklin-LightItalic.woff2 │ │ ├── 18Franklin-MediumItalic.eot │ │ ├── 18Franklin-MediumItalic.ttf │ │ ├── 18Franklin-MediumItalic.woff │ │ ├── 18Franklin-MediumItalic.woff2 │ │ ├── 18Franklin-SemiBoldItalic.eot │ │ ├── 18Franklin-SemiBoldItalic.ttf │ │ ├── 18Franklin-ThinItalic.woff2 │ │ ├── 18Franklin-ExtraBoldItalic.eot │ │ ├── 18Franklin-ExtraBoldItalic.ttf │ │ ├── 18Franklin-ExtraBoldItalic.woff │ │ ├── 18Franklin-ExtraLightItalic.eot │ │ ├── 18Franklin-ExtraLightItalic.ttf │ │ ├── 18Franklin-SemiBoldItalic.woff │ │ ├── 18Franklin-SemiBoldItalic.woff2 │ │ ├── 18Franklin-ExtraBoldItalic.woff2 │ │ ├── 18Franklin-ExtraLightItalic.woff │ │ └── 18Franklin-ExtraLightItalic.woff2 └── overrides │ └── _united-override-vars.scss ├── README.md ├── CONTRIBUTING.md ├── package.json ├── gulpfile.js ├── LICENSE └── demo └── running-text.html /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "18franklin"] 2 | path = 18franklin 3 | url = git@github.com:18F/18franklin.git 4 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | source: src/base/prototypes 2 | destination: build/prototypes 3 | keep_files: [css/united.css] 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_store 2 | .*.swp 3 | 4 | # Ignore Node specific files and directories 5 | # 6 | node_modules/ 7 | npm-debug.log* 8 | -------------------------------------------------------------------------------- /src/base/prototypes/img/logo@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/img/logo@2x.png -------------------------------------------------------------------------------- /src/base/prototypes/_includes/wireframe--tk.html: -------------------------------------------------------------------------------- 1 | {% for i in (1..include.count) %} 2 | 3 | {% endfor %} 4 | -------------------------------------------------------------------------------- /src/base/prototypes/img/search@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/img/search@2x.png -------------------------------------------------------------------------------- /src/prototypes/css/united.app.css.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/css/united.app.css.zip -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-Bold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-Bold.eot -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-Bold.ttf -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-Thin.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-Thin.eot -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-Thin.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-Thin.ttf -------------------------------------------------------------------------------- /src/base/prototypes/css/united.app.css.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/css/united.app.css.zip -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-Black.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-Black.eot -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-Black.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-Black.ttf -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-Black.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-Black.woff -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-Bold.woff -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-Bold.woff2 -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-Italic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-Italic.eot -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-Italic.ttf -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-Light.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-Light.eot -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-Light.ttf -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-Light.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-Light.woff -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-Medium.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-Medium.eot -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-Medium.ttf -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-Thin.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-Thin.woff -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-Thin.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-Thin.woff2 -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-Bold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-Bold.eot -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-Bold.ttf -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-Thin.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-Thin.eot -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-Thin.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-Thin.ttf -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-Black.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-Black.woff2 -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-ExtraBold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-ExtraBold.eot -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-ExtraBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-ExtraBold.ttf -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-Italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-Italic.woff -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-Italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-Italic.woff2 -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-Light.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-Light.woff2 -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-Medium.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-Medium.woff -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-Medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-Medium.woff2 -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-Regular.eot -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-Regular.ttf -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-Regular.woff -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-Regular.woff2 -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-SemiBold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-SemiBold.eot -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-SemiBold.ttf -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-SemiBold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-SemiBold.woff -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-Black.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-Black.eot -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-Black.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-Black.ttf -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-Black.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-Black.woff -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-Bold.woff -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-Bold.woff2 -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-Italic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-Italic.eot -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-Italic.ttf -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-Light.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-Light.eot -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-Light.ttf -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-Light.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-Light.woff -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-Medium.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-Medium.eot -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-Medium.ttf -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-Thin.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-Thin.woff -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-Thin.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-Thin.woff2 -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-BlackItalic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-BlackItalic.eot -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-BlackItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-BlackItalic.ttf -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-BoldItalic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-BoldItalic.eot -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-BoldItalic.ttf -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-BoldItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-BoldItalic.woff -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-ExtraBold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-ExtraBold.woff -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-ExtraBold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-ExtraBold.woff2 -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-ExtraLight.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-ExtraLight.eot -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-ExtraLight.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-ExtraLight.ttf -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-ExtraLight.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-ExtraLight.woff -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-LightItalic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-LightItalic.eot -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-LightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-LightItalic.ttf -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-SemiBold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-SemiBold.woff2 -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-ThinItalic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-ThinItalic.eot -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-ThinItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-ThinItalic.ttf -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-ThinItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-ThinItalic.woff -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-Black.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-Black.woff2 -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-ExtraBold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-ExtraBold.eot -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-ExtraBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-ExtraBold.ttf -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-Italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-Italic.woff -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-Italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-Italic.woff2 -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-Light.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-Light.woff2 -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-Medium.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-Medium.woff -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-Medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-Medium.woff2 -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-Regular.eot -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-Regular.ttf -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-Regular.woff -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-Regular.woff2 -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-SemiBold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-SemiBold.eot -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-SemiBold.ttf -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-SemiBold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-SemiBold.woff -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-BlackItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-BlackItalic.woff -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-BlackItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-BlackItalic.woff2 -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-BoldItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-BoldItalic.woff2 -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-ExtraLight.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-ExtraLight.woff2 -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-LightItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-LightItalic.woff -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-LightItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-LightItalic.woff2 -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-MediumItalic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-MediumItalic.eot -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-MediumItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-MediumItalic.ttf -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-MediumItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-MediumItalic.woff -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-MediumItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-MediumItalic.woff2 -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-SemiBoldItalic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-SemiBoldItalic.eot -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-SemiBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-SemiBoldItalic.ttf -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-ThinItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-ThinItalic.woff2 -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-BlackItalic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-BlackItalic.eot -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-BlackItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-BlackItalic.ttf -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-BoldItalic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-BoldItalic.eot -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-BoldItalic.ttf -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-BoldItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-BoldItalic.woff -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-ExtraBold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-ExtraBold.woff -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-ExtraBold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-ExtraBold.woff2 -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-ExtraLight.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-ExtraLight.eot -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-ExtraLight.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-ExtraLight.ttf -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-ExtraLight.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-ExtraLight.woff -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-LightItalic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-LightItalic.eot -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-LightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-LightItalic.ttf -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-SemiBold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-SemiBold.woff2 -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-ThinItalic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-ThinItalic.eot -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-ThinItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-ThinItalic.ttf -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-ThinItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-ThinItalic.woff -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-ExtraBoldItalic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-ExtraBoldItalic.eot -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-ExtraBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-ExtraBoldItalic.ttf -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-ExtraBoldItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-ExtraBoldItalic.woff -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-ExtraLightItalic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-ExtraLightItalic.eot -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-ExtraLightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-ExtraLightItalic.ttf -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-SemiBoldItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-SemiBoldItalic.woff -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-SemiBoldItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-SemiBoldItalic.woff2 -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-BlackItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-BlackItalic.woff -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-BlackItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-BlackItalic.woff2 -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-BoldItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-BoldItalic.woff2 -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-ExtraLight.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-ExtraLight.woff2 -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-LightItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-LightItalic.woff -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-LightItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-LightItalic.woff2 -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-MediumItalic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-MediumItalic.eot -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-MediumItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-MediumItalic.ttf -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-MediumItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-MediumItalic.woff -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-MediumItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-MediumItalic.woff2 -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-SemiBoldItalic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-SemiBoldItalic.eot -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-SemiBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-SemiBoldItalic.ttf -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-ThinItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-ThinItalic.woff2 -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-ExtraBoldItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-ExtraBoldItalic.woff2 -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-ExtraLightItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-ExtraLightItalic.woff -------------------------------------------------------------------------------- /src/prototypes/fonts/18Franklin-ExtraLightItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/prototypes/fonts/18Franklin-ExtraLightItalic.woff2 -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-ExtraBoldItalic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-ExtraBoldItalic.eot -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-ExtraBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-ExtraBoldItalic.ttf -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-ExtraBoldItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-ExtraBoldItalic.woff -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-ExtraLightItalic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-ExtraLightItalic.eot -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-ExtraLightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-ExtraLightItalic.ttf -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-SemiBoldItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-SemiBoldItalic.woff -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-SemiBoldItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-SemiBoldItalic.woff2 -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-ExtraBoldItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-ExtraBoldItalic.woff2 -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-ExtraLightItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-ExtraLightItalic.woff -------------------------------------------------------------------------------- /src/base/prototypes/fonts/18Franklin-ExtraLightItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/AK-modular-experience/master/src/base/prototypes/fonts/18Franklin-ExtraLightItalic.woff2 -------------------------------------------------------------------------------- /src/base/prototypes/_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {% include head.html %} 5 | 6 | 7 | {{ content }} 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Demonstration prototpye for AK DHSS 2 | This prototype is a demonstration piece that accompanies the [Modular Product Design Strategy](https://github.com/AlaskaDHSS/acq-alaska-dhss-modernization/blob/master/modular-experience.md#unified-product-design) 3 | 4 | Built by [Dan O. Williams](https://github.com/thisisdano) using [united](https://github.com/18F/united) 5 | -------------------------------------------------------------------------------- /src/base/prototypes/_includes/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {{ page.title }} 7 | 8 | -------------------------------------------------------------------------------- /src/base/united.scss: -------------------------------------------------------------------------------- 1 | @import "functions"; 2 | @import "united-override-vars"; 3 | @import "vars"; 4 | @import "values"; 5 | @import "mixins"; 6 | @import "fonts"; 7 | @import 'node_modules/normalize.css/normalize'; 8 | 9 | // Add utilities to import... 10 | 11 | @import "utilities/all"; 12 | 13 | // ...then the utility packager. 14 | 15 | @import "utilities"; 16 | 17 | // Now, let's build some utility class rules! 18 | 19 | @include renderUtilitiesIn($utilities); 20 | 21 | // Then, let's set some sensible defaults. 22 | 23 | @import "defaults"; 24 | -------------------------------------------------------------------------------- /src/base/prototypes/portal-search.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: Portal / Search 3 | layout: default 4 | htmlclasses: bg-white 5 | bodyclasses: bg-cream lh-body m0 p0 fw400 6 | --- 7 | 8 | {% include 9 | portal--header.html 10 | page="Search" 11 | %} 12 | 13 |
14 |
15 |
16 |
17 |
Search
18 |
19 |
20 |
21 |
22 | -------------------------------------------------------------------------------- /src/base/utilities/opacity.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Float 4 | ---------------------------------------- 5 | usage: 6 | .op[value] 7 | ---------------------------------------- 8 | output: 9 | opacity: [value]; 10 | ---------------------------------------- 11 | example: 12 | .op0 { 13 | opacity: 0; } 14 | ---------------------------------------- 15 | */ 16 | 17 | $opacity: ( 18 | opacity: ( 19 | base: ('op'), 20 | modifiers: null, 21 | values: ( 22 | '0': '0', 23 | '100': '100', 24 | ), 25 | property: 'opacity', 26 | output: true, 27 | responsive: false, 28 | pseudoclasses: false, 29 | ) 30 | ) 31 | -------------------------------------------------------------------------------- /src/base/utilities/font-style.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Font Style 4 | ---------------------------------------- 5 | usage: 6 | .italic 7 | ---------------------------------------- 8 | output: 9 | font-style: italic; 10 | ---------------------------------------- 11 | example: 12 | .italic { 13 | font-style: italic; } 14 | ---------------------------------------- 15 | */ 16 | 17 | $font-style: ( 18 | font-style: ( 19 | base: null, 20 | modifiers: null, 21 | values: ( 22 | italic: ('italic', isReadable), 23 | ), 24 | property: 'font-style', 25 | output: true, 26 | responsive: false, 27 | pseudoclasses: true, 28 | ) 29 | ) 30 | -------------------------------------------------------------------------------- /src/base/utilities/background.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Background Color 4 | ---------------------------------------- 5 | usage: 6 | .[color] 7 | ---------------------------------------- 8 | output: 9 | background-color: [color]; 10 | ---------------------------------------- 11 | example: 12 | .red { 13 | background-color: #be4900; } 14 | ---------------------------------------- 15 | */ 16 | 17 | $background: ( 18 | background: ( 19 | base: ('bg', isReadable), 20 | modifiers: null, 21 | values: map-get($global_values, colors), 22 | property: 'background-color', 23 | output: true, 24 | responsive: true, 25 | pseudoclasses: true, 26 | ) 27 | ) 28 | -------------------------------------------------------------------------------- /src/base/utilities/color.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Color 4 | ---------------------------------------- 5 | usage: 6 | .[value] 7 | ---------------------------------------- 8 | output: 9 | color: [value]; 10 | ---------------------------------------- 11 | example: 12 | .mediumgray-trans { 13 | color: rgba(0, 0, 0, .4); } 14 | ---------------------------------------- 15 | */ 16 | 17 | $color: ( 18 | color: ( 19 | base: null, 20 | modifiers: null, 21 | values: map-collect( 22 | map-get($global_values, colors) 23 | ), 24 | property: 'color', 25 | output: true, 26 | responsive: true, 27 | pseudoclasses: true, 28 | placeholder: true, 29 | ) 30 | ) 31 | -------------------------------------------------------------------------------- /src/base/prototypes/_includes/form--text-entry.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | 5 | {% if include.type == 'text' or include.type == 'password' %} 6 | 7 | {% elsif include.type == 'textarea' %} 8 | 9 | {% endif %} 10 |
11 | -------------------------------------------------------------------------------- /src/base/utilities/flex-wrap.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Flex Wrap 4 | ---------------------------------------- 5 | usage: 6 | .f-[value] 7 | ---------------------------------------- 8 | output: 9 | flex-wrap: [value]; 10 | ---------------------------------------- 11 | example: 12 | .f-wrap { 13 | flex-wrap: wrap; } 14 | ---------------------------------------- 15 | */ 16 | 17 | $flex-wrap: ( 18 | flex-wrap: ( 19 | base: 'f', 20 | modifiers: null, 21 | values: ( 22 | 'wrap': ('wrap', isReadable), 23 | 'nowrap': ('nowrap', isReadable), 24 | ), 25 | property: 'flex-wrap', 26 | output: true, 27 | responsive: true, 28 | pseudoclasses: false, 29 | ) 30 | ); 31 | -------------------------------------------------------------------------------- /src/base/utilities/font-weight.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Font Weight 4 | ---------------------------------------- 5 | usage: 6 | .fw[value] 7 | ---------------------------------------- 8 | output: 9 | font-weight: [value]; 10 | ---------------------------------------- 11 | example: 12 | .fw300 { 13 | font-weight: 300; } 14 | ---------------------------------------- 15 | */ 16 | 17 | $font-weight: ( 18 | font-weight: ( 19 | base: 'fw', 20 | modifiers: null, 21 | values: map-collect( 22 | map-get($global_values, fontWeights) 23 | ), 24 | property: 'font-weight', 25 | output: true, 26 | responsive: true, 27 | pseudoclasses: true, 28 | placeholder: true, 29 | ) 30 | ) 31 | -------------------------------------------------------------------------------- /src/base/utilities/line-height.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Line Height 4 | ---------------------------------------- 5 | usage: 6 | .lh-[value] 7 | ---------------------------------------- 8 | output: 9 | line-height: [value]; 10 | ---------------------------------------- 11 | example: 12 | .lh-single { 13 | line-height: 1; } 14 | ---------------------------------------- 15 | */ 16 | 17 | $line-height: ( 18 | line-height: ( 19 | base: 'lh', 20 | modifiers: null, 21 | values: map-collect( 22 | map-get($global_values, lineHeights) 23 | ), 24 | property: 'line-height', 25 | output: true, 26 | responsive: true, 27 | pseudoclasses: false, 28 | placeholder: true, 29 | ) 30 | ) 31 | -------------------------------------------------------------------------------- /src/base/utilities/order.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Order 4 | ---------------------------------------- 5 | usage: 6 | .order-[value] 7 | ---------------------------------------- 8 | output: 9 | order: [value] 10 | ---------------------------------------- 11 | example: 12 | .order-first { 13 | order: -1; } 14 | 15 | .order-2 { 16 | order: 2; } 17 | ---------------------------------------- 18 | */ 19 | 20 | $order: ( 21 | order: ( 22 | base: ('order', isReadable), 23 | modifiers: null, 24 | values: map-collect( 25 | map-get($global_values, flexOrders) 26 | ), 27 | property: 'order', 28 | output: true, 29 | responsive: true, 30 | pseudoclasses: false, 31 | ) 32 | ) 33 | -------------------------------------------------------------------------------- /src/base/utilities/flex-direction.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Flex direction 4 | ---------------------------------------- 5 | usage: 6 | .f-[value] 7 | ---------------------------------------- 8 | output: 9 | flex-direction: [value] 10 | ---------------------------------------- 11 | example: 12 | .f-row { 13 | flex-direction: row; } 14 | ---------------------------------------- 15 | */ 16 | 17 | $flex-direction: ( 18 | flex-direction: ( 19 | base: 'f', 20 | modifiers: null, 21 | values: ( 22 | row: ('row', isReadable), 23 | column: ('column', isReadable), 24 | ), 25 | property: 'flex-direction', 26 | output: true, 27 | responsive: true, 28 | pseudoclasses: false, 29 | ) 30 | ) 31 | -------------------------------------------------------------------------------- /src/base/utilities/float.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Float 4 | ---------------------------------------- 5 | usage: 6 | .float-[value] 7 | ---------------------------------------- 8 | output: 9 | float: [value]; 10 | ---------------------------------------- 11 | example: 12 | .float-left { 13 | float: left; } 14 | ---------------------------------------- 15 | */ 16 | 17 | $float: ( 18 | float: ( 19 | base: ('float', isReadable), 20 | modifiers: null, 21 | values: ( 22 | left: ('left', isReadable), 23 | none: ('none', isReadable), 24 | right: ('right', isReadable), 25 | ), 26 | property: 'float', 27 | output: true, 28 | responsive: true, 29 | pseudoclasses: false, 30 | ) 31 | ) 32 | -------------------------------------------------------------------------------- /src/base/prototypes/_includes/swatch.html: -------------------------------------------------------------------------------- 1 | 2 | {% if include.class %} 3 | {% assign thisClass = include.class %} 4 | {% else %} 5 | {% assign thisClass = include.color | downcase | replace: ' ', '-' %} 6 | {% endif %} 7 | 8 | {% assign thisColor = include.color | capitalize %} 9 | 10 |
11 |
12 |
13 |

{{ thisColor }}

14 | 19 |
20 |
21 | -------------------------------------------------------------------------------- /src/base/utilities/flex-size.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Flex size 4 | ---------------------------------------- 5 | usage: 6 | .[value] 7 | ---------------------------------------- 8 | output: 9 | flex: [value]; 10 | ---------------------------------------- 11 | example: 12 | .f1 { 13 | flex: 0 0 1; } 14 | 15 | .fill { 16 | flex: 1 0 0; } 17 | 18 | .fit { 19 | flex: none; } 20 | ---------------------------------------- 21 | */ 22 | 23 | $flex-size: ( 24 | flex-size: ( 25 | base: null, 26 | modifiers: null, 27 | values: map-collect( 28 | map-get($global_values, flex) 29 | ), 30 | property: 'flex', 31 | output: true, 32 | responsive: true, 33 | pseudoclasses: false, 34 | ) 35 | ); 36 | -------------------------------------------------------------------------------- /src/base/utilities/letter-spacing.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Letterspacing 4 | ---------------------------------------- 5 | usage: 6 | .ls-[modifier] 7 | ---------------------------------------- 8 | output: 9 | letter-spacing: [value]; 10 | ---------------------------------------- 11 | example: 12 | .ls-loose { 13 | letter-spacing: .1em; } 14 | ---------------------------------------- 15 | */ 16 | 17 | $letter-spacing: ( 18 | letter-spacing: ( 19 | base: 'ls', 20 | modifiers: null, 21 | values: ( 22 | auto: ('auto', isReadable), 23 | loose: $ls-loose, 24 | xloose: $ls-xloose, 25 | ), 26 | property: 'letter-spacing', 27 | output: true, 28 | responsive: false, 29 | pseudoclasses: false, 30 | ) 31 | ) 32 | -------------------------------------------------------------------------------- /src/base/utilities/line-length.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Line Length 4 | ---------------------------------------- 5 | usage: 6 | .ll-[value] 7 | ---------------------------------------- 8 | output: 9 | line-length: value; 10 | ---------------------------------------- 11 | example: 12 | .ll-max { 13 | max-width: none; } 14 | ---------------------------------------- 15 | */ 16 | 17 | $line-length: ( 18 | line-length: ( 19 | base: 'll', 20 | modifiers: null, 21 | values: ( 22 | narrow: ($text-narrow-width, isReadable), 23 | max: ('none', isReadable), 24 | reading: ($text-max-width, isReadable), 25 | ), 26 | property: 'max-width', 27 | output: true, 28 | responsive: true, 29 | pseudoclasses: false, 30 | ) 31 | ) 32 | -------------------------------------------------------------------------------- /src/base/utilities/opentype.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Opentype 4 | ---------------------------------------- 5 | usage: 6 | .ot-[value] 7 | ---------------------------------------- 8 | output: 9 | font-feature-settings: [value]; 10 | ---------------------------------------- 11 | example: 12 | .ot-alt { 13 | font-feature-settings: 14 | 'ss01' 1, 'kern' 1; } 15 | ---------------------------------------- 16 | */ 17 | 18 | $opentype: ( 19 | opentype: ( 20 | base: 'ot', 21 | modifiers: null, 22 | values: ( 23 | alt: ('ss01' 1, 'kern' 1, isReadable), 24 | tnum: ('tnum' 1, 'kern' 1, isReadable), 25 | ), 26 | property: 'font-feature-settings', 27 | output: true, 28 | responsive: false, 29 | pseudoclasses: false, 30 | ) 31 | ) 32 | -------------------------------------------------------------------------------- /src/base/utilities/text-align.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Text Align 4 | ---------------------------------------- 5 | usage: 6 | .[value] 7 | ---------------------------------------- 8 | output: 9 | align: [value]; 10 | ---------------------------------------- 11 | example: 12 | .left { 13 | align: left; } 14 | ---------------------------------------- 15 | */ 16 | 17 | $text-align: ( 18 | text-align: ( 19 | base: null, 20 | modifiers: null, 21 | values: ( 22 | center: ('center', isReadable), 23 | left: ('left', isReadable), 24 | right: ('right', isReadable), 25 | justify: ('justify', isReadable), 26 | ), 27 | property: 'text-align', 28 | output: true, 29 | responsive: true, 30 | pseudoclasses: false, 31 | ) 32 | ) 33 | -------------------------------------------------------------------------------- /src/base/utilities/text-decoration.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Text Decoration 4 | ---------------------------------------- 5 | usage: 6 | .[value] 7 | ---------------------------------------- 8 | output: 9 | text-decoration: [value] 10 | ---------------------------------------- 11 | example: 12 | .underline { 13 | text-decoration: underline; } 14 | ---------------------------------------- 15 | */ 16 | 17 | $text-decoration: ( 18 | text-decoration: ( 19 | base: null, 20 | modifiers: null, 21 | values: ( 22 | underline: ('underline', isReadable), 23 | strike: ('strike', isReadable), 24 | plain: ('none', isReadable), 25 | ), 26 | property: 'text-decoration', 27 | output: true, 28 | responsive: false, 29 | pseudoclasses: true, 30 | ) 31 | ) 32 | -------------------------------------------------------------------------------- /src/base/utilities/text-transform.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Text Transform 4 | ---------------------------------------- 5 | usage: 6 | .[value] 7 | ---------------------------------------- 8 | output: 9 | text-transform: value; 10 | ---------------------------------------- 11 | example: 12 | .allcaps { 13 | text-transform: uppercase; } 14 | ---------------------------------------- 15 | */ 16 | 17 | $text-transform: ( 18 | text-transform: ( 19 | base: null, 20 | modifiers: null, 21 | values: ( 22 | capitalize: ('capitalize', isReadable), 23 | lower: ('lowercase', isReadable), 24 | allcaps: ('uppercase', isReadable), 25 | ), 26 | property: 'text-transform', 27 | output: true, 28 | responsive: false, 29 | pseudoclasses: true, 30 | ) 31 | ) 32 | -------------------------------------------------------------------------------- /src/base/utilities/border-radius.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Border Radius 4 | ---------------------------------------- 5 | usage: 6 | .br[-]*[value] 7 | ---------------------------------------- 8 | output: 9 | border-radius: [value]; 10 | ---------------------------------------- 11 | example: 12 | .br0 { 13 | border-radius: 0; } 14 | 15 | .br-pill { 16 | border-radius: 10em; } 17 | ---------------------------------------- 18 | */ 19 | 20 | $border-radius: ( 21 | border-radius: ( 22 | base: 'br', 23 | modifiers: null, 24 | values: ( 25 | 0: '0', 26 | pill: ('10em', isReadable), 27 | rounded: ($border-radius, isReadable), 28 | ), 29 | property: 'border-radius', 30 | output: true, 31 | responsive: false, 32 | pseudoclasses: false, 33 | ) 34 | ) 35 | -------------------------------------------------------------------------------- /src/base/utilities/outline-2-color.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Outline Color 4 | ---------------------------------------- 5 | usage: 6 | .outline-[modifier] 7 | ---------------------------------------- 8 | output: 9 | outline-color: [modifier]; 10 | ---------------------------------------- 11 | example: 12 | .outline-yellow-50 { 13 | outline-color: #91721f; } 14 | ---------------------------------------- 15 | */ 16 | 17 | $outline-2-color: ( 18 | outline-2-color: ( 19 | base: ('outline', isReadable), 20 | modifiers: null, 21 | values: map-collect( 22 | map-get($global_values, colors) 23 | ), 24 | valuePrepend: null, 25 | valueAppend: null, 26 | property: 'outline-color', 27 | output: true, 28 | responsive: false, 29 | pseudoclasses: true, 30 | ) 31 | ) 32 | -------------------------------------------------------------------------------- /src/base/utilities/display.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Display 4 | ---------------------------------------- 5 | usage: 6 | .[value] 7 | ---------------------------------------- 8 | output: 9 | display: [value] 10 | ---------------------------------------- 11 | example: 12 | .hide { 13 | display: none; } 14 | ---------------------------------------- 15 | */ 16 | 17 | $display: ( 18 | display: ( 19 | base: null, 20 | modifiers: null, 21 | values: ( 22 | block: ('block', isReadable), 23 | flex: ('flex', isReadable), 24 | hide: ('none', isReadable), 25 | inline: ('inline', isReadable), 26 | inline-block: ('inline-block', isReadable), 27 | ), 28 | property: 'display', 29 | output: true, 30 | responsive: true, 31 | pseudoclasses: true, 32 | ) 33 | ) 34 | -------------------------------------------------------------------------------- /src/base/utilities/min-width.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Min Width 4 | ---------------------------------------- 5 | usage: 6 | .minw[value] 7 | ---------------------------------------- 8 | output: 9 | min-width: value; 10 | ---------------------------------------- 11 | example: 12 | .minw40 { 13 | min-width: 320px; } 14 | ---------------------------------------- 15 | */ 16 | 17 | $min-width: ( 18 | min-width: ( 19 | base: 'minw', 20 | modifiers: null, 21 | values: map-collect( 22 | map-get($global_values, percentage), 23 | map-get($global_values, grid), 24 | map-get($global_values, pixels), 25 | map-get($global_values, breakpoints) 26 | ), 27 | property: 'min-width', 28 | output: true, 29 | responsive: true, 30 | pseudoclasses: false, 31 | ) 32 | ) 33 | -------------------------------------------------------------------------------- /src/base/utilities/flex-align.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Flex Align 4 | ---------------------------------------- 5 | usage: 6 | .f-[value] 7 | ---------------------------------------- 8 | output: 9 | align-items: [value]; 10 | ---------------------------------------- 11 | example: 12 | .f-start { 13 | align-items: flex-start; } 14 | ---------------------------------------- 15 | */ 16 | 17 | $flex-align: ( 18 | flex-align: ( 19 | base: 'f', 20 | modifiers: null, 21 | values: ( 22 | 'start': ('flex-start', isReadable), 23 | 'end': ('flex-end', isReadable), 24 | 'center': ('center', isReadable), 25 | 'stretch': ('stretch', isReadable), 26 | ), 27 | property: 'align-items', 28 | output: true, 29 | responsive: true, 30 | pseudoclasses: false, 31 | ) 32 | ); 33 | -------------------------------------------------------------------------------- /src/base/utilities/max-width.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Max Width 4 | ---------------------------------------- 5 | usage: 6 | .maxw[value] 7 | ---------------------------------------- 8 | output: 9 | max-width: value; 10 | ---------------------------------------- 11 | example: 12 | .maxw-lg { 13 | max-width: 1040px; } 14 | ---------------------------------------- 15 | */ 16 | 17 | $max-width: ( 18 | max-width: ( 19 | base: 'maxw', 20 | modifiers: null, 21 | values: map-collect( 22 | map-get($global_values, percentage), 23 | map-get($global_values, grid), 24 | map-get($global_values, pixels), 25 | map-get($global_values, breakpoints) 26 | ), 27 | property: 'max-width', 28 | output: true, 29 | responsive: true, 30 | pseudoclasses: false, 31 | ) 32 | ) 33 | -------------------------------------------------------------------------------- /src/base/utilities/square.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Square 4 | ---------------------------------------- 5 | usage: 6 | .sq[value] 7 | ---------------------------------------- 8 | output: 9 | height: [value]; 10 | width: [value]; 11 | ---------------------------------------- 12 | example: 13 | .sq6 { 14 | height: 3rem; 15 | width: 3rem; } 16 | ---------------------------------------- 17 | */ 18 | 19 | $square: ( 20 | square: ( 21 | base: null, 22 | modifiers: ( 23 | sq: (height, width), 24 | ), 25 | values: map-collect( 26 | map-get($global_values, percentage), 27 | map-get($global_values, grid), 28 | map-get($global_values, pixels) 29 | ), 30 | property: '', 31 | output: true, 32 | responsive: true, 33 | pseudoclasses: false, 34 | ) 35 | ) 36 | -------------------------------------------------------------------------------- /src/base/utilities/max-height.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Min Height 4 | ---------------------------------------- 5 | usage: 6 | .maxh[value] 7 | ---------------------------------------- 8 | output: 9 | max-height: value; 10 | ---------------------------------------- 11 | example: 12 | .maxh40 { 13 | max-height: 320px; } 14 | ---------------------------------------- 15 | */ 16 | 17 | $max-height: ( 18 | max-height: ( 19 | base: 'maxh', 20 | modifiers: null, 21 | values: map-collect( 22 | map-get($global_values, percentage), 23 | map-get($global_values, grid), 24 | map-get($global_values, pixels), 25 | map-get($global_values, breakpoints) 26 | ), 27 | property: 'max-height', 28 | output: true, 29 | responsive: true, 30 | pseudoclasses: false, 31 | ) 32 | ) 33 | -------------------------------------------------------------------------------- /src/base/utilities/min-height.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Min Height 4 | ---------------------------------------- 5 | usage: 6 | .minh[value] 7 | ---------------------------------------- 8 | output: 9 | min-height: value; 10 | ---------------------------------------- 11 | example: 12 | .minh40 { 13 | min-height: 320px; } 14 | ---------------------------------------- 15 | */ 16 | 17 | $min-height: ( 18 | min-height: ( 19 | base: 'minh', 20 | modifiers: null, 21 | values: map-collect( 22 | map-get($global_values, percentage), 23 | map-get($global_values, grid), 24 | map-get($global_values, pixels), 25 | map-get($global_values, breakpoints) 26 | ), 27 | property: 'min-height', 28 | output: true, 29 | responsive: true, 30 | pseudoclasses: false, 31 | ) 32 | ) 33 | -------------------------------------------------------------------------------- /src/base/utilities/height.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Height 4 | ---------------------------------------- 5 | usage: 6 | .h[value] 7 | ---------------------------------------- 8 | output: 9 | height: [value]; 10 | ---------------------------------------- 11 | example: 12 | .h33ct { 13 | height: 33.33333333%; } 14 | ---------------------------------------- 15 | */ 16 | 17 | $height: ( 18 | height: ( 19 | base: 'h', 20 | modifiers: null, 21 | values: map-collect( 22 | map-get($global_values, percentage), 23 | map-get($global_values, grid), 24 | map-get($global_values, em), 25 | map-get($global_values, ch), 26 | map-get($global_values, pixels) 27 | ), 28 | property: 'height', 29 | output: true, 30 | responsive: true, 31 | pseudoclasses: false, 32 | ) 33 | ) 34 | -------------------------------------------------------------------------------- /src/base/utilities/outline-1-width.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Outline Width 4 | ---------------------------------------- 5 | usage: 6 | .outline-[modifier] 7 | ---------------------------------------- 8 | output: 9 | outline: [modifier] solid; 10 | ---------------------------------------- 11 | example: 12 | .outline-05 { 13 | outline: 4px solid } 14 | ---------------------------------------- 15 | */ 16 | 17 | $outline-1-width: ( 18 | outline-1-width: ( 19 | base: ('outline', isReadable), 20 | modifiers: null, 21 | values: map-collect( 22 | map-get($global_values, pixels), 23 | map-get($global_values, grid) 24 | ), 25 | valuePrepend: null, 26 | valueAppend: ' solid', 27 | property: 'outline', 28 | output: true, 29 | responsive: true, 30 | pseudoclasses: true, 31 | ) 32 | ) 33 | -------------------------------------------------------------------------------- /src/base/utilities/position.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Position 4 | ---------------------------------------- 5 | usage: 6 | .[value] 7 | ---------------------------------------- 8 | output: 9 | position: [value]; 10 | ---------------------------------------- 11 | example: 12 | .absolute { 13 | position: absolute; } 14 | ---------------------------------------- 15 | */ 16 | 17 | $position: ( 18 | position: ( 19 | base: null, 20 | modifiers: null, 21 | values: ( 22 | absolute: ('absolute', isReadable), 23 | fixed: ('fixed', isReadable), 24 | relative: ('relative', isReadable), 25 | static: ('static', isReadable), 26 | sticky: ('sticky', isReadable), 27 | ), 28 | property: 'position', 29 | output: true, 30 | responsive: true, 31 | pseudoclasses: false, 32 | ) 33 | ) 34 | -------------------------------------------------------------------------------- /src/base/utilities/clear.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Clear 4 | ---------------------------------------- 5 | usage: 6 | .clear-[value] 7 | ---------------------------------------- 8 | output: 9 | clear: [value] 10 | ---------------------------------------- 11 | example: 12 | .clear { 13 | clear: both; } 14 | 15 | .clear-none { 16 | clear: none; } 17 | ---------------------------------------- 18 | */ 19 | 20 | $clear: ( 21 | clear: ( 22 | base: ('clear', isReadable), 23 | modifiers: null, 24 | values: ( 25 | noValue: 'both', 26 | both: ('none', isReadable), 27 | left: ('left', isReadable), 28 | none: ('none', isReadable), 29 | right: ('right', isReadable), 30 | ), 31 | property: 'clear', 32 | output: true, 33 | responsive: true, 34 | pseudoclasses: false, 35 | ) 36 | ) 37 | -------------------------------------------------------------------------------- /src/base/utilities/whitespace.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Whitespace 4 | ---------------------------------------- 5 | usage: 6 | ws-[value] 7 | ---------------------------------------- 8 | output: 9 | whitespace: [value]; 10 | ---------------------------------------- 11 | example: 12 | .ws-prewrap { 13 | whitespace: pre-wrap; } 14 | ---------------------------------------- 15 | */ 16 | 17 | $whitespace: ( 18 | whitespace: ( 19 | base: ws, 20 | modifiers: null, 21 | values: ( 22 | normal: ('normal', isReadable), 23 | nowrap: ('nowrap', isReadable), 24 | pre: ('pre', isReadable), 25 | preline: ('pre-line', isReadable), 26 | prewrap: ('pre-wrap', isReadable), 27 | ), 28 | property: 'white-space', 29 | output: true, 30 | responsive: true, 31 | pseudoclasses: false, 32 | ) 33 | ) 34 | -------------------------------------------------------------------------------- /src/base/utilities/row.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Row 4 | ---------------------------------------- 5 | usage: 6 | .row 7 | ---------------------------------------- 8 | output: 9 | display: flex; 10 | flex-direction: row; 11 | ---------------------------------------- 12 | example: 13 | .row { 14 | display: flex; 15 | flex-direction: row; } 16 | ---------------------------------------- 17 | */ 18 | 19 | $row: ( 20 | row: ( 21 | base: null, 22 | modifiers: null, 23 | values: ( 24 | row: ( 25 | slug: 'row', 26 | isReadable: true, 27 | content: 'flex', 28 | extend: ( 29 | property: 'flex-direction', 30 | value: 'row', 31 | ), 32 | ), 33 | ), 34 | property: 'display', 35 | output: true, 36 | responsive: true, 37 | pseudoclasses: false, 38 | ) 39 | ); 40 | -------------------------------------------------------------------------------- /src/base/utilities/column.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Column 4 | ---------------------------------------- 5 | usage: 6 | .col 7 | ---------------------------------------- 8 | output: 9 | display: flex; 10 | flex-direction: column; 11 | ---------------------------------------- 12 | example: 13 | .row { 14 | display: flex; 15 | flex-direction: column; } 16 | ---------------------------------------- 17 | */ 18 | 19 | $col: ( 20 | col: ( 21 | base: null, 22 | modifiers: null, 23 | values: ( 24 | row: ( 25 | slug: 'col', 26 | isReadable: true, 27 | content: 'flex', 28 | extend: ( 29 | property: 'flex-direction', 30 | value: 'column', 31 | ), 32 | ), 33 | ), 34 | property: 'display', 35 | output: true, 36 | responsive: true, 37 | pseudoclasses: false, 38 | ) 39 | ); 40 | -------------------------------------------------------------------------------- /src/base/utilities/width.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Width 4 | ---------------------------------------- 5 | usage: 6 | .w[value] 7 | ---------------------------------------- 8 | output: 9 | width: value; 10 | ---------------------------------------- 11 | example: 12 | .w75ct { 13 | width: 75%; } 14 | ---------------------------------------- 15 | */ 16 | 17 | $width: ( 18 | width: ( 19 | base: 'w', 20 | modifiers: null, 21 | values: map-collect( 22 | map-get($global_values, percentage), 23 | map-get($global_values, grid), 24 | map-get($global_values, pixels), 25 | map-get($global_values, em), 26 | map-get($global_values, ch), 27 | map-get($global_values, breakpoints), 28 | map-get($global_values, auto) 29 | ), 30 | property: 'width', 31 | output: true, 32 | responsive: true, 33 | pseudoclasses: false, 34 | ) 35 | ) 36 | -------------------------------------------------------------------------------- /src/base/utilities/border-style.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Border Style 4 | ---------------------------------------- 5 | usage: 6 | .b[modifier]*[-value] 7 | ---------------------------------------- 8 | output: 9 | border[-modifier]-style: [value]; 10 | ---------------------------------------- 11 | */ 12 | 13 | $border-style: ( 14 | border-style: ( 15 | base: 'b', 16 | modifiers: ( 17 | t: '-top-style', 18 | r: '-left-style', 19 | b: '-bottom-style', 20 | l: '-left-style', 21 | y: ('-top-style', '-bottom-style'), 22 | x: ('-left-style', '-right-style'), 23 | noModifier: '-style', 24 | ), 25 | values: ( 26 | dashed: ('dashed', isReadable), 27 | dotted: ('dotted', isReadable), 28 | solid: ('solid', isReadable), 29 | ), 30 | property: 'border', 31 | output: true, 32 | responsive: true, 33 | pseudoclasses: true, 34 | ) 35 | ) 36 | -------------------------------------------------------------------------------- /src/base/utilities/list-reset.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | List Reset 4 | ---------------------------------------- 5 | usage: 6 | .list-reset 7 | ---------------------------------------- 8 | output: 9 | list-style: none; 10 | padding-left: 0; 11 | ---------------------------------------- 12 | example: 13 | .list-reset { 14 | list-style: none; 15 | padding-left: 0; } 16 | ---------------------------------------- 17 | */ 18 | 19 | $list-reset: ( 20 | list-reset: ( 21 | base: ('list', isReadable), 22 | modifiers: null, 23 | values: ( 24 | reset: ( 25 | slug: 'reset', 26 | isReadable: true, 27 | content: 'none', 28 | extend: ( 29 | property: 'padding-left', 30 | value: 0, 31 | ), 32 | ), 33 | ), 34 | property: 'list-style', 35 | output: true, 36 | responsive: false, 37 | pseudoclasses: true, 38 | ) 39 | ); 40 | -------------------------------------------------------------------------------- /src/base/_utilities.scss: -------------------------------------------------------------------------------- 1 | // Collect all the individual utility maps 2 | // into a single map for looping. 3 | 4 | $utilities: map-collect( 5 | $background, 6 | $border-color, 7 | $border-radius, 8 | $border-style, 9 | $border-width, 10 | $clear, 11 | $clearfix, 12 | $color, 13 | $col, 14 | $display, 15 | $float, 16 | $flex-align, 17 | $flex-direction, 18 | $flex-wrap, 19 | $flex-size, 20 | $font-family, 21 | $font-size, 22 | $font-style, 23 | $font-weight, 24 | $height, 25 | $letter-spacing, 26 | $line-height, 27 | $line-length, 28 | $list-reset, 29 | $manual-position, 30 | $margin, 31 | $max-height, 32 | $max-width, 33 | $min-height, 34 | $min-width, 35 | $opacity, 36 | $opentype, 37 | $order, 38 | $outline-1-width, 39 | $outline-2-color, 40 | $padding, 41 | $position, 42 | $row, 43 | $square, 44 | $text-align, 45 | $text-decoration, 46 | $text-transform, 47 | $vertical-align, 48 | $whitespace, 49 | $width 50 | ); 51 | -------------------------------------------------------------------------------- /src/base/utilities/clearfix.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Clearfix 4 | ---------------------------------------- 5 | usage: 6 | .cf 7 | ---------------------------------------- 8 | output: 9 | .cf:before, 10 | .cf:after { 11 | content: " "; 12 | display: table; 13 | } 14 | .cf:after { 15 | clear: both; 16 | } 17 | 18 | ---------------------------------------- 19 | example: 20 | .cf:before, 21 | .cf:after { 22 | content: " "; 23 | display: table; 24 | } 25 | .cf:after { 26 | clear: both; 27 | } 28 | ---------------------------------------- 29 | */ 30 | 31 | $clearfix: ( 32 | clearfix: ( 33 | base: null, 34 | modifiers: null, 35 | values: null, 36 | property: null, 37 | output: false, 38 | responsive: false, 39 | pseudoclasses: false, 40 | ), 41 | ); 42 | 43 | // Extra rules 44 | 45 | .cf:before, 46 | .cf:after { 47 | content: " "; 48 | display: table; 49 | } 50 | .cf:after { 51 | clear: both; 52 | } 53 | -------------------------------------------------------------------------------- /src/base/utilities/font-family.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Font Family 4 | ---------------------------------------- 5 | usage: 6 | .[value] 7 | ---------------------------------------- 8 | output: 9 | font-family: [value] 10 | ---------------------------------------- 11 | example: 12 | .sans { 13 | font-family: '18Franklin-webfont', 14 | system, 15 | -apple-system, 16 | BlinkMacSystemFont, 17 | 'Roboto', 18 | 'Helvetica Neue', 19 | 'Helvetica', 20 | 'Arial', 21 | sans-serif; } 22 | ---------------------------------------- 23 | */ 24 | 25 | $font-family: ( 26 | font-family: ( 27 | base: null, 28 | modifiers: null, 29 | values: map-collect( 30 | map-get($global_values, typefaces) 31 | ), 32 | property: 'font-family', 33 | output: true, 34 | responsive: false, 35 | pseudoclasses: false, 36 | placeholder: true, 37 | ) 38 | ) 39 | -------------------------------------------------------------------------------- /src/base/utilities/vertical-align.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Vertical Align 4 | ---------------------------------------- 5 | usage: 6 | .va-[value] 7 | ---------------------------------------- 8 | output: 9 | vertical-align: [value] 10 | ---------------------------------------- 11 | example: 12 | .va-top { 13 | vertical-align: top; } 14 | ---------------------------------------- 15 | */ 16 | 17 | $vertical-align: ( 18 | vertical-align: ( 19 | base: 'va', 20 | modifiers: null, 21 | values: ( 22 | baseline: ('baseline', isReadable), 23 | bottom: ('bottom', isReadable), 24 | middle: ('middle', isReadable), 25 | sub: ('sub', isReadable), 26 | super: ('super', isReadable), 27 | text-bottom: ('text-bottom', isReadable), 28 | text-top: ('text-top', isReadable), 29 | top: ('top', isReadable), 30 | ), 31 | property: 'vertical-align', 32 | output: true, 33 | responsive: false, 34 | pseudoclasses: false, 35 | ) 36 | ) 37 | -------------------------------------------------------------------------------- /src/base/utilities/padding.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Padding 4 | ---------------------------------------- 5 | usage: 6 | .p[modifier]*[-]*[value] 7 | ---------------------------------------- 8 | output: 9 | padding: [value] 10 | ---------------------------------------- 11 | example: 12 | .p0 { 13 | padding: none; } 14 | 15 | .pb1px { 16 | padding-bottom: 1px; } 17 | ---------------------------------------- 18 | */ 19 | 20 | $padding: ( 21 | padding: ( 22 | base: p, 23 | modifiers: ( 24 | t: '-top', 25 | r: '-right', 26 | b: '-bottom', 27 | l: '-left', 28 | y: ('-top', '-bottom'), 29 | x: ('-left', '-right'), 30 | noModifier: '', 31 | ), 32 | values: map-collect( 33 | map-get($global_values, pixels), 34 | map-get($global_values, grid), 35 | map-get($global_values, zero-zero) 36 | ), 37 | property: 'padding', 38 | output: true, 39 | responsive: true, 40 | pseudoclasses: false, 41 | ) 42 | ) 43 | -------------------------------------------------------------------------------- /src/base/utilities/font-size.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Font Size 4 | ---------------------------------------- 5 | usage: 6 | .[value] 7 | ---------------------------------------- 8 | output: 9 | font-family: [value]; 10 | font-size: [value]; 11 | ---------------------------------------- 12 | example: 13 | .sans-s5 { 14 | font-face: '18Franklin-webfont', 15 | system, 16 | -apple-system, 17 | BlinkMacSystemFont, 18 | 'Roboto', 19 | 'Helvetica Neue', 20 | 'Helvetica', 21 | 'Arial', 22 | sans-serif; 23 | font-size: 1rem; } 24 | ---------------------------------------- 25 | */ 26 | 27 | $font-size: ( 28 | font-size: ( 29 | base: null, 30 | modifiers: null, 31 | values: map-collect( 32 | map-get($global_values, typeScale) 33 | ), 34 | property: 'font-size', 35 | output: true, 36 | responsive: true, 37 | pseudoclasses: true, 38 | placeholder: true, 39 | ) 40 | ) 41 | -------------------------------------------------------------------------------- /src/base/utilities/border-color.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Border Color 4 | ---------------------------------------- 5 | usage: 6 | .b-[color] 7 | ---------------------------------------- 8 | output: 9 | border[-modifier]*[-color]: [color]; 10 | ---------------------------------------- 11 | example: 12 | .b-red { 13 | border-color: #be4900; } 14 | 15 | .bx-red { 16 | border-left-color: #be4900; 17 | border-right-color: #be4900; } 18 | ---------------------------------------- 19 | */ 20 | 21 | $border-color: ( 22 | border-color: ( 23 | base: 'b', 24 | modifiers: ( 25 | t: '-top-color', 26 | r: '-left-color', 27 | b: '-bottom-color', 28 | l: '-left-color', 29 | y: ('-top-color', '-bottom-color'), 30 | x: ('-left-color', '-right-color'), 31 | noModifier: -color, 32 | ), 33 | values: map-collect( 34 | map-get($global_values, colors) 35 | ), 36 | property: 'border', 37 | output: true, 38 | responsive: true, 39 | pseudoclasses: true, 40 | ) 41 | ) 42 | -------------------------------------------------------------------------------- /src/base/utilities/border-width.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Border Width 4 | ---------------------------------------- 5 | usage: 6 | .b[modifier]*[-value] 7 | ---------------------------------------- 8 | output: 9 | border-[modifier]: [value]; 10 | ---------------------------------------- 11 | example: 12 | .bt1px { 13 | border-top: 1px; } 14 | 15 | .b0 { 16 | border: none; } 17 | ---------------------------------------- 18 | */ 19 | 20 | $border-width: ( 21 | border: ( 22 | base: 'b', 23 | modifiers: ( 24 | t: '-top-width', 25 | r: '-left-width', 26 | b: '-bottom-width', 27 | l: '-left-width', 28 | y: ('-top-width', '-bottom-width'), 29 | x: ('-left-width', '-right-width'), 30 | noModifier: '-width', 31 | ), 32 | values: 33 | map-collect( 34 | map-get($global_values, pixels), 35 | map-get($global_values, gridShort), 36 | map-get($global_values, zero-zero) 37 | ), 38 | property: 'border', 39 | output: true, 40 | responsive: true, 41 | pseudoclasses: true, 42 | ) 43 | ) 44 | -------------------------------------------------------------------------------- /src/base/utilities/manual-position.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Manual Positioning 4 | ---------------------------------------- 5 | usage: 6 | .[modifier]-[value] 7 | ---------------------------------------- 8 | output: 9 | [modifier]: [value]; 10 | ---------------------------------------- 11 | example: 12 | .bottom-n2px { 13 | bottom: -2px; } 14 | ---------------------------------------- 15 | */ 16 | 17 | $manual-position: ( 18 | manual-position: ( 19 | base: null, 20 | modifiers: ( 21 | top: ('top', isReadable), 22 | bottom: ('bottom', isReadable), 23 | left: ('left', isReadable), 24 | right: ('right', isReadable), 25 | ), 26 | values: 27 | map-collect( 28 | map-get($global_values, pixels), 29 | map-get($global_values, negPixels), 30 | map-get($global_values, percentage), 31 | map-get($global_values, grid), 32 | map-get($global_values, zero-zero), 33 | map-get($global_values, auto) 34 | ), 35 | property: '', 36 | output: true, 37 | responsive: true, 38 | pseudoclasses: false, 39 | ) 40 | ) 41 | -------------------------------------------------------------------------------- /src/base/prototypes/img/search.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## Welcome to United! 2 | 3 | We're so glad you're thinking about contributing to an 18F open source project! If you're unsure or afraid of anything, just ask or submit the issue or pull request anyways. The worst that can happen is that you'll be politely asked to change something. We appreciate any sort of contribution, and don't want a wall of rules to get in the way of that. 4 | 5 | Before contributing, we encourage you to read our CONTRIBUTING policy (you are here), our LICENSE, and our README, all of which should be in this repository. If you have any questions, or want to read more about our underlying policies, you can consult the 18F Open Source Policy GitHub repository at https://github.com/18f/open-source-policy, or just shoot us an email/official government letterhead note to [18f@gsa.gov](mailto:18f@gsa.gov). 6 | 7 | ## Public domain 8 | 9 | This project is in the public domain within the United States, and 10 | copyright and related rights in the work worldwide are waived through 11 | the [CC0 1.0 Universal public domain dedication](https://creativecommons.org/publicdomain/zero/1.0/). 12 | 13 | All contributions to this project will be released under the CC0 14 | dedication. By submitting a pull request, you are agreeing to comply 15 | with this waiver of copyright interest. 16 | -------------------------------------------------------------------------------- /src/base/utilities/margin.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ---------------------------------------- 3 | Margin 4 | ---------------------------------------- 5 | usage: 6 | .m[modifier]*[-]*[value] 7 | ---------------------------------------- 8 | output: 9 | margin: [value] 10 | ---------------------------------------- 11 | example: 12 | .mx-auto { 13 | margin-left: auto; 14 | margin-right: auto; } 15 | 16 | .m105 { 17 | margin: .75rem; } 18 | ---------------------------------------- 19 | */ 20 | 21 | $margin: ( 22 | margin: ( 23 | base: m, 24 | modifiers: ( 25 | t: '-top', 26 | r: '-right', 27 | b: '-bottom', 28 | l: '-left', 29 | y: ('-top', '-bottom'), 30 | x: ('-left', '-right'), 31 | noModifier: '', 32 | ), 33 | values: map-collect( 34 | map-get($global_values, pixels), 35 | map-get($global_values, negPixels), 36 | map-get($global_values, grid), 37 | map-get($global_values, negGrid), 38 | map-get($global_values, zero-zero), 39 | map-get($global_values, ch), 40 | map-get($global_values, negCh), 41 | map-get($global_values, em), 42 | map-get($global_values, auto) 43 | ), 44 | property: 'margin', 45 | output: true, 46 | responsive: true, 47 | pseudoclasses: false, 48 | ) 49 | ) 50 | -------------------------------------------------------------------------------- /src/overrides/_united-override-vars.scss: -------------------------------------------------------------------------------- 1 | // UNITED OVERRIDE VARIABLES 2 | 3 | // -------------------------------------------------- 4 | // Grid 5 | 6 | // spacing is calculated on multiples of a 7 | // base grid (unitless, but assumed px) 8 | 9 | $grid-base: 8; // unitless, but px 10 | 11 | // establishes the base type size (16px) for 12 | // rem calculations 13 | 14 | $grid-type: 16; // unitless, but px 15 | 16 | // -------------------------------------------------- 17 | // Breakpoints 18 | 19 | // Breakpoint value is a grid multiplier 20 | // $breakpoint-sm-grid: 50 == 50 * $grid-base 21 | // if $grid-base == 8 :: $breakpoint-sm-grid: 50 == 400px 22 | 23 | //$breakpoint-sm-grid: 50; // 400px 24 | //$breakpoint-md-grid: 75; // 600px 25 | //$breakpoint-lg-grid: 100; // 800px 26 | //$breakpoint-xl-grid: 140; // 1200px 27 | 28 | // -------------------------------------------------- 29 | // Widths 30 | 31 | // Width value is a grid multiplier 32 | // $nav-width-grid: 75 == 75 * $grid-base 33 | // if $grid-base == 8 :: $nav-width-grid: 75 == 600px 34 | 35 | //$nav-width-grid: 75; // 600px; 36 | //$site-max-width-grid: 130; // 1040px; 37 | 38 | // -------------------------------------------------- 39 | // Paths 40 | 41 | //$static-font-path: '../fonts/foooo'; 42 | //$image-path: '/'; 43 | 44 | // -------------------------------------------------- 45 | // Border radius 46 | 47 | //$border-radius: 2px !default; 48 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "united", 3 | "version": "0.0.1", 4 | "description": "An atomic css framework good enough for government work.", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/18F/united.git" 12 | }, 13 | "author": "", 14 | "license": "ISC", 15 | "bugs": { 16 | "url": "https://github.com/18F/united/issues" 17 | }, 18 | "homepage": "https://github.com/18F/united#readme", 19 | "devDependencies": { 20 | "browser-sync": "^2.18.7", 21 | "child_process": "^1.0.2", 22 | "clean-css": "^3.4.23", 23 | "del": "^2.2.2", 24 | "gulp": "github:gulpjs/gulp#4.0", 25 | "gulp-autoprefixer": "^3.1.0", 26 | "gulp-bless": "^3.2.1", 27 | "gulp-clean": "^0.3.1", 28 | "gulp-clean-css": "^2.3.2", 29 | "gulp-combine-mq": "^0.4.0", 30 | "gulp-eslint": "^1.1.1", 31 | "gulp-filter": "^3.0.1", 32 | "gulp-gzip": "^1.4.0", 33 | "gulp-rename": "^1.2.2", 34 | "gulp-replace": "^0.5.4", 35 | "gulp-sass": "^2.1.1", 36 | "gulp-size": "^2.1.0", 37 | "gulp-sourcemaps": "^1.6.0", 38 | "gulp-strip-css-comments": "^1.2.0", 39 | "gulp-stylelint": "^2.0.2", 40 | "gulp-uglify": "^1.5.1", 41 | "gulp-uncss": "^1.0.6", 42 | "gulp-util": "^3.0.7", 43 | "gulp-zip": "^3.1.0", 44 | "node-notifier": "^4.6.0", 45 | "node-sass": "^3.4.2", 46 | "normalize.css": "^5.0.0", 47 | "path": "^0.12.7", 48 | "watch": "^0.17.1" 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/base/utilities/_all.scss: -------------------------------------------------------------------------------- 1 | @import "utilities/background"; 2 | @import "utilities/border-color"; 3 | @import "utilities/border-radius"; 4 | @import "utilities/border-style"; 5 | @import "utilities/border-width"; 6 | @import "utilities/clear"; 7 | @import "utilities/clearfix"; 8 | @import "utilities/color"; 9 | @import "utilities/column"; 10 | @import "utilities/display"; 11 | @import "utilities/float"; 12 | @import "utilities/flex-size"; 13 | @import "utilities/flex-align"; 14 | @import "utilities/flex-direction"; 15 | @import "utilities/flex-wrap"; 16 | @import "utilities/font-family"; 17 | @import "utilities/font-size"; 18 | @import "utilities/font-style"; 19 | @import "utilities/font-weight"; 20 | @import "utilities/font-weight"; 21 | @import "utilities/height"; 22 | @import "utilities/letter-spacing"; 23 | @import "utilities/line-height"; 24 | @import "utilities/line-length"; 25 | @import "utilities/list-reset"; 26 | @import "utilities/manual-position"; 27 | @import "utilities/margin"; 28 | @import "utilities/max-height"; 29 | @import "utilities/max-width"; 30 | @import "utilities/min-height"; 31 | @import "utilities/min-width"; 32 | @import "utilities/opacity"; 33 | @import "utilities/opentype"; 34 | @import "utilities/outline-1-width"; 35 | @import "utilities/outline-2-color"; 36 | @import "utilities/order"; 37 | @import "utilities/padding"; 38 | @import "utilities/position"; 39 | @import "utilities/row"; 40 | @import "utilities/square"; 41 | @import "utilities/text-align"; 42 | @import "utilities/text-decoration"; 43 | @import "utilities/text-transform"; 44 | @import "utilities/vertical-align"; 45 | @import "utilities/whitespace"; 46 | @import "utilities/width"; 47 | -------------------------------------------------------------------------------- /src/base/prototypes/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: United design framework prototypes 3 | layout: default 4 | htmlclasses: bg-cream 5 | bodyclasses: bg-white lh-body m0 pt4 px2 md-px4 pb8 fw300 6 | --- 7 | 8 |
9 |

United design framework prototypes

10 | 19 | 20 |
21 |

United framework: github.com/18f/united

22 |

18Franklin typeface: github.com/18f/18franklin

23 |

Rules can be broken, never ignored.

24 |

:18F:

25 |
26 |
27 | -------------------------------------------------------------------------------- /src/base/prototypes/grid.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: Grid 3 | layout: default 4 | htmlclasses: bg-cream 5 | bodyclasses: sans-s5 lh-body m0 px2 md-px4 pt4 pb8 bg-white 6 | --- 7 | 8 |
9 |
10 |
.f1
11 |
12 |
13 |
.f1
14 |
15 |
16 | 17 |
18 |
19 |
.f1
20 |
21 |
22 |
.f1
23 |
24 |
25 |
.f1
26 |
27 |
28 |
.f1
29 |
30 |
31 | 32 |
33 |
34 |
.f1
35 |
36 |
37 |
.f2
38 |
39 |
40 |
.f1
41 |
42 |
43 | 44 |
45 |
46 |
.f1
47 |
48 |
49 |
.f3
50 |
51 |
52 |
.f1
53 |
54 |
55 |
.f2
56 |
57 |
58 |
.f1
59 |
60 |
61 |
.f3
62 |
63 |
64 | -------------------------------------------------------------------------------- /src/base/prototypes/_includes/portal--header.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 | 6 | 7 | 8 | 9 | {% if include.page %} 10 |
11 | Home {{include.page}} 12 |
13 | {% else %} 14 |
Home
15 | {% endif %} 16 | 17 | 24 |
25 |
26 |
27 |
28 |
Sharon Metz-Johnson
29 |
Central Office
30 |
31 |
32 | 33 |
34 |
35 |
36 |
37 | -------------------------------------------------------------------------------- /src/base/prototypes/portal-m1.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: Portal / Module 1 3 | layout: default 4 | htmlclasses: bg-white 5 | bodyclasses: bg-cream lh-body m0 p0 fw400 6 | --- 7 | 8 | {% include 9 | portal--header.html 10 | page="Module 1" 11 | %} 12 | 13 |
14 |
15 |
16 |
17 |
Module 1
18 |
19 |
20 |
21 |
22 |
23 |
24 |
Submodule
25 |
    26 |
  • 27 |
  • 28 |
  • 29 |
30 |
31 |
32 |
33 |
34 |
Submodule
35 |
    36 |
  • 37 |
  • 38 |
  • 39 |
  • 40 |
  • 41 |
42 |
43 |
44 |
45 |
46 | -------------------------------------------------------------------------------- /src/base/prototypes/portal-m2.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: Portal / Module 2 3 | layout: default 4 | htmlclasses: bg-white 5 | bodyclasses: bg-cream lh-body m0 p0 fw400 6 | --- 7 | 8 | {% include 9 | portal--header.html 10 | page="Module 2" 11 | %} 12 | 13 |
14 |
15 |
16 |
17 |
Module 2
18 |
19 |
20 |
21 |
22 |
23 |
24 |
Submodule
25 |
    26 |
  • 27 |
  • 28 |
  • 29 |
30 |
31 |
32 |
33 |
34 |
Submodule
35 |
    36 |
  • 37 |
  • 38 |
  • 39 |
  • 40 |
  • 41 |
42 |
43 |
44 |
45 |
46 | -------------------------------------------------------------------------------- /src/base/prototypes/portal-m4.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: Portal / Module 4 3 | layout: default 4 | htmlclasses: bg-white 5 | bodyclasses: bg-cream lh-body m0 p0 fw400 6 | --- 7 | 8 | {% include 9 | portal--header.html 10 | page="Module 4" 11 | %} 12 | 13 |
14 |
15 |
16 |
17 |
Module 4
18 |
19 |
20 |
21 |
22 |
23 |
24 |
Submodule
25 |
    26 |
  • 27 |
  • 28 |
  • 29 |
30 |
31 |
32 |
33 |
34 |
Submodule
35 |
    36 |
  • 37 |
  • 38 |
  • 39 |
  • 40 |
  • 41 |
42 |
43 |
44 |
45 |
46 | -------------------------------------------------------------------------------- /src/base/prototypes/portal-m6.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: Portal / Module 6 3 | layout: default 4 | htmlclasses: bg-white 5 | bodyclasses: bg-cream lh-body m0 p0 fw400 6 | --- 7 | 8 | {% include 9 | portal--header.html 10 | page="Module 6" 11 | %} 12 | 13 |
14 |
15 |
16 |
17 |
Module 6
18 |
19 |
20 |
21 |
22 |
23 |
24 |
Submodule
25 |
    26 |
  • 27 |
  • 28 |
  • 29 |
30 |
31 |
32 |
33 |
34 |
Submodule
35 |
    36 |
  • 37 |
  • 38 |
  • 39 |
  • 40 |
  • 41 |
42 |
43 |
44 |
45 |
46 | -------------------------------------------------------------------------------- /src/base/prototypes/portal-m3.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: Portal / Module 3 3 | layout: default 4 | htmlclasses: bg-white 5 | bodyclasses: bg-cream lh-body m0 p0 fw400 6 | --- 7 | 8 | {% include 9 | portal--header.html 10 | page="Module 3" 11 | %} 12 | 13 |
14 |
15 |
16 |
17 |
Module 3
18 |
19 |
20 |
21 |
22 |
23 |
24 |
Submodule
25 |
    26 |
  • 27 |
  • 28 |
  • 29 |
30 |
31 |
32 |
33 |
34 |
Submodule
35 |
    36 |
  • 37 |
  • 38 |
  • 39 |
  • 40 |
  • 41 |
42 |
43 |
44 |
45 |
46 | -------------------------------------------------------------------------------- /src/base/prototypes/portal-m5.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: Portal / Module 5 3 | layout: default 4 | htmlclasses: bg-white 5 | bodyclasses: bg-cream lh-body m0 p0 fw400 6 | --- 7 | 8 | {% include 9 | portal--header.html 10 | page="Module 5" 11 | %} 12 | 13 |
14 |
15 |
16 |
17 |
Module 5
18 |
19 |
20 |
21 |
22 |
23 |
24 |
Submodule
25 |
    26 |
  • 27 |
  • 28 |
  • 29 |
30 |
31 |
32 |
33 |
34 |
Submodule
35 |
    36 |
  • 37 |
  • 38 |
  • 39 |
  • 40 |
  • 41 |
42 |
43 |
44 |
45 |
46 | -------------------------------------------------------------------------------- /src/base/prototypes/forms.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: Forms 3 | layout: default 4 | htmlclasses: bg-cream 5 | bodyclasses: bg-white lh-body m0 pt0 pb8 fw300 6 | --- 7 | 8 |
9 |
10 |
11 | User Information 12 | {% include 13 | form--text-entry.html 14 | label="First name" 15 | input-name="first_name" 16 | type="text" 17 | %} 18 | {% include 19 | form--text-entry.html 20 | label="Last name" 21 | input-name="last_name" 22 | type="text" 23 | %} 24 | {% include 25 | form--text-entry.html 26 | label="User ID" 27 | input-name="user_id" 28 | type="text" 29 | %} 30 | {% include 31 | form--text-entry.html 32 | type="textarea" 33 | label="Description" 34 | input-name="description" 35 | placeholder="Enter description here..." 36 | %} 37 |
38 |
39 | Select only one 40 |
41 | 42 | 43 |
44 |
45 | 46 | 47 |
48 |
49 |
50 | Select all that apply 51 |
52 | 53 | 54 |
55 |
56 | 57 | 58 |
59 |
60 |
61 | 62 | 66 |
67 | 68 | 69 | 70 | 71 | 72 |
73 | Billing Address 74 | 75 | 76 | 77 | 78 |
79 |
80 | 81 | 93 |
94 |
95 |
96 | -------------------------------------------------------------------------------- /src/base/_functions.scss: -------------------------------------------------------------------------------- 1 | /// Map deep get 2 | /// @author Hugo Giraudel 3 | /// @access public 4 | /// @param {Map} $map - Map 5 | /// @param {Arglist} $keys - Key chain 6 | /// @return {*} - Desired value 7 | @function map-deep-get($map, $keys...) { 8 | @each $key in $keys { 9 | $map: map-get($map, $key); 10 | } 11 | @return $map; 12 | } 13 | 14 | /// Remove the unit of a length 15 | /// @param {Number} $number - Number to remove unit from 16 | /// @return {Number} - Unitless number 17 | @function strip-unit($number) { 18 | @if type-of($number) == 'number' and not unitless($number) { 19 | @return $number / ($number * 0 + 1); 20 | } 21 | 22 | @return $number; 23 | } 24 | 25 | // multiCat() 26 | 27 | @function multiCat($list1, $list2){ 28 | $thisList: (); 29 | @each $e in $list1 { 30 | @each $ee in $list2 { 31 | $thisBlock: $e + $ee; 32 | $thisList: join($thisList, $thisBlock); 33 | } 34 | } 35 | @return $thisList; 36 | } 37 | 38 | // map-collect() 39 | 40 | @function map-collect($maps...) { 41 | $collection: (); 42 | 43 | @each $map in $maps { 44 | $collection: map-merge($collection, $map); 45 | } 46 | @return $collection; 47 | } 48 | 49 | // remove() 50 | 51 | @function remove($list, $value, $recursive: false) { 52 | $result: (); 53 | 54 | @for $i from 1 through length($list) { 55 | @if type-of(nth($list, $i)) == list and $recursive { 56 | $result: append($result, remove(nth($list, $i), $value, $recursive)); 57 | } 58 | 59 | @else if nth($list, $i) != $value { 60 | $result: append($result, nth($list, $i)); 61 | } 62 | } 63 | 64 | @return $result; 65 | } 66 | 67 | // strunquote() 68 | 69 | @function strunquote($value){ 70 | @if type-of($value) == 'string' { 71 | $value: unquote($value); 72 | } 73 | @return $value; 74 | } 75 | 76 | // toMap() 77 | 78 | @function toMap($key, $values){ 79 | $l: length($values); 80 | @if $key == 'noModifier' or $key == 'noValue' { 81 | $key: ''; 82 | } 83 | @if $l == 1 or nth($values, $l) != isReadable { 84 | @return ( 85 | slug: $key, 86 | content: $values, 87 | ); 88 | } @else { 89 | $values: remove($values, isReadable); 90 | @return ( 91 | slug: $key, 92 | isReadable: true, 93 | content: $values, 94 | ); 95 | } 96 | } 97 | 98 | // baseToMap() 99 | 100 | @function baseToMap($values){ 101 | $l: length($values); 102 | @if $l == 1 or nth($values, $l) != isReadable { 103 | @return ( 104 | slug: $values, 105 | ); 106 | } @else { 107 | $values: remove($values, isReadable); 108 | @return ( 109 | slug: unquote(nth($values, 1)), 110 | isReadable: true, 111 | ); 112 | } 113 | } 114 | 115 | // utilitiesMap 116 | 117 | @function utilitiesMap($import){ 118 | $s: (); 119 | @each $utility in $import { 120 | $thisUtility: '$' + $utility; 121 | $s: join($s, $thisUtility); 122 | } 123 | @return $s; 124 | } 125 | 126 | // grid() 127 | 128 | @function grid($grid){ 129 | $gridToRem: #{($grid-base * $grid / $grid-type)}rem; 130 | @return $gridToRem; 131 | } 132 | 133 | // px() 134 | 135 | @function px($pixels){ 136 | $pxToRem: #{($pixels / $grid-type)}rem; 137 | @return $pxToRem; 138 | } 139 | 140 | // typeScale() 141 | 142 | @function typeScale($capHeight, $scale){ 143 | $thisScale: (500 * strip-unit($scale)) / strip-unit($capHeight); 144 | @return px($thisScale); 145 | } 146 | -------------------------------------------------------------------------------- /src/base/prototypes/type-scale.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: Type Scale 3 | layout: default 4 | htmlclasses: bg-cream 5 | bodyclasses: sans-s3 lh-body pt4 px4 pb8 bg-white 6 | --- 7 | 8 |
9 |
10 |
sans-s1
11 |
hamburguesas
12 |
hamburguesas
13 |
hamburguesas
14 |
15 |
16 |
sans-s2
17 |
hamburguesas
18 |
hamburguesas
19 |
hamburguesas
20 |
21 |
22 |
sans-s3
23 |
hamburguesas
24 |
hamburguesas
25 |
hamburguesas
26 |
27 |
28 |
sans-s4
29 |
hamburguesas
30 |
hamburguesas
31 |
hamburguesas
32 |
33 |
34 |
sans-s5
35 |
hamburguesas
36 |
hamburguesas
37 |
hamburguesas
38 |
39 |
40 |
sans-s6
41 |
hamburguesas
42 |
hamburguesas
43 |
hamburguesas
44 |
45 |
46 |
sans-s7
47 |
hamburguesas
48 |
hamburguesas
49 |
hamburguesas
50 |
51 |
52 |
sans-s8
53 |
hamburguesas
54 |
hamburguesas
55 |
hamburguesas
56 |
57 |
58 |
sans-s9
59 |
hamburg
60 |
hamburg
61 |
hamburg
62 |
63 |
64 |
sans-s10
65 |
patty
66 |
patty
67 |
patty
68 |
69 |
70 |
sans-s11
71 |
bun
72 |
bun
73 |
bun
74 |
75 |
76 |
sans-s12
77 |
m!
78 |
m!
79 |
m!
80 |
81 |
82 | -------------------------------------------------------------------------------- /src/base/prototypes/mono.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: Typefaces/Mono 3 | layout: default 4 | htmlclasses: bg-cream 5 | bodyclasses: sans-s3 lh-body pt4 px4 pb8 bg-white 6 | --- 7 | 8 |
9 |
10 |
Cumulonimbus and cirrus
11 |
10.53px
12 |
.mono-s1
13 |
14 | 15 |
16 |
Cumulonimbus and cirrus
17 |
11.84px
18 |
.mono-s2
19 |
20 | 21 |
22 |
Cumulonimbus and cirrus
23 |
13.16px
24 |
.mono-s3
25 |
26 | 27 |
28 |
Cumulonimbus and cirrus
29 |
14.47px
30 |
.mono-s4
31 |
32 | 33 |
34 |
Cumulonimbus and cirrus
35 |
15.79px
36 |
.mono-s5
37 |
38 | 39 |
40 |
Cumulonimbus and cirrus
41 |
18.42px
42 |
.mono-s6
43 |
44 | 45 |
46 |
Cumulonimbus and cirrus
47 |
21.05px
48 |
.mono-s7
49 |
50 | 51 |
52 |
Cumulonimbus and cirrus
53 |
23.68px
54 |
.mono-s8
55 |
56 | 57 |
58 |
Cumulonimbus and cirrus
59 |
39.47px
60 |
.mono-s9
61 |
62 | 63 |
64 |
Cumulonimbus and cirrus
65 |
68.42px
66 |
.mono-s10
67 |
68 | 69 |
70 |
Cumulonimbus and cirrus
71 |
118.42px
72 |
.mono-s11
73 |
74 | 75 |
76 |
Cumulonimbus and cirrus
77 |
157.90px
78 |
.mono-s12
79 |
80 |
81 | -------------------------------------------------------------------------------- /src/base/prototypes/sans.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: Typefaces/Sans 3 | layout: default 4 | htmlclasses: bg-cream 5 | bodyclasses: sans-s3 lh-body pt4 px4 pb8 bg-white 6 | --- 7 | 8 |
9 |
10 |
Cumulonimbus and cirrus
11 |
10.78px
12 |
.sans-s1
13 |
14 | 15 |
16 |
Cumulonimbus and cirrus
17 |
12.13px
18 |
.sans-s2
19 |
20 | 21 |
22 |
Cumulonimbus and cirrus
23 |
13.47px
24 |
.sans-s3
25 |
26 | 27 |
28 |
Cumulonimbus and cirrus
29 |
14.82px
30 |
.sans-s4
31 |
32 | 33 |
34 |
Cumulonimbus and cirrus
35 |
16.17px
36 |
.sans-s5
37 |
38 | 39 |
40 |
Cumulonimbus and cirrus
41 |
18.87px
42 |
.sans-s6
43 |
44 | 45 |
46 |
Cumulonimbus and cirrus
47 |
21.56px
48 |
.sans-s7
49 |
50 | 51 |
52 |
Cumulonimbus and cirrus
53 |
24.26px
54 |
.sans-s8
55 |
56 | 57 |
58 |
Cumulonimbus and cirrus
59 |
40.43px
60 |
.sans-s9
61 |
62 | 63 |
64 |
Cumulonimbus and cirrus
65 |
70.08px
66 |
.sans-s10
67 |
68 | 69 |
70 |
Cumulonimbus and cirrus
71 |
121.29px
72 |
.sans-s11
73 |
74 | 75 |
76 |
Cumulonimbus and cirrus
77 |
161.73px
78 |
.sans-s12
79 |
80 |
81 | -------------------------------------------------------------------------------- /src/base/prototypes/serif.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: Typefaces/Serif 3 | layout: default 4 | htmlclasses: bg-cream 5 | bodyclasses: sans-s3 lh-body pt4 px4 pb8 bg-white 6 | --- 7 | 8 |
9 |
10 |
Cumulonimbus and cirrus
11 |
11.56px
12 |
.serif-s1
13 |
14 | 15 |
16 |
Cumulonimbus and cirrus
17 |
13.01px
18 |
.serif-s2
19 |
20 | 21 |
22 |
Cumulonimbus and cirrus
23 |
14.45px
24 |
.serif-s3
25 |
26 | 27 |
28 |
Cumulonimbus and cirrus
29 |
15.9px
30 |
.serif-s4
31 |
32 | 33 |
34 |
Cumulonimbus and cirrus
35 |
17.34px
36 |
.serif-s5
37 |
38 | 39 |
40 |
Cumulonimbus and cirrus
41 |
20.23px
42 |
.serif-s6
43 |
44 | 45 |
46 |
Cumulonimbus and cirrus
47 |
23.12px
48 |
.serif-s7
49 |
50 | 51 |
52 |
Cumulonimbus and cirrus
53 |
26.01px
54 |
.serif-s8
55 |
56 | 57 |
58 |
Cumulonimbus and cirrus
59 |
43.35px
60 |
.serif-s9
61 |
62 | 63 |
64 |
Cumulonimbus and cirrus
65 |
75.14px
66 |
.serif-s10
67 |
68 | 69 |
70 |
Cumulonimbus and cirrus
71 |
130.06px
72 |
.serif-s11
73 |
74 | 75 |
76 |
Cumulonimbus and cirrus
77 |
173.41px
78 |
.serif-s12
79 |
80 |
81 | -------------------------------------------------------------------------------- /src/base/prototypes/portal.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: Portal home 3 | layout: default 4 | htmlclasses: bg-white 5 | bodyclasses: bg-cream lh-body m0 p0 fw400 6 | --- 7 | 8 | {% include 9 | portal--header.html 10 | %} 11 | 12 |
13 |
14 |
15 |
16 |
People
17 |
    18 |
  • {% include wireframe--tk.html count=9 19 | %}
  • 20 |
  • {% include wireframe--tk.html count=5 21 | %}
  • 22 |
  • {% include wireframe--tk.html count=13 23 | %}
  • 24 |
25 |
26 |
27 |
28 |
29 |
Places
30 |
    31 |
  • {% include wireframe--tk.html count=5 32 | %}
  • 33 |
  • {% include wireframe--tk.html count=7 34 | %}
  • 35 |
  • {% include wireframe--tk.html count=4 36 | %}
  • 37 |
  • {% include wireframe--tk.html count=9 38 | %}
  • 39 |
  • {% include wireframe--tk.html count=15 40 | %}
  • 41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
Modules
49 |
50 | 55 | 60 | 65 |
66 |
67 | 72 | 77 | 82 |
83 |
84 |
85 |
86 |
87 | -------------------------------------------------------------------------------- /src/base/_defaults.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *:before, 3 | *:after { 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | @extend .h100ct; 9 | font-size: 16px; 10 | } 11 | 12 | body { 13 | @extend .minh100ct; 14 | } 15 | 16 | // normalize all displayed text to system sans 17 | body, 18 | input, 19 | select, 20 | option, 21 | textarea { 22 | @extend .sans-s5; 23 | } 24 | 25 | h1, 26 | h2, 27 | h3, 28 | h4, 29 | h5, 30 | h6, 31 | p { 32 | @extend .m0; 33 | } 34 | 35 | h1, 36 | h2, 37 | h3, 38 | h4, 39 | h5, 40 | h6 { 41 | @extend .lh-hed; 42 | } 43 | 44 | h1, 45 | h2 { 46 | @extend .sans-s9; 47 | } 48 | 49 | h1 { 50 | @extend .fw700; 51 | } 52 | 53 | h2 { 54 | @extend .fw300; 55 | } 56 | 57 | p + p { 58 | @extend .mt2; 59 | } 60 | 61 | .tk { 62 | @extend .inline-block; 63 | @extend .bg-gray-20; 64 | @extend .br-rounded; 65 | @extend .my0; 66 | @extend .mrn1; 67 | @extend .h1em; 68 | @extend .w5ch; 69 | @extend .b0; 70 | @extend .va-text-bottom; 71 | &:nth-child(3n) { 72 | @extend .w2em; 73 | } 74 | &:nth-child(5n) { 75 | @extend .w3em; 76 | } 77 | &:nth-child(8n) { 78 | @extend .w05em; 79 | } 80 | &:nth-child(23n) { 81 | @extend .w4em; 82 | } 83 | &:last-child { 84 | @extend .w6em; 85 | } 86 | } 87 | 88 | p { 89 | .tk { 90 | @extend .w8em; 91 | &:nth-child(3n) { 92 | @extend .w2em; 93 | } 94 | &:nth-child(5n) { 95 | @extend .w7em; 96 | } 97 | &:nth-child(8n) { 98 | @extend .w05em; 99 | } 100 | &:nth-child(23n) { 101 | @extend .w10em; 102 | } 103 | &:last-child { 104 | @extend .w6em; 105 | } 106 | } 107 | } 108 | 109 | .justify { 110 | .tk { 111 | width: 2.5ch !important; 112 | } 113 | } 114 | 115 | 116 | // inputs 117 | 118 | input[type="checkbox"], 119 | input[type="radio"] 120 | { 121 | @extend .relative; 122 | @extend .va-baseline; 123 | @extend .inline-block; 124 | bottom: .125em; 125 | 126 | & + label { 127 | @extend .inline-block; 128 | @extend .mt0; 129 | } 130 | } 131 | 132 | input[type="radio"] + label { 133 | @extend .ml05; 134 | } 135 | 136 | 137 | [type=text], 138 | [type=password], 139 | [type=url], 140 | [type=email], 141 | [type=number], 142 | textarea, 143 | select { 144 | @extend .b1px; 145 | @extend .b-solid; 146 | @extend .b-gray-50; 147 | @extend .br0; 148 | @extend .sans-s5; 149 | @extend .textblack; 150 | @extend .block; 151 | @extend .h5; 152 | @extend .lh-cap; 153 | @extend .my05; 154 | @extend .maxw50; 155 | @extend .py05; 156 | @extend .px1; 157 | @extend .w100ct; 158 | @extend .fo-outline-05; 159 | @extend .fo-outline-gold-20; 160 | @extend .pl-sans-s5; 161 | @extend .pl-gray-30; 162 | @extend .pl-fw300; 163 | @extend .br-rounded; 164 | appearance: none; 165 | } 166 | 167 | label { 168 | @extend .block; 169 | @extend .mt2; 170 | @extend .maxw50; 171 | } 172 | 173 | a { 174 | @extend .fo-outline-05; 175 | @extend .fo-outline-gold-20; 176 | } 177 | 178 | button { 179 | @extend .fo-outline-05; 180 | @extend .fo-outline-gold-20; 181 | @extend .br-rounded; 182 | @extend .h5; 183 | @extend .px2; 184 | @extend .bg-blue-50; 185 | @extend .white; 186 | @extend .ho-bg-blue-60; 187 | @extend .b0; 188 | @extend .sans-s4; 189 | @extend .fw400; 190 | cursor: pointer; 191 | } 192 | 193 | textarea { 194 | @extend .h25; 195 | } 196 | 197 | select { 198 | @extend .bg-white; 199 | appearance: none; 200 | background-image: url('#{$image-path}/arrow-down.png'); 201 | background-image: url('#{$image-path}/arrow-down.svg'); 202 | background-position: right 1.3rem center; 203 | background-repeat: no-repeat; 204 | background-size: 1.3rem; 205 | } 206 | 207 | fieldset { 208 | @extend .b0; 209 | @extend .mx0; 210 | @extend .mt4; 211 | @extend .p0; 212 | } 213 | 214 | legend { 215 | @extend .sans-s4; 216 | @extend .fw700; 217 | @extend .float-left; 218 | @extend .px0; 219 | @extend .pb1; 220 | 221 | & + * { 222 | @extend .clear; 223 | } 224 | } 225 | 226 | .ho-fill-ultramarine-60:hover { 227 | path { 228 | fill: #3151B7 !important; 229 | } 230 | } 231 | 232 | path { 233 | pointer-events: all; 234 | } 235 | 236 | .pointer { 237 | cursor: pointer; 238 | } 239 | 240 | .svg-inherit svg { 241 | fill: currentColor; 242 | } 243 | -------------------------------------------------------------------------------- /src/base/prototypes/whitespace.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: Whitespace 3 | layout: default 4 | htmlclasses: bg-cream 5 | bodyclasses: sans-s3 lh-body pt4 px4 pb8 bg-white 6 | --- 7 | 8 |
9 |
10 |
.w1px
11 |
1px
12 |
13 |
14 |
15 |
.w2px
16 |
2px
17 |
18 |
19 |
20 |
.w05
21 |
4px
22 |
23 |
24 |
25 |
.w1
26 |
8px
27 |
28 |
29 |
30 |
.w105
31 |
12px
32 |
33 |
34 |
35 |
.w2
36 |
16px
37 |
38 |
39 |
40 |
.w3
41 |
24px
42 |
43 |
44 |
45 |
.w4
46 |
32px
47 |
48 |
49 |
50 |
.w5
51 |
40px
52 |
53 |
54 |
55 |
.w6
56 |
48px
57 |
58 |
59 |
60 |
.w7
61 |
56px
62 |
63 |
64 |
65 |
.w8
66 |
64px
67 |
68 |
69 |
70 |
.w9
71 |
72px
72 |
73 |
74 |
75 |
.w10
76 |
80px
77 |
78 |
79 |
80 |
.w15
81 |
120px
82 |
83 |
84 |
85 |
.w20
86 |
160px
87 |
88 |
89 |
90 |
.w25
91 |
200px
92 |
93 |
94 |
95 |
.w30
96 |
240px
97 |
98 |
99 |
100 |
.w40
101 |
320px
102 |
103 |
104 |
105 |
.w50
106 |
400px
107 |
108 |
109 |
110 |
.w-sm
111 |
400px
112 |
113 |
114 |
115 |
.w-md
116 |
600px
117 |
118 |
119 |
120 |
.w-lg
121 |
800px
122 |
123 |
124 |
125 |
.w-xl
126 |
1120px
127 |
128 |
129 |
130 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | // Modules 2 | var gulp = require('gulp'), 3 | del = require('del'), 4 | sass = require('gulp-sass'), 5 | autoprefixer = require('gulp-autoprefixer'), 6 | rename = require('gulp-rename'), 7 | cleanCSS = require('gulp-clean-css'), 8 | combineMq = require('gulp-combine-mq'), 9 | strip = require('gulp-strip-css-comments'), 10 | uncss = require('gulp-uncss'), 11 | bless = require('gulp-bless'), 12 | gzip = require('gulp-gzip'), 13 | size = require('gulp-size'), 14 | cp = require('child_process'), 15 | path = require('path'), 16 | browserSync = require('browser-sync').create(); 17 | 18 | var supportedBrowsers = [ 19 | '> 1%', 20 | 'Last 2 versions', 21 | 'IE 11', 22 | 'IE 10', 23 | 'IE 9', 24 | ]; 25 | 26 | var jekyll = process.platform === 'win32' ? 'jekyll.bat' : 'jekyll'; 27 | var messages = { 28 | jekyllBuild: 'Rebuilding...' 29 | }; 30 | 31 | const UNITED_OVERRIDE = 'src/overrides'; 32 | const UNITED_OVERRIDE_DIR = path.join(__dirname, ...UNITED_OVERRIDE.split('/')); 33 | 34 | 35 | // Clean the build directory 36 | 37 | gulp.task('clean', function () { 38 | return del([ 39 | './build/*.css' 40 | ]); 41 | }); 42 | 43 | // Sync fonts 44 | 45 | gulp.task('fontsync', function() { 46 | return gulp.src('./18Franklin/fonts/webfonts/**/*.{ttf,woff,woff2,eot}') 47 | .pipe(gulp.dest('./src/prototypes/fonts')); 48 | }); 49 | 50 | 51 | // Compile Our Sass 52 | 53 | gulp.task('compile', function() { 54 | return gulp.src('src/base/united.scss') 55 | .pipe(sass({ 56 | outputStyle: 'compact', 57 | errLogToConsole: true, 58 | quiet: true, 59 | includePaths: [ 60 | UNITED_OVERRIDE_DIR, 61 | ] 62 | }).on('error', sass.logError)) 63 | .pipe(strip()) 64 | .pipe( 65 | autoprefixer({ 66 | browsers: supportedBrowsers, 67 | cascade: false, 68 | }) 69 | ) 70 | .pipe(combineMq({ 71 | beautify: true 72 | })) 73 | .pipe(rename('united.css')) 74 | .pipe(gulp.dest('build/')) 75 | .pipe(gulp.dest('build/prototypes/css')) 76 | .pipe(gulp.dest('src/base/prototypes/css')) 77 | .pipe(size()) 78 | .pipe(browserSync.stream()); 79 | }); 80 | 81 | gulp.task('package', function() { 82 | return gulp.src('build/united.css') 83 | .pipe(cleanCSS({ 84 | compatibility: 'ie8', 85 | level: 2, 86 | })) 87 | .pipe(rename('united.min.css')) 88 | .pipe(gulp.dest('./build/')) 89 | .pipe(size()) 90 | .pipe(gzip({ extension: 'zip' })) 91 | .pipe(gulp.dest('./build/')) 92 | .pipe(size()) 93 | }); 94 | 95 | gulp.task('subset', function() { 96 | return gulp.src('build/united.css') 97 | .pipe(uncss({ 98 | html: ['build/**/*.html'] 99 | })) 100 | .pipe(cleanCSS({ compatibility: 'ie8' })) 101 | .pipe(rename('united.app.css')) 102 | .pipe(gulp.dest('./src/prototypes/css')) 103 | .pipe(size()) 104 | .pipe(gzip({ extension: 'zip' })) 105 | .pipe(gulp.dest('./src/prototypes/css')) 106 | .pipe(size()) 107 | }); 108 | 109 | gulp.task('bless', function() { 110 | return gulp.src('build/united.css') 111 | .pipe(rename('united-bless.css')) 112 | .pipe(bless({ 113 | suffix: '-part-', 114 | cacheBuster: false, 115 | imports: false, 116 | })) 117 | .pipe(cleanCSS({ compatibility: 'ie8' })) 118 | .pipe(gulp.dest('./build/')) 119 | .pipe(size()) 120 | }); 121 | 122 | // Process the files in series 123 | 124 | gulp.task('process', gulp.series('clean', 'compile')); 125 | 126 | // build jekyll 127 | 128 | gulp.task('jekyll-build', function (done) { 129 | browserSync.notify(messages.jekyllBuild); 130 | return cp.spawn( jekyll , ['build'], {stdio: 'inherit'}) 131 | .on('close', done); 132 | }); 133 | 134 | // rebuild jekyll and reload 135 | 136 | gulp.task('jekyll-rebuild', gulp.series('jekyll-build'), function () { 137 | browserSync.reload(); 138 | }); 139 | 140 | gulp.task('serve', function() { 141 | browserSync.init({ 142 | server: { 143 | baseDir: 'build/prototypes' 144 | } 145 | }); 146 | gulp.watch("build/prototypes/**/*.html").on('change', browserSync.reload); 147 | }); 148 | 149 | // Watch for changes 150 | 151 | gulp.task('watch', function() { 152 | gulp.watch('./18Franklin/fonts/webfonts/**/*.{ttf,woff,eof,svg}', gulp.series('fontsync')) 153 | gulp.watch('src/**/*.scss', gulp.series('process')); 154 | gulp.watch(['src/prototypes/**/*', '!src/prototypes/css/*'], gulp.series('jekyll-rebuild', 'subset')); 155 | // gulp.watch(['src/prototypes/**/*', '!src/prototypes/css/*'], gulp.series('jekyll-rebuild')); 156 | gulp.watch(['src/prototypes/css/*'], gulp.series('jekyll-rebuild')); 157 | }); 158 | 159 | 160 | // Default Task 161 | 162 | gulp.task('default', gulp.series('fontsync', 'process', 'subset', 'jekyll-build', gulp.parallel('serve', 'watch'))); 163 | -------------------------------------------------------------------------------- /src/base/_fonts.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: '18Franklin-webfont'; 3 | font-style: normal; 4 | font-weight: 100; 5 | src: 6 | url('#{$static-font-path}/18Franklin-Thin.woff2') format('woff2'), 7 | url('#{$static-font-path}/18Franklin-Thin.woff') format('woff'), 8 | url('#{$static-font-path}/18Franklin-Thin.ttf') format('truetype'); 9 | } 10 | 11 | @font-face { 12 | font-family: '18Franklin-webfont'; 13 | font-style: italic; 14 | font-weight: 100; 15 | src: 16 | url('#{$static-font-path}/18Franklin-ThinItalic.woff2') format('woff2'), 17 | url('#{$static-font-path}/18Franklin-ThinItalic.woff') format('woff'), 18 | url('#{$static-font-path}/18Franklin-ThinItalic.ttf') format('truetype'); 19 | } 20 | 21 | @font-face { 22 | font-family: '18Franklin-webfont'; 23 | font-style: normal; 24 | font-weight: 200; 25 | src: 26 | url('#{$static-font-path}/18Franklin-ExtraLight.woff2') format('woff2'), 27 | url('#{$static-font-path}/18Franklin-ExtraLight.woff') format('woff'), 28 | url('#{$static-font-path}/18Franklin-ExtraLight.ttf') format('truetype'); 29 | } 30 | 31 | @font-face { 32 | font-family: '18Franklin-webfont'; 33 | font-style: italic; 34 | font-weight: 200; 35 | src: 36 | url('#{$static-font-path}/18Franklin-ExtraLightItalic.woff2') format('woff2'), 37 | url('#{$static-font-path}/18Franklin-ExtraLightItalic.woff') format('woff'), 38 | url('#{$static-font-path}/18Franklin-ExtraLightItalic.ttf') format('truetype'); 39 | } 40 | 41 | @font-face { 42 | font-family: '18Franklin-webfont'; 43 | font-style: normal; 44 | font-weight: 300; 45 | src: 46 | url('#{$static-font-path}/18Franklin-Light.woff2') format('woff2'), 47 | url('#{$static-font-path}/18Franklin-Light.woff') format('woff'), 48 | url('#{$static-font-path}/18Franklin-Light.ttf') format('truetype'); 49 | } 50 | 51 | @font-face { 52 | font-family: '18Franklin-webfont'; 53 | font-style: italic; 54 | font-weight: 300; 55 | src: 56 | url('#{$static-font-path}/18Franklin-LightItalic.woff2') format('woff2'), 57 | url('#{$static-font-path}/18Franklin-LightItalic.woff') format('woff'), 58 | url('#{$static-font-path}/18Franklin-LightItalic.ttf') format('truetype'); 59 | } 60 | 61 | @font-face { 62 | font-family: '18Franklin-webfont'; 63 | font-style: normal; 64 | font-weight: 400; 65 | src: 66 | url('#{$static-font-path}/18Franklin-Regular.woff2') format('woff2'), 67 | url('#{$static-font-path}/18Franklin-Regular.woff') format('woff'), 68 | url('#{$static-font-path}/18Franklin-Regular.ttf') format('truetype'); 69 | } 70 | 71 | @font-face { 72 | font-family: '18Franklin-webfont'; 73 | font-style: italic; 74 | font-weight: 400; 75 | src: 76 | url('#{$static-font-path}/18Franklin-Italic.woff2') format('woff2'), 77 | url('#{$static-font-path}/18Franklin-Italic.woff') format('woff'), 78 | url('#{$static-font-path}/18Franklin-Italic.ttf') format('truetype'); 79 | } 80 | 81 | @font-face { 82 | font-family: '18Franklin-webfont'; 83 | font-style: normal; 84 | font-weight: 500; 85 | src: 86 | url('#{$static-font-path}/18Franklin-Medium.woff2') format('woff2'), 87 | url('#{$static-font-path}/18Franklin-Medium.woff') format('woff'), 88 | url('#{$static-font-path}/18Franklin-Medium.ttf') format('truetype'); 89 | } 90 | 91 | @font-face { 92 | font-family: '18Franklin-webfont'; 93 | font-style: italic; 94 | font-weight: 500; 95 | src: 96 | url('#{$static-font-path}/18Franklin-MediumItalic.woff2') format('woff2'), 97 | url('#{$static-font-path}/18Franklin-MediumItalic.woff') format('woff'), 98 | url('#{$static-font-path}/18Franklin-MediumItalic.ttf') format('truetype'); 99 | } 100 | 101 | @font-face { 102 | font-family: '18Franklin-webfont'; 103 | font-style: normal; 104 | font-weight: 600; 105 | src: 106 | url('#{$static-font-path}/18Franklin-SemiBold.woff2') format('woff2'), 107 | url('#{$static-font-path}/18Franklin-SemiBold.woff') format('woff'), 108 | url('#{$static-font-path}/18Franklin-SemiBold.ttf') format('truetype'); 109 | } 110 | 111 | @font-face { 112 | font-family: '18Franklin-webfont'; 113 | font-style: italic; 114 | font-weight: 600; 115 | src: 116 | url('#{$static-font-path}/18Franklin-SemiBoldItalic.woff2') format('woff2'), 117 | url('#{$static-font-path}/18Franklin-SemiBoldItalic.woff') format('woff'), 118 | url('#{$static-font-path}/18Franklin-SemiBoldItalic.ttf') format('truetype'); 119 | } 120 | 121 | @font-face { 122 | font-family: '18Franklin-webfont'; 123 | font-style: normal; 124 | font-weight: 700; 125 | src: 126 | url('#{$static-font-path}/18Franklin-Bold.woff2') format('woff2'), 127 | url('#{$static-font-path}/18Franklin-Bold.woff') format('woff'), 128 | url('#{$static-font-path}/18Franklin-Bold.ttf') format('truetype'); 129 | } 130 | 131 | @font-face { 132 | font-family: '18Franklin-webfont'; 133 | font-style: italic; 134 | font-weight: 700; 135 | src: 136 | url('#{$static-font-path}/18Franklin-BoldItalic.woff2') format('woff2'), 137 | url('#{$static-font-path}/18Franklin-BoldItalic.woff') format('woff'), 138 | url('#{$static-font-path}/18Franklin-BoldItalic.ttf') format('truetype'); 139 | } 140 | 141 | @font-face { 142 | font-family: '18Franklin-webfont'; 143 | font-style: normal; 144 | font-weight: 800; 145 | src: 146 | url('#{$static-font-path}/18Franklin-ExtraBold.woff2') format('woff2'), 147 | url('#{$static-font-path}/18Franklin-ExtraBold.woff') format('woff'), 148 | url('#{$static-font-path}/18Franklin-ExtraBold.ttf') format('truetype'); 149 | } 150 | 151 | @font-face { 152 | font-family: '18Franklin-webfont'; 153 | font-style: italic; 154 | font-weight: 800; 155 | src: 156 | url('#{$static-font-path}/18Franklin-ExtraBoldItalic.woff2') format('woff2'), 157 | url('#{$static-font-path}/18Franklin-ExtraBoldItalic.woff') format('woff'), 158 | url('#{$static-font-path}/18Franklin-ExtraBoldItalic.ttf') format('truetype'); 159 | } 160 | 161 | @font-face { 162 | font-family: '18Franklin-webfont'; 163 | font-style: normal; 164 | font-weight: 900; 165 | src: 166 | url('#{$static-font-path}/18Franklin-Black.woff2') format('woff2'), 167 | url('#{$static-font-path}/18Franklin-Black.woff') format('woff'), 168 | url('#{$static-font-path}/18Franklin-Black.ttf') format('truetype'); 169 | } 170 | 171 | @font-face { 172 | font-family: '18Franklin-webfont'; 173 | font-style: italic; 174 | font-weight: 900; 175 | src: 176 | url('#{$static-font-path}/18Franklin-BlackItalic.woff2') format('woff2'), 177 | url('#{$static-font-path}/18Franklin-BlackItalic.woff') format('woff'), 178 | url('#{$static-font-path}/18Franklin-BlackItalic.ttf') format('truetype'); 179 | } 180 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | CC0 1.0 Universal 2 | 3 | Statement of Purpose 4 | 5 | The laws of most jurisdictions throughout the world automatically confer 6 | exclusive Copyright and Related Rights (defined below) upon the creator and 7 | subsequent owner(s) (each and all, an "owner") of an original work of 8 | authorship and/or a database (each, a "Work"). 9 | 10 | Certain owners wish to permanently relinquish those rights to a Work for the 11 | purpose of contributing to a commons of creative, cultural and scientific 12 | works ("Commons") that the public can reliably and without fear of later 13 | claims of infringement build upon, modify, incorporate in other works, reuse 14 | and redistribute as freely as possible in any form whatsoever and for any 15 | purposes, including without limitation commercial purposes. These owners may 16 | contribute to the Commons to promote the ideal of a free culture and the 17 | further production of creative, cultural and scientific works, or to gain 18 | reputation or greater distribution for their Work in part through the use and 19 | efforts of others. 20 | 21 | For these and/or other purposes and motivations, and without any expectation 22 | of additional consideration or compensation, the person associating CC0 with a 23 | Work (the "Affirmer"), to the extent that he or she is an owner of Copyright 24 | and Related Rights in the Work, voluntarily elects to apply CC0 to the Work 25 | and publicly distribute the Work under its terms, with knowledge of his or her 26 | Copyright and Related Rights in the Work and the meaning and intended legal 27 | effect of CC0 on those rights. 28 | 29 | 1. Copyright and Related Rights. A Work made available under CC0 may be 30 | protected by copyright and related or neighboring rights ("Copyright and 31 | Related Rights"). Copyright and Related Rights include, but are not limited 32 | to, the following: 33 | 34 | i. the right to reproduce, adapt, distribute, perform, display, communicate, 35 | and translate a Work; 36 | 37 | ii. moral rights retained by the original author(s) and/or performer(s); 38 | 39 | iii. publicity and privacy rights pertaining to a person's image or likeness 40 | depicted in a Work; 41 | 42 | iv. rights protecting against unfair competition in regards to a Work, 43 | subject to the limitations in paragraph 4(a), below; 44 | 45 | v. rights protecting the extraction, dissemination, use and reuse of data in 46 | a Work; 47 | 48 | vi. database rights (such as those arising under Directive 96/9/EC of the 49 | European Parliament and of the Council of 11 March 1996 on the legal 50 | protection of databases, and under any national implementation thereof, 51 | including any amended or successor version of such directive); and 52 | 53 | vii. other similar, equivalent or corresponding rights throughout the world 54 | based on applicable law or treaty, and any national implementations thereof. 55 | 56 | 2. Waiver. To the greatest extent permitted by, but not in contravention of, 57 | applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and 58 | unconditionally waives, abandons, and surrenders all of Affirmer's Copyright 59 | and Related Rights and associated claims and causes of action, whether now 60 | known or unknown (including existing as well as future claims and causes of 61 | action), in the Work (i) in all territories worldwide, (ii) for the maximum 62 | duration provided by applicable law or treaty (including future time 63 | extensions), (iii) in any current or future medium and for any number of 64 | copies, and (iv) for any purpose whatsoever, including without limitation 65 | commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes 66 | the Waiver for the benefit of each member of the public at large and to the 67 | detriment of Affirmer's heirs and successors, fully intending that such Waiver 68 | shall not be subject to revocation, rescission, cancellation, termination, or 69 | any other legal or equitable action to disrupt the quiet enjoyment of the Work 70 | by the public as contemplated by Affirmer's express Statement of Purpose. 71 | 72 | 3. Public License Fallback. Should any part of the Waiver for any reason be 73 | judged legally invalid or ineffective under applicable law, then the Waiver 74 | shall be preserved to the maximum extent permitted taking into account 75 | Affirmer's express Statement of Purpose. In addition, to the extent the Waiver 76 | is so judged Affirmer hereby grants to each affected person a royalty-free, 77 | non transferable, non sublicensable, non exclusive, irrevocable and 78 | unconditional license to exercise Affirmer's Copyright and Related Rights in 79 | the Work (i) in all territories worldwide, (ii) for the maximum duration 80 | provided by applicable law or treaty (including future time extensions), (iii) 81 | in any current or future medium and for any number of copies, and (iv) for any 82 | purpose whatsoever, including without limitation commercial, advertising or 83 | promotional purposes (the "License"). The License shall be deemed effective as 84 | of the date CC0 was applied by Affirmer to the Work. Should any part of the 85 | License for any reason be judged legally invalid or ineffective under 86 | applicable law, such partial invalidity or ineffectiveness shall not 87 | invalidate the remainder of the License, and in such case Affirmer hereby 88 | affirms that he or she will not (i) exercise any of his or her remaining 89 | Copyright and Related Rights in the Work or (ii) assert any associated claims 90 | and causes of action with respect to the Work, in either case contrary to 91 | Affirmer's express Statement of Purpose. 92 | 93 | 4. Limitations and Disclaimers. 94 | 95 | a. No trademark or patent rights held by Affirmer are waived, abandoned, 96 | surrendered, licensed or otherwise affected by this document. 97 | 98 | b. Affirmer offers the Work as-is and makes no representations or warranties 99 | of any kind concerning the Work, express, implied, statutory or otherwise, 100 | including without limitation warranties of title, merchantability, fitness 101 | for a particular purpose, non infringement, or the absence of latent or 102 | other defects, accuracy, or the present or absence of errors, whether or not 103 | discoverable, all to the greatest extent permissible under applicable law. 104 | 105 | c. Affirmer disclaims responsibility for clearing rights of other persons 106 | that may apply to the Work or any use thereof, including without limitation 107 | any person's Copyright and Related Rights in the Work. Further, Affirmer 108 | disclaims responsibility for obtaining any necessary consents, permissions 109 | or other rights required for any use of the Work. 110 | 111 | d. Affirmer understands and acknowledges that Creative Commons is not a 112 | party to this document and has no duty or obligation with respect to this 113 | CC0 or use of the Work. 114 | 115 | For more information, please see 116 | 117 | -------------------------------------------------------------------------------- /src/base/_vars.scss: -------------------------------------------------------------------------------- 1 | // GLOBAL VARIABLES 2 | 3 | // -------------------------------------------------- 4 | // Grid 5 | 6 | // spacing is calculated on multiples of a 7 | // base grid (unitless, but assumed px) 8 | 9 | $grid-base: 8 !default; // unitless, but px 10 | 11 | // establishes the base type size (16px) for 12 | // rem calculations 13 | $grid-type: 16 !default; // unitless, but px 14 | 15 | // calculates multiples of the base grid in units of rem 16 | // grid($gridMultiple) 17 | 18 | $grid-05: grid(.5); // 4px 19 | $grid-1: grid(1); // 8px 20 | $grid-105: grid(1.5); // 12px 21 | $grid-2: grid(2); // 16px 22 | $grid-3: grid(3); // 24px 23 | $grid-4: grid(4); // 32px 24 | $grid-5: grid(5); // 40px 25 | $grid-6: grid(6); // 48px 26 | $grid-7: grid(7); // 56px 27 | $grid-8: grid(8); // 64px 28 | $grid-9: grid(9); // 72px 29 | $grid-10: grid(10); // 80px 30 | $grid-15: grid(15); // 80px 31 | $grid-20: grid(20); // 160px 32 | $grid-25: grid(25); // 160px 33 | $grid-30: grid(30); // 240px 34 | $grid-40: grid(40); // 320px 35 | $grid-50: grid(50); // 400px 36 | 37 | $grid-n05: grid(-0.5); // 4px 38 | $grid-n1: grid(-1); // 8px 39 | $grid-n105: grid(-1.5); // 12px 40 | $grid-n2: grid(-2); // 16px 41 | $grid-n3: grid(-3); // 24px 42 | $grid-n4: grid(-4); // 32px 43 | $grid-n5: grid(-5); // 40px 44 | 45 | // -------------------------------------------------- 46 | // Breakpoints 47 | 48 | $breakpoint-sm-grid: 50; // 400px 49 | $breakpoint-md-grid: 75; // 600px 50 | $breakpoint-lg-grid: 100; // 800px 51 | $breakpoint-xl-grid: 140; // 1200px 52 | 53 | $breakpoint-xs: null; 54 | $breakpoint-sm: grid($breakpoint-sm-grid); 55 | $breakpoint-md: grid($breakpoint-md-grid); 56 | $breakpoint-lg: grid($breakpoint-lg-grid); 57 | $breakpoint-xl: grid($breakpoint-xl-grid); 58 | 59 | // -------------------------------------------------- 60 | // Widths 61 | 62 | $nav-width-grid: 75 !default; // 600px; 63 | $site-max-width-grid: 75 !default; // 1040px; 64 | 65 | $nav-width: grid($nav-width-grid); 66 | $site-max-width: grid($site-max-width-grid); 67 | $text-max-width: 36em; 68 | $text-narrow-width: 17em; 69 | 70 | // -------------------------------------------------- 71 | // Colors 72 | 73 | $color-blue: #056dd4; 74 | $color-brightmint: #00df99; 75 | $color-cream: #f5f5f3; 76 | $color-gold: #f4b400; 77 | $color-green: #0baf00; // dark option #438500 78 | $color-red: #be4900; 79 | 80 | $color-trueblack: #000000; 81 | $color-textblack: #333333; 82 | $color-darkgray: #555555; 83 | $color-mediumgray: #8e8e8e; 84 | $color-mediumgray-trans: rgba(0, 0, 0, .4); 85 | $color-lightgray: #d3d3d3; 86 | $color-lightestgray: #f5f5f3; 87 | $color-white: #ffffff; // perhaps redundant 88 | 89 | // -------------------------------------------------- 90 | // Paths 91 | 92 | $static-font-path: '../fonts' !default; 93 | $image-path: '/' !default; 94 | 95 | // -------------------------------------------------- 96 | // Typefaces 97 | 98 | $font-sans: '18Franklin-webfont', 99 | system, 100 | -apple-system, 101 | BlinkMacSystemFont, 102 | 'Roboto', 103 | 'Helvetica Neue', 104 | 'Helvetica', 105 | 'Arial', 106 | sans-serif; 107 | 108 | $font-serif: 'Georgia', 109 | 'Cambria', 110 | 'Times New Roman', 111 | 'Times', 112 | serif; 113 | 114 | $font-mono: 'Roboto Mono', 115 | 'Bitstream Vera Sans Mono', 116 | 'Consolas', 117 | 'Courier', 118 | monospace; 119 | 120 | // 500px 'N' height measured in Sketch 121 | 122 | $franklin-capheight: 371px; 123 | $georgia-capheight: 346px; 124 | $merriweather-capheight: 372px; 125 | $roboto-mono-capheight: 380px; 126 | $source-sans-capheight: 326px; 127 | 128 | $sans-capHeight: $franklin-capheight; 129 | $serif-capHeight: $georgia-capheight; 130 | $mono-capHeight: $roboto-mono-capheight; 131 | 132 | 133 | 134 | // -------------------------------------------------- 135 | // Type scale 136 | 137 | $s1: 8px; 138 | $s2: 9px; 139 | $s3: 10px; 140 | $s4: 11px; 141 | $s5: 12px; 142 | $s6: 14px; 143 | $s7: 16px; 144 | $s8: 18px; 145 | $s9: 30px; 146 | $s10: 52px; 147 | $s11: 90px; 148 | $s12: 120px; 149 | 150 | $mono-s1: typeScale($mono-capHeight, $s1); 151 | $mono-s2: typeScale($mono-capHeight, $s2); 152 | $mono-s3: typeScale($mono-capHeight, $s3); 153 | $mono-s4: typeScale($mono-capHeight, $s4); 154 | $mono-s5: typeScale($mono-capHeight, $s5); 155 | $mono-s6: typeScale($mono-capHeight, $s6); 156 | $mono-s7: typeScale($mono-capHeight, $s7); 157 | $mono-s8: typeScale($mono-capHeight, $s8); 158 | $mono-s9: typeScale($mono-capHeight, $s9); 159 | $mono-s10: typeScale($mono-capHeight, $s10); 160 | $mono-s11: typeScale($mono-capHeight, $s11); 161 | $mono-s12: typeScale($mono-capHeight, $s12); 162 | 163 | $sans-s1: typeScale($sans-capHeight, $s1); 164 | $sans-s2: typeScale($sans-capHeight, $s2); 165 | $sans-s3: typeScale($sans-capHeight, $s3); 166 | $sans-s4: typeScale($sans-capHeight, $s4); 167 | $sans-s5: typeScale($sans-capHeight, $s5); 168 | $sans-s6: typeScale($sans-capHeight, $s6); 169 | $sans-s7: typeScale($sans-capHeight, $s7); 170 | $sans-s8: typeScale($sans-capHeight, $s8); 171 | $sans-s9: typeScale($sans-capHeight, $s9); 172 | $sans-s10: typeScale($sans-capHeight, $s10); 173 | $sans-s11: typeScale($sans-capHeight, $s11); 174 | $sans-s12: typeScale($sans-capHeight, $s12); 175 | 176 | $serif-s1: typeScale($serif-capHeight, $s1); 177 | $serif-s2: typeScale($serif-capHeight, $s2); 178 | $serif-s3: typeScale($serif-capHeight, $s3); 179 | $serif-s4: typeScale($serif-capHeight, $s4); 180 | $serif-s5: typeScale($serif-capHeight, $s5); 181 | $serif-s6: typeScale($serif-capHeight, $s6); 182 | $serif-s7: typeScale($serif-capHeight, $s7); 183 | $serif-s8: typeScale($serif-capHeight, $s8); 184 | $serif-s9: typeScale($serif-capHeight, $s9); 185 | $serif-s10: typeScale($serif-capHeight, $s10); 186 | $serif-s11: typeScale($serif-capHeight, $s11); 187 | $serif-s12: typeScale($serif-capHeight, $s12); 188 | 189 | // -------------------------------------------------- 190 | // Line height 191 | 192 | $lh-single: 1; 193 | $lh-hed: 1.1; 194 | $lh-cap: 1.3; 195 | $lh-body: 1.618; 196 | $lh-display: 1.75; 197 | 198 | // -------------------------------------------------- 199 | // Letter-spacing 200 | 201 | $ls-loose: .1em; 202 | $ls-xloose: .15em; 203 | 204 | // -------------------------------------------------- 205 | // Border radius 206 | 207 | $border-radius: 2px !default; 208 | -------------------------------------------------------------------------------- /src/base/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin renderUtility($selector, $property, $value, $valProps) { 2 | .#{$selector} { 3 | @if map-has-key($valProps, extend) { 4 | #{map-deep-get($valProps, extend, property)}: strunquote(map-deep-get($valProps, extend, value)); 5 | } 6 | @each $thisProperty in $property { 7 | #{$thisProperty}: $value; 8 | } 9 | } 10 | } 11 | 12 | @mixin renderPseudoclasses($selector, $property, $value, $valProps){ 13 | @each $pseudoKey, $pseudoValue in map-get($global_values, pseudoclasses){ 14 | .#{$pseudoKey}-#{$selector}#{$pseudoValue} { 15 | @each $thisProperty in $property { 16 | #{$thisProperty}: $value; 17 | } 18 | } 19 | } 20 | } 21 | 22 | @mixin renderPlaceholder($selector, $property, $value, $valProps){ 23 | .pl-#{$selector}::placeholder { 24 | @each $thisProperty in $property { 25 | #{$thisProperty}: $value; 26 | } 27 | } 28 | } 29 | 30 | @mixin renderMediaQueries($selector, $property, $value, $valProps){ 31 | @each $mediaKey, $mediaValue in map-get($global_values, breakpoints){ 32 | @media (min-width: #{nth($mediaValue, 1)}) { 33 | .#{$mediaKey}-#{$selector} { 34 | @if map-has-key($valProps, extend) { 35 | #{map-deep-get($valProps, extend, property)}: strunquote(map-deep-get($valProps, extend, value)); 36 | } 37 | @each $thisProperty in $property { 38 | #{$thisProperty}: $value; 39 | } 40 | } 41 | } 42 | } 43 | } 44 | 45 | @mixin renderUtilitiesIn($utilities){ 46 | 47 | // loop through the $utilities 48 | 49 | @each $utilityName, $utility in $utilities { 50 | 51 | // Only do this if the the untility is meant to output 52 | 53 | @if map-get($utility, output){ 54 | // set intital variants 55 | // $propertyDefault is a single value for all these utilities 56 | 57 | $baseProps: null; 58 | $modifier: null; 59 | $selector: null; 60 | $propertyDefault: map-get($utility, property); 61 | $property: null; 62 | $value: null; 63 | $ourModifiers: (); 64 | $b: null; 65 | $v: null; 66 | $mv: null; 67 | $valProps: (); 68 | 69 | // If there's a base, use baseToMap() to convert it into a MAP: 70 | // $baseProps: ( 71 | // slug: STRING, 72 | // isReadable: BOOL, 73 | // ) 74 | 75 | @if map-get($utility, base) != null { 76 | $baseProps: baseToMap(map-get($utility, base)); 77 | 78 | // And set $b (used in the selector constructor, below) to baseProps.slug. 79 | 80 | $b: map-get($baseProps, slug); 81 | 82 | // Otherwise, assign it null props. 83 | 84 | } @else { 85 | $baseProps: ( 86 | slug: null, 87 | ); 88 | } 89 | 90 | // Each utility rule takes a value, so let's start here and begin building. 91 | // Values are held in a MAP, where each individual value has the keypair 92 | // KEY : VALUE 93 | // [slug]: [value], [isReadable]* 94 | 95 | // -------- For each value in utility.values ---------- 96 | 97 | @each $valKey, $valValue in map-get($utility, values) { 98 | 99 | // If $valValue is already a MAP... 100 | 101 | @if type-of($valValue) == 'map' { 102 | 103 | // set $valProps = $valValue 104 | 105 | $valProps: $valValue; 106 | 107 | // If it _isn't_ a MAP... 108 | 109 | } @else { 110 | 111 | // ...use toMap() to convert the value keypair into a MAP: 112 | // $valProps: ( 113 | // slug: STRING, 114 | // [isReadable: BOOL,]* 115 | // content: LIST, 116 | // [extends: STRING,]* 117 | // ) 118 | 119 | // We'll keep the $valProps MAP around, 120 | // as we'll need it to build both the rule's value and its selector. 121 | 122 | $valProps: toMap($valKey, $valValue); 123 | } 124 | 125 | // In fact, let's set our rule's value now. 126 | 127 | $value: strunquote(nth(map-get($valProps, content), 1)); 128 | 129 | // Add any appended values... 130 | 131 | @if map-get($utility, valueAppend) { 132 | $value: $value + map-get($utility, valueAppend); 133 | } 134 | 135 | // ...or prepended values. 136 | 137 | @if map-get($utility, valuePrepend) { 138 | $value: map-get($utility, valuePrepend) + $value; 139 | } 140 | 141 | // Then unquote the string. 142 | 143 | $value: strunquote($value); 144 | 145 | // And we'll set the $v as valProps.slug for use in 146 | // constructing the selector. 147 | 148 | $v: map-get($valProps, slug); 149 | 150 | // -------- Start of Modifiers ---------- 151 | 152 | // Now we'll check for modifiers and loop through them 153 | // to get the props we need to build our rule. 154 | 155 | // Modifiers are held in a MAP, 156 | // where each individual modifer has the keypair 157 | // KEY : VALUE 158 | // [slug]: [value], [isReadable]* 159 | 160 | // So, check for modifiers. 161 | 162 | @if map-get($utility, modifiers) != null { 163 | 164 | // If there is one, capture it as $ourModifiers. 165 | 166 | $ourModifiers: map-get($utility, modifiers); 167 | } @else { 168 | 169 | // If there isn't one, build a dummy so we can keep 170 | // all our build in the same loop. 171 | 172 | $ourModifiers: ( 173 | slug: null, 174 | ); 175 | } 176 | 177 | // OK! C'mon, let's loop! 178 | // https://www.youtube.com/watch?v=X9i2i07wPUw 179 | 180 | // -------- For each modifier in $ourModifiers ---------- 181 | 182 | @each $modKey, $modVal in $ourModifiers { 183 | 184 | // Use toMap() to convert the modifier keypair into a MAP: 185 | // $modProps: ( 186 | // slug: STRING, 187 | // isReadable: BOOL, 188 | // content: LIST, 189 | // ) 190 | 191 | // Just as we did before with the value keypair. 192 | 193 | $modProps: toMap($modKey, $modVal); 194 | 195 | // -------- if the modifier is null ---------- 196 | 197 | @if map-get($modProps, content) == null { 198 | 199 | // If modProps.values is null, there's no modifier property 200 | // and we can set our rule's $property now 201 | // since $property is simply $propertyDefault. 202 | 203 | $property: $propertyDefault; 204 | 205 | // We can also build the $selector if modProps.slug is null! 206 | // First, we can test to see if selector $b is null 207 | 208 | @if $b == null { 209 | 210 | // If it _is_ null, the rule's selector is $v. 211 | 212 | $selector: $v; 213 | 214 | // if the value is noValue ('') 215 | 216 | } @elseif map-get($valProps, slug) == '' { 217 | 218 | // selector is a simple join 219 | 220 | $selector: $b + $v; 221 | 222 | // Otherwise, if baseProps.isReadable, or valProps.isReadable 223 | 224 | } @elseif map-has-key($baseProps, isReadable) or 225 | map-has-key($valProps, isReadable) { 226 | 227 | // selector is joined with a '-' 228 | 229 | $selector: $b + '-' + $v; 230 | } @else { 231 | 232 | // otherwise, it gets a simple join. 233 | 234 | $selector: $b + $v; 235 | 236 | // Nice! We just took care of the non-modifier cases! 237 | 238 | } 239 | 240 | // '-' “oh hey.” 241 | 242 | // '-' “hey.” 243 | 244 | // '-' “hey.” 245 | 246 | // OK, cool. 247 | // So what if there _is_ a modifier object? 248 | 249 | // -------- if the modifier is NOT null ---------- 250 | 251 | } @else { 252 | 253 | // If there are modifiers, $property is a concat of $propertyDefault 254 | // with _each_ of the values in $modProps.content 255 | // There's a function for this... multiCat()!! 256 | // (=^・ェ・^=))ノ彡☆ 257 | // (^._.^)ノ☆( _ _).oO 258 | // (=චᆽච=) 259 | 260 | $property: multiCat($propertyDefault, map-get($modProps, content)); 261 | 262 | // Now we go through to finish setting the $selector. 263 | // Check to see if either mod.isReadable or 264 | // val.isReadable 265 | 266 | @if map-has-key($modProps, isReadable) or 267 | map-has-key($valProps, isReadable) { 268 | 269 | // If so, join with a '-' into selector $mv. 270 | 271 | $mv: map-get($modProps, slug) + '-' + map-get($valProps, slug); 272 | } @else { 273 | 274 | // If not, just join into selector $mv. 275 | 276 | $mv: map-get($modProps, slug) + map-get($valProps, slug); 277 | } 278 | 279 | // Once we have $mv, test for $b 280 | // and build the selector as before. 281 | 282 | @if $b == null { 283 | $selector: $mv; 284 | } @elseif map-get($baseProps, isReadable) or 285 | map-get($modProps, isReadable) { 286 | $selector: $b + '-' + $mv; 287 | } @else { 288 | $selector: $b + $mv; 289 | } 290 | } // finished setting modifier vars 291 | 292 | // Hey. Did we just finish $selector? 293 | // And do we also have $property and $value? 294 | // We do?!?!?! We do! 295 | 296 | // FINALLY, "BUILD THE RULE, MAX!" 297 | // https://www.youtube.com/watch?v=R3Igz5SfBCE 298 | 299 | @include renderUtility($selector, $property, $value, $valProps); 300 | 301 | // Add the pseudoclass variants, if applicable 302 | 303 | @if map-get($utility, pseudoclasses){ 304 | @include renderPseudoclasses($selector, $property, $value, $valProps); 305 | } 306 | 307 | // Add the placeholder variant, if applicable 308 | 309 | @if map-get($utility, placeholder){ 310 | @include renderPlaceholder($selector, $property, $value, $valProps); 311 | } 312 | 313 | // And add the responsive prefixes, if applicable 314 | 315 | @if map-get($utility, responsive){ 316 | @include renderMediaQueries($selector, $property, $value, $valProps); 317 | } // ・゚✧ 318 | } // end the modifier loop 319 | } // end the value loop 320 | } // end the output conditional 321 | } // end the utility loop 322 | // (ノ◕ヮ◕)ノ*:・゚✧ 323 | } 324 | -------------------------------------------------------------------------------- /demo/running-text.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | The Celebrated Jumping Frog of Calaveras County 8 | 9 | 10 | 11 |
12 |
13 |

The Celebrated Jumping Frog of Calaveras County

14 |

Mark Twain

15 |
16 |
17 | 18 |
19 |

In compliance with the request of a friend of mine, who wrote me from the East, I called on good-natured, garrulous old Simon Wheeler, and inquired after my friend’s friend, Leonidas W. Smiley, as requested to do, and I hereunto append the result. I have a lurking suspicion that Leonidas W. Smiley is a myth; that my friend never knew such a personage; and that he only conjectured that, if I asked old Wheeler about him, it would remind him of his infamous Jim Smiley, and he would go to work and bore me nearly to death with some infernal reminiscence of him as long and tedious as it should be useless to me. If that was the design, it certainly succeeded.

20 | 21 |

I found Simon Wheeler dozing comfortably by the bar-room stove of the old, dilapidated tavern in the ancient mining camp of Angel’s, and I noticed that he was fat and bald-headed, and had an expression of winning gentleness and simplicity upon his tranquil countenance. He roused up and gave me good-day. I told him a friend of mine had commissioned me to make some inquiries about a cherished companion of his boyhood named Rev. Leonidas W. Smiley, a young minister of the Gospel, who he had heard was at one time a resident of Angel’s Camp. I added that, if Mr. Wheeler could tell me any thing about this Rev. Leonidas W. Smiley, I would feel under many obligations to him.

22 | 23 |

Simon Wheeler backed me into a corner and blockaded me there with his chair, and then sat me down and reeled off the monotonous narrative which follows this paragraph. He never smiled, he never frowned, he never changed his voice from the gentle-flowing key to which he tuned the initial sentence, he never betrayed the slightest suspicion of enthusiasm; but all through the interminable narrative there ran a vein of impressive earnestness and sincerity, which showed me plainly that, so far from his imagining that there was any thing ridiculous or funny about his story, he regarded it as a really important matter, and admired its two heroes as men of transcendent genius in finesse. To me, the spectacle of a man drifting serenely along through such a queer yarn without ever smiling, was exquisitely absurd. As I said before, I asked him to tell me what he knew of Rev. Leonidas W. Smiley, and he replied as follows. I let him go on in his own way, and never interrupted him once:

24 | 25 |
26 |

There was a feller here once by the name of Jim Smiley, in the winter of ’49 or may be it was the spring of ’50 I don’t recollect exactly, somehow, though what makes me think it was one or the other is because I remember the big flume wasn’t finished 27 | when he first came to the camp; but any way, he was the curiosest man about always betting on any thing that turned up you ever see, if he could get any body to bet on the other side; and if he couldn’t, he’d change sides. Any way that suited the 28 | other man would suit him any way just so’s he got a bet, he was satisfied. But still he was lucky, uncommon lucky; he most always come out winner. He was always ready and laying for a chance; there couldn’t be no solittry thing mentioned but that 29 | feller’d offer to bet on it, and -take any side you please, as I was just telling you. If there was a horse-race, you’d find him flush, or you’d find him busted at the end of it; if there was a dog-fight, he’d bet on it; if there was a cat-fight, 30 | he’d bet on it; if there was a chicken-fight, he’d bet on it; why, if there was two birds setting on a fence, he would bet you which one would fly first; or if there was a camp-meeting, he would be there reg’lar, to bet on Parson Walker, which he 31 | judged to be the best exhorter about here, and so he was, too, and a good man. If he even seen a straddle-bug start to go anywheres, he would bet you how long it would take him to get wherever he was going to, and if you took him up, he would foller 32 | that straddle-bug to Mexico but what he would find out where he was bound for and how long he was on the road. Lots of the boys here has seen that Smiley, and can tell you about him. Why, it never made no difference to him he would bet on any thing 33 | the dangdest feller. Parson Walker’s wife laid very sick once, for a good while, and it seemed as if they warn’s going to save her; but one morning he come in, and Smiley asked how she was, and he said she was considerable better thank the Lord for 34 | his inftnit mercy and coming on so smart that, with the blessing of Providence, she’d get well yet; and Smiley, before he thought, says, “Well, I’ll risk two-and-a-half that she don’t, any way.”

35 | 36 |

Thish-yer Smiley had a mare the boys called her the fifteen-minute nag, but that was only in fun, you know, because, of course, she was faster than that and he used to win money on that horse, for all she was so slow and always had the asthma, or the 37 | distemper, or the consumption, or something of that kind. They used to give her two or three hundred yards start, and then pass her under way; but always at the fag-end of the race she’d get excited and desperate-like, and come cavorting and straddling 38 | up, and scattering her legs around limber, sometimes in the air, and sometimes out to one side amongst the fences, and kicking up m-o-r-e dust, and raising m-o-r-e racket with her coughing and sneezing and blowing her nose and always fetch up at the 39 | stand just about a neck ahead, as near as you could cipher it down.

40 | 41 |

And he had a little small bull pup, that to look at him you’d think he wan’s worth a cent, but to set around and look ornery, and lay for a chance to steal something. But as soon as money was up on him, he was a different dog; his underjaw’d begin 42 | to stick out like the fo’castle of a steamboat, and his teeth would uncover, and shine savage like the furnaces. And a dog might tackle him, and bully-rag him, and bite him, and throw him over his shoulder two or three times, and Andrew Jackson which 43 | was the name of the pup Andrew Jackson would never let on but what he was satisfied, and hadn’t expected nothing else and the bets being doubled and doubled on the other side all the time, till the money was all up; and then all of a sudden he would 44 | grab that other dog jest by the j’int of his hind leg and freeze on it not chew, you understand, but only jest grip and hang on till they thronged up the sponge, if it was a year. Smiley always come out winner on that pup, till he harnessed a dog 45 | once that didn’t have no hind legs, because they’d been sawed off by a circular saw, and when the thing had gone along far enough, and the money was all up, and he come to make a snatch for his pet bolt, he saw in a minute how he’d been imposed on, 46 | and how the other dog had him in the door, so to speak, and he ’peered sur-prised, and then he looked sorter discouraged-like, and didn’t try no more to win the fight, and so he got shucked out bad. He give Smiley a look, as much as to say his heart 47 | was broke, and it was his fault, for putting up a dog that hadn’t no hind legs for him to take bolt of, which was his main dependence in a fight, and then he limped off a piece and laid down and died. It was a good pup, was that Andrew Jackson, and 48 | would have made a name for hisself if he’d lived, for the stuff was in him, and he had genius I know it, because he hadn’t had no opportunities to speak of, and it don’t stand to reason that a dog could make such a fight as he could under them circumstances, 49 | if he hadn’t no talent. It always makes me feel sorry when I think of that last fight of his’n, and the way it turned out.

50 | 51 |

Well, thish-yer Smiley had rat-tarriers, and chicken cocks, and tom-cats, and all of them kind of things, till you couldn’t rest, and you couldn’t fetch nothing for him to bet on but he’d match you. He ketched a frog one day, and took him home, and 52 | said he cal’klated to edercate him; and so he never done nothing for three months but set in his back yard and learn that frog to jump. And you bet you he did learn him, too. He’d give him a little punch behind, and the next minute you’d see that 53 | frog whirling in the air like a doughnut see him turn one summerset, or may be a couple, if he got a good start, and come down flat-footed and all right, like a cat. He got him up so in the matter of catching flies, and kept him in practice so constant, 54 | that he’d nail a fly every time as far as he could see him. Smiley said all a frog wanted was education, and he could do most any thing and I believe him. Why, I’ve seen him set Dan’l Webster down here on this floor Dan’l Webster was the name of the 55 | frog and sing out, “Flies, Dan’l, flies!” and quicker’n you could wink, he’d spring straight up, and snake a fly off’n the counter there, and flop down on the floor again as solid as a gob of mud, and fall to scratching the side of his head with his 56 | hind foot as indifferent as if he hadn’t no idea he’d been doin’ any more’n any frog might do. You never see a frog so modest and straightforward as he was, for all he was so gifted. And when it come to fair and square jumping on a dead level, he 57 | could get over more ground at one straddle than any animal of his breed you ever see. Jumping on a dead level was his strong suit, you understand; and when it come to that, Smiley would ante up money on him as long as he had a red. Smiley was monstrous 58 | proud of his frog, and well he might be, for fellers that had traveled and been everywheres, all said he laid over any frog that ever they see.

59 | 60 |

Well, Smiley kept the beast in a little lattice box, and he used to fetch him down town sometimes and lay for a bet. One day a feller a stranger in the camp, he was come across him with his box, and says:

61 | 62 |

“What might it be that you’ve got in the box?”

63 | 64 |

And Smiley says, sorter indifferent like, “It might be a parrot, or it might be a canary, may be, but it an’t it’s only just a frog.”

65 | 66 |

And the feller took it, and looked at it careful, and turned it round this way and that, and says, “H’m so ’tis. Well, what’s he good for?”

67 | 68 |

“Well,” Smiley says, easy and careless, “He’s good enough for one thing, I should judge he can outjump any frog in Calaveras county.”

69 | 70 |

The feller took the box again, and took another long, particular look, and give it back to Smiley, and says, very deliberate, “Well, I don’t see no p’ints about that frog that’s any better’n any other frog.”

71 | 72 |

“May be you don’t,” Smiley says. “May be you understand frogs, and may be you don’t understand ’em; may be you’ve had experience, and may be you an’t only a amature, as it were. Anyways, I’ve got my opinion, and I’ll risk forty dollars that he can 73 | outjump any frog in Calaveras county.”

74 | 75 |

And the feller studied a minute, and then says, kinder sad like, “Well, I’m only a stranger here, and I an’t got no frog; but if I had a frog, I’d bet you.”

76 | 77 |

And then Smiley says, “That’s all right that’s all right if you’ll hold my box a minute, I’ll go and get you a frog.” And so the feller took the box, and put up his forty dollars along with Smiley’s, and set down to wait.

78 | 79 |

So he set there a good while thinking and thinking to hisself, and then he got the frog out and prized his mouth open and took a tea-spoon and filled him full of quail shot filled him pretty near up to his chin and set him on the floor. Smiley he went 80 | to the swamp and slopped around in the mud for a long time, and finally he ketched a frog, and fetched him in, and give him to this feller, and says:

81 | 82 |

“Now, if you’re ready, set him alongside of Dan’l, with his fore-paws just even with Dan’l, and I’ll give the word.” Then he says, “One two three jump!” and him and the feller touched up the frogs from behind, and the new frog hopped off, but Dan’l 83 | give a heave, and hysted up his shoulders so like a Frenchman, but it wan’s no use he couldn’t budge; he was planted as solid as an anvil, and he couldn’t no more stir than if he was anchored out. Smiley was a good deal surprised, and he was disgusted 84 | too, but he didn’t have no idea what the matter was, of course.

85 | 86 |

The feller took the money and started away; and when he was going out at the door, he sorter jerked his thumb over his shoulders this way at Dan’l, and says again, very deliberate, “Well, I don’t see no p’ints about that frog that’s any better’n any 87 | other frog.”

88 | 89 |

Smiley he stood scratching his head and looking down at Dan’l a long time, and at last he says, “I do wonder what in the nation that frog throw’d off for I wonder if there an’t something the matter with him he ’pears to look mighty baggy, somehow.” 90 | And he ketched Dan’l by the nap of the neck, and lifted him up and says, “Why, blame my cats, if he don’t weigh five pound!” and turned him upside down, and he belched out a double handful of shot. And then he see how it was, and he was the maddest 91 | man he set the frog down and took out after that feller, but he never ketchd him. And—

92 |
93 | 94 | 95 |

Here Simon Wheeler heard his name called from the front yard, and got up to see what was wanted. And turning to me as he moved away, he said: 96 | 97 |

98 |

“Just set where you are, stranger, and rest easy I an’t going to be gone a second.”

99 |
100 | 101 |

But, by your leave, I did not think that a continuation of the history of the enterprising vagabond Jim Smiley would be likely to afford me much information concerning the Rev. Leonidas W. Smiley, and so I started away.

102 | 103 |

At the door I met the sociable Wheeler returning, and he button-holed me and recommenced:

104 | 105 |
106 |

“Well, thish-yer Smiley had a yeller one-eyed cow that didn’t have no tail, only jest a short stump like a bannanner, and—”

107 |
108 | 109 |

“Oh! hang Smiley and his afflicted cow!” I muttered, good-naturedly, and bidding the old gentleman good-day, I departed.

110 |
111 |

112 | The Celebrated Jumping Frog of Calaveras County first appeared in The New York Saturday Press, where it appeared in the November 18, 1865 edition as “Jim Smiley and His Jumping Frog.” It was later published in The Celebrated Jumping Frog of Calaveras County, and Other Sketches in 1867. 113 |

114 |
115 |
116 | 117 | 118 | 119 | --------------------------------------------------------------------------------