Merge pull request #155 from uvarov-frontend/feature/create_-general_css

Add general css
uvarov-frontend · Nov 30, 2023 · fe2617c · fe2617c
2 parents 913b924 + 517807d
commit fe2617c
Show file tree

Hide file tree

Showing 14 changed files with 326 additions and 296 deletions.
diff --git a/config/assets.config.ts b/config/assets.config.ts
@@ -23,9 +23,10 @@ export default defineConfig({
 				},
 			},
 			input: {
+				main: resolve(__dirname, '../package/src/styles/vanilla-calendar.css'),
+				layout: resolve(__dirname, '../package/src/styles/vanilla-calendar.layout.css'),
 				light: resolve(__dirname, '../package/src/styles/themes/light.css'),
 				dark: resolve(__dirname, '../package/src/styles/themes/dark.css'),
-				'vanilla-calendar': resolve(__dirname, '../package/src/styles/vanilla-calendar.css'),
 			},
 		},
 	},

diff --git a/demo/main.ts b/demo/main.ts
@@ -1,16 +1,10 @@
 // import { IOptions } from '@package/types';
 // import VanillaCalendar from '@/package/build/vanilla-calendar.min';
-
 // import '@/package/build/vanilla-calendar.min.css';
-// import '@/package/build/themes/light.min.css';
-// import '@/package/build/themes/dark.min.css';
 
 import { IOptions } from '@package/types';
 import VanillaCalendar from '@src/vanilla-calendar';
-
 import '@src/styles/vanilla-calendar.css';
-import '@src/styles/themes/light.css';
-import '@src/styles/themes/dark.css';
 
 const config: IOptions = {
 	settings: {

diff --git a/package/README.md b/package/README.md
@@ -68,13 +68,9 @@ To add the necessary styles and scripts, you can use the following code:
 // JS Script
 import VanillaCalendar from '@uvarov.frontend/vanilla-calendar';
 
-// Basic styles
+// Styles
 import '@uvarov.frontend/vanilla-calendar/build/vanilla-calendar.min.css';
 
-// Additional styles
-import '@uvarov.frontend/vanilla-calendar/build/themes/light.min.css';
-import '@uvarov.frontend/vanilla-calendar/build/themes/dark.min.css';
-
 // Initialize the calendar
 const calendar = new VanillaCalendar('#calendar');
 calendar.init();
@@ -90,8 +86,6 @@ If you're not using a package manager and prefer manual installation or CDN usag
   <head>
     <!-- Plugin CSS -->
     <link href="./vanilla-calendar.min.css" rel="stylesheet">
-    <link href="./themes/light.min.css" rel="stylesheet">
-    <link href="./themes/dark.min.css" rel="stylesheet">
     <!-- Plugin JS -->
     <script src="./vanilla-calendar.min.js" defer></script>
   </head>
@@ -110,13 +104,24 @@ If you're not using a package manager and prefer manual installation or CDN usag
 
 ## CSS Themes
 
+```js
+// Only layout calendar
+import '@uvarov.frontend/vanilla-calendar/build/vanilla-calendar.layout.min.css';
+
+// Themes
+import '@uvarov.frontend/vanilla-calendar/build/themes/light.min.css';
+import '@uvarov.frontend/vanilla-calendar/build/themes/dark.min.css';
+```
+
 VanillaCalendar includes two CSS themes: the **light theme** and the **dark theme**.
 
-- The **vanilla-calendar.min.css** file contains the essential structural styles for the calendar.
-- The **light.min.css** theme provides a light color scheme.
-- The **dark.min.css** theme offers a dark color scheme.
+- The **vanilla-calendar.min.css** file contains all styles with all themes.
+- The **vanilla-calendar.layout.min.css** file contains the essential structural styles for the calendar.
+- The **themes/light.min.css** theme provides a light color scheme.
+- The **themes/dark.min.css** theme offers a dark color scheme.
+
 
-The calendar will automatically display the theme based on the user's system preferences. If you want to enforce a specific theme, you can do so manually without the need to import all themes separately.
+The calendar will automatically display the theme according to the user's system preferences. If you want to apply a specific theme, it is recommended to import **«vanilla-calendar.layout.min.css»** along with the theme you prefer: **«light.min.css»** or **«dark.min.css»**, instead of **«vanilla-calendar.min.css»**.
 
 ## DOM Templates
 

diff --git a/package/build/demo.html b/package/build/demo.html
@@ -1,15 +1,14 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
   <head>
-    <!-- Plugin CSS -->
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Demo VanillaCalendar</title>
     <link href="./vanilla-calendar.min.css" rel="stylesheet">
-    <link href="./themes/light.min.css" rel="stylesheet">
-    <link href="./themes/dark.min.css" rel="stylesheet">
-    <!-- Plugin JS -->
     <script src="./vanilla-calendar.min.js" defer></script>
   </head>
   <body>
     <div id="calendar"></div>
-
     <script>
       document.addEventListener('DOMContentLoaded', () => {
         const calendar = new VanillaCalendar('#calendar');

diff --git a/package/build/themes/dark.min.css b/package/build/themes/dark.min.css
diff --git a/package/build/themes/light.min.css b/package/build/themes/light.min.css
diff --git a/package/build/vanilla-calendar.layout.min.css b/package/build/vanilla-calendar.layout.min.css