Built on top of W3.CSS with JavaScript!
JavaScript components come with working code at CodePen, so you can learn, test and copy.
See the Pen ReactJS Sidebar Component (S) by emnawer (@emnawer) on CodePen.
Try more at CodePen.
W3E isn't a CSS rebuild of the W3.CSS framework, instead, it serves as an addition. While JavaScript is the primary enhancement, W3E also addresses bug fixes and introduce valuable new styles to the existing framework.
Component |
W3.CSS v4.10 |
W3E v1.0 |
|---|---|---|
| Accordion | w3e-accordion* | w3e.accordions() |
| Tab | w3e-tab* | w3e.tabs() |
| Slide Show | w3e-slider* | w3e.sliders() |
| Sidebar | w3-sidebar | w3e.sidebars() |
| Progress Bar | N/A** | w3e.updateBar() |
| Modal | w3-modal | w3e.modals() |
| Dropdown | w3-dropdown-click | w3e.dropdowns() |
| Panel | w3-panel | w3e.panels() |
| Show HTML Element | w3-show | w3e.show() |
| Hide HTML Element | w3-hide | w3e.hide() |
*Was not available with old W3.CSS and added with W3E.
**N/A: component does not require a CSS class.
Easy to remember color classes, you don't need to recall the function name of a color class, it's always that color... the red text is w3-text-red and blue is w3-blue.
*In (brackets) the function naming of the color as used by other frameworks.
Multiple blocks divide a row horizontally into halves, thirds, or quarters.
On smaller screens, the blocks automatically stack for optimal viewing.
You can include the following CDN files to your website page by adding them to the <head> section of your HTML document.
The HTML document header should look similar to this:
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/emnawer/w3e@v1.0-rc3/w3e.min.css">
<script src="https://cdn.jsdelivr.net/gh/emnawer/w3e@v1.0-rc3/w3e.min.js"></script>
</head>
The best way you include these files with the least issues, place the CSS <link> tag before the JavaScript <script> tag in the <head> section.
Visit these profiles today, and follow me.
