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

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 +91 -97
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.4",
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.3"
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>
72
106
 
107
+ <h1> Responsive Sizes </h1>
108
+ <h2> @jaisocx/responsive-sizes </h2>
73
109
 
74
- <h2 id="responsive_sizes">Tests</h2>
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>
75
114
 
76
- <pre id="info"></pre>
115
+ <h2 id="size_name">Tests</h2>
77
116
 
78
- </main>
117
+ <pre id="info"></pre>
118
+
119
+ </main>
79
120
 
80
121
  </body>
81
122
 
@@ -90,93 +131,44 @@
90
131
 
91
132
 
92
133
  <script>
93
- let responsiveSizesConstants = new Object();
94
- let responsiveSizesInstance = new Object();
95
-
96
- function addOnSite( html ) {
97
- let info = document.getElementById('info');
98
134
 
99
- let locHtml = html + "\n\n";
135
+ let globResponsiveSizesConstants = new Object();
136
+ let globResponsiveSizesInstance = new Object();
100
137
 
101
- info.insertAdjacentHTML( 'beforeEnd', locHtml );
102
- }
103
138
 
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" : "";
117
-
118
- let size = responsiveSizesInstance.getCssVariableArray()[4];
119
-
120
- let html_orientation1 = responsiveSizesInstance.orientationPortrait( foreceUpdateSizesInfo_false ) ? "portrait" : "";
121
- let html_orientation2 = responsiveSizesInstance.orientationLandscape( foreceUpdateSizesInfo_false ) ? "landscape" : "";
145
+ function responsiveSizeNameTestJson( recalcMediaQueriesVariables ) {
146
+ // globResponsiveSizesInstance = new ResponsiveSizes();
147
+ let getInfoShortAsArray_true = true;
148
+ let notToUpdate = false;
122
149
 
123
- let html_array = [
124
- html_size1,
125
- html_size2,
126
- html_size3,
127
- " ",
128
- size,
129
- " ",
130
- html_orientation1,
131
- html_orientation2,
132
- ];
150
+ let sizeName = globResponsiveSizesInstance.getInfoShort (
151
+ getInfoShortAsArray_true,
152
+ recalcMediaQueriesVariables
153
+ ).join( " " );
133
154
 
134
- let html = html_array.join( "" );
155
+ let responsiveSizeJsonText = globResponsiveSizesInstance.toString (
156
+ notToUpdate
157
+ );
135
158
 
136
- let info = document.getElementById('responsive_sizes');
159
+ setOnSite( "size_name", sizeName );
160
+ setOnSite( "info", responsiveSizeJsonText );
137
161
 
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() {
@@ -189,17 +181,19 @@
189
181
  document.addEventListener (
190
182
  "DOMContentLoaded",
191
183
  () => {
192
- responsiveSizesConstants = new ResponsiveSizesConstants();
193
- responsiveSizesInstance = new ResponsiveSizes();
194
- responsiveSizesInstance
195
- .setResponsiveSizeConstantName("--responsive_size")
196
- .setResponsiveSizeSelector("html.jsx");
184
+
185
+ globResponsiveSizesConstants = new ResponsiveSizesConstants();
186
+ globResponsiveSizesInstance = new ResponsiveSizes();
187
+
188
+ globResponsiveSizesInstance
189
+ .setResponsiveSizeConstantName( "--responsive_size" )
190
+ .setResponsiveSizeSelector( "html.jsx" );
197
191
 
198
192
  assignEventsHandlers();
199
193
 
200
- applySizesInfo( true );
201
- responsiveSizeNameTestJson( false );
202
- // responsiveSizesTest( false );
194
+ let recalcMediaQueriesVariables_true = true;
195
+ responsiveSizeNameTestJson ( recalcMediaQueriesVariables_true );
196
+
203
197
  }
204
198
  );
205
199
  </script>