nk_jtb 0.0.2 → 0.0.5

package/.editorconfig

@@ -1,31 +1,34 @@
-root = true
-
-[*]
-charset = utf-8
-end_of_line = lf
-insert_final_newline = true
-indent_style = space
-indent_size = 4
-trim_trailing_whitespace = true
-
-[*.php]
-indent_size = 4
-
-[*.vue]
-indent_size = 2
-
-[*.json]
-indent_size = 4
-
-[*.blade.php]
-indent_size = 4
-
-[*.scss.php]
-indent_size = 4
-
-[*.md]
-indent_size = 4
-trim_trailing_whitespace = false
-
-[*.yml]
-indent_size = 2
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 4
+trim_trailing_whitespace = true
+
+# [*.php]
+# indent_size = 4
+
+# [*.vue]
+# indent_size = 2
+
+# [*.json]
+# indent_size = 4
+
+# [*.blade.php]
+# indent_size = 4
+
+# [*.scss]
+# indent_size = 4
+
+# [*.html]
+# indent_size = 4
+
+# [*.md]
+# indent_size = 4
+# trim_trailing_whitespace = false
+
+# [*.yml]
+# indent_size = 2

package/package.json

@@ -1,34 +1,27 @@
-{
-    "name": "nk_jtb",
-    "description": "Yet another utility based framework based on flex-box.",
-    "version": "0.0.2",
-    "main": "index.js",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/naykel76/nk_jtb.git"
-      },
-    "scripts": {
-        "watch": "webpack --watch --mode=development",
-        "build": "set NODE_ENV=development&&webpack --progress",
-        "build-sass": "node-sass --output-style expanded --source-map true scss/nk_jtb.scss css/app.css",
-        "build-reset": "node-sass --output-style expanded scss/reset.scss css/reset.css",
-        "serve": "webpack-dev-server --open"
-    },
-    "keywords": [],
-    "author": "",
-    "license": "ISC",
-    "devDependencies": {
-        "autoprefixer": "^9.8.6",
-        "clean-webpack-plugin": "^2.0.2",
-        "css-loader": "^2.1.1",
-        "html-webpack-plugin": "^3.2.0",
-        "mini-css-extract-plugin": "^0.6.0",
-        "node-sass": "^4.14.1",
-        "postcss-loader": "^3.0.0",
-        "sass-loader": "^7.3.1",
-        "style-loader": "^0.23.1",
-        "webpack": "^4.46.0",
-        "webpack-cli": "^3.3.12",
-        "webpack-dev-server": "^3.11.2"
-    }
-}
+{
+    "name": "nk_jtb",
+    "description": "Yet another utility based framework.",
+    "version": "0.0.5",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/naykel76/nk_jtb.git"
+    },
+    "scripts": {
+        "watch": "sass --watch --no-source-map src/scss/jtb.scss:dist/css/jtb.css",
+        "border": "sass --watch --no-source-map src/scss/utilities/_border.scss:dist/css/border.css",
+        "flex": "sass --watch --no-source-map src/scss/utilities/_flex.scss:dist/css/flex.css",
+        "grid": "sass --watch --no-source-map src/scss/utilities/_grid.scss:dist/css/grid.css",
+        "spacing": "sass --watch --no-source-map src/scss/utilities/_spacing.scss:dist/css/spacing.css",
+        "themes": "sass --watch --no-source-map src/scss/utilities/_themes.scss:dist/css/themes.css",
+        "dev": "parcel ./src/index.html --open",
+        "build": "parcel build index.html"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "ISC",
+    "devDependencies": {
+        "@parcel/transformer-sass": "^2.5.0",
+        "parcel": "^2.5.0",
+        "sass": "^1.51.0"
+    }
+}

package/readme.md

@@ -1,17 +1,13 @@
-# NAYKEL JTB
-
-Yet another utility based framework based on flex-box.
-
-> Because without reinventing the wheel we wouldn’t have racing wheels!
-> -- Nathan Watts
-
-
-
-## Webpack Scripts
-
-| Script               | Description                                                       |
-| -------------------- | ----------------------------------------------------------------- |
-| `npm run serve`      | Run dev-server for live-view and compile css                      |
-| `npm run watch`      |                                                                   |
-| `npm run build`      |                                                                   |
-| `npm run build-sass` | Builds separate css and css map for easy reference in development |
+<p align="center"><a href="https://naykel.com.au" target="_blank"><img src="https://avatars0.githubusercontent.com/u/32632005?s=460&u=d1df6f6e0bf29668f8a4845271e9be8c9b96ed83&v=4" width="120"></a></p>
+
+# NAYKEL JTB
+
+Yet another utility based framework based on flex-box and grid.
+
+> Because without reinventing the wheel we wouldn’t have fast cars.
+> -- Nathan Watts
+
+
+
+
+

