nk_jtb 0.0.5 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (75) hide show
  1. package/.editorconfig +0 -25
  2. package/index.html +16 -0
  3. package/main.js +4 -0
  4. package/package.json +24 -25
  5. package/{src → public}/images/favicon.ico +0 -0
  6. package/{src → public}/images/hero-lg.jpg +0 -0
  7. package/{src → public}/images/hero-md.jpg +0 -0
  8. package/{src → public}/images/hero-sm.jpg +0 -0
  9. package/{src → public}/images/hero-xl.jpg +0 -0
  10. package/{src → public}/images/logo-alt.svg +0 -0
  11. package/{src → public}/images/logo.png +0 -0
  12. package/{src → public}/images/logo.svg +0 -0
  13. package/{src → public}/images/naykel-400.png +0 -0
  14. package/{src → public}/images/naykel-600.png +0 -0
  15. package/{src → public}/images/painting.jpg +0 -0
  16. package/{src/svg → public}/naykel-ui-SVG-sprite.svg +0 -0
  17. package/public/nk.svg +5 -0
  18. package/scss/_nk.scss +91 -20
  19. package/{src/scss → scss}/base/_base.scss +0 -0
  20. package/{src/scss → scss}/base/_content_gap.scss +2 -1
  21. package/{src/scss → scss}/base/_root.scss +0 -0
  22. package/{src/scss → scss}/base/_vars_all.scss +0 -0
  23. package/{src/scss → scss}/base/_vars_base.scss +0 -0
  24. package/{src/scss → scss}/base/_vars_class_names.scss +0 -0
  25. package/{src/scss → scss}/base/_vars_colors.scss +0 -0
  26. package/{src/scss → scss}/base/_vars_components.scss +0 -0
  27. package/{src/scss → scss}/base/_vars_utility_maps.scss +0 -0
  28. package/{src/scss → scss}/components/_accordion.scss +0 -0
  29. package/scss/components/_box.scss +27 -23
  30. package/{src/scss → scss}/components/_button.scss +0 -0
  31. package/{src/scss → scss}/components/_dropdown.scss +2 -1
  32. package/{src/scss → scss}/components/_hero.scss +0 -0
  33. package/{src/scss → scss}/components/_icon.scss +0 -0
  34. package/{src/scss → scss}/components/_menu.scss +0 -0
  35. package/{src/scss → scss}/components/_navbar.scss +0 -0
  36. package/{src/scss → scss}/components/_other.scss +0 -0
  37. package/{src/scss → scss}/components/_sidebar.scss +0 -0
  38. package/{src/scss → scss}/forms/_control.scss +0 -0
  39. package/{src/scss → scss}/forms/_file.scss +0 -0
  40. package/{src/scss → scss}/forms/_form.scss +0 -0
  41. package/{src/scss → scss}/forms/_index.scss +0 -0
  42. package/{src/scss → scss}/functions/_helpers.scss +0 -0
  43. package/{src/scss → scss}/functions/_setTextColor.scss +0 -0
  44. package/scss/jtb.scss +37 -79
  45. package/{src/scss → scss}/layout/_grid_old.scss +0 -0
  46. package/{src/scss → scss}/mixins/_colorSchemeSimple.scss +0 -0
  47. package/{src/scss → scss}/mixins/_colorShades.scss +0 -0
  48. package/{src/scss → scss}/mixins/_createState.scss +0 -0
  49. package/{src/scss → scss}/mixins/_makeColorSchemeAdvanced.scss +0 -0
  50. package/{src/scss → scss}/mixins/_makeCssPropertyMixins.scss +0 -0
  51. package/{src/scss → scss}/mixins/_makeResponsivePositionUtilities.scss +0 -0
  52. package/{src/scss → scss}/mixins/_media.scss +0 -0
  53. package/{src/scss → scss}/mixins/_positionUtilityClasses.scss +0 -0
  54. package/{src/scss → scss}/utilities/_border.scss +0 -0
  55. package/{src/scss → scss}/utilities/_display.scss +0 -0
  56. package/{src/scss → scss}/utilities/_flex.scss +0 -0
  57. package/{src/scss → scss}/utilities/_general.scss +10 -8
  58. package/{src/scss → scss}/utilities/_grid.scss +0 -0
  59. package/{src/scss → scss}/utilities/_position.scss +37 -16
  60. package/{src/scss → scss}/utilities/_sizes.scss +14 -14
  61. package/{src/scss → scss}/utilities/_spacing.scss +22 -16
  62. package/{src/scss → scss}/utilities/_state.scss +5 -5
  63. package/{src/scss → scss}/utilities/_text.scss +0 -0
  64. package/{src/scss → scss}/utilities/_themes.scss +0 -0
  65. package/{src/index.html → tests.html} +5 -10
  66. package/examples/masonry.html +0 -0
  67. package/examples/visibility.html +0 -122
  68. package/scss/_nk_components.scss +0 -32
  69. package/scss/components/_list.scss +0 -18
  70. package/scss/components/_table.scss +0 -125
  71. package/scss/dev.scss +0 -6
  72. package/scss/mixins/_makeMagicUtilities.scss +0 -25
  73. package/src/scss/_nk.scss +0 -104
  74. package/src/scss/components/_box.scss +0 -26
  75. package/src/scss/jtb.scss +0 -45
