W3Schools W3CSS is a robust CSS Framework for use in WordPress
The following examples show some of the advantages of having a mobile/responsive CSS Framework available to your WP editing. It is like having BootStrap or Foundation Zurb at your disposal. The styling in W3CSS is easy to learn especially if you have used either of the JavaScript frameworks. W3CSS uses minimal JavaScript; but as we shall see below that still presents problems for using W3CSS in WordPress. But without further todo – lets view some W3CSS in action.
Shoring up WordPress Table Handling
Hoverable Table
One of the weaknesses of WordPress surprisingly is its poor support of its own MySQL database. But in the past 2-3 year a number of plugins have emerged which shore up Table Handling in WordPress.Here are some notable table plugins:
- wpDataTable – $35/website plugin tha connects to CSV, Excel, Json, and SQL data sources
- TablePress – free plugin with paging and sortig featurs for CSV, HTML, XLS, XLSX, and JSON data.
- WP Table Manager – $39/for 1 yar support unlimited websites, unlimited updates CSV & Excel file imports plus table creation
- Ultimate Tables – easy direct table creaion in WordPress
W3CSS table tools offer some more formating options for your table display as seen below:
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
Why would you want to put W3CSS into your WordPress Pages? It is just a responsive, superset of Foundation Zurb Framework without as many JavaScript routines but rather uses CSS most of the time for basic UI widgets. Here is an example:
Summer 2016
Floral flourish
Mums the word
Blue Blooms
Bloom of Paradise
Lily Blow Your Horn
Floral Color Palette
Note that this gallery and images are mobile ready and fully responsive. See the coding here.
Advantages of W3CSS
This example uses a W3CSS accordion to explain the features of W3CSS. Click on an accordion bar to see the details.
Like Bootstrap and Foundation, W3CSS is completely free. But it has as many features as the other Frameworks with some added capabilities like animations, tooltips, and sidebar navigation.
W3CSS has notably smaller code size which contributes to its faster performance.
The code is simpler and easier to learn. W3CSS uses CSS primarily with minimal draw upon Javascript. However advanced Javascript UI frameworks can be used with W3CSS.
W3CSS uses a responsive design system for grid layout and web page design. These responsive elements extend to images and most menus and blocks used on the Web.
W3CSS works well with the 5 major browsers: Chrome, Edge, Firefox, Apple Safari and Opera. No need for shivs and polyfills.
The WP Visual Editor strips away the onclick= code essential for making JavaScript code chunks work. This is even true in the SiteOrigin PageBuilder and its Content Editor widget. I have yet to find a work around for this. As a consequence W3CSS users that use the small number JavaScript driven widgets will have to do so with a User that has the Visual Editor disabled [its at the top of the User command].
I have yet to find a robust HTML editor for WordPress that brings line coloring, auto-formatting and other text editor goodies users are familiar with popular desktop editors like Sublime, NotePad++, UltaEdit, and Atom. So users may want to edit their W3CSS posts and pages outside WP and the copy and paste into WP’s Editor.
Blowing Badge Bubbles in W3CSS
17
76
15
66
55
66
99
999
33
44
42
69
Have fun with W3CSS in WordPress and also in HTML SPA-Single Page Applications