@jaisocx/css-clean-start-2 1.2.3 → 1.2.5

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 (2) hide show
  1. package/package.json +2 -2
  2. package/responsive_sizes.html +96 -98
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jaisocx/css-clean-start-2",
3
- "version": "1.2.3",
3
+ "version": "1.2.5",
4
4
  "description": "Css sites resetting default styles with main.css of few hundereds css code lines, and the very nice infrastructure for responsive sites bugfixing and fine-tuning",
5
5
  "author": "Jaisocx Company",
6
6
  "keywords": [
@@ -27,7 +27,7 @@
27
27
  ],
28
28
  "optionalDependencies": {
29
29
  "@jaisocx/media_tools_fonts_base": "~1.0.5",
30
- "@jaisocx/responsive-sizes": "~1.3.1"
30
+ "@jaisocx/responsive-sizes": "~1.3.4"
31
31
  },
32
32
  "private": false,
33
33
  "publishConfig": {
package/responsive_sizes.html CHANGED
@@ -1,24 +1,59 @@
1
1
  <!DOCTYPE html>
2
2
  <html lang="en" class="jsx example_responsive_sizes">
3
3
  <head>
4
- <title>Responsive Sizes</title>
5
4
 
6
- <meta charset="utf-8">
7
- <meta content="width=device-width, initial-scale=1.0" name="viewport">
5
+ <title> Responsive Sizes </title>
8
6
 
7
+ <base href="./">
9
8
 
10
- <base href="./" >
9
+ <meta charset="utf-8" />
10
+ <meta content="width=device-width, initial-scale=1.0" name="viewport" />
11
11
 
12
12
 
13
13
 
14
- <!--
15
- IN THE DEV CONSOLE YOU SEE
16
- 39 CSS FILES,
17
- css-clean-start and the responsive css files set
18
- easier to review one css file, for example with one media query.
19
- Best in development mode.
14
+ <!--# FAVICON -->
15
+ <!-- <link
16
+ rel="icon"
17
+ type="image/x-icon"
18
+ href="https://sandbox.brightday.email/cdn/www/media/images/favicon/Icon_Jaisocx.ico"
19
+ href-fallback="favicon/Icon_Jaisocx.ico"
20
+ onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"
21
+ /> -->
22
+
23
+ <link
24
+ rel="icon"
25
+ type="image/x-icon"
26
+ href="favicon/Icon_Sandbox_Brightday.ico"
27
+ />
28
+
29
+
30
+
31
+ <!--# CSS CLEAN START 2: html & css WHEN STARTING A SITE FROM SCRATCH -->
32
+
33
+ <!--# importing @jaisocx/css-clean-start-2 IN DEV MODE, TO RESEARCH THE .css STYLES IN BROWSER'S DEV TOOLS IN NETWORKS TAB -->
34
+ <link
35
+ rel="stylesheet"
36
+ type="text/css"
37
+ charset="utf-8"
38
+ href="MediaAndStyles/CssCleanStart_2_main_relative.css"
39
+ />
40
+
41
+ <!--# PROD MODE -->
42
+ <!--#
43
+ ALTERNATIVELY,
44
+ ONE .CSS FILE ( ca. 6_000 lines of size ca. 76 KB),
45
+ PACKED WITH CSS IMPORTER CSS FILES OF THE RESPONSIVE CSS FILES SET,
46
+ SAME TRAFFIC, HOWEVER IN THE DEV CONSOLE JUST ONE CSS FILE IS SEEN.
20
47
  -->
21
- <link rel="stylesheet" href="MediaAndStyles/CssCleanStart_2_main_relative.css">
48
+ <!--# THE SAME importing @jaisocx/css-clean-start-2 IN PROD MODE, PACKED BY @jaisocx/css-importer TOOL -->
49
+ <!-- <link-->
50
+ <!-- rel="stylesheet"-->
51
+ <!-- type="text/css"-->
52
+ <!-- charset="utf-8"-->
53
+ <!-- href="MediaAndStyles/CssCleanStart_2_main_resolved.css"-->
54
+ <!-- />-->
55
+
56
+
22
57
 
23
58
  <style>
24
59
 
@@ -66,16 +101,22 @@
66
101
  </head>
67
102
  <body>
68
103
 
69
- <main>
70
104
 
71
- <h1>Responsive Sizes</h1>
105
+ <main>
106
+
107
+ <h1> Responsive Sizes </h1>
108
+ <h2> @jaisocx/responsive-sizes </h2>
72
109
 
110
+ <description>
111
+ You get know the .css file where the @media query is set,
112
+ relevant to the currently opened browser's tab with the site being tested.
113
+ </description>
73
114
 
74
- <h2 id="responsive_sizes">Tests</h2>
115
+ <h2 id="size_name">Tests</h2>
75
116
 
76
- <pre id="info"></pre>
117
+ <pre id="info"></pre>
77
118
 
78
- </main>
119
+ </main>
79
120
 
80
121
  </body>
81
122
 
@@ -90,116 +131,73 @@
90
131
 
91
132
 
92
133
  <script>
93
- let responsiveSizesConstants = new Object();
94
- let responsiveSizesInstance = new Object();
95
134
 
96
- function addOnSite( html ) {
97
- let info = document.getElementById('info');
135
+ let globResponsiveSizesConstants = new Object();
136
+ let globResponsiveSizesInstance = new Object();
98
137
 
99
- let locHtml = html + "\n\n";
100
138
 
101
- info.insertAdjacentHTML( 'beforeEnd', locHtml );
102
- }
103
-
104
- function setOnSite( html ) {
105
- let info = document.getElementById('info');
106
139
 
140
+ function setOnSite( id, html ) {
141
+ let info = document.getElementById( id );
107
142
  info.innerHTML = html;
108
143
  }
109
144
 
110
- function applySizesInfo( force ) {
111
-
112
- let foreceUpdateSizesInfo_false = false;
113
-
114
- let html_size1 = responsiveSizesInstance.mobile( force ) ? "mobile" : "";
115
- let html_size2 = responsiveSizesInstance.tablet( foreceUpdateSizesInfo_false ) ? "tablet" : "";
116
- let html_size3 = responsiveSizesInstance.desktop( foreceUpdateSizesInfo_false ) ? "desktop" : "";
145
+ function responsiveSizeNameTestJson( recalcMediaQueriesVariables ) {
146
+ // globResponsiveSizesInstance = new ResponsiveSizes();
147
+ let getInfoShortAsArray_true = true;
148
+ let notToUpdate = false;
117
149
 
118
- let size = responsiveSizesInstance.getCssVariableArray()[4];
150
+ let sizeName = globResponsiveSizesInstance.getInfoShort (
151
+ getInfoShortAsArray_true,
152
+ recalcMediaQueriesVariables
153
+ ).join( " " );
119
154
 
120
- let html_orientation1 = responsiveSizesInstance.orientationPortrait( foreceUpdateSizesInfo_false ) ? "portrait" : "";
121
- let html_orientation2 = responsiveSizesInstance.orientationLandscape( foreceUpdateSizesInfo_false ) ? "landscape" : "";
155
+ let responsiveSizeJsonText = globResponsiveSizesInstance.toString (
156
+ notToUpdate
157
+ );
122
158
 
123
- let html_array = [
124
- html_size1,
125
- html_size2,
126
- html_size3,
127
- " ",
128
- size,
129
- " ",
130
- html_orientation1,
131
- html_orientation2,
132
- ];
159
+ setOnSite( "size_name", sizeName );
160
+ setOnSite( "info", responsiveSizeJsonText );
133
161
 
134
- let html = html_array.join( "" );
135
-
136
- let info = document.getElementById('responsive_sizes');
137
-
138
- info.innerHTML = html;
139
- }
140
-
141
-
142
- function responsiveSizesTest( force ) {
143
- // responsiveSizesInstance = new ResponsiveSizes();
144
-
145
- let responsiveSizeName = responsiveSizesInstance.getResponsiveSizeName( force );
146
-
147
- let foreceUpdateSizesInfo_false = false;
148
- let mobile = responsiveSizesInstance.mobile( foreceUpdateSizesInfo_false );
149
- let tablet = responsiveSizesInstance.tablet( foreceUpdateSizesInfo_false );
150
- let desktop = responsiveSizesInstance.desktop( foreceUpdateSizesInfo_false );
151
- let orientationPortrait = responsiveSizesInstance.orientationPortrait( foreceUpdateSizesInfo_false );
152
- let orientationLandscape = responsiveSizesInstance.orientationLandscape( foreceUpdateSizesInfo_false );
153
-
154
- let lines = {
155
- "responsiveSizeName": responsiveSizeName,
156
- "mobile": mobile,
157
- "tablet": tablet,
158
- "desktop": desktop,
159
- "orientationPortrait": orientationPortrait,
160
- "orientationLandscape": orientationLandscape
161
- };
162
- let locHtml = JSON.stringify(lines, null, 2);
163
-
164
- addOnSite( responsiveSizeName );
165
-
166
- addOnSite( locHtml );
167
- }
168
-
169
- function responsiveSizeNameTestJson() {
170
- // responsiveSizesInstance = new ResponsiveSizes();
171
- let responsiveSizeJsonText = responsiveSizesInstance.toString();
172
- setOnSite( responsiveSizeJsonText );
173
162
  }
174
163
 
175
164
  function addResizeEventHandler() {
176
- window.addEventListener('resize', () => {
177
- applySizesInfo( true );
178
- responsiveSizeNameTestJson( false );
179
- });
165
+ window.addEventListener (
166
+ "resize",
167
+ () => {
168
+ let recalcMediaQueriesVariables_true = true;
169
+ responsiveSizeNameTestJson ( recalcMediaQueriesVariables_true );
170
+ }
171
+ );
180
172
  }
181
173
 
182
174
  function assignEventsHandlers() {
183
175
  addResizeEventHandler();
184
176
  }
185
177
 
178
+ function onDOMContentLoaded() {
179
+ globResponsiveSizesConstants = new ResponsiveSizesConstants();
180
+ globResponsiveSizesInstance = new ResponsiveSizes();
181
+
182
+ globResponsiveSizesInstance
183
+ .setResponsiveSizeConstantName( "--responsive_size" )
184
+ .setResponsiveSizeSelector( "html.jsx" );
185
+
186
+ assignEventsHandlers();
187
+
188
+ let recalcMediaQueriesVariables_true = true;
189
+ responsiveSizeNameTestJson ( recalcMediaQueriesVariables_true );
190
+ }
191
+
186
192
  // Call the function to load remote data when the DOM is fully loaded
187
193
  // This ensures that the function is called after the HTML content is loaded
188
194
  // and the DOM is ready for manipulation
189
195
  document.addEventListener (
190
196
  "DOMContentLoaded",
191
197
  () => {
192
- responsiveSizesConstants = new ResponsiveSizesConstants();
193
- responsiveSizesInstance = new ResponsiveSizes();
194
- responsiveSizesInstance
195
- .setResponsiveSizeConstantName("--responsive_size")
196
- .setResponsiveSizeSelector("html.jsx");
197
198
 
198
- assignEventsHandlers();
199
+ onDOMContentLoaded();
199
200
 
200
- applySizesInfo( true );
201
- responsiveSizeNameTestJson( false );
202
- // responsiveSizesTest( false );
203
201
  }
204
202
  );
205
203
  </script>