├── .gitignore ├── docs ├── wp-content │ ├── uploads │ │ └── 2018 │ │ │ └── 04 │ │ │ └── mustard-ui-image.png │ └── themes │ │ └── mustard │ │ ├── js │ │ └── scripts6619.js │ │ └── css │ │ └── styles.css ├── wp-includes │ └── js │ │ └── wp-embed.min6619.js └── wp-json │ └── oembed │ └── 1.0 │ ├── embed9b77.json │ ├── embedba97.json │ ├── embedc6ea.json │ ├── embed1651.json │ ├── embed279c.json │ ├── embeda91e.json │ ├── embedb410.json │ ├── embedd1a8.json │ ├── embed2898.json │ ├── embed2c27.json │ ├── embed5ef6.json │ ├── embed7709.json │ ├── embed7a82.json │ ├── embedc7a6.json │ ├── embed86c7.json │ ├── embedff69.json │ ├── embed4586.json │ ├── embed4a95.json │ ├── embed637d.json │ ├── embed9d5d.json │ ├── embedb135.json │ ├── embed0ff2.json │ ├── embedd07a.json │ ├── embed8c86.json │ ├── embed93b9.json │ ├── embedcc27.json │ ├── embedfeb3.json │ ├── embed5131.json │ ├── embed9c5b.json │ ├── embed3ce9.json │ ├── embed4bbc.json │ ├── embeddb04.json │ ├── embed17f2.json │ ├── embed2d1f.json │ ├── embeda86d.json │ ├── embed2ba6.json │ ├── embed4ab8.json │ ├── embed3ab9 │ ├── embeda396.json │ ├── embeddf9e │ ├── embedf9d8 │ ├── embed306e │ ├── embed5f49 │ ├── embed8ff0 │ ├── embeda883 │ ├── embedcead │ ├── embed38ba │ ├── embed4f50 │ ├── embedb4e1 │ ├── embedd81b │ ├── embedeb11 │ ├── embedf9b4 │ ├── embed018e │ ├── embedda29 │ ├── embed089e │ ├── embed4d52 │ ├── embed4d9a │ ├── embed66d3 │ ├── embed8959 │ ├── embed605a │ ├── embedaeb5 │ ├── embed4986 │ ├── embed92b5 │ ├── embedadb1 │ ├── embedf0b6 │ ├── embed1b57 │ ├── embedfb42 │ ├── embed1e18 │ ├── embed8832 │ ├── embed79c5 │ ├── embed3023 │ ├── embedb8df │ ├── embedd615 │ ├── embed972b │ ├── embedfdff │ └── embed3d15 ├── src └── scss │ ├── vars │ └── breakpoints.scss │ ├── mixins │ ├── clearfix.scss │ ├── breakpoint.scss │ ├── centering.scss │ └── triangle.scss │ ├── elements │ ├── lists.scss │ ├── links.scss │ ├── blockquotes.scss │ ├── code.scss │ ├── tables.scss │ ├── typography.scss │ └── buttons.scss │ ├── utility │ ├── alignment.scss │ ├── containers.scss │ ├── sections.scss │ ├── display.scss │ └── grid.scss │ ├── components │ ├── alerts.scss │ ├── breadcrumbs.scss │ ├── menus.scss │ ├── cards.scss │ ├── panels.scss │ ├── tabs.scss │ ├── pagination.scss │ ├── tags.scss │ ├── footer.scss │ ├── tooltips.scss │ ├── sidebars.scss │ ├── steppers.scss │ ├── modals.scss │ ├── pricing-tables.scss │ ├── progress-bars.scss │ └── navigation.scss │ ├── base │ └── base.scss │ └── mustard-ui.scss ├── dist └── js │ └── mobile-menu.js ├── package.json ├── LICENSE ├── gulpfile.js └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /docs/wp-content/uploads/2018/04/mustard-ui-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kylelogue/mustard-ui/HEAD/docs/wp-content/uploads/2018/04/mustard-ui-image.png -------------------------------------------------------------------------------- /src/scss/vars/breakpoints.scss: -------------------------------------------------------------------------------- 1 | // BREAKPOINT VARS 2 | // ============================== 3 | 4 | $bp-small: 425px !default; 5 | $bp-medium: 768px !default; 6 | $bp-large: 1024px !default; 7 | $bp-xlarge: 1440px !default; 8 | -------------------------------------------------------------------------------- /dist/js/mobile-menu.js: -------------------------------------------------------------------------------- 1 | // toggle mobile menu 2 | $('.mobile-menu-toggle').on('click', function(e) { 3 | e.preventDefault() 4 | e.stopPropagation() 5 | $('.mobile-menu').show() 6 | }) 7 | 8 | $('body').on('click', function() { 9 | $('.mobile-menu').hide() 10 | }) -------------------------------------------------------------------------------- /src/scss/mixins/clearfix.scss: -------------------------------------------------------------------------------- 1 | // CLEARFIX MIXIN 2 | // ============================== 3 | 4 | @mixin clearfix() { 5 | &::before, &::after { 6 | content: ""; 7 | display: table; 8 | } 9 | 10 | &::after { 11 | clear: both; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/scss/elements/lists.scss: -------------------------------------------------------------------------------- 1 | // LISTS 2 | // ============================== 3 | 4 | ul, 5 | ol, 6 | dl, { 7 | list-style: none; 8 | margin-bottom: 15px; 9 | } 10 | 11 | ul { 12 | list-style: circle inside; 13 | } 14 | 15 | ol { 16 | list-style: decimal inside; 17 | } 18 | -------------------------------------------------------------------------------- /src/scss/elements/links.scss: -------------------------------------------------------------------------------- 1 | // LINKS 2 | // ============================== 3 | 4 | $link-color: $brand-color !default; 5 | 6 | a { 7 | text-decoration: none; 8 | color: $link-color; 9 | font-weight: 400; 10 | transition: opacity .1s ease-out; 11 | 12 | &:focus, 13 | &:hover { 14 | opacity: 0.75; 15 | } 16 | 17 | &:active { 18 | opacity: 1; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/scss/utility/alignment.scss: -------------------------------------------------------------------------------- 1 | // ALIGNMENT 2 | // ============================== 3 | 4 | .float-left { 5 | float: left; 6 | } 7 | 8 | .float-right { 9 | float: right; 10 | } 11 | 12 | .clear-fix { 13 | @include clearfix(); 14 | } 15 | 16 | .align-left { 17 | text-align: left; 18 | } 19 | 20 | .align-center { 21 | text-align: center; 22 | } 23 | 24 | .align-right { 25 | text-align: right; 26 | } 27 | -------------------------------------------------------------------------------- /src/scss/utility/containers.scss: -------------------------------------------------------------------------------- 1 | // CONTAINERS 2 | // ============================== 3 | 4 | $container-sizes: ( 5 | 'small' : 768px, 6 | 'large' : 1440px, 7 | ) !default; 8 | 9 | .container { 10 | max-width: 1200px; 11 | margin-left: auto; 12 | margin-right: auto; 13 | padding: 30px 0; 14 | } 15 | 16 | @each $name, $size in $container-sizes { 17 | .container-#{$name} { 18 | max-width: $size; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/scss/mixins/breakpoint.scss: -------------------------------------------------------------------------------- 1 | // BREAKPOINT MIXINS 2 | // ============================== 3 | 4 | @mixin breakpoint-min($bp) { 5 | @media (min-width: $bp) { 6 | @content; 7 | } 8 | } 9 | 10 | @mixin breakpoint-max($bp) { 11 | @media (max-width: $bp) { 12 | @content; 13 | } 14 | } 15 | 16 | @mixin breakpoint-min-max($bp1, $bp2) { 17 | @media (min-width: $bp1) and (max-width: $bp2) { 18 | @content; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/scss/mixins/centering.scss: -------------------------------------------------------------------------------- 1 | // CENTERING MIXINS 2 | // ============================== 3 | 4 | @mixin center-x { 5 | position: absolute; 6 | left: 50%; 7 | transform: translateX(-50%); 8 | } 9 | 10 | @mixin center-y { 11 | position: absolute; 12 | top: 50%; 13 | transform: translateY(-50%); 14 | } 15 | 16 | @mixin center-xy { 17 | position: absolute; 18 | top: 50%; 19 | left: 50%; 20 | transform: translate(-50%, -50%); 21 | } 22 | -------------------------------------------------------------------------------- /src/scss/components/alerts.scss: -------------------------------------------------------------------------------- 1 | // ALERTS 2 | // ============================== 3 | 4 | $alert-colors: ( 5 | 'danger' : $color-red-50, 6 | 'info' : $color-blue-50, 7 | 'warning' : $color-amber-50, 8 | 'success' : $color-green-50, 9 | ) !default; 10 | 11 | .alert { 12 | margin: 15px 0; 13 | padding: 15px; 14 | border-radius: 5px; 15 | } 16 | 17 | @each $name, $color in $alert-colors { 18 | .alert-#{$name} { 19 | background: $color; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/scss/elements/blockquotes.scss: -------------------------------------------------------------------------------- 1 | // BLOCKQUOTES 2 | // ============================== 3 | 4 | $blockquote-bg-color: $color-white !default; 5 | $blockquote-border-color: $brand-color !default; 6 | 7 | blockquote { 8 | display: block; 9 | margin: 15px 15px 30px; 10 | padding: 15px; 11 | font-size: 18px; 12 | font-weight: 400; 13 | border-left: 4px solid $blockquote-border-color; 14 | background: $blockquote-bg-color; 15 | 16 | :last-child { 17 | margin-bottom: 0; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/scss/base/base.scss: -------------------------------------------------------------------------------- 1 | // BASE 2 | // ============================== 3 | 4 | $body-bg-color: $color-white !default; 5 | $brand-color: $color-green-500 !default; 6 | 7 | * { 8 | margin: 0; 9 | padding: 0; 10 | } 11 | 12 | html { 13 | box-sizing: border-box; 14 | } 15 | 16 | *, *::after, *::before { 17 | box-sizing: inherit; 18 | } 19 | 20 | body { 21 | display: flex; 22 | flex-direction: column; 23 | min-height: 100vh; 24 | background-color: $body-bg-color; 25 | } 26 | 27 | main { 28 | flex: 1; 29 | } 30 | -------------------------------------------------------------------------------- /src/scss/utility/sections.scss: -------------------------------------------------------------------------------- 1 | // SECTIONS 2 | // ============================== 3 | 4 | $section-primary-bg-color: $color-amber-400 !default; 5 | $section-secondary-bg-color: $color-gray-100 !default; 6 | $section-tertiary-bg-color: $color-white !default; 7 | 8 | .section, 9 | section { 10 | padding: 30px; 11 | 12 | :last-child { 13 | margin-bottom: 0; 14 | } 15 | } 16 | 17 | .section-primary { 18 | background: $section-primary-bg-color; 19 | } 20 | 21 | .section-secondary { 22 | background: $section-secondary-bg-color; 23 | } 24 | 25 | .section-tertiary { 26 | background: $section-tertiary-bg-color; 27 | } 28 | -------------------------------------------------------------------------------- /src/scss/components/breadcrumbs.scss: -------------------------------------------------------------------------------- 1 | // BREADCRUMBS 2 | // ============================== 3 | 4 | $breadcrumb-spacing: 5px !default; 5 | $breadcrumb-separator: '/' !default; 6 | 7 | .breadcrumbs { 8 | display: flex; 9 | list-style: none; 10 | font-size: 14px; 11 | 12 | li { 13 | display: block; 14 | 15 | &::after { 16 | display: inline-block; 17 | content: $breadcrumb-separator; 18 | padding: 0 $breadcrumb-spacing; 19 | color: $color-gray-500; 20 | } 21 | 22 | &:last-of-type { 23 | &::after { 24 | display: none; 25 | } 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/scss/elements/code.scss: -------------------------------------------------------------------------------- 1 | // CODE 2 | // ============================== 3 | 4 | $code-bg-color: $color-gray-100 !default; 5 | $code-border-color: $brand-color !default; 6 | 7 | pre { 8 | display: block; 9 | margin: 15px 0; 10 | padding: 10px 15px; 11 | border-left: 4px solid $code-border-color; 12 | background: $code-bg-color; 13 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 14 | font-size: 15px; 15 | color: $color-gray-900; 16 | white-space: normal; 17 | overflow-x: auto; 18 | } 19 | 20 | code { 21 | background: $code-bg-color; 22 | color: $color-gray-900; 23 | font-family: Monaco, 'Courier New', Courier, monospace; 24 | white-space: pre; 25 | } 26 | -------------------------------------------------------------------------------- /src/scss/elements/tables.scss: -------------------------------------------------------------------------------- 1 | // TABLES 2 | // ============================== 3 | 4 | $table-border-color: $color-gray-200 !default; 5 | $table-header-text-color: $color-gray-500 !default; 6 | 7 | table { 8 | margin: 15px 0; 9 | width: 100%; 10 | border-spacing: 0; 11 | border-collapse: collapse; 12 | 13 | tr { 14 | border-bottom: 1px solid $table-border-color; 15 | text-align: left; 16 | } 17 | 18 | thead { 19 | th { 20 | padding: 15px; 21 | font-weight: 300; 22 | color: $table-header-text-color; 23 | } 24 | } 25 | 26 | tbody { 27 | td { 28 | padding: 15px; 29 | font-weight: 300; 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/scss/components/menus.scss: -------------------------------------------------------------------------------- 1 | // MENUS 2 | // ============================== 3 | 4 | $menu-shadow: true !default; 5 | $menu-bg-color: $color-white !default; 6 | $menu-hover-color: $color-gray-50 !default; 7 | 8 | .menu { 9 | display: inline-block; 10 | list-style: none; 11 | background: $menu-bg-color; 12 | border-radius: 5px; 13 | 14 | @if $menu-shadow { 15 | box-shadow: 0 4px 12px rgba($color-gray-500, 0.5); 16 | } 17 | 18 | li { 19 | a { 20 | display: block; 21 | padding: 10px 30px; 22 | border-bottom: 1px solid $color-gray-200; 23 | 24 | &:focus, 25 | &:hover { 26 | background: $menu-hover-color; 27 | } 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/scss/components/cards.scss: -------------------------------------------------------------------------------- 1 | // CARDS 2 | // ============================== 3 | 4 | $card-shadow: true !default; 5 | $card-title-font-size: 24px !default; 6 | $card-bg-color: $color-white !default; 7 | 8 | .card { 9 | margin: 15px; 10 | padding: 30px; 11 | background: $card-bg-color; 12 | overflow: hidden; 13 | border-radius: 5px; 14 | 15 | @if $card-shadow { 16 | box-shadow: 0 4px 12px rgba($color-gray-300, 0.5); 17 | } 18 | 19 | } 20 | 21 | .card-title { 22 | font-size: $card-title-font-size; 23 | margin-bottom: 5px; 24 | } 25 | 26 | .card-actions { 27 | display: flex; 28 | align-items: center; 29 | margin-top: 30px; 30 | list-style: none; 31 | justify-content: space-around; 32 | 33 | & > * { 34 | margin-bottom: 0; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mustard-ui", 3 | "version": "1.0.4", 4 | "description": "A starter CSS framework that actually looks good.", 5 | "main": "dist/css/mustard-ui.min.css", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/kylelogue/mustard-ui.git" 9 | }, 10 | "keywords": [ 11 | "css", 12 | "scss", 13 | "sass", 14 | "framework", 15 | "starter", 16 | "responsive", 17 | "flexbox" 18 | ], 19 | "scripts": { 20 | "dev": "./node_modules/.bin/gulp", 21 | "build": "./node_modules/.bin/gulp sass" 22 | }, 23 | "author": "Kyle Logue ", 24 | "license": "MIT", 25 | "dependencies": { 26 | "natives": "^1.1.6" 27 | }, 28 | "devDependencies": { 29 | "browser-sync": "^2.26.7", 30 | "gulp": "^4.0.2", 31 | "gulp-autoprefixer": "^5.0.0", 32 | "gulp-rename": "^1.2.3", 33 | "gulp-sass": "^4.0.2", 34 | "gulp-sourcemaps": "^2.6.5" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/scss/components/panels.scss: -------------------------------------------------------------------------------- 1 | // PANELS 2 | // ============================= 3 | 4 | $panel-shadow: true !default; 5 | $panel-bg-color: $color-white !default; 6 | $panel-head-color: $color-gray-50 !default; 7 | $panel-footer-color: $color-gray-50 !default; 8 | 9 | .panel { 10 | background: $panel-bg-color; 11 | border-radius: 5px; 12 | overflow: hidden; 13 | margin: 30px 0; 14 | 15 | @if $panel-shadow { 16 | box-shadow: 0 4px 12px rgba($color-gray-300, 0.5); 17 | } 18 | } 19 | 20 | .panel-head { 21 | display: flex; 22 | align-items: center; 23 | justify-content: space-between; 24 | margin-bottom: 10px; 25 | padding: 10px 15px; 26 | background: $panel-head-color; 27 | 28 | .panel-title { 29 | font-size: 28px; 30 | } 31 | } 32 | 33 | .panel-body { 34 | padding: 30px 15px; 35 | } 36 | 37 | .panel-footer { 38 | padding: 15px; 39 | background: $panel-footer-color; 40 | 41 | & > * { 42 | margin-bottom: 0; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/scss/components/tabs.scss: -------------------------------------------------------------------------------- 1 | // TABS 2 | // ============================== 3 | 4 | $tab-active-color: $brand-color !default; 5 | $tab-border-color: $color-gray-300 !default; 6 | $tab-hover-text-color: $color-gray-800 !default; 7 | $tab-active-text-color: $color-gray-600 !default; 8 | $tab-inactive-text-color: $color-gray-400 !default; 9 | 10 | .tabs { 11 | list-style: none; 12 | display: flex; 13 | margin: 15px 0 30px; 14 | 15 | .tab { 16 | padding: 8px 45px; 17 | border-bottom: 1px solid $tab-border-color; 18 | color: $tab-inactive-text-color; 19 | 20 | &.active { 21 | border-top: 2px solid $tab-active-color; 22 | border-left: 1px solid $tab-border-color; 23 | border-right: 1px solid $tab-border-color; 24 | border-bottom: none; 25 | color: $tab-active-text-color; 26 | } 27 | 28 | &:focus, 29 | &:hover { 30 | opacity: 1; 31 | color: $tab-hover-text-color; 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/scss/components/pagination.scss: -------------------------------------------------------------------------------- 1 | // PAGINATION 2 | // ============================== 3 | 4 | $pagination-bg-color: $color-white !default; 5 | $pagination-active-color: $brand-color !default; 6 | $pagination-border-color: $color-gray-300 !default; 7 | 8 | .pagination { 9 | display: flex; 10 | list-style: none; 11 | margin: 15px 0; 12 | 13 | li { 14 | margin: 0 5px; 15 | 16 | a { 17 | display: block; 18 | padding: 5px 10px; 19 | border-radius: 5px; 20 | background: $pagination-bg-color; 21 | border: 1px solid $pagination-border-color; 22 | 23 | &.active, 24 | &:focus, 25 | &:hover { 26 | opacity: 1; 27 | border-color: $pagination-active-color; 28 | } 29 | 30 | &.active { 31 | background: $pagination-active-color; 32 | color: $color-white; 33 | } 34 | 35 | &:active { 36 | transform: scale(0.95); 37 | } 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/scss/components/tags.scss: -------------------------------------------------------------------------------- 1 | // TAGS 2 | // ============================== 3 | 4 | $tag-text-color: $color-white !default; 5 | $tag-default-color: $color-gray-500 !default; 6 | $tag-colors: ( 7 | 'blue' : $color-blue-500, 8 | 'red' : $color-red-500, 9 | 'green' : $color-green-500, 10 | 'orange' : $color-orange-500, 11 | ) !default; 12 | 13 | .tags { 14 | display: flex; 15 | flex-wrap: wrap; 16 | list-style: none; 17 | 18 | .tag { 19 | margin-right: 5px; 20 | padding: 5px 15px; 21 | font-size: 14px; 22 | font-weight: 400; 23 | border-radius: 4px; 24 | color: $tag-text-color; 25 | background: $tag-default-color; 26 | box-shadow: 0 2px 4px $color-gray-200; 27 | 28 | a { 29 | display: block; 30 | color: $color-white; 31 | } 32 | 33 | } 34 | 35 | .tag-rounded { 36 | border-radius: 16px; 37 | } 38 | 39 | @each $name, $color in $tag-colors { 40 | .tag-#{$name} { 41 | background: $color; 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/scss/components/footer.scss: -------------------------------------------------------------------------------- 1 | // FOOTER 2 | // ============================== 3 | 4 | $footer-text-color: $color-white !default; 5 | $footer-bg-color: $color-gray-600 !default; 6 | $footer-links-color: $color-gray-400 !default; 7 | 8 | .footer, 9 | footer { 10 | padding: 30px; 11 | width: 100%; 12 | background: $footer-bg-color; 13 | 14 | .copyright { 15 | margin: 0; 16 | padding-top: 30px; 17 | font-size: 14px; 18 | color: $footer-text-color; 19 | border-top: 1px solid $color-gray-500; 20 | 21 | a { 22 | color: $footer-links-color; 23 | } 24 | } 25 | } 26 | 27 | .footer-text { 28 | p { 29 | color: $footer-text-color; 30 | } 31 | } 32 | 33 | .footer-links-category { 34 | color: $footer-text-color; 35 | font-size: 14px; 36 | font-weight: 600; 37 | text-transform: uppercase; 38 | letter-spacing: 1px; 39 | } 40 | 41 | .footer-links { 42 | list-style: none; 43 | 44 | li { 45 | margin-top: 5px; 46 | } 47 | 48 | a { 49 | color: $footer-links-color; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/scss/mixins/triangle.scss: -------------------------------------------------------------------------------- 1 | // TRIANGLE MIXIN 2 | // ============================== 3 | 4 | @mixin triangle($size, $color, $direction) { 5 | height: 0; 6 | width: 0; 7 | 8 | $width: nth($size, 1); 9 | $height: nth($size, length($size)); 10 | 11 | $width: $width / 2; 12 | $height: if(length($size) > 1, $height, $height/2); 13 | 14 | @if $direction == up { 15 | border-bottom: $height solid $color; 16 | border-left: $width solid transparent; 17 | border-right: $width solid transparent; 18 | 19 | } @else if $direction == right { 20 | border-left: $height solid $color; 21 | border-bottom: $width solid transparent; 22 | border-top: $width solid transparent; 23 | 24 | } @else if $direction == down { 25 | border-top: $height solid $color; 26 | border-left: $width solid transparent; 27 | border-right: $width solid transparent; 28 | 29 | } @else if $direction == left { 30 | border-right: $height solid $color; 31 | border-bottom: $width solid transparent; 32 | border-top: $width solid transparent; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Kyle Logue 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/scss/components/tooltips.scss: -------------------------------------------------------------------------------- 1 | // TOOLTIPS 2 | // ============================== 3 | 4 | $tooltip-bg-color: $color-gray-800 !default; 5 | $tooltip-underline-color: $color-gray-400 !default; 6 | 7 | .tooltip { 8 | display: inline-block; 9 | position: relative; 10 | border-bottom: 1px dashed $tooltip-underline-color; 11 | 12 | &:focus, 13 | &:hover { 14 | cursor: pointer; 15 | 16 | .tooltip-text { 17 | display: block; 18 | } 19 | } 20 | } 21 | 22 | .tooltip-text { 23 | display: none; 24 | position: absolute; 25 | bottom: 125%; 26 | left: 50%; 27 | transform: translateX(-50%); 28 | min-width: 300px; 29 | padding: 10px 15px; 30 | color: $color-white; 31 | text-align: center; 32 | background: $tooltip-bg-color; 33 | border-radius: 5px; 34 | box-shadow: 0 2px 4px $color-gray-500; 35 | 36 | &::after { 37 | position: absolute; 38 | content: ''; 39 | top: 100%; 40 | left: 50%; 41 | transform: translateX(-50%); 42 | border-width: 8px; 43 | border-style: solid; 44 | border-color: $tooltip-bg-color transparent transparent; 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/scss/components/sidebars.scss: -------------------------------------------------------------------------------- 1 | // SIDEBAR 2 | // ============================== 3 | 4 | $sidebar-border-color: $color-gray-300 !default; 5 | $sidebar-category-text-color: $color-gray-600 !default; 6 | 7 | .sidebar { 8 | padding: 15px; 9 | } 10 | 11 | .sidebar-left { 12 | border-right: 1px solid $sidebar-border-color; 13 | } 14 | 15 | .sidebar-right { 16 | border-left: 1px solid $sidebar-border-color; 17 | } 18 | 19 | .sidebar-category { 20 | padding: 10px; 21 | font-size: 18px; 22 | color: $sidebar-category-text-color; 23 | border-bottom: 1px solid $sidebar-border-color; 24 | background: url('data:image/svg+xml;utf8,') center right no-repeat; 25 | 26 | &:focus, 27 | &:hover { 28 | cursor: pointer; 29 | opacity: 0.75; 30 | } 31 | 32 | } 33 | 34 | .sidebar-links { 35 | list-style: none; 36 | padding-left: 10px; 37 | 38 | a { 39 | display: block; 40 | padding: 5px 10px; 41 | 42 | &.active { 43 | font-weight: 700; 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/scss/components/steppers.scss: -------------------------------------------------------------------------------- 1 | // STEPPERS 2 | // ============================== 3 | 4 | $step-text-color: $color-white !default; 5 | $step-bg-color: $color-light-green-500 !default; 6 | 7 | .stepper { 8 | margin: 30px 15px; 9 | 10 | .step { 11 | position: relative; 12 | padding: 0 30px; 13 | margin-bottom: 30px; 14 | border-left: 1px solid $color-gray-400; 15 | 16 | &:last-of-type { 17 | border: none; 18 | } 19 | 20 | .step-number { 21 | display: flex; 22 | flex-direction: column; 23 | align-items: center; 24 | justify-content: center; 25 | position: absolute; 26 | top: 0; 27 | left: -18px; 28 | height: 36px; 29 | width: 36px; 30 | z-index: 1; 31 | 32 | font-weight: 600; 33 | color: $step-text-color; 34 | background: $step-bg-color; 35 | border-radius: 50%; 36 | box-shadow: 0 2px 4px $color-gray-300; 37 | } 38 | 39 | .step-title { 40 | margin: 0; 41 | font-weight: 600; 42 | font-size: 20px; 43 | line-height: 36px; 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/scss/components/modals.scss: -------------------------------------------------------------------------------- 1 | // MODALS 2 | // ============================== 3 | 4 | $modal-shadow: true !default; 5 | $modal-bg-color: $color-white !default; 6 | $modal-mask-color: $color-gray-700 !default; 7 | $modal-content-bg-color: $color-gray-200 !default; 8 | 9 | .modal-mask { 10 | position: fixed; 11 | top: 0; 12 | right: 0; 13 | bottom: 0; 14 | left: 0; 15 | background: rgba($modal-mask-color, 0.5); 16 | z-index: 10; 17 | } 18 | 19 | .modal { 20 | display: flex; 21 | flex-direction: column; 22 | justify-content: space-between; 23 | position: fixed; 24 | top: 50%; 25 | left: 50%; 26 | max-width: 540px; 27 | transform: translate(-50%, -50%); 28 | background: $modal-bg-color; 29 | border-radius: 5px; 30 | overflow: hidden; 31 | 32 | @if $modal-shadow { 33 | box-shadow: 0 4px 12px rgba($color-gray-600, 0.5); 34 | } 35 | } 36 | 37 | .modal-head { 38 | padding: 10px 15px; 39 | 40 | .modal-title { 41 | font-size: 24px; 42 | } 43 | } 44 | 45 | .modal-body { 46 | flex: 1; 47 | padding: 30px 15px; 48 | background: $modal-content-bg-color; 49 | } 50 | 51 | .modal-footer { 52 | padding: 15px; 53 | 54 | & > * { 55 | margin-bottom: 0; 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /docs/wp-content/themes/mustard/js/scripts6619.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | // Mobile Menu Toggle 3 | $('.mobile-menu-toggle').on('click', function(e) { 4 | e.preventDefault() 5 | e.stopPropagation() 6 | $('.mobile-menu').show() 7 | }) 8 | $('body').on('click', function() { 9 | $('.mobile-menu').hide() 10 | }) 11 | 12 | // Reset initial header height 13 | $('header').height(window.innerHeight - 60) 14 | 15 | // Home Page Scroll Buttons 16 | $('.scroll-down, .get-started').on('click', function(e) { 17 | e.preventDefault() 18 | $('html, body').animate({ scrollTop: $('section:first-of-type').offset().top }, 300) 19 | }) 20 | 21 | // Sidebar Accordian 22 | $('.sidebar-category').on('click', function() { 23 | $(this).toggleClass('active') 24 | }) 25 | 26 | // Modal Display 27 | $('.show-modal').on('click', function() { 28 | $('.modal-mask, .modal').fadeIn(200) 29 | }) 30 | $('.modal-mask, .modal-save').on('click', function() { 31 | $('.modal-mask, .modal').fadeOut(100) 32 | }) 33 | 34 | // Tabs 35 | $('.tab').on('click', function(e) { 36 | e.preventDefault() 37 | $(this).closest('.tabs').find('.tab').removeClass('active') 38 | $(this).addClass('active') 39 | }) 40 | }) 41 | -------------------------------------------------------------------------------- /src/scss/utility/display.scss: -------------------------------------------------------------------------------- 1 | // DISPLAY 2 | // ============================== 3 | 4 | $display-up: ( 5 | 'sm' : $bp-small, 6 | 'md' : $bp-medium, 7 | 'lg' : $bp-large, 8 | 'xlg' : $bp-xlarge 9 | ) !default; 10 | $display-down: ( 11 | 'sm' : $bp-small, 12 | 'md' : $bp-medium, 13 | 'lg' : $bp-large, 14 | 'xlg' : $bp-xlarge, 15 | ) !default; 16 | 17 | .display-flex { 18 | display: flex; 19 | justify-content: space-around; 20 | } 21 | 22 | .display-none { 23 | display: none; 24 | } 25 | 26 | @each $name, $bp in $display-up { 27 | .display-#{$name}-up { 28 | display: none; 29 | 30 | @include breakpoint-min($bp) { 31 | display: initial; 32 | } 33 | } 34 | } 35 | 36 | @each $name, $bp in $display-down { 37 | .display-#{$name}-down { 38 | display: none; 39 | 40 | @include breakpoint-max($bp - 1px) { 41 | display: initial; 42 | } 43 | } 44 | } 45 | 46 | @each $up-name, $up-bp in $display-up { 47 | @each $down-name, $down-bp in $display-down { 48 | @if $up-bp < $down-bp { 49 | .display-#{$up-name}-to-#{$down-name} { 50 | display: none; 51 | 52 | @include breakpoint-min-max($up-bp, ($down-bp - 1px)) { 53 | display: initial; 54 | } 55 | } 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /docs/wp-includes/js/wp-embed.min6619.js: -------------------------------------------------------------------------------- 1 | !function(a,b){"use strict";function c(){if(!e){e=!0;var a,c,d,f,g=-1!==navigator.appVersion.indexOf("MSIE 10"),h=!!navigator.userAgent.match(/Trident.*rv:11\./),i=b.querySelectorAll("iframe.wp-embedded-content");for(c=0;c1e3)g=1e3;else if(~~g<200)g=200;f.height=g}if("link"===d.message)if(h=b.createElement("a"),i=b.createElement("a"),h.href=f.getAttribute("src"),i.href=d.value,i.host===h.host)if(b.activeElement===f)a.top.location.href=d.value}else;}},d)a.addEventListener("message",a.wp.receiveEmbedMessage,!1),b.addEventListener("DOMContentLoaded",c,!1),a.addEventListener("load",c,!1)}(window,document); -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | const browserSync = require('browser-sync').create(); 3 | const sass = require('gulp-sass'); 4 | const autoprefixer = require('gulp-autoprefixer'); 5 | const sourcemaps = require('gulp-sourcemaps'); 6 | const rename = require('gulp-rename'); 7 | 8 | gulp.task('serve', function () { 9 | browserSync.init({ 10 | server: './' 11 | }); 12 | gulp.watch('./src/scss/**/*.scss', gulp.series('sass')); 13 | gulp.watch('./**/*.html').on('change', browserSync.reload); 14 | }); 15 | 16 | gulp.task('sass', function () { 17 | return gulp.src('src/scss/mustard-ui.scss') 18 | .pipe(sourcemaps.init()) 19 | .pipe(sass({ 20 | outputStyle: 'compressed' 21 | }).on('error', sass.logError)) 22 | .pipe(autoprefixer({ 23 | browsers: [ 24 | 'Last 2 Chrome versions', 25 | 'Last 2 Edge versions', 26 | 'Last 2 Firefox versions', 27 | 'Last 2 Safari versions', 28 | 'Last 3 iOS versions', 29 | 'IE 11' 30 | ], 31 | cascade: false 32 | })) 33 | .pipe(rename({ 34 | suffix: '.min' 35 | })) 36 | .pipe(sourcemaps.write('.')) 37 | .pipe(gulp.dest('dist/css/')) 38 | .pipe(browserSync.stream()); 39 | }); 40 | 41 | gulp.task('default', gulp.series('serve', 'sass')); 42 | -------------------------------------------------------------------------------- /src/scss/mustard-ui.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | Mustard UI v0.0.5 3 | MIT License 4 | https://mustard-ui.com 5 | */ 6 | 7 | // Variables 8 | @import 'vars/breakpoints'; 9 | @import 'vars/colors'; 10 | 11 | // Mixins 12 | @import 'mixins/breakpoint'; 13 | @import 'mixins/centering'; 14 | @import 'mixins/clearfix'; 15 | @import 'mixins/triangle'; 16 | 17 | // Base 18 | @import 'base/base'; 19 | 20 | // Utility 21 | @import 'utility/alignment'; 22 | @import 'utility/containers'; 23 | @import 'utility/display'; 24 | @import 'utility/grid'; 25 | @import 'utility/sections'; 26 | 27 | // Elements 28 | @import 'elements/blockquotes'; 29 | @import 'elements/buttons'; 30 | @import 'elements/code'; 31 | @import 'elements/forms'; 32 | @import 'elements/links'; 33 | @import 'elements/lists'; 34 | @import 'elements/tables'; 35 | @import 'elements/typography'; 36 | 37 | // Components 38 | @import 'components/alerts'; 39 | @import 'components/breadcrumbs'; 40 | @import 'components/cards'; 41 | @import 'components/footer'; 42 | @import 'components/header'; 43 | @import 'components/menus'; 44 | @import 'components/modals'; 45 | @import 'components/navigation'; 46 | @import 'components/pagination'; 47 | @import 'components/panels'; 48 | @import 'components/pricing-tables'; 49 | @import 'components/progress-bars'; 50 | @import 'components/sidebars'; 51 | @import 'components/steppers'; 52 | @import 'components/tabs'; 53 | @import 'components/tags'; 54 | @import 'components/tooltips'; 55 | -------------------------------------------------------------------------------- /src/scss/elements/typography.scss: -------------------------------------------------------------------------------- 1 | // TYPOGRAPHY 2 | // ============================== 3 | 4 | $line-height: 1.6 !default; 5 | $font-weight: 300 !default; 6 | $font-size-base: 16px !default; 7 | $font-color: $color-gray-800 !default; 8 | $heading-font-color: $color-gray-800 !default; 9 | $font-family: 'Open Sans', sans-serif !default; 10 | $heading-font-family: 'Open Sans', sans-serif !default; 11 | 12 | body { 13 | font-family: $font-family; 14 | font-size: $font-size-base; 15 | line-height: $line-height; 16 | font-weight: $font-weight; 17 | color: $font-color; 18 | } 19 | 20 | h1, 21 | h2, 22 | h3, 23 | h4, 24 | h5, 25 | h6 { 26 | font-family: $heading-font-family; 27 | font-weight: $font-weight; 28 | color: $heading-font-color; 29 | margin: 0 0 10px; 30 | font-weight: 600; 31 | } 32 | 33 | .h1, 34 | h1 { 35 | font-size: $font-size-base * 3; 36 | line-height: $font-size-base * 3.75; 37 | } 38 | 39 | .h2, 40 | h2 { 41 | font-size: $font-size-base * 2.5; 42 | line-height: $font-size-base * 3.25; 43 | } 44 | 45 | .h3, 46 | h3 { 47 | font-size: $font-size-base * 2; 48 | line-height: $font-size-base * 2.75; 49 | } 50 | 51 | .h4, 52 | h4 { 53 | font-size: $font-size-base * 1.75; 54 | line-height: $font-size-base * 2.5; 55 | } 56 | 57 | .h5, 58 | h5 { 59 | font-size: $font-size-base * 1.5; 60 | line-height: $font-size-base * 2.25; 61 | } 62 | 63 | .h6, 64 | h6 { 65 | font-size: $font-size-base * 1.25; 66 | line-height: $font-size-base * 2; 67 | } 68 | 69 | p { 70 | margin-bottom: 15px; 71 | 72 | &.magnify { 73 | font-size: $font-size-base * 1.1; 74 | line-height: 1.8; 75 | } 76 | } 77 | 78 | strong, 79 | b { 80 | font-weight: 600; 81 | } 82 | -------------------------------------------------------------------------------- /docs/wp-content/themes/mustard/css/styles.css: -------------------------------------------------------------------------------- 1 | .nav-container .nav-logo a { 2 | font-family: 'Averia Libre', sans-serif; 3 | } 4 | 5 | header h1.title { 6 | font-family: 'Averia Libre', sans-serif; 7 | } 8 | 9 | .key-points .col { 10 | margin: 30px 0; 11 | display: flex; 12 | justify-content: center; 13 | } 14 | 15 | /* Prism Margin Fix */ 16 | pre[class*=language-] { 17 | margin: 15px 0; 18 | } 19 | 20 | /* GitHub Octocat */ 21 | .github-corner { 22 | fill: #4caf50; 23 | color: #fff; 24 | position: absolute; 25 | top: 0; 26 | right: 0; 27 | border: 0; 28 | z-index: 10; 29 | opacity: 1; 30 | } 31 | .github-corner:hover { 32 | opacity: 1; 33 | } 34 | .github-corner:hover .octo-arm { 35 | animation: octocat-wave 560ms ease-in-out 36 | } 37 | @keyframes octocat-wave { 38 | 0%, 39 | 100% { 40 | transform: rotate(0) 41 | } 42 | 20%, 43 | 60% { 44 | transform: rotate(-25deg) 45 | } 46 | 40%, 47 | 80% { 48 | transform: rotate(10deg) 49 | } 50 | } 51 | @media (max-width:500px) { 52 | .github-corner:hover .octo-arm { 53 | animation: none 54 | } 55 | .github-corner .octo-arm { 56 | animation: octocat-wave 560ms ease-in-out 57 | } 58 | } 59 | 60 | /* Mobile Menu Default */ 61 | .mobile-menu { 62 | display: none; 63 | position: absolute; 64 | top: 15px; 65 | right: 30px; 66 | z-index: 10; 67 | } 68 | 69 | /* Collapsing Sidebar */ 70 | .sidebar-links { 71 | display: none; 72 | } 73 | .sidebar-category.active + .sidebar-links { 74 | display: block; 75 | } 76 | 77 | /* Modal Display */ 78 | .modal-mask, 79 | .modal { 80 | display: none; 81 | } 82 | -------------------------------------------------------------------------------- /src/scss/components/pricing-tables.scss: -------------------------------------------------------------------------------- 1 | // PRICING TABLES 2 | // =============================== 3 | 4 | $package-bg-color: $color-white !default; 5 | $package-featured-color: $brand-color !default; 6 | $package-border-color: $color-gray-300 !default; 7 | $package-separator-color: $color-gray-300 !default; 8 | 9 | .pricing-table { 10 | 11 | .package { 12 | display: flex; 13 | flex-direction: column; 14 | justify-content: space-between; 15 | flex-wrap: wrap; 16 | margin: 15px; 17 | padding: 30px; 18 | border: 1px solid $package-border-color; 19 | border-radius: 5px; 20 | text-align: center; 21 | background: $package-bg-color; 22 | 23 | &.featured { 24 | border-color: $package-featured-color; 25 | border-width: 2px; 26 | 27 | .package-name { 28 | color: $package-featured-color; 29 | } 30 | } 31 | 32 | hr { 33 | border: 0; 34 | border-bottom: 1px solid $package-separator-color; 35 | height: 1px; 36 | } 37 | 38 | .package-name { 39 | font-weight: 700; 40 | text-transform: uppercase; 41 | } 42 | 43 | .price { 44 | margin: 15px 0 0 0; 45 | font-size: 36px; 46 | line-height: 1.2; 47 | } 48 | 49 | .price-disclaimer { 50 | font-size: 12px; 51 | } 52 | 53 | .features { 54 | flex: 1; 55 | padding: 15px; 56 | list-style: none; 57 | 58 | li { 59 | margin-bottom: 5px; 60 | } 61 | } 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /src/scss/components/progress-bars.scss: -------------------------------------------------------------------------------- 1 | // PROGRESS BARS 2 | // ============================== 3 | 4 | $progress-bar-height: 20px !default; 5 | $progress-bar-bg-color: $color-gray-200 !default; 6 | $progress-bar-colors: ( 7 | 'green' : $color-green-400, 8 | 'blue' : $color-blue-400, 9 | 'red' : $color-red-400, 10 | ) !default; 11 | 12 | .progress-bar { 13 | position: relative; 14 | margin: 15px 0; 15 | height: $progress-bar-height; 16 | background: $progress-bar-bg-color; 17 | border-radius: 5px; 18 | overflow: hidden; 19 | 20 | & > span { 21 | display: block; 22 | position: absolute; 23 | height: 100%; 24 | border-radius: 4px; 25 | overflow: hidden; 26 | 27 | @each $name, $color in $progress-bar-colors { 28 | &.progress-bar-#{$name} { 29 | background: $color; 30 | } 31 | } 32 | } 33 | 34 | &.striped { 35 | & > span:after { 36 | content: ""; 37 | position: absolute; 38 | top: 0; left: 0; bottom: 0; right: 0; 39 | background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); 40 | background-size: 50px 50px; 41 | overflow: hidden; 42 | } 43 | } 44 | 45 | &.animated { 46 | & > span:after { 47 | animation: move 2s linear infinite; 48 | } 49 | } 50 | 51 | @keyframes move { 52 | 0% { 53 | background-position: 0 0; 54 | } 55 | 100% { 56 | background-position: 50px 50px; 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /src/scss/components/navigation.scss: -------------------------------------------------------------------------------- 1 | // NAVIGATION 2 | // ============================== 3 | 4 | $nav-bg-color: $color-amber-500 !default; 5 | $nav-link-color: $color-gray-800 !default; 6 | $nav-link-active-color: $brand-color !default; 7 | $nav-menu-toggle-color: $color-gray-800 !default; 8 | 9 | nav, 10 | .nav { 11 | padding: 0 15px; 12 | height: 60px; 13 | width: 100%; 14 | background: $nav-bg-color; 15 | 16 | a { 17 | display: block; 18 | color: $nav-link-color; 19 | } 20 | 21 | } 22 | 23 | .nav-container { 24 | display: flex; 25 | align-items: center; 26 | justify-content: space-between; 27 | height: 100%; 28 | max-width: 1200px; 29 | margin: 0 auto; 30 | padding: 0 30px; 31 | } 32 | 33 | .nav-logo { 34 | display: flex; 35 | align-items: center; 36 | font-size: 32px; 37 | line-height: 32px; 38 | } 39 | 40 | .nav-links { 41 | display: none; 42 | list-style: none; 43 | margin: 0; 44 | height: 100%; 45 | 46 | @include breakpoint-min($bp-medium) { 47 | display: flex; 48 | } 49 | 50 | li, 51 | a { 52 | height: 100%; 53 | } 54 | 55 | a { 56 | display: flex; 57 | align-items: center; 58 | padding: 0 30px; 59 | 60 | &:active { 61 | color: $nav-link-active-color; 62 | } 63 | 64 | &.active { 65 | border-bottom: 4px solid $nav-link-active-color; 66 | } 67 | } 68 | } 69 | 70 | .mobile-menu-toggle { 71 | display: block; 72 | position: relative; 73 | height: 20px; 74 | width: 26px; 75 | 76 | @include breakpoint-min($bp-medium) { 77 | display: none; 78 | } 79 | 80 | &:focus, 81 | &:hover { 82 | cursor: pointer; 83 | } 84 | 85 | &::before { 86 | position: absolute; 87 | top: 0; 88 | left: 0; 89 | width: 26px; 90 | height: 4px; 91 | content: ''; 92 | background: $nav-menu-toggle-color; 93 | border-radius: 4px; 94 | box-shadow: 0 8px 0 0 $nav-menu-toggle-color, 0 16px 0 0 $nav-menu-toggle-color; 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /docs/wp-json/oembed/1.0/embed9b77.json: -------------------------------------------------------------------------------- 1 | {"version":"1.0","provider_name":"Mustard UI","provider_url":"https:\/\/mustard-ui.com","author_name":"Kyle Logue","author_url":"https:\/\/mustard-ui.com\/author\/hellokylelogue-com\/","title":"Code","type":"rich","width":600,"height":338,"html":"
Code<\/a><\/blockquote>\n