package/scss/_nk.scss

@@ -0,0 +1,33 @@
+
+
+
+// NK Documentation Styles
+// --------------------------------------------------------------------------
+
+.icon-box {
+    border: 1px solid #ccc;
+    padding: 0.5rem 0;
+
+    svg {
+        height: 72px !important;
+    }
+
+    .icon {
+        width: 150px; // icon container width
+    }
+
+    .icon-title {
+        display: block;
+        text-align: center;
+        font-size: 0.875rem;
+        margin-top: -0.5rem;
+    }
+}
+
+// contact form
+// ------------------------------------
+
+// fix google captch
+.g-recaptcha {
+    max-width: 200px;
+}

package/scss/_nk_components.scss

@@ -0,0 +1,32 @@
+@use "./base/vars_all" as *;
+@use "./mixins/media" as *;
+
+.fancy-icon-button {
+    text-align: center;
+    position: relative;
+    display: inline-block;
+
+    .#{$icon-class} {
+        height: 24px;
+        width: 24px;
+        padding: 0;
+        // add margin to push the qty badge away
+        // margin: 0.5rem 0.5rem 0;
+    }
+
+    .badge {
+        position: absolute;
+        top: 0px;
+        right: 0px;
+        height: 20px;
+        min-width: 20px;
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 12px;
+        background-color: hsl(354, 70%, 54%);
+        border: 1px solid hsl(354, 70%, 44%);
+        color: rgb(255, 255, 255);
+    }
+}

package/scss/components/_box.scss

@@ -1,128 +1,57 @@
-// --------------------------------------------------------------------------
-// Variables
-// --------------------------------------------------------------------------
-
-$bx-bg: #fff !default;
-$bx-color: $base-color !default;
-$bx-padding: $content-gap !default;
-$bx-border-radius: 0.25rem !default;
-
-$bx-header-bg: rgb(250, 250, 250) !default;
-$bx-title-font-weight: 600 !default;
-$bx-title-font-size: 1.2rem !default;
-
-$boxes-map: (
-    primary: (
-        bg: $primary,
-        color: #fff,
-    ),
-    secondary: (
-        bg: $secondary,
-        color: #fff,
-    ),
-    // danger: $danger,
-    // success: $success,
-    // info: $info,,,
-);
-
-
-// --------------------------------------------------------------------------
-// Base Class
-// --------------------------------------------------------------------------
-// The base class adds colour to the entire box
-
-.bx {
-    padding: $bx-padding;
-    border-radius: $bx-border-radius;
-    border: 1px solid rgba(0, 0, 0, 0.125);
-    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
-    background: $bx-bg;
-    color: $bx-color;
-    margin-top: $content-gap;
-
-    & > *:first-child {
-        margin-top: 0;
-    }
-
-    &-title {
-        font-size: $bx-title-font-size;
-        font-weight: $bx-title-font-weight;
-        line-height: 1.2;
-    }
-}
-
-// 1. remove side margins to align content to the outer bx. This allows
-//    different bg colours can be applied to individual sections
-.bx-content,
-.bx-header,
-.bx-footer {
-    margin-left: -$bx-padding; // 1
-    margin-right: -$bx-padding; // 1
-    padding: 0.75rem $bx-padding;
-}
-
-// .bx-content {
-//     padding: $bx-padding;
-
-//     // remove margin and radius from the box content when there is no footer
-//     // &:first-of-type {
-//     //     margin-top: -$bx-padding;
-//     //     border-radius: $bx-border-radius $bx-border-radius 0 0;
-//     // }
-//     // &:last-of-type {
-//     //     margin-bottom: -$bx-padding;
-//     //     border-radius: 0 0 $bx-border-radius $bx-border-radius;
-//     // }
-// }
-
-.bx-header {
-    margin-top: -$bx-padding !important;
-    background: $bx-header-bg;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
-    border-radius: $bx-border-radius $bx-border-radius 0 0;
-}
-
-.bx-footer {
-    margin-bottom: -$bx-padding !important;
-    border-top: 1px solid rgba(0, 0, 0, 0.125);
-    border-radius: 0 0 $bx-border-radius $bx-border-radius;
-}
-
-// // .bx-shadow {
-// //   box-shadow: 0 1px 2px rgba(10, 10, 10, 0.1);
-// // }
-
-// // // special box with large padding and shaddow
-// // .bx-shaddow {
-// //   // @include box-shadow();
-// //   padding: $gutter-sm;
-// //   border: 1px solid #ddd;
-
-// //   @include mobile {
-// //     padding: $gutter;
-// //   }
-
-// //   @include from-desktop {
-// //     padding: $gutter-lg;
-// //   }
-// // }
-
-@each $key, $map in $boxes-map {
-    .bx-#{$key} {
-        @extend .bx;
-        background: map-get($map, bg);
-        color: map-get($map, color);
-    }
-
-    // .bx-#{$key} {
-    //     // border: 1px solid rgba(0, 0, 0, 0.15);
-    //     background-color: $value;
-    //     // color: $fontcolor;
-    //     // transition: background-color 0.3s;
-
-    //     // &.hover:hover{
-    //     //   background-color: darken($bgcolor, 10);
-    //     // }
-    // }
-}
-
+@use "../base/vars_colors" as *;
+@use "../functions/setTextColor" as *;
+@use "../base/vars_base" as *;
+
+// --------------------------------------------------------------------------
+// Variables
+// --------------------------------------------------------------------------
+
+
+
+// ---------------- BEFORE YOU DO ANYTHING CRAZY ----------------
+//
+// base background and font color can be specified because the
+// theme function has been included to specifically override them.
+//
+// ---------------- BEFORE YOU DO ANYTHING CRAZY ----------------
+
+
+
+// ---------------- BEFORE YOU DO ANYTHING CRAZY ----------------
+//
+// this is a bit fickle and needs to be improved, it works in most
+// cases but i am sure a curve ball will jump up at some stage!
+//
+// ---------------- BEFORE YOU DO ANYTHING CRAZY ----------------
+
+// 1. remove side margins to align content to the outer bx. This allows
+//    different bg colours can be applied to individual sections
+.bx-header,
+.bx-footer {
+    margin-left: -$bx-padding; // 1
+    margin-right: -$bx-padding; // 1
+    padding: 0.75rem $bx-padding;
+}
+
+// it is best not to specify default colors here to allow themes to work
+.bx-header {
+    margin-top: -$bx-padding !important;
+    border-bottom: 1px solid;
+    border-color: inherit;
+    border-radius: $bx-border-radius $bx-border-radius 0 0;
+}
+
+.bx-footer {
+    margin-bottom: -$bx-padding !important;
+    border-top: 1px solid;
+    border-color: inherit;
+    border-radius: 0 0 $bx-border-radius $bx-border-radius;
+}
+
+:is(.bx-header + .bx-content) {
+    padding: $bx-padding;
+    margin-bottom: -$bx-padding;
+    margin-left: -$bx-padding;
+    margin-right: -$bx-padding;
+}
+