package/.editorconfig CHANGED
@@ -7,28 +7,3 @@ insert_final_newline = true
7
7
  indent_style = space
8
8
  indent_size = 4
9
9
  trim_trailing_whitespace = true
10
-
11
- # [*.php]
12
- # indent_size = 4
13
-
14
- # [*.vue]
15
- # indent_size = 2
16
-
17
- # [*.json]
18
- # indent_size = 4
19
-
20
- # [*.blade.php]
21
- # indent_size = 4
22
-
23
- # [*.scss]
24
- # indent_size = 4
25
-
26
- # [*.html]
27
- # indent_size = 4
28
-
29
- # [*.md]
30
- # indent_size = 4
31
- # trim_trailing_whitespace = false
32
-
33
- # [*.yml]
34
- # indent_size = 2
package/index.html ADDED
@@ -0,0 +1,16 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8" />
6
+ <link rel="icon" type="image/svg+xml" href="/nk.svg" />
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8
+ <title>NayKel JTB</title>
9
+ </head>
10
+
11
+ <body>
12
+ <div id="app" class="pxy-5"></div>
13
+ <script type="module" src="/main.js"></script>
14
+ </body>
15
+
16
+ </html>
package/main.js ADDED
@@ -0,0 +1,4 @@
1
+ import './scss/jtb.scss'
2
+
3
+ document.querySelector('#app').innerHTML = `Hello`
4
+
package/package.json CHANGED
@@ -1,27 +1,26 @@
1
1
  {
2
- "name": "nk_jtb",
3
- "description": "Yet another utility based framework.",
4
- "version": "0.0.5",
5
- "repository": {
6
- "type": "git",
7
- "url": "https://github.com/naykel76/nk_jtb.git"
8
- },
9
- "scripts": {
10
- "watch": "sass --watch --no-source-map src/scss/jtb.scss:dist/css/jtb.css",
11
- "border": "sass --watch --no-source-map src/scss/utilities/_border.scss:dist/css/border.css",
12
- "flex": "sass --watch --no-source-map src/scss/utilities/_flex.scss:dist/css/flex.css",
13
- "grid": "sass --watch --no-source-map src/scss/utilities/_grid.scss:dist/css/grid.css",
14
- "spacing": "sass --watch --no-source-map src/scss/utilities/_spacing.scss:dist/css/spacing.css",
15
- "themes": "sass --watch --no-source-map src/scss/utilities/_themes.scss:dist/css/themes.css",
16
- "dev": "parcel ./src/index.html --open",
17
- "build": "parcel build index.html"
18
- },
19
- "keywords": [],
20
- "author": "",
21
- "license": "ISC",
22
- "devDependencies": {
23
- "@parcel/transformer-sass": "^2.5.0",
24
- "parcel": "^2.5.0",
25
- "sass": "^1.51.0"
26
- }
2
+ "name": "nk_jtb",
3
+ "description": "Yet another utility based framework.",
4
+ "version": "0.2.0",
5
+ "repository": {
6
+ "type": "git",
7
+ "url": "https://github.com/naykel76/nk_jtb.git"
8
+ },
9
+ "private": false,
10
+ "type": "module",
11
+ "scripts": {
12
+ "watch": "sass --watch --no-source-map ./scss/jtb.scss:dist/css/jtb.css",
13
+ "border": "sass --watch --no-source-map ./scss/utilities/_border.scss:dist/css/border.css",
14
+ "flex": "sass --watch --no-source-map ./scss/utilities/_flex.scss:dist/css/flex.css",
15
+ "grid": "sass --watch --no-source-map ./scss/utilities/_grid.scss:dist/css/grid.css",
16
+ "spacing": "sass --watch --no-source-map ./scss/utilities/_spacing.scss:dist/css/spacing.css",
17
+ "themes": "sass --watch --no-source-map ./scss/utilities/_themes.scss:dist/css/themes.css",
18
+ "dev": "vite",
19
+ "build": "vite build",
20
+ "preview": "vite preview"
21
+ },
22
+ "devDependencies": {
23
+ "sass": "^1.54.0",
24
+ "vite": "^3.0.0"
25
+ }
27
26
  }
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
package/public/nk.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg id="naykel" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
2
+ <path id="Path_38271" data-name="Path 38271" d="M6.13,24l10.245-2.7H3.185c-.282,0-.507-.3-.507-.675h0V9.273L7.887,20.627h2.676V3.372c0-.372.226-.675.508-.675h6.317L12.428,0h-2.5C8.8,0,7.895,1.208,7.895,2.7h0V14.75L2.676,3.372H0V21.305C0,22.79.909,24,2.029,24h4.1Z" fill="#13365b"/>
3
+ <path id="Path_38272" data-name="Path 38272" d="M14.9,13.708,13.591,15.7v4.93H11.068V3.372h2.523v7.821L14.7,9.048,17.82,3.372h3.1L16.576,11.04l4.472,9.589h-3L14.9,13.708" fill="#d72538"/>
4
+ <path id="Path_38273" data-name="Path 38273" d="M21.97,0H12.428l4.958,2.7h3.449a.608.608,0,0,1,.51.673V20.629a.611.611,0,0,1-.507.674H16.375L6.13,24H21.97C23.092,24,24,22.79,24,21.3V2.7C24,1.208,23.092,0,21.97,0Z" fill="#d72538"/>
5
+ </svg>
package/scss/_nk.scss CHANGED
@@ -1,33 +1,104 @@
1
+ @use "./base/vars_all" as *;
2
+ @use "./mixins/media" as *;
1
3
 
