The following live program shows three examples in menu tab format to illustrate interactively both frameworks in action.
The starting screen shows the versatility of W3CSS, as you see w3-header, w3-tab, w3-content, and w3-footer blocks. In the w3-header and w3-footer, w3-teal color is the fill so the font-color automatically switches from black to white. Click on any of the w3-tab menus and the Knockout demo will instantly appear. For example the Seat Reservations tab demonstrates how Knockout can be used to fill in a table dynamically. By adding class classes to the <table class=”w3-table w3-striped w3-border”> class tag, the table is completely restyled. Likewise add a class to the.<thead class=”w3-teal”> tag gives the table a green header with striped lighter green and white. But hover your mouse over any row and the row becomes a light grey. This is the wp-hoverable class in action.
Next click on the Voting Preferences Tab. This reveals a Pseudo Political Survey again using Knockout to fill in the table. As you can see the table is styled with W3CSS just as before. But the second column, Importance, has 5 dropdowns which which allow users to rate from 0 to 5 each of the survey options. Knockout enables this embedding of the dropdowns directly into the table.Click on the Finsihed button, note how the button sports a dropshadow courtesy of W3CSS. And the resulting modal is easy to insert in your HTML because W3CSS hides the markup until needed.
Both tools, W3CSS and Knockout, are impressive. W3CSS provides a Google Material Design like style with builtin in responsiveness and templates that are very compelling given the price of FREE. And there is the super W3schools TryIt documentation available for throughout the comprehensive Guide to W3CSS:
This is a Web keeper which theOpenSourcery will be exploring with several more posts in coming weeks.
But Knockout is no slouch either in documentation and tutorials:
Angular 1.5 – Google inspired
Angular 2 – very different in syntax to 1.5
Backbone.js – first on the scene
Ember,js – many special features
React.js – WordPress Calypso and Facebook adopters
Vue.js – clean overall design
The Opensourcery will try to provide some helpful guidance on these tools in the live, interactive style as done in this post. By the way if you go here you can see the full screen version of the code iframed in this post.