package/scss/components/_list.scss

@@ -0,0 +1,18 @@
+@use "../base/vars_all" as *;
+@use "../vars_class_names" as *;
+
+.#{$list-class} {
+    list-style: none;
+    margin: 0; // remove indent
+
+    a {
+        color: $list-link-color;
+        &:where(:hover) {
+            // $list-hover-color;
+            color: $list-link-hover-color;
+        }
+
+
+    }
+
+}

package/scss/components/_table.scss

@@ -0,0 +1,125 @@
+@use "../base/vars_base" as *;
+@use "../vars_class_names" as *;
+
+$table-color: $base-color !default;
+$table-background-color: white !default;
+
+// $table-cell-border: 1px solid $border !default;
+// $table-cell-border-width: 0 0 1px !default;
+// $table-cell-padding: 0.5em 0.75em !default;
+// $table-cell-heading-color: $text-strong !default;
+
+// $table-head-cell-border-width: 0 0 2px !default;
+// $table-head-cell-color: $text-strong !default;
+// $table-foot-cell-border-width: 2px 0 0 !default;
+// $table-foot-cell-color: $text-strong !default;
+
+// $table-head-background-color: transparent !default;
+// $table-body-background-color: transparent !default;
+// $table-foot-background-color: transparent !default;
+
+// $table-row-hover-background-color: $scheme-main-bis !default;
+
+// $table-row-active-background-color: $primary !default;
+// $table-row-active-color: $primary-invert !default;
+
+// $table-striped-row-even-background-color: $scheme-main-bis !default;
+// $table-striped-row-even-hover-background-color: $scheme-main-ter !default;
+
+.#{$table-class} {
+    background-color: $table-background-color;
+    color: $table-color;
+    //   td,
+    //   th
+    //     border: $table-cell-border
+    //     border-width: $table-cell-border-width
+    //     padding: $table-cell-padding
+    //     vertical-align: top
+    //     // Colors
+    //     @each $name, $pair in $table-colors
+    //       $color: nth($pair, 1)
+    //       $color-invert: nth($pair, 2)
+    //       &.is-#{$name}
+    //         background-color: $color
+    //         border-color: $color
+    //         color: $color-invert
+    //     // Modifiers
+    //     &.is-narrow
+    //       white-space: nowrap
+    //       width: 1%
+    //     &.is-selected
+    //       background-color: $table-row-active-background-color
+    //       color: $table-row-active-color
+    //       a,
+    //       strong
+    //         color: currentColor
+    //     &.is-vcentered
+    //       vertical-align: middle
+    //   th
+    //     color: $table-cell-heading-color
+    //     &:not([align])
+    //       text-align: inherit
+    //   tr
+    //     &.is-selected
+    //       background-color: $table-row-active-background-color
+    //       color: $table-row-active-color
+    //       a,
+    //       strong
+    //         color: currentColor
+    //       td,
+    //       th
+    //         border-color: $table-row-active-color
+    //         color: currentColor
+    //   thead
+    //     background-color: $table-head-background-color
+    //     td,
+    //     th
+    //       border-width: $table-head-cell-border-width
+    //       color: $table-head-cell-color
+    //   tfoot
+    //     background-color: $table-foot-background-color
+    //     td,
+    //     th
+    //       border-width: $table-foot-cell-border-width
+    //       color: $table-foot-cell-color
+    //   tbody
+    //     background-color: $table-body-background-color
+    //     tr
+    //       &:last-child
+    //         td,
+    //         th
+    //           border-bottom-width: 0
+    //   // Modifiers
+    //   &.is-bordered
+    //     td,
+    //     th
+    //       border-width: 1px
+    //     tr
+    //       &:last-child
+    //         td,
+    //         th
+    //           border-bottom-width: 1px
+    //   &.is-fullwidth
+    //     width: 100%
+    //   &.is-hoverable
+    //     tbody
+    //       tr:not(.is-selected)
+    //         &:hover
+    //           background-color: $table-row-hover-background-color
+    //     &.is-striped
+    //       tbody
+    //         tr:not(.is-selected)
+    //           &:hover
+    //             background-color: $table-row-hover-background-color
+    //             &:nth-child(even)
+    //               background-color: $table-striped-row-even-hover-background-color
+    //   &.is-narrow
+    //     td,
+    //     th
+    //       padding: 0.25em 0.5em
+    //   &.is-striped
+    //     tbody
+    //       tr:not(.is-selected)
+    //         &:nth-child(even)
+    //           background-color: $table-striped-row-even-background-color
+}

