v1.1.0: add CSS file with sane defaults, update README usage example

warren-bank · Jun 6, 2024 · 09a0fa4 · 09a0fa4
1 parent 1e41b41
commit 09a0fa4
Show file tree

Hide file tree

Showing 20 changed files with 171 additions and 60 deletions.
diff --git a/README.md b/README.md
@@ -17,38 +17,63 @@ npm install "@warren-bank/svelte-glider"
 ```html
 <script lang="ts">
   import Glider from '@warren-bank/svelte-glider'
+
   import 'glider-js/glider.min.css'
+  import '@warren-bank/svelte-glider/glider.defaults.css'
 </script>
 
 <Glider
+  class="gradient-outline hide-scrollbar"
   draggable
   hasArrows
   hasDots
   slidesToShow={2}
   slidesToScroll={1}
 >
-  <Pane>1</Pane>
-  <Pane>2</Pane>
-  <Pane>3</Pane>
-  <Pane>4</Pane>
-  <Pane>5</Pane>
+  <div class="slide"><h1>1</h1></div>
+  <div class="slide"><h1>2</h1></div>
+  <div class="slide"><h1>3</h1></div>
+  <div class="slide"><h1>4</h1></div>
+  <div class="slide"><h1>5</h1></div>
+  <div class="slide"><h1>6</h1></div>
+  <div class="slide"><h1>7</h1></div>
+  <div class="slide"><h1>8</h1></div>
+  <div class="slide"><h1>9</h1></div>
+  <div class="slide"><h1>10</h1></div>
+  <div class="slide"><h1>11</h1></div>
+  <div class="slide"><h1>12</h1></div>
 </Glider>
 ```
 
 ### CSS
 
-To use the CSS for _Glider.js_, you may import it from the `npm` module:
+You may import the _Glider.js_ CSS:
 
 ```js
-import "glider-js/glider.min.css";
+import 'glider-js/glider.min.css'
 ```
 
-or reference the CSS file in your `<head>` (not recommended):
+_Note that the `glider-js` module is a dependency of _this_ package. As such, your project can import its CSS file without needing to add `glider-js` as an explicit dependency._
+
+_Note that this CSS only includes the minimal set of rules required for basic functionality. You will want to include additional style for proper appearance._
+
+Additionally, _this_ package exposes a CSS file containing minimal appearance styling intended to provide sane defaults. The above [usage example](#usage) is styled by this CSS file:
+
+```js
+import '@warren-bank/svelte-glider/glider.defaults.css'
+```
+
+Though CSS bundling is recommended, if necessary, both of these CSS files could be included into an HTML document by external links:
 
 ```html
 <link
   rel="stylesheet"
-  href="https://unpkg.com/[email protected]/glider.min.css"
+  href="https://unpkg.com/[email protected]/glider.min.css"
+/>
+
+<link
+  rel="stylesheet"
+  href="https://unpkg.com/@warren-bank/[email protected]/defaults/glider.defaults.css"
 />
 ```
 

diff --git a/defaults/glider.defaults.css b/defaults/glider.defaults.css
@@ -0,0 +1,53 @@
+.glider-contain > .glider-prev,
+.glider-contain > .glider-next {
+  font-size: 2.5rem;
+  width:  3.125rem;
+  height: 3.125rem;
+  line-height: 3.125rem;
+  text-align: center;
+  top: calc(50% - 3.125rem/2);
+}
+.glider-contain > .glider-prev {
+  left: 0;
+}
+.glider-contain > .glider-next {
+  right: 0;
+}
+
+.glider-contain > .glider {
+  margin: 0 3.125rem;
+  height: 300px;
+}
+.glider-contain > .glider > .glider-track {
+  height: 100%;
+}
+
+.glider-contain > .glider-dots {
+  margin-top: 15px;
+}
+
+.glider-contain > .glider .glider-slide {
+  background: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid #f5f5f5;
+}
+.glider-contain > .glider .glider-slide h1 {
+  color: #8cc9f0;
+  font-weight: bold;
+}
+.glider-contain > .glider .glider-slide:nth-child(2n) h1 {
+  color: #a89cc8;
+}
+.glider-contain > .glider .glider-slide:nth-child(3n) h1 {
+  color: #efa8b0;
+}
+
+.glider-contain > .glider.gradient-outline {
+  border: 3px solid !important;
+  border-image: linear-gradient(to right, #8cc9f0, #efa8b0, #a89cc8) 5 !important;
+}
+.glider-contain > .glider.hide-scrollbar {
+  overflow: hidden;
+}
diff --git a/docs/build/_app/immutable/chunks/entry.CfnwebpS.js b/docs/build/_app/immutable/chunks/entry.CfnwebpS.js
diff --git a/docs/build/_app/immutable/chunks/entry.ltnidPkD.js b/docs/build/_app/immutable/chunks/entry.ltnidPkD.js
diff --git a/...pp/immutable/chunks/entry.CfnwebpS.js.map → ...pp/immutable/chunks/entry.ltnidPkD.js.map b/...pp/immutable/chunks/entry.CfnwebpS.js.map → ...pp/immutable/chunks/entry.ltnidPkD.js.map
diff --git a/...uild/_app/immutable/entry/app.D2Ik5anz.js → ...uild/_app/immutable/entry/app.4ikYODxS.js b/...uild/_app/immutable/entry/app.D2Ik5anz.js → ...uild/_app/immutable/entry/app.4ikYODxS.js