@jaisocx/css-clean-start-2 1.1.4 → 1.1.7

package/MediaAndStyles/CssCleanStart_2_main.css

@@ -43,6 +43,7 @@ to override the few styles, already set in the theme_base.
   margin:       var(--jsx--css-clean-start-2--all-tags--margin);
 
   font-family:  var(--jsx--css-clean-start-2--all-tags--font-family);
+  font-size:  var(--jsx--css-clean-start-2--all-tags--font-size);
   line-height:  var(--jsx--css-clean-start-2--all-tags--line-height);
 
 }
@@ -114,8 +115,7 @@ html.jsx body {
 
 
 html.jsx body main {
-  /* display:      var(--jsx--css-clean-start-2--block-tags--display);
-  box-sizing:   var(--jsx--css-clean-start-2--all-tags--box-sizing); */
+
   margin:       var(--jsx--css-clean-start-2--site--margin);
   padding:      var(--jsx--css-clean-start-2--site--padding);
 

package/MediaAndStyles/CssCleanStart_2_main_resolved.css

@@ -205,11 +205,12 @@
 
   --jsx--css-clean-start-2--all-tags--margin: 0 0 0 0;
   --jsx--css-clean-start-2--h--margin: 0 0 0 0;
+  --jsx--css-clean-start-2--ul--margin-left: 2rem;
   --jsx--css-clean-start-2--p--margin: 0.9rem 0 0.9rem 0;
 
   --jsx--css-clean-start-2--all-tags--color: black;
 
-  --jsx--css-clean-start-2--all-tags--font-family: "Franklin Gothic Medium", Verdana, sans-serif;
+  --jsx--css-clean-start-2--all-tags--font-family: LibreFranklin, Tahoma, Verdana;
   --jsx--css-clean-start-2--pre--font-family: "Courier New", Courier, monospace;
 
   --jsx--css-clean-start-2--all-tags--font-size: 0.85rem;
@@ -8658,11 +8659,18 @@ html.jsx body main {
   list-style: decimal inside;
 }
 
+.jsx ul ul,
+.jsx ul ol,
+.jsx ol ul,
+.jsx ol ol {
+  margin-left: var(--jsx--css-clean-start-2--ul--margin-left);
+}
+
 
 
 .jsx ul li,
 .jsx ol li {
-  display:         list-item;
+  display:   list-item;
 }
 
 
@@ -8677,6 +8685,7 @@ html.jsx body main {
 
   list-style-type: none;
   display:         var(--jsx--css-clean-start-2--block-tags--display, block);
+  margin-left:     var(--jsx--css-clean-start-2--all-tags--margin);
 
 }
 

package/MediaAndStyles/CssCleanStart_2_main_resolved_minimal.css

@@ -206,11 +206,12 @@
 
   --jsx--css-clean-start-2--all-tags--margin: 0 0 0 0;
   --jsx--css-clean-start-2--h--margin: 0 0 0 0;
+  --jsx--css-clean-start-2--ul--margin-left: 2rem;
   --jsx--css-clean-start-2--p--margin: 0.9rem 0 0.9rem 0;
 
   --jsx--css-clean-start-2--all-tags--color: black;
 
-  --jsx--css-clean-start-2--all-tags--font-family: "Franklin Gothic Medium", Verdana, sans-serif;
+  --jsx--css-clean-start-2--all-tags--font-family: LibreFranklin, Tahoma, Verdana;
   --jsx--css-clean-start-2--pre--font-family: "Courier New", Courier, monospace;
 
   --jsx--css-clean-start-2--all-tags--font-size: 0.85rem;
@@ -4605,11 +4606,18 @@ html.jsx body main {
   list-style: decimal inside;
 }
 
+.jsx ul ul,
+.jsx ul ol,
+.jsx ol ul,
+.jsx ol ol {
+  margin-left: var(--jsx--css-clean-start-2--ul--margin-left);
+}
+
 
 
 .jsx ul li,
 .jsx ol li {
-  display:         list-item;
+  display:   list-item;
 }
 
 
@@ -4624,6 +4632,7 @@ html.jsx body main {
 
   list-style-type: none;
   display:         var(--jsx--css-clean-start-2--block-tags--display, block);
+  margin-left:     var(--jsx--css-clean-start-2--all-tags--margin);
 
 }
 

package/MediaAndStyles/themes/theme_base/CssCleanStart_2_theme_base_main.css

@@ -85,7 +85,7 @@
 
   --jsx--css-clean-start-2--all-tags--color: black;
 
-  --jsx--css-clean-start-2--all-tags--font-family: "Franklin Gothic Medium", Verdana, sans-serif;
+  --jsx--css-clean-start-2--all-tags--font-family: LibreFranklin, Tahoma, Verdana;
   --jsx--css-clean-start-2--pre--font-family: "Courier New", Courier, monospace;
 
   --jsx--css-clean-start-2--all-tags--font-size: 0.85rem;

package/README.md

@@ -30,9 +30,9 @@ several .css files will be loaded with size of very few KB.
 
 
 
-## The latest .tgz archive (v.1.1.0 17th of August 2025)
+## The latest .tgz archive (v.1.1.5 25th of August 2025)
 
-[https://sandbox.brightday.email/sites_tools/css_tools/CssCleanStart_2/jaisocx-css-clean-start-2-1.1.0.tgz](https://sandbox.brightday.email/sites_tools/css_tools/CssCleanStart_2/jaisocx-css-clean-start-2-1.1.0.tgz)
+[https://sandbox.brightday.email/sites_tools/css_tools/CssCleanStart_2/jaisocx-css-clean-start-2-1.1.5.tgz](https://sandbox.brightday.email/sites_tools/css_tools/CssCleanStart_2/jaisocx-css-clean-start-2-1.1.5.tgz)
 
 
 

package/css_clean_start_2.example.html

@@ -0,0 +1,264 @@
+<!DOCTYPE html>
+<html lang="en" class="jsx example">
+<head>
+
+  <title>CssCleanStart 2</title>
+
+  <base href="./">
+
+  <meta charset="utf-8" />
+  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+
+
+
+    <!--# FAVICON -->
+    <!-- <link
+      rel="icon"
+      type="image/x-icon"
+      href="https://sandbox.brightday.email/cdn/www/media/images/favicon/Icon_Jaisocx.ico"
+      href-fallback="favicon/Icon_Jaisocx.ico"
+      onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"
+    /> -->
+
+    <link
+      rel="icon"
+      type="image/x-icon"
+      href="https://sandbox.brightday.email/cdn/www/media/images/favicon/Icon_Sandbox_Brightday.ico"
+      href-fallback="favicon/Icon_Sandbox_Brightday.ico"
+      onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"
+    />
+
+
+
+    <!--# FONTS PRELOAD WITHOUT JAVASCRIPT CALL -->
+    <link
+      fetchpriority="high"
+      rel="preload"
+      as="font"
+      type="font/ttf"
+      href="https://sandbox.brightday.email/cdn/www/fonts/LibreFranklin/static/LibreFranklin-SemiBold.ttf"
+    />
+
+    <link
+      fetchpriority="high"
+      rel="preload"
+      as="font"
+      type="font/ttf"
+      href="https://sandbox.brightday.email/cdn/www/fonts/LibreFranklin/static/LibreFranklin-Regular.ttf"
+    />
+
+    <!--# CSS FOR FONTS -->
+    <link
+      rel="stylesheet"
+      type="text/css"
+      charset="utf-8"
+      href="https://sandbox.brightday.email/cdn/www/fonts_css/font_LibreFranklin_cdn.css"
+    />
+
+
+
+    <!--# CSS CLEAN START 2: html & css WHEN STARTING A SITE FROM SCRATCH -->
+
+    <!--# importing @jaisocx/css-clean-start-2 IN DEV MODE, TO RESEARCH THE .css STYLES IN BROWSER'S DEV TOOLS IN NETWORKS TAB  -->
+    <!-- <link
+      rel="stylesheet"
+      type="text/css"
+      charset="utf-8"
+      href="MediaAndStyles/CssCleanStart_2_main_relative.css"
+    /> -->
+
+    <!--# THE SAME importing @jaisocx/css-clean-start-2 IN PROD MODE, PACKED BY @jaisocx/css-importer TOOL  -->
+    <link
+      rel="stylesheet"
+      type="text/css"
+      charset="utf-8"
+      href="MediaAndStyles/CssCleanStart_2_main_resolved_minimal.css"
+    />
+
+
+
+    <style>
+
+      .jsx.example {
+        --jsx--css-clean-start-2--site--margin: 0 auto 0 auto;
+        --jsx--css-clean-start-2--site--padding: 2rem;
+
+        --jsx--css-clean-start-2--h--margin: 1.4rem 0 0.2rem 0;
+
+        --jsx--css-clean-start-2--h1--color: #6c6c6c;
+        --jsx--css-clean-start-2--h2--color: #5c7c5c;
+        --jsx--css-clean-start-2--h3--color: #5e9e5e;
+
+        --jsx--css-clean-start-2--h1--font-size: 1.75rem;
+        --jsx--css-clean-start-2--h1--line-height: 1.99rem;
+
+        --jsx--css-clean-start-2--h2--font-size: 1.3rem;
+        --jsx--css-clean-start-2--h2--line-height: 1.49rem;
+
+        --jsx--css-clean-start-2--h3--font-size: 1rem;
+        --jsx--css-clean-start-2--h3--line-height: 1.4rem;
+      }
+
+    </style>
+
+
+
+  <head>
+
+  <body>
+
+    <main>
+
+    <h1>Css Clean Start 2</h1>
+    <h2>@jaisocx/css-clean-start-2</h2>
+    <h3>css_clean_start_2.example</h3>
+    <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
+    </description>
+
+
+
+    <h2>1. in a custom html tag, 2 span tags</h2>
+
+    <h3>1.1. raw html preview</h3>
+    <pre>
+&lt;text&gt;
+  &lt;span&gt;Hello&lt;/span&gt;
+  &lt;span&gt;How are You&lt;/span&gt;
+&lt;/text&gt;</pre>
+
+    <h3>1.2. rendered html view</h3>
+    <text>
+      <span>Hello</span>
+      <span>How are You</span>
+    </text>
+
+
+
+    <h2>2. &lt;p&gt; text blocks</h2>
+    <text>
+      <p>sentence line 1. sentence line 1. sentence line 1. sentence line 1. sentence line 1.</p>
+      <p>sentence line 2. sentence line 2. sentence line 2. sentence line 2. sentence line 2. sentence line 2. sentence line 2. sentence line 2. sentence line 2.</p>
+      <p>sentence line 3. sentence line 3. sentence line 3. sentence line 3. sentence line 3. sentence line 3.</p>
+    </text>
+
+
+
+    <h2>3. &lt;ul&gt;</h2>
+
+    <h3>3.1. &lt;ul&gt;</h3>
+    <ul>
+      <li>
+        <a href="javascript: void(0);">link example 1</a>
+      </li>
+      <li>
+        <a href="javascript: void(0);">link example 2</a>
+      </li>
+      <li>
+        <a href="javascript: void(0);">link example 3</a>
+      </li>
+    </ul>
+
+
+
+    <h3>3.2. &lt;ul class="ul-reset"&gt;</h3>
+
+    <nav class="ul-reset">
+      <ul>
+        <li>
+          <a href="javascript: void(0);">link example 1</a>
+        </li>
+        <li>
+          <a href="javascript: void(0);">link example 2</a>
+        </li>
+        <li>
+          <a href="javascript: void(0);">link example 3</a>
+        </li>
+      </ul>
+    </nav>
+
+
+    <h2>4. &lt;table&gt;</h2>
+    <table>
+      <!-- Table Caption -->
+      <caption>Table Caption</caption>
+
+      <!-- Define column styles -->
+      <colgroup>
+          <col style="width: 8rem;">
+          <col style="width: 8rem;">
+          <col style="width: 8rem;">
+          <col style="width: 8rem;">
+      </colgroup>
+
+      <!-- Table Header -->
+      <thead>
+          <tr>
+              <th>Product</th>
+              <th>Price</th>
+              <th>Quantity</th>
+              <th>Total</th>
+          </tr>
+      </thead>
+
+      <!-- Table Body -->
+      <tbody>
+          <tr>
+              <td>Apple</td>
+              <td>$1.00</td>
+              <td>5</td>
+              <td>$5.00</td>
+          </tr>
+          <tr>
+              <td>Banana</td>
+              <td>$0.50</td>
+              <td>10</td>
+              <td>$5.00</td>
+          </tr>
+          <tr>
+              <td>Orange</td>
+              <td>$0.80</td>
+              <td>7</td>
+              <td>$5.60</td>
+          </tr>
+      </tbody>
+
+      <!-- Table Footer -->
+      <tfoot>
+          <tr>
+              <td colspan="3">Sum</td>
+              <td>$15.60</td>
+          </tr>
+      </tfoot>
+    </table>
+
+
+
+
+    <h2>5. &lt;pre&gt;</h2>
+    <pre>
+Shopping List:
+- Apples
+- Bananas
+- Milk
+- Bread
+    </pre>
+
+
+  </main>
+
+
+
+  <script>
+  // document.addEventListener('DOMContentLoaded', () => {
+  //   //
+  // });
+  </script>
+</body>
+
+</html>
+
+
+
+

package/index.example.html

@@ -1,18 +1,79 @@
 <!DOCTYPE html>
 <html lang="en" class="jsx example">
+<head>
 
-  <head>
+  <title>CssCleanStart 2</title>
+
+  <base href="./">
+
+  <meta charset="utf-8" />
+  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+
+
+
+    <!--# FAVICON -->
+    <!-- <link
+      rel="icon"
+      type="image/x-icon"
+      href="https://sandbox.brightday.email/cdn/www/media/images/favicon/Icon_Jaisocx.ico"
+      href-fallback="favicon/Icon_Jaisocx.ico"
+      onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"
+    /> -->
+
+    <link
+      rel="icon"
+      type="image/x-icon"
+      href="https://sandbox.brightday.email/cdn/www/media/images/favicon/Icon_Sandbox_Brightday.ico"
+      href-fallback="favicon/Icon_Sandbox_Brightday.ico"
+      onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"
+    />
 
-    <title>CssCleanStart_2</title>
 
-    <meta content="width=device-width, initial-scale=1.0" name="viewport">
-    <meta charset="utf-8">
 
-    <base href=".">
+    <!--# FONTS PRELOAD WITHOUT JAVASCRIPT CALL -->
+    <link
+      fetchpriority="high"
+      rel="preload"
+      as="font"
+      type="font/ttf"
+      href="https://sandbox.brightday.email/cdn/www/fonts/LibreFranklin/static/LibreFranklin-SemiBold.ttf"
+    />
 
+    <link
+      fetchpriority="high"
+      rel="preload"
+      as="font"
+      type="font/ttf"
+      href="https://sandbox.brightday.email/cdn/www/fonts/LibreFranklin/static/LibreFranklin-Regular.ttf"
+    />
 
+    <!--# CSS FOR FONTS -->
+    <link
+      rel="stylesheet"
+      type="text/css"
+      charset="utf-8"
+      href="https://sandbox.brightday.email/cdn/www/fonts_css/font_LibreFranklin_cdn.css"
+    />
 
-    <link rel="stylesheet" href="MediaAndStyles/CssCleanStart_2_main_resolved_minimal.css">
+
+
+    <!--# CSS CLEAN START 2: html & css WHEN STARTING A SITE FROM SCRATCH -->
+
+    <!--# importing @jaisocx/css-clean-start-2 IN DEV MODE, TO RESEARCH THE .css STYLES IN BROWSER'S DEV TOOLS IN NETWORKS TAB  -->
+    <!-- <link
+      rel="stylesheet"
+      type="text/css"
+      charset="utf-8"
+      href="MediaAndStyles/CssCleanStart_2_main_relative.css"
+    /> -->
+
+    <!--# THE SAME importing @jaisocx/css-clean-start-2 IN PROD MODE, PACKED BY @jaisocx/css-importer TOOL  -->
+    <link
+      rel="stylesheet"
+      type="text/css"
+      charset="utf-8"
+      href="MediaAndStyles/CssCleanStart_2_main_resolved_minimal.css"
+    />
 
 
 
@@ -40,15 +101,21 @@
 
     </style>
 
-  <head>
-<body>
 
-  <main>
 
+  <head>
+
+  <body>
 
-    <h1>Css Clean Start 2. examples</h1>
+    <main>
 
-    <h3>@jaisocx/css-clean-start-2</h3>
+    <h1>Css Clean Start 2</h1>
+    <h2>@jaisocx/css-clean-start-2</h2>
+    <h3>index.example.html</h3>
+    <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
+    </description>
 
 
 

package/package.json

@@ -1,19 +1,21 @@
 {
   "name": "@jaisocx/css-clean-start-2",
-  "version": "1.1.4",
-  "description": "",
-  "author": "Jaisocx",
+  "version": "1.1.7",
+  "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",
+  "author": "Jaisocx Company",
   "keywords": [
     "css",
     "styles"
   ],
   "files": [
+    "favicon",
+
     "index.example.html",
+    "css_clean_start_2.example.html",
     "responsive_sizes.html",
 
     "MediaAndStyles/*.css",
     "MediaAndStyles/themes",
-    "MediaAndStyles/fonts",
 
     "transpiled/CommonJS",
     "transpiled/ESNext",

package/responsive_sizes.html

@@ -7,7 +7,7 @@
     <meta content="width=device-width, initial-scale=1.0" name="viewport">
 
 
-    <base href="." >
+    <base href="./" >
 
 
 

package/webpack.aliases.json

@@ -1,4 +1,5 @@
 {
-  "@CssCleanStart_2_MediaAndStyles": "${packageRoot}/MediaAndStyles/"
+  "@CssCleanStart_2_MediaAndStyles": "${packageRoot}/MediaAndStyles/",
+  "@cdn_sandbox_fonts/": "https://sandbox.brightday.email/cdn/www/fonts/"
 }