4
+ // ==========================================================================
5
+ // -- NAYKEL STYLES --
6
+ // ==========================================================================
7
+ // These styles are specific to naykel template layouts
2
8
 
9
+ $header-bg: #074464 !default;
3
10
 
4
- // NK Documentation Styles
5
- // --------------------------------------------------------------------------
11
+ $main-bg: transparent !default;
6
12
 
7
- .icon-box {
8
- border: 1px solid #ccc;
9
- padding: 0.5rem 0;
13
+ $footer-bg: #303030 !default;
14
+ $footer-text-color: rgb(204, 204, 204) !default;
10
15
 
11
- svg {
12
- height: 72px !important;
13
- }
16
+ $copyright-bg: darken($footer-bg, 2%) !default;
17
+ $copyright-text-color: $footer-text-color !default;
18
+
19
+ // ---------------- BEFORE YOU DO ANYTHING CRAZY ----------------
20
+ //
21
+ // It is best not to add padding to the main mk-elements, as it
22
+ // makes it more difficult to add extra elements.
23
+ //
24
+ // ---------------- BEFORE YOU DO ANYTHING CRAZY ----------------
25
+
26
+ // NK::TD this could be made into a special layout because it
27
+ // could be a common pattern. Another example would be the navbar
28
+
29
+ #nk-header {
30
+ // background-color: $header-bg;
31
+ // When is adding padding here not a good idea?
32
+ // Why do I keep changing my mind?
33
+ // Should I just use a utility class?
34
+ padding: 2rem;
35
+ }
14
36
 
