Squashed commit of the following:

commit 067c0f7 Author: Francesco Improta <[email protected]> Date: Sun Apr 24 08:54:37 2022 +0200 Build new zip commit 6af513f Author: Francesco Improta <[email protected]> Date: Sun Apr 24 08:54:27 2022 +0200 Changed zip output folder commit beb7418 Author: Francesco Improta <[email protected]> Date: Sun Apr 24 08:44:35 2022 +0200 Added new release post commit e1fb12a Author: Francesco Improta <[email protected]> Date: Sun Apr 24 08:44:23 2022 +0200 Updated blog meta text color and size commit d5d72ee Author: Francesco Improta <[email protected]> Date: Sun Apr 24 08:43:07 2022 +0200 Bumped version commit 376d4b2 Author: Francesco Improta <[email protected]> Date: Sun Apr 24 08:43:01 2022 +0200 Updated CHANGELOG commit caa230a Author: Omar Muscatello <[email protected]> Date: Sun Apr 24 08:22:21 2022 +0200 SCSS compilation and library building (#44) * Add SCSS compiler * Add documentation * Use compiled library in docs commit d9814b1 Author: Francesco Improta <[email protected]> Date: Thu Mar 24 15:10:54 2022 +0100 Added a draft for the next release
zetareticoli · Apr 24, 2022 · 026acfe · 026acfe
1 parent f1a7402
commit 026acfe
Show file tree

Hide file tree

Showing 46 changed files with 500 additions and 10,075 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,3 +4,7 @@ node_modules/
 *.sass.map
 *.scss.map
 .DS_Store
+.idea
+bin
+lib/dist
+lib/dev-server
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,18 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+// # v1.0.0
+// This is a draft of release notes
+// - Added two different Carousel components
+// - Added Scroll position component
+// - Added CDN support
+
+# v0.3.0
+## Added
+- Sass/SCSS support
+- Local development server
+- Automatic browser-vendors prefixins
+- Minification
 # v0.2.1
 ## Fixed
 - Accordion item label keyboard focus not visualized on FF and Safari (#37)

diff --git a/assets/scss/common/_global.scss b/assets/scss/common/_global.scss
@@ -233,5 +233,5 @@ body {
 }
 
 .lead {
-  color: $gray-600;
+  color: $gray-800;
 }
diff --git a/assets/scss/layouts/_posts.scss b/assets/scss/layouts/_posts.scss
@@ -26,3 +26,8 @@
 .blog-footer {
   text-align: center;
 }
+
+.card-meta {
+  color: $gray-600;
+  font-size: $font-size-sm;
+}
diff --git a/config/_default/config.toml b/config/_default/config.toml
@@ -14,7 +14,7 @@ rssLimit = 10
 home = ["HTML", "RSS", "REDIRECTS", "HEADERS"]
 section = ["HTML", "RSS", "SITEMAP"]
 
-staticDir = ["static", "lib"]
+staticDir = ["static"]
 
 # remove .{ext} from text/netlify
 [mediaTypes."text/netlify"]
@@ -89,9 +89,6 @@ rel  = "sitemap"
   [[module.mounts]]
     source = "static"
     target = "static"
-  [[module.mounts]]
-    source = "lib"
-    target = "static"
   [[module.mounts]]
     source = "node_modules/flexsearch"
     target = "assets/js/vendor/flexsearch"

diff --git a/config/_default/menus.toml b/config/_default/menus.toml
@@ -4,6 +4,12 @@
   identifier = "getting-started"
   url = "/docs/getting-started/"
 
+[[docs]]
+  name = "Development"
+  weight = 11
+  identifier = "development"
+  url = "/docs/development/"
+
 # [[docs]]
 #   name = "Help"
 #   weight = 60

diff --git a/content/blog/sass-support/index.md b/content/blog/sass-support/index.md
@@ -0,0 +1,32 @@
+---
+title: "Sass/SCSS support, local server and automation"
+description: "What new features are we working on this year"
+lead: "More features for local development"
+date: 2022-04-23T09:00:00+01:00
+draft: false
+weight: 90
+contributors: ["Francesco Improta"]
+---
+
+With the [PR #44](https://github.com/zetareticoli/cssui/pull/44) we have added some features for local development tasks.
+
+CSS files are renamed to SCSS. The content of the files has not been touched. The content of HTML files must be nested into <body> to make working the hot-reload feature of the web-server.
+
+It is now possible to:
+
+- **start a dev server** with hot-reload for local development
+- **build the library**, including automatic browser-vendors prefixing and minification.
+
+This will make it easier to release a new version of the library. 
+
+[Check the docs](https://www.cssui.dev/docs/development/local-development) for more information.
+
+The components `.md` files have been updated to use the compiled version of the library. They cannot use the source files anymore since they are SCSS. 
+
+As of now, the build files of the library have to be manually copied to the assets/cssui folder. A new PR will be created which will include this improvement.
+
+[Follow us on Twitter](https://twitter.com/css_ui) or on [Star on Github](https://github.com/zetareticoli/cssui) to stay updated! 
+
+Thank you 🙏
+
+*CSSUI Team*
diff --git a/content/docs/components/accordion.md b/content/docs/components/accordion.md
@@ -16,9 +16,8 @@ toc: true
 Click headers to expand/collapse content that is broken into logical sections.
 
 <div class="preview">
-
-  <link rel="stylesheet" href="/cssui.css">
-  <link rel="stylesheet" href="/accordion/accordion.css">
+  <link rel="stylesheet" href="/cssui/cssui.min.css">
+  <link rel="stylesheet" href="/cssui/cssui.accordion.min.css">
 
   <section data-accordion>
     <div data-accordion-item>
@@ -102,4 +101,4 @@ List of variables used. Customize the component's design by changing or overridi
 --accordion-title-background: #fff;
 --accordion-title-spacing: 1rem;
 --accordion-title-color: var(--cssui-gray-dark);
-```
+```
diff --git a/content/docs/components/dropdown.md b/content/docs/components/dropdown.md
@@ -16,9 +16,8 @@ toc: true
 Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re toggled by clicking, not by hovering.
 
 <div class="preview">
-
-  <link rel="stylesheet" href="/cssui.css">
-  <link rel="stylesheet" href="/dropdown/dropdown.css">
+  <link rel="stylesheet" href="/cssui/cssui.min.css">
+  <link rel="stylesheet" href="/cssui/cssui.dropdown.min.css">
 
   <details data-dropdown>
     <summary>
@@ -62,4 +61,4 @@ List of variables used. Customize the component's design by changing or overridi
   --dropdown-link-color: var(--cssui-gray-darkest);
   --dropdown-panel-background: #fff;
   --dropdown-padding: var(--cssui-padding);
-```
+```
diff --git a/content/docs/components/modal.md b/content/docs/components/modal.md
@@ -15,8 +15,8 @@ toc: true
 
 Click on the button below to toggle the modal dialog.
 
-<link rel="stylesheet" href="/cssui.css">
-<link rel="stylesheet" href="/modal/modal.css">
+<link rel="stylesheet" href="/cssui/cssui.min.css">
+<link rel="stylesheet" href="/cssui/cssui.modal.min.css">
 
 <div class="preview" style="text-align: center">
   <a href="#modal" class="btn btn-primary btn-lg px-4 mb-2">Open Modal</a>

diff --git a/content/docs/components/slideout.md b/content/docs/components/slideout.md
@@ -15,8 +15,8 @@ toc: true
 
 Click on the button below to toggle the modal dialog.
 
-<link rel="stylesheet" href="/cssui.css">
-<link rel="stylesheet" href="/slideout/slideout.css">
+<link rel="stylesheet" href="/cssui/cssui.min.css">
+<link rel="stylesheet" href="/cssui/cssui.slideout.min.css">
 
 <div class="preview" style="text-align: center">
 <a href="#slideout" class="btn btn-primary btn-lg px-4 mb-2">Open Slideout</a>

diff --git a/content/docs/components/tabs.md b/content/docs/components/tabs.md
@@ -16,8 +16,8 @@ toc: true
 Click tabs to swap between content that is broken into logical sections. Tabs come with a horizontal navigation and a simple, clean style.
 
 <div class="preview">
-  <link rel="stylesheet" href="/cssui.css">
-  <link rel="stylesheet" href="/tabs/tabs.css">
+  <link rel="stylesheet" href="/cssui/cssui.min.css">
+  <link rel="stylesheet" href="/cssui/cssui.tabs.min.css">
 
   <div data-tabs role="tablist" aria-label="Sample tabs">
     <input id="tab1" type="radio" name="tab" data-tab="tab1" role="tab" aria-controls="tab-panel1" checked="checked" />

diff --git a/content/docs/components/tooltip.md b/content/docs/components/tooltip.md
@@ -16,10 +16,10 @@ toc: true
 Hover or focus over the links below to see tooltips:
 
 <div class="preview text-center">
-<link rel="stylesheet" href="/cssui.css">
-<link rel="stylesheet" href="/tooltip/tooltip.css">
+  <link rel="stylesheet" href="/cssui/cssui.min.css">
+  <link rel="stylesheet" href="/cssui/cssui.tooltip.min.css">
 
-<a href="#" data-tooltip alt="Alt text" title="This is a link" role="tooltip" aria-label="Tooltip message">Hover me</a>
+  <a href="#" data-tooltip alt="Alt text" title="This is a link" role="tooltip" aria-label="Tooltip message">Hover me</a>
 </div>
 
 ## Usage
@@ -41,4 +41,4 @@ List of variables used. Customize the component's design by changing or overridi
   --tooltip-fontsize: .75rem;
   /* --tooltip-radius: 0px */
 
-```
+```
diff --git a/content/docs/development/build-the-library.md b/content/docs/development/build-the-library.md
@@ -0,0 +1,57 @@
+---
+title: "Build the library"
+description: "Building the library is easy as running an NPM task."
+lead: "Building the library is easy as running an NPM task."
+date: 2022-03-05T14:32:00+01:00
+lastmod: 2022-03-05T14:32:00+01:00
+draft: false
+images: []
+menu:
+    docs:
+        parent: "development"
+weight: 101
+toc: true
+---
+
+## Setup
+
+Navigate to the `lib` folder:
+
+```bash
+cd lib
+```
+
+and then install NPM packages:
+
+```bash
+npm i
+```
+
+## Build the library
+
+You can now build the library by running:
+
+```bash
+npm run build
+```
+
+This will generate the following files in the `lib/dist` folder:
+- `cssui.min.css`
+- `cssui.min.css.map`
+- `cssui.<component>.min.css`
+- `cssui.<component>.min.css.map`
+- `cssui.bundle.min.css`
+- `cssui.bundle.min.css.map`
+
+The `cssui.bundle.min.css` file contains the `cssui.min.css` and all the `cssui.<component>.min.css` files.
+It's a convenient file for fast prototyping.
+
+In a production scenario, remember don't use the bundle. Include only the `cssui.min.css` and the
+`cssui.<component>.min.css` you need instead.
+
+For each SCSS file, the `build` task performs compilation, browser-vendors prefixing based on
+[browserslist](https://github.com/browserslist/browserslist), and minification.
+
+### The `build:release` task
+This task is the same as the `build` one, except that it creates an additional `cssui.zip` file which contains the
+output of the `build` task. This is a convenient task for releasing a new version of CSSUI where the ZIP file is needed.
diff --git a/content/docs/development/local-development.md b/content/docs/development/local-development.md
@@ -0,0 +1,47 @@
+---
+title: "Local development"
+description: "The repo contains a simple web server allowing developers to test changes locally. It supports hot-reload, meaning that every time a file is changed, the browser will automatically load the latest changes."
+lead: "The repo contains a simple web server allowing developers to test changes locally. It supports hot-reload, meaning that every time a file is changed, the browser will automatically load the latest changes."
+date: 2022-03-05T14:32:00+01:00
+lastmod: 2022-03-05T14:32:00+01:00
+draft: false
+images: []
+menu:
+    docs:
+        parent: "development"
+weight: 100
+toc: true
+---
+
+## Setup
+
+Navigate to the `lib` folder:
+
+```bash
+cd lib
+```
+
+and then install NPM packages:
+
+```bash
+npm i
+```
+
+## Start the dev server
+
+You can now start the web server by running:
+
+```bash
+npm run start
+```
+
+By default, the web server listens on `http://localhost:8080`. Make sure the port is not used by other programs.
+
+The web server allows to navigate the directory tree. You can preview your component clicking on the homonym folder and
+then on the related `.html` file. 
+
+**Note:** the web server's root path is the `lib/dev-server` folder. It contains the compiled SCSS file and the HTML files.
+
+## Hot-reload
+Every time you change the `.html` or `.scss` file of a component, the browser will reflect the latest changes automatically.
+
diff --git a/layouts/partials/main/blog-meta.html b/layouts/partials/main/blog-meta.html
@@ -1 +1 @@
-<p><small>Posted {{ .PublishDate.Format "January 2, 2006" }} by {{ if .Params.contributors -}}{{ range $index, $contributor := .Params.contributors }}{{ if gt $index 0 }} and {{ end }}<a class="stretched-link position-relative" href="{{ "/contributors/" | relURL }}{{ . | urlize }}/">{{ . }}</a>{{ end -}}{{ end -}}&nbsp;&hyphen;&nbsp;<strong>{{ .ReadingTime -}}&nbsp;min read</strong></small><p>
+<p class="card-meta"><small>Posted {{ .PublishDate.Format "January 2, 2006" }} by {{ if .Params.contributors -}}{{ range $index, $contributor := .Params.contributors }}{{ if gt $index 0 }} and {{ end }}<a class="stretched-link position-relative" href="{{ "/contributors/" | relURL }}{{ . | urlize }}/">{{ . }}</a>{{ end -}}{{ end -}}&nbsp;&hyphen;&nbsp;<strong>{{ .ReadingTime -}}&nbsp;min read</strong></small><p>
diff --git a/lib/.browserslistrc b/lib/.browserslistrc
@@ -0,0 +1 @@
+defaults
diff --git a/lib/accordion/accordion.html b/lib/accordion/accordion.html
diff --git a/lib/dropdown/dropdown.html b/lib/dropdown/dropdown.html
-Original file line number
+Diff line change
@@ Expand Up / @@ -233,5 +233,5 @@ body { @@
     }
     .lead {
-      color: $gray-600;
+      color: $gray-800;
     }
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<p><small>Posted {{ .PublishDate.Format "January 2, 2006" }} by {{ if .Params.contributors -}}{{ range $index, $contributor := .Params.contributors }}{{ if gt $index 0 }} and {{ end }}<a class="stretched-link position-relative" href="{{ "/contributors/" \| relURL }}{{ . \| urlize }}/">{{ . }}</a>{{ end -}}{{ end -}} &hyphen; <strong>{{ .ReadingTime -}} min read</strong></small><p>
		<p class="card-meta"><small>Posted {{ .PublishDate.Format "January 2, 2006" }} by {{ if .Params.contributors -}}{{ range $index, $contributor := .Params.contributors }}{{ if gt $index 0 }} and {{ end }}<a class="stretched-link position-relative" href="{{ "/contributors/" \| relURL }}{{ . \| urlize }}/">{{ . }}</a>{{ end -}}{{ end -}} &hyphen; <strong>{{ .ReadingTime -}} min read</strong></small><p>