Skip to content

Commit

Permalink
Enhance README with detailed theme implementation and usage instructi…
Browse files Browse the repository at this point in the history 
…ons for SimplyCountdown.js - Fix #54
  • Loading branch information
@VincentLoy
VincentLoy committed Dec 31, 2024
1 parent 9d90a4f commit 2ef04cf
Show file tree
Hide file tree
Showing 4 changed files with 270 additions and 116 deletions.
97 changes: 92 additions & 5 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,14 +32,24 @@ yarn add simplycountdown.js
bun install simplycountdown.js
```

## Basic Usage
## 1. Prepare your HTML

```html
<!-- ...YOUR HTML CODE -->
<div class="my-super-countdown simply-countdown-circle"></div>
<!-- YOUR HTML CODE... -->
```

_In this example you will have to target `.my-super-countdown` and will apply the circle theme._

## 2. Basic Usage

### ES Module

```javascript
import simplyCountdown from "simplycountdown.js";

simplyCountdown("#mycountdown", {
simplyCountdown(".my-super-countdown", {
year: 2025,
month: 12,
day: 25,
Expand All @@ -59,7 +69,7 @@ import simplyCountdown from "simplycountdown.js/src/core/simplyCountdown";
```javascript
const simplyCountdown = require("simplycountdown");

simplyCountdown("#mycountdown", {
simplyCountdown(".my-super-countdown", {
year: 2025,
month: 12,
day: 25,
Expand All @@ -71,7 +81,7 @@ simplyCountdown("#mycountdown", {
```html
<script src="path/to/simplyCountdown.umd.js"></script>
<script>
simplyCountdown("#mycountdown", {
simplyCountdown(".my-super-countdown", {
year: 2025,
month: 12,
day: 25,
Expand All @@ -82,7 +92,9 @@ simplyCountdown("#mycountdown", {
## Configuration Options

```javascript
simplyCountdown("#mycountdown", {
// .my-super-countdown is an example
// you can target any HTML element with any CSS selector
simplyCountdown(".my-super-countdown", {
// Target date (Required)
year: 2025, // Target year [YYYY]
month: 12, // Target month [1-12]
Expand Down Expand Up @@ -181,6 +193,81 @@ To use a theme, include its CSS file:
<link rel="stylesheet" href="path/to/themes/default.css" />
```

SimplyCountdown.js includes several pre-built themes to enhance your countdown's appearance. Each theme is designed for different visual styles and use cases.

### Available Themes

> **Note**: All themes are available in both standard (`.css`) and minified (`.min.css`) formats for production use.
1. **Default Theme** (`dist/themes/default.css`)

- Apply class: `simply-countdown`
- Clean, modern design with flat colors

2. **Dark Theme** (`dist/themes/dark.css`)

- Apply class: `simply-countdown-dark`
- Sleek dark mode appearance with light text

3. **Cyberpunk Theme** (`dist/themes/cyber.css`)

- Apply class: `simply-countdown-cyber`
- Futuristic, neon-inspired design with glowing effects

4. **Circle Theme** (`dist/themes/circle.css`)

- Apply class: `simply-countdown-circle`
- Modern circular display with rounded sections

5. **Losange Theme** (`dist/themes/losange.css`)
- Apply class: `simply-countdown-losange`
- losange display with rotated sections

### Theme Implementation

1. **Import Theme CSS**

```html
<link rel="stylesheet" href="path/to/themes/default.css" />
```

2. **Apply Theme**

Simply include the CSS file in your HTML document, and the theme will be applied automatically to your countdown elements.

### Customizing Themes

You can customize any theme by overriding the CSS classes. The base structure for customization is:

```css
.custom-countdown-theme {
/* Main countdown container */
}

.custom-countdown-theme > .simply-section {
/* Individual time unit blocks */
}

.custom-countdown-theme > .simply-section > div {
/* Inner container for amount and word */
}

.custom-countdown-theme > .simply-section .simply-amount,
.custom-countdown-theme > .simply-section .simply-word {
/* Common styles for numbers and labels */
}

.custom-countdown-theme > .simply-section .simply-amount {
/* Number display */
}

.custom-countdown-theme > .simply-section .simply-word {
/* Label text */
}
```

These base classes provide a foundation for creating your own custom themes or modifying existing ones.

## Examples

### New Year Countdown with UTC
Expand Down
2 changes: 1 addition & 1 deletion docs/dist/assets/main.min..css
View file

Large diffs are not rendered by default.

134 changes: 79 additions & 55 deletions docs/dist/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,18 +138,18 @@ <h1 class="text-3xl sm:text-4xl md:text-6xl font-bold mb-4" itemprop="name">
Controls
</a>
</li>
<li>
<a href="#customize" class="text-indigo-200 hover:text-white transition-colors duration-300 flex items-center gap-2 text-sm md:text-base">
<span class="icon-[lucide--braces] w-4 h-4"></span>
Customize
</a>
</li>
<li>
<a href="#themes" class="text-indigo-200 hover:text-white transition-colors duration-300 flex items-center gap-2 text-sm md:text-base">
<span class="icon-[lucide--palette] w-4 h-4"></span>
Themes
</a>
</li>
<li>
<a href="#customize" class="text-indigo-200 hover:text-white transition-colors duration-300 flex items-center gap-2 text-sm md:text-base">
<span class="icon-[lucide--braces] w-4 h-4"></span>
Customize
</a>
</li>
</ul>
</nav>
</div>
Expand Down Expand Up @@ -533,11 +533,69 @@ <h3 class="text-xl font-bold mb-4">Control Methods API</h3>
</section>

<section class="mb-20">
<h2 id="themes" class="text-3xl font-bold mb-8 flex items-center gap-2">
<span class="icon-[lucide--palette] w-6 h-6 text-indigo-600"></span>
Available Themes
</h2>
<h3 id="themes-import" class="text-xl font-bold mb-4">Countdown Ready-to-use Themes: Default, Dark, Cyberpunk, Circle & Losange Styles</h3>
<p class="text-lg mb-2">
<strong class="text-indigo-500 font-bold">simplyCountdown</strong> offers multiple visually appealing themes to enhance your countdown timer's appearance. Each theme is carefully designed to suit different website styles and aesthetics, from minimal to modern designs.
</p>
<p class="text-lg mb-2">
The theme collection includes a clean default style, a sleek dark mode, a futuristic cyberpunk variation, an elegant losange theme, and a modern circle design. These themes are implemented through separate CSS files for optimal performance and easy customization.
</p>
<p class="text-lg mb-8">
To implement any theme, simply include the corresponding CSS file in your HTML document's head section. Each theme maintains the countdown's functionality while providing unique visual presentations that can match your website's design language.
</p>
<div class="sc-doc-block mb-8 bg-indigo-500/10 border border-indigo-500/30 rounded-xl">
<div class="flex items-start gap-3 p-4">
<span class="icon-[lucide--badge-alert] w-6 h-6 text-indigo-400 flex-shrink-0"></span>
<div>
<h4 class="font-bold text-indigo-400 mb-2">Important Note About Themes</h4>
<p class="text-indigo-100">
Each theme requires its specific CSS class to be applied. Make sure to use the correct class name when implementing a theme:
</p>
<ul class="list-disc ml-6 mt-2 text-indigo-200">
<li>Default theme: <code class="bg-indigo-500/20 px-2 py-1 rounded">simply-countdown</code></li>
<li>Dark theme: <code class="bg-indigo-500/20 px-2 py-1 rounded">simply-countdown-dark</code></li>
<li>Cyberpunk theme: <code class="bg-indigo-500/20 px-2 py-1 rounded">simply-countdown-cyber</code></li>
<li>Losange theme: <code class="bg-indigo-500/20 px-2 py-1 rounded">simply-countdown-losange</code></li>
<li>Circle theme: <code class="bg-indigo-500/20 px-2 py-1 rounded">simply-countdown-circle</code></li>
</ul>
</div>
</div>
</div>
<div class="sc-doc-block">
<pre><code class="language-html bg-slate-900 rounded-xl">
&lt;!-- Choose one or more themes: --&gt;
&lt;link rel="stylesheet" href="dist/themes/default.css"&gt;
&lt;link rel="stylesheet" href="dist/themes/dark.css"&gt;
&lt;link rel="stylesheet" href="dist/themes/cyber.css"&gt;
&lt;link rel="stylesheet" href="dist/themes/losange.css"&gt;
&lt;link rel="stylesheet" href="dist/themes/circle.css"&gt;

&lt;div class="my-countdown simply-countdown"&gt;&lt;/div&gt;
&lt;div class="my-countdown simply-countdown-dark"&gt;&lt;/div&gt;
&lt;div class="my-countdown simply-countdown-cyber"&gt;&lt;/div&gt;
&lt;div class="my-countdown simply-countdown-losange"&gt;&lt;/div&gt;
&lt;div class="my-countdown simply-countdown-circle"&gt;&lt;/div&gt;

&lt;script&gt;
// This will init all countdowns with the same options, but different themes
simplyCountdown('.my-countdown', {
year: 2024,
month: 12,
day: 25
});</code></pre>
</div>
</section>

<section class="mb-5">
<h2 id="customize" class="text-3xl font-bold mb-8 flex items-center gap-2">
<span class="icon-[lucide--braces] w-6 h-6 text-indigo-600"></span>
Customize
</h2>
<h3 id="customize-styles" class="text-xl font-bold mb-4">Create your fully customized Countdowns</h3>
<h3 id="customize-styles" class="text-xl font-bold mb-4">Create your fully customized Countdowns Themes</h3>
<p class="mb-2 text-lg">
Customize your countdown timers with CSS to match your website's design perfectly.
</p>
Expand All @@ -551,67 +609,33 @@ <h3 id="customize-styles" class="text-xl font-bold mb-4">Create your fully custo
</p>
<div class="sc-doc-block">
<pre><code class="language-css bg-slate-900 rounded-xl">
.simply-countdown {
/* The countdown */
}
.simply-countdown > .simply-section {
/* coutndown blocks */
.custom-countdown-theme {
/* Main countdown container */
}

.simply-countdown > .simply-section > div {
/* countdown block inner div */
.custom-countdown-theme > .simply-section {
/* Individual time unit blocks */
}

.simply-countdown > .simply-section .simply-amount,
.simply-countdown > .simply-section .simply-word {
/* amounts and words */
.custom-countdown-theme > .simply-section > div {
/* Inner container for amount and word */
}

.simply-countdown > .simply-section .simply-amount {
/* amounts */
.custom-countdown-theme > .simply-section .simply-amount,
.custom-countdown-theme > .simply-section .simply-word {
/* Common styles for numbers and labels */
}

.simply-countdown > .simply-section .simply-word {
/* words */
.custom-countdown-theme > .simply-section .simply-amount {
/* Number display */
}

.custom-countdown-theme > .simply-section .simply-word {
/* Label text */
}
</code></pre>
</div>
</section>

<section class="mb-20">
<h2 id="themes" class="text-3xl font-bold mb-8 flex items-center gap-2">
<span class="icon-[lucide--palette] w-6 h-6 text-indigo-600"></span>
Available Themes
</h2>
<h3 id="themes-import" class="text-xl font-bold mb-4">Countdown Ready-to-use Themes: Default, Dark, Cyberpunk, Circle & Losange Styles</h3>
<p class="text-lg mb-2">
<strong class="text-indigo-500 font-bold">simplyCountdown</strong> offers multiple visually appealing themes to enhance your countdown timer's appearance. Each theme is carefully designed to suit different website styles and aesthetics, from minimal to modern designs.
</p>
<p class="text-lg mb-2">
The theme collection includes a clean default style, a sleek dark mode, a futuristic cyberpunk variation, an elegant losange theme, and a modern circle design. These themes are implemented through separate CSS files for optimal performance and easy customization.
</p>
<p class="text-lg mb-8">
To implement any theme, simply include the corresponding CSS file in your HTML document's head section. Each theme maintains the countdown's functionality while providing unique visual presentations that can match your website's design language.
</p>
<div class="sc-doc-block">
<pre><code class="language-html bg-slate-900 rounded-xl">
&lt;!-- Default theme --&gt;
&lt;link rel="stylesheet" href="dist/themes/default.css"&gt;

&lt;!-- Dark theme --&gt;
&lt;link rel="stylesheet" href="dist/themes/dark.css"&gt;

&lt;!-- Cyberpunk theme --&gt;
&lt;link rel="stylesheet" href="dist/themes/cyber.css"&gt;

&lt;!-- Losange theme --&gt;
&lt;link rel="stylesheet" href="dist/themes/losange.css"&gt;

&lt;!-- Circle theme --&gt;
&lt;link rel="stylesheet" href="dist/themes/circle.css"&gt;</code></pre>
</div>
</section>
</article>
</div>
</main>
Expand Down
Loading

0 comments on commit 2ef04cf

Please sign in to comment.