Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/emnawer/w3e
Enhanced version of w3.css framework with supplementary JavaScript
https://github.com/emnawer/w3e
css-framework html-css-javascript javascript javascript-framework mobile-development reactjs w3css w3e w3schools
Last synced: 2 months ago
JSON representation
Enhanced version of w3.css framework with supplementary JavaScript
- Host: GitHub
- URL: https://github.com/emnawer/w3e
- Owner: emnawer
- License: mit
- Created: 2024-03-03T11:38:23.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-09-08T17:43:49.000Z (5 months ago)
- Last Synced: 2024-11-16T02:54:20.793Z (2 months ago)
- Topics: css-framework, html-css-javascript, javascript, javascript-framework, mobile-development, reactjs, w3css, w3e, w3schools
- Language: CSS
- Homepage: https://w3e.uk/
- Size: 92.8 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# [W3E](https://w3e.uk)
W3E is an extension of the W3.CSS framework, offering additional functionalities and supplementary JavaScript `w3e.js` for more complete features.
While the "E" in W3E signifies "enhanced", the `e` used in `w3e-` class prefix denotes experimental features. These classes, like `w3e-content`, are for short-term use until officially adopted.
To ensure compatibility and prevent potential website or application breakage during `w3e.css` updates, it's recommended to include both the `w3e-` prefix and the `w3-` class prefix for each experimental element. For example, use `class="w3e-content w3-content"`.
## CDN Hosted Files
You can attach the following to your web application:
* https://cdn.jsdelivr.net/gh/emnawer/w3e/w3e.min.css
* https://cdn.jsdelivr.net/gh/emnawer/w3e/w3e.min.js
## Using W3E Replaces Traditional W3.CSS
Including `w3e.css` provides both the traditional W3.CSS framework and W3E enhancements. There's no need to include separate files for both.
If you require the original W3.CSS framework or its documentation, please refer to the following resource: https://www.w3schools.com/w3css/
## W3.CSS Version:
Note that current W3E is based on W3.CSS v4.10.
## CSS Enhancements:
**Current CSS Enhancements:**
1. Body/HTML font size increased from 15px to 16px for better support on modern screens. *Added to W3.CSS v4.10.1.* (https://github.com/emnawer/w3css)
2. Modify content class `w3-content` to limit maximum width to 1100px and right/left padding of 10px. *Added to W3.CSS v4.10.1.* (https://github.com/emnawer/w3css)
3. Adding *new* CSS class for handheld themed borders, `w3e-handheld`. Experimental maybe replaced with other
4. Adding *new* CSS class for the clickable tab JavaScript function. `w3e-tab`
5. Remove (bug) `.w3-sidebar.w3-collapse{display:block!important}` from large screen media. *Removed with W3.CSS v4.10.1.* (https://github.com/emnawer/w3css)
**For alpha CSS enhancements, [click here](https://github.com/emnawer/w3e/wiki).**
## JavaScript Enhancements:
The implemented JavaScript code adapts modern event handling practices as possible by utilizing a document-level event listener for click events, as opposed to the traditional method of binding functions to individual HTML elements via the `onclick=""` attribute. This approach promotes a more maintainable and scalable codebase.
**Current JavaScript Enhancements:**
1. Accordion.
2. Clickable tabs.
3. Images slider.
4. Sidebar.
5. Progress bar.
6. Modals.
7. Dropdowns.
8. Panels.
9. Show and hide elements.
**For alpha JavaScript enhancements, [click here](https://github.com/emnawer/w3e/wiki).**
### Live Examples
**For HTML/JavaScript and ReactJS demos, visit: https://codepen.io/emnawer**
### 1. Accordion
An accordion is a versatile web page element that allows users to expand and collapse content sections, revealing or hiding information on demand.
- Required CSS: `w3e-accordion` (beside title and section IDs).
- JavaScript methods: automatically assigned.
**Structure:**
- The main container of an accordion is any element with the class name `w3e-accordion`.
- Each accordion contains pairs of clickable titles and their corresponding content sections.
**JavaScript Behavior:**
- A JavaScript function automatically scans the entire HTML document for elements with the `w3e-accordion` class.
- For each accordion found, the script iterates through its child elements.
- If a child element has both a title ID and a corresponding section ID (ending with `-acc`), it's considered part of the accordion. Otherwise, it's ignored.
- A click event listener is then attached to the title element. When clicked, the corresponding section with the matching ID (ending with `-acc`) is toggled (shown or hidden).
**Example:**
If a title has an ID of `Demo`, the corresponding section's ID would be `Demo-acc`. Clicking the `Demo` title would show or hide the `Demo-acc` section.
```
Open Section 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Open Section 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Open Section 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
```
### 2. Clickable tabs
A tabbed interface allows users to efficiently navigate between different sections or content pages by clicking on designated tab buttons. This section demonstrates how to implement a tabbed interface using CSS classes provided by W3E.css.
- Required CSS: `w3e-tabs` (beside button and tab IDs).
- JavaScript methods: automatically assigned.
**Structure:**
- The main container of a tabbed interface is any element with the class name `w3e-tabs`.
- Each tabbed interface consists of a single bar containing clickable buttons (tabs) and their corresponding content sections.
**JavaScript Behavior:**
- A JavaScript function automatically scans the entire HTML document for elements with the `w3e-tabs` class.
- For each tabbed interface found, the script iterates through its child elements.
If a child element has both a button ID and a corresponding tab ID (ending with `-tab`), it's considered part of the tabbed interface. Otherwise, it's ignored.
- A click event listener is attached to each button element. When clicked, the corresponding tab with the matching ID (ending with `-tab`) is displayed, and the button itself is visually highlighted using the `w3-theme-dark` class. The previously active button's highlight is removed.
**Example:**
If a button has an ID of `London` the corresponding tab's ID would be `London-tab`. Clicking the `London` button would display the `London-tab` content and visually distinguish the `London` button as active.
```
London
Paris
Tokyo
London is the capital city of the UK.
DC is the capital of USA.
Tokyo is the capital of Japan.
```
### 3. Slide Show
The code employs a DOM traversal technique to efficiently locate the corresponding `w3e-slider` container element and subsequently enumerate all IMG elements nested within the container; and binding a click event on button elements with the class `w3-button`. This streamlined process offers a degree of optimization for scenarios involving any number of images.
- Required CSS: `w3e-slider, ![]()
, w3-button`
- JavaScript methods: automatically assigned.
**Structure:**
- The main container of a slider is almost any element including `
` with the class name `w3e-slider`.
- The `![]()
` tags represent the images that will be displayed in the slider.
- Each slider interface consists of navigation buttons to iterate through images.
**JavaScript Behavior:**
- A JavaScript function automatically scans the entire HTML document for elements with the `w3e-slider` class.
- The function will add click events to `w3-slider` child `w3-button` for navigation.
**Example:**
This snippet creates a basic image slider where you can cycle through images using the left and right navigation buttons.
```
```
### 4. Sidebar
This JavaScript enhancement facilitates opening and closing sidebars on your webpage using designated buttons.
- Added CSS: `w3-sidebar, w3e-open, w3e-close`.
- Added JavaScript methods: automatically assigned.
**Structure:**
- The main container of a sidebar is any element with the class name `w3-sidebar`.
- Each sidebar features two clickable buttons: a close button located within the sidebar itself (`w3e-close`), and an open button positioned outside the sidebar (`w3e-open`).
**JavaScript Behavior:**
- A JavaScript function automatically scans the entire HTML document for elements with the `w3-sidebar` class.
- For each discovered sidebar, the script performs the following:
- Locates the first child element within the sidebar that has the `w3e-close` class.
- Attaches a click event listener to this close button. When clicked, the sidebar is hidden.
- Identifies the next sibling element of the sidebar that has the `w3e-open` class, or if that element doesn't exist, searches for a child element within the next sibling with the `w3e-open` class.
- Attaches a click event listener to this open button. When clicked, the sidebar is displayed.
- Important: The open button must be placed after the sidebar element in the HTML structure to ensure proper detection by the script.
**Example:**
If a sidebar element has the class `w3-sidebar`, the next element in the HTML code should have the class `w3e-open`. Additionally, the sidebar itself should have a direct child element with the class `w3e-close`.
```
```
### 5. Progress bar
This JavaScript function, named `updateBar`, dynamically updates the width of a progress bar, creating a smooth animation that reflects task or operation progress. It requires two mandatory parameters.
- Added CSS: no specific CSS class for progress bar. However, an ID is required.
- Added JavaScript method: `updateBar(barID, update)`.
**Function Parameters:**
- `barID` (string): The unique element ID of the progress bar you want to update. This element is assumed to be an HTML element with a style attribute containing a width property.
- `update` (number): The amount by which you want to adjust the progress bar's width. This value is typically a positive integer to represent progress increase, but it can be negative to decrease the width.
**Function Logic:**
- Retrieves Current Width: The function retrieves the current width of the progress bar element.
- Calculates New Width: It adds the desired update value to the current width, determining the new width for the progress bar.
- Updates Element Width: Finally, the function updates the width property of the progress bar element using the calculated new width.
**Example:**
Imagine you have a progress bar with the HTML ID `loading` that currently displays 25% completion. You can trigger the update using an `onclick` event handler.
```
0
Update Bar
```
This code would call the `updateBar()` function, passing `loading` as the barID and 25 as the update value, increasing the progress bar's width to 36% (current 11% + update 25%).
### 6. Modal
- Added CSS: `w3e-open, w3e-close`.
- Added JavaScript methods: automatically assigned.
**Structure:**
- The main container of a Modal is an element with the class name `w3-modal`.
- Each Modal features two clickable buttons: a close button located within the Modal itself `w3e-close`, and an open button positioned outside the Modal `w3e-open`.
**Function Logic:**
- The attribute `id` assigns a unique identifier to the modal, allowing it to be referenced later in the function `modals()` code for showing and closing the modal. The `w3-modal` attribute provides styling and layout utilities.
- `w3-modal-content` applies styling for w3-modal content area.
- This `w3e-close` class defined to provide specific styling and behavior for the close button. `w3-button` and `w3-display-topright` are optional styling classes.
- The `w3e-open` class used for `onclick` JavaScript event handlers to open the modal dialog when the button is clicked. However, the modal can be opened by using a JavaScript programmable method for other event handlers. The ID attribute assigns a unique identifier to the button to know open, modal with `id-modal` ID.
**Example:**
This code snippet defines a basic modal dialog structure with a close button and an "Open Modal" button. The modal's styling and functionality are handled by JavaScript code that interacts with these elements.
```
Open Modal
```
### 7. Dropdown
Now the `w3-dropdown-click` has both behaviors of `w3-dropdown-click` and `w3-dropdown-hover`, `w3-dropdown-hover` may be deprecated in the future.
- Added CSS: no new classes.
- Added JavaScript methods: automatically assigned.
**Structure:**
- The `w3-dropdown-click` is the main container for the dropdown.
- The `w3-button` is the button that, when clicked, will reveal the dropdown menu. The w3-button class styling the button to look like a typical button element. The hover and click events are assigned to this element.
- The `w3-dropdown-content` class is the hidden content of the dropdown menu. The w3-dropdown-content class controls the appearance and positioning of the dropdown content. The optional `w3-bar-block` class makes the content displayed in a vertical list.
- `w3-bar-item w3-button` are the individual links within the dropdown menu. The `w3-bar-item` and `w3-button` classes ensure they are visually styled as list items within the dropdown menu.
**Function Logic:**
Clicking the Button: When the button is clicked, the JavaScript code in the HTML file `dropdowns()` function will toggle the display of the `w3-dropdown-content` element. This is achieved by adding or removing the `w3-show` class from the `w3-dropdown-content` element, which is defined in the CSS framework.
Hovering Over the Button: The code also to use `mouseover` and `mouseout` events to toggle the display of the dropdown content. The JavaScript function adds and removes the `w3-show` class to the `w3-dropdown-content` element when the mouse enters and exits the button area.
**Example:**
This code snippet is using a W3.CSS framework to provide the styling and W3E for JavaScript functionality.
```
Dropdown
```
### 8. Panel
Panels are used to display information like for example notification message.
- Added CSS: `w3e-close`.
- Added JavaScript methods: automatically assigned.
**Structure:**
- The main container of a panel is any element with the class name `w3-panel`.
- Each panel features two clickable buttons: a close button located within the panel itself `w3e-close`, and show the panel programmable using `w3e.show()` function.
**Function Logic:**
This component is a simple HTML structure for a panel that can be shown or hidden using JavaScript. Let's break it down:
- `w3e.show('panel')` can be used in any programmable way to show the panel is an event handler that triggers a JavaScript function w3e.show('panel') when the button is clicked. This function is responsible for making the panel visible. Example: `Show panel`
- The parent element must have ID and the class "w3-panel". The "w3-display-container" is optional to help in positioning and layout of the child element. Example: `
`
- A child element with the class "w3-button" and optional "w3-display-topright" can be added to preform the **close panel** function.
"w3-display-topright" positions the element in the top-right corner of its parent panel element. Example: ``
**Example:**
This code snippet represents a panel that can be shown or hidden through the button's interaction. The JavaScript function w3e.show('panel') is responsible for this functionality.
```
Show panel
Hello world!
```
### 9. Show and Hide HTML Elements
Functions to show and hide any HTML element, like notification message.
- Added CSS: no specific CSS class for progress bar. However, either an element ID, or pass the element's object itself, is required.
- Added JavaScript method: `show(ID || object)` and `hide(ID || object)`.
**Function Logic:**
- The `show()` and `hide()` functions can be added to `onclick` attribute is what makes this interactive. When clicked, it executes the JavaScript code `w3e.show(ID)`.
Using the `onclick` event to call `w3e.hide()` and `w3e.show()` functions passes the ID of the panel as an argument, making the panel visible or invisible. Example: `Hide Panel`
**Example:**
This code snippet creates a simple HTML panel with the ability to be shown or hidden using JavaScript buttons.
```
Hello world!
Show Panel
Hide Panel
```
## Support, Feedback & Issues
- For [support & Feedback](https://github.com/emnawer/w3e/discussions).
- To report [issues](https://github.com/emnawer/w3e/issues).
- Visit W3E website:(https://w3e.uk).