package/scss/dev.scss

@@ -0,0 +1,6 @@
+// "autoprefixer": "^10.4.4",
+.x{
+    background: #000;
+    // background: image-set(url(logo.png) 2x, url(logo.png) 1x);
+    display: flex;
+}

package/scss/jtb.scss

@@ -0,0 +1,87 @@
+// ---------------- BEFORE YOU DO ANYTHING CRAZY ----------------
+//
+// Rather than loading Scss stylesheets through _index.scss bring
+// each file in separately for more finite control.
+//
+// ---------------- BEFORE YOU DO ANYTHING CRAZY ----------------
+
+@use "./base/base";
+@use "./base/content_gap";
+
+@use "components";
+@use "forms";
+@use "layout";
+@use "nk";
+@use "nk_components";
+
+@forward "./utilities/display";
+@forward "./utilities/flex";
+@forward "./utilities/general";
+@forward "./utilities/grid";
+@forward "./utilities/position";
+@forward "./utilities/sizes";
+@forward "./utilities/spacing";
+@forward "./utilities/state";
+@forward "./utilities/text";
+@forward "./utilities/themes";
+@forward "./utilities/visibility";
+
+// Upgraded to new utility system
+@forward "./utilities/border";
+
+// .x {
+//     background: repeating-linear-gradient(45deg, hsl(232, 41%, 56%), hsl(232, 41%, 56%) 10px, hsl(231, 37%, 44%) 10px, hsl(231, 37%, 44%) 20px);
+// }
+
+// next-bg
+// .mates +
+// .after +
+// .special + .bx {
+//     // background-color: red;
+//     background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);
+// }
+
+// .mate + .mate{
+
+// }
+// special class for development visuals
+// .dev-boxes {
+//     div {
+//         min-height: 175px;
+//         background: var(--red);
+
+//         &:nth-of-type(2) {
+//             background: var(--green);
+//         }
+//         &:nth-of-type(3) {
+//             background: var(--blue);
+//         }
+//         &:nth-of-type(4) {
+//             background: var(--yellow);
+//         }
+//         &:nth-of-type(5) {
+//             background: var(--purple);
+//         }
+//         &:nth-of-type(6) {
+//             background: var(--cyan);
+//         }
+//         &:nth-of-type(7) {
+//             background: var(--pink);
+//         }
+//         &:nth-of-type(8) {
+//             background: var(--orange);
+//         }
+//         &:nth-of-type(9) {
+//             background: var(--dark);
+//         }
+//         &:nth-of-type(10) {
+//             background: var(--turquoise);
+//         }
+//         &:nth-of-type(11) {
+//             background: var(--darkblue);
+//         }
+//         &:nth-of-type(12) {
+//             background: var(--muted);
+//         }
+//     }
+// }