15
- .icon {
16
- width: 150px; // icon container width
37
+ #nk-header,
38
+ #nk-header > .#{$container-class} {
39
+ display: flex;
40
+ justify-content: space-between;
41
+ align-items: flex-start;
42
+ grid-gap: 2.5rem;
43
+ flex-wrap: wrap;
44
+
45
+ #search {
46
+ display: flex;
47
+ flex: 1 1 auto;
48
+
49
+ input {
50
+ width: 100%;
51
+ margin-right: 4px;
52
+ }
53
+
54
+ @include up-to-desktop {
55
+ flex: 1 1 100%;
56
+ order: 3;
57
+ }
17
58
  }
59
+ }
18
60
 
19
- .icon-title {
20
- display: block;
21
- text-align: center;
22
- font-size: 0.875rem;
23
- margin-top: -0.5rem;
61
+ #nk-main {
62
+ flex: 1; // 1. allow to grow to fill height
63
+ background-color: $main-bg;
64
+ margin: 0;
65
+ }
66
+
67
+ #nk-footer {
68
+ background-color: $footer-bg;
69
+ margin-top: auto; // forces footer to the bottom
70
+ color: #ccc;
71
+
72
+ a {
73
+ color: #ccc;
74
+ font-size: 0.8rem;
75
+
76
+ &:hover {
77
+ color: #ddd;
78
+ }
24
79
  }
25
80
  }
26
81
 
27
- // contact form
28
- // ------------------------------------
82
+ .copyright {
83
+ color: $copyright-text-color;
84
+ background-color: $copyright-bg;
85
+ padding: 0.5rem;
86
+ text-align: center;
87
+ font-size: 0.9rem;
88
+ border: 0; // remove border from colour scheme
89
+ width: 100%;
90
+ }
29
91
 
30
- // fix google captch
31
- .g-recaptcha {
32
- max-width: 200px;
92
+ .logo a:hover {
93
+ background: none;
94
+ }
95
+
96
+ // ==========================================================================
97
+ // -- NAYKEL ADMIN STYLES --
98
+ // ==========================================================================
99
+
100
+ .nk-admin {
101
+ .navbar {
102
+ background-image: linear-gradient(to right top, #20242a, #1e1f27, #1e1a23, #1f141d, #1f0e16, #250e15, #2c0e12, #310f0c, #40140e, #4e1a0e, #5c210c, #692906);
103
+ }
33
104
  }
File without changes
@@ -5,7 +5,8 @@
5
5
  margin-top: $content-gap;
6
6
  }
7
7
 
8
- :where(.flex, .grid, .bx, .bx-title, .bx-content, .frm-row, .container) + :where(*) {
8
+
9
+ :where(.flex, .grid, .bx, .bx-title, .bx-content, .frm-row, .container) + :where(*):not(.dd-content) {
9
10
  margin-top: $content-gap;
10
11
  }
11
12
 
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
@@ -1,50 +1,54 @@
1
- @use "../base/vars_colors" as *;
1
+ @use "../base/vars_all" as *;
2
2
  @use "../functions/setTextColor" as *;
3
- @use "../base/vars_base" as *;
4
3
 
5
- // --------------------------------------------------------------------------
6
- // Variables
7
- // --------------------------------------------------------------------------
8
-
9
-
10
-
11
- // ---------------- BEFORE YOU DO ANYTHING CRAZY ----------------
12
- //
13
- // base background and font color can be specified because the
14
- // theme function has been included to specifically override them.
15
- //
16
- // ---------------- BEFORE YOU DO ANYTHING CRAZY ----------------
4
+ %box {
5
+ padding: $bx-padding;
6
+ border-radius: $bx-border-radius;
7
+ border: 1px solid rgba(0, 0, 0, 0.125);
8
+ box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
9
+ background-color: $bx-bg;
10
+ color: $base-color;
11
+ }
17
12
 
13
+ .bx {
14
+ @extend %box;
18
15
 
16
+ // remove margin from any first element in a box to allow box padding to do the work
17
+ & > *:first-child {
18
+ margin-top: 0;
19
+ }
19
20
 
20
- // ---------------- BEFORE YOU DO ANYTHING CRAZY ----------------
21
- //
22
- // this is a bit fickle and needs to be improved, it works in most
23
- // cases but i am sure a curve ball will jump up at some stage!
24
- //
25
- // ---------------- BEFORE YOU DO ANYTHING CRAZY ----------------
21
+ &-title {
22
+ font-size: $bx-title-font-size;
23
+ font-weight: $bx-title-font-weight;
24
+ line-height: 1.2;
25
+ }
26
+ }
26
27
 
27
28
  // 1. remove side margins to align content to the outer bx. This allows
28
29
  // different bg colours can be applied to individual sections
30
+
31
+
29
32
  .bx-header,
30
33
  .bx-footer {
31
34
  margin-left: -$bx-padding; // 1
32
35
  margin-right: -$bx-padding; // 1
36
+ margin-right: -$bx-padding; // 1
33
37
  padding: 0.75rem $bx-padding;
34
38
  }
35
39
 
36
- // it is best not to specify default colors here to allow themes to work
37
40
  .bx-header {
38
41
  margin-top: -$bx-padding !important;
39
42
  border-bottom: 1px solid;
40
- border-color: inherit;
43
+ border-color: rgba(0, 0, 0, 0.15);
41
44
  border-radius: $bx-border-radius $bx-border-radius 0 0;
45
+ border-left: none;
42
46
  }
43
47
 
44
48
  .bx-footer {
45
49
  margin-bottom: -$bx-padding !important;
46
50
  border-top: 1px solid;
47
- border-color: inherit;
51
+ border-color: rgba(0, 0, 0, 0.15);
48
52
  border-radius: 0 0 $bx-border-radius $bx-border-radius;
49
53
  }
50
54
 
File without changes
@@ -15,7 +15,8 @@
15
15
  visibility: hidden;
16
16
  opacity: 0;
17
17
  transform: translateY(-2em);
18
- top: calc(100% + $dropdown-toggle-gap); // push to bottom of toggle element
18
+ top: calc(100% + 4px); // push to bottom of toggle element
19
+ // top: calc(100% + $dropdown-toggle-gap); // push to bottom of toggle element
19
20
  left: 0;
20
21
  transition: all 0.1s ease-in-out 1s, visibility 0s linear 0.1s, z-index 0s linear 0.01s;
21
22
  z-index: 1000;
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
package/scss/jtb.scss CHANGED
@@ -5,83 +5,41 @@
5
5
  //
6
6
  // ---------------- BEFORE YOU DO ANYTHING CRAZY ----------------
7
7
 
8
- @use "./base/base";
9
- @use "./base/content_gap";
8
+ @use "base/root";
9
+ @use "base/base";
10
+ @use "base/content_gap";
11
+
12
+ // @use "nk_components";
13
+ @forward "nk";
14
+ @forward "forms";
15
+ @forward "layout/grid_old";
16
+
17
+
18
+
19
+ @forward "components/accordion";
20
+ @forward "components/box";
21
+ @forward "components/button";
22
+ @forward "components/dropdown";
23
+ @forward "components/hero"; // has problems with img
24
+ @forward "components/icon";
25
+ @forward "components/menu";
26
+ @forward "components/navbar";
27
+ @forward "components/other";
28
+ @forward "components/sidebar";
29
+
30
+
31
+
32
+ // @forward "utilities/visibility";
33
+ // why forward???
34
+ @forward "utilities/border";
35
+ @forward "utilities/display";
36
+ @forward "utilities/flex";
37
+ @forward "utilities/general";
38
+ @forward "utilities/grid";
39
+ @forward "utilities/position";
40
+ @forward "utilities/sizes";
41
+ @forward "utilities/spacing";
42
+ @forward "utilities/state";
43
+ @forward "utilities/text";
44
+ @forward "utilities/themes";
10
45
 
11
- @use "components";
12
- @use "forms";
13
- @use "layout";
14
- @use "nk";
15
- @use "nk_components";
16
-
17
- @forward "./utilities/display";
18
- @forward "./utilities/flex";
19
- @forward "./utilities/general";
20
- @forward "./utilities/grid";
21
- @forward "./utilities/position";
22
- @forward "./utilities/sizes";
23
- @forward "./utilities/spacing";
24
- @forward "./utilities/state";
25
- @forward "./utilities/text";
26
- @forward "./utilities/themes";
27
- @forward "./utilities/visibility";
28
-
29
- // Upgraded to new utility system
30
- @forward "./utilities/border";
31
-
32
- // .x {
33
- // background: repeating-linear-gradient(45deg, hsl(232, 41%, 56%), hsl(232, 41%, 56%) 10px, hsl(231, 37%, 44%) 10px, hsl(231, 37%, 44%) 20px);
34
- // }
35
-
36
- // next-bg
37
- // .mates +
38
- // .after +
39
- // .special + .bx {
40
- // // background-color: red;
41
- // background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);
42
- // }
43
-
44
- // .mate + .mate{
45
-
46
- // }
47
- // special class for development visuals
48
- // .dev-boxes {
49
- // div {
50
- // min-height: 175px;
51
- // background: var(--red);
52
-
53
- // &:nth-of-type(2) {
54
- // background: var(--green);
55
- // }
56
- // &:nth-of-type(3) {
57
- // background: var(--blue);
58
- // }
59
- // &:nth-of-type(4) {
60
- // background: var(--yellow);
61
- // }
62
- // &:nth-of-type(5) {
63
- // background: var(--purple);
64
- // }
65
- // &:nth-of-type(6) {
66
- // background: var(--cyan);
67
- // }
68
- // &:nth-of-type(7) {
69
- // background: var(--pink);
70
- // }
71
- // &:nth-of-type(8) {
72
- // background: var(--orange);
73
- // }
74
- // &:nth-of-type(9) {
75
- // background: var(--dark);
76
- // }
77
- // &:nth-of-type(10) {
78
- // background: var(--turquoise);
79
- // }
80
- // &:nth-of-type(11) {
81
- // background: var(--darkblue);
82
- // }
83
- // &:nth-of-type(12) {
84
- // background: var(--muted);
85
- // }
86
- // }
87
- // }
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
@@ -26,6 +26,11 @@
26
26
  z-index: 1000;
27
27
  }
28
28
 
29
+ .cover {
30
+ background-repeat: no-repeat;
31
+ background-position: center;
32
+ background-size: cover;
33
+ }
29
34
  //
30
35
  //
31
36
  //
@@ -46,18 +51,15 @@
46
51
  border-radius: 100vmax;
47
52
  }
48
53
 
49
- :where(.overlay) {
54
+ .overlay {
50
55
  position: fixed;
51
56
  top: 0;
57
+ bottom: 0;
52
58
  left: 0;
53
- width: 100%;
54
- height: 100%;
55
- background: rgba(31, 41, 55, 0.6);
56
- display: flex;
57
- justify-content: center;
58
- align-items: flex-start;
59
+ right: 0;
60
+ overflow-y: auto;
61
+ background: rgba(31, 41, 155, 0.6);
59
62
  z-index: 1000;
60
- overflow-y: scroll;
61
63
  }
62
64
 
63
65
  .cursor-pointer {
File without changes