Joomla 4 is currently in Alpha. The beta will be released in the 3rd quarter of 2019, and the stable is expected to be released at the end of 2019. Why is everybody so excited about Joomla? Responsive web design through Bootstrap. But is Bootstrap really the best option or is there are a better choice, for instance, w3css?
Picture it … you’re creating your next great website … a jackpot casino … you got the games, you got the images, you got the sound — now you just need to make sure that it going to look beautiful no matter how your user interacts with your website — phone, tablet, desktop hidden in the corner, so the boss can’t see it. It has got to look great.
W3CSS To The Rescue!
w3css is a modern CSS framework with built-in responsiveness. It supports responsible mobile-first design, and it is smaller and faster than Boostrap. What is mobile-first? It means that when you design a website, you design for the phone first (both in landscape and tablet mode), then you design for a tablet, and finally, you design for a desktop. And don’t forget to design for the user making the window smaller so the boss can’t see them playing your jackpot casino when they are supposed to working.
Bootstrap does it interactivity through javascript. w3css does it responsiveness through classes. Because w3css is purely classed with an awesome standard CSS file, w3css can be added onto any other framework system including Bootstrap, but you do not need Bootstrap to take advantage of w3css.
Just add two lines to the header of your HTML file and you are ready to go with w3css and font awesome.
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
Do you want your site even faster, use the pro version and only include the color theme that you want:
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3pro.css”>
<link rel=”stylesheet” href=”https://www.w3schools.com/lib/w3-theme-deep-purple.css”>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
The color themes are not restricted to a theme. The color themes can also be based on standards in an operating system or an area of design, fashion or highway signs.
If you know that you want your website to be in the red color range, but you don’t know what other colors to include in order to make your website look good, just pick a color theme. What makes it even better is that changing a color schema is as easy as changing a filename.
Once you start designing websites with w3css, you are going to include it in all of the projects, no matter what other skins, templates, or frameworks may already be in use.
Beyond Just Colors
Obviously, all of the standard stuff is included: borders, fonts, text, padding, margins, etc. But that is like saying that every language has nouns and verbs. Nouns and verbs are essential, but that is not where the beauty of a language comes in.
• Cards
• Notes
• Quotes
• Tables
• Lists
• Images
• Inputs
• Badges
• Tags
• Icons
• Responsiveness
• Layout
• Animations
• Effects
• Bars
• Dropdowns
• Accordians
• Navigation
• Sidebar
• Tabs
• Pagination
• Progress bars
• Slideshow
• Modal
• Tooltips
• Grid
• Filters
Instead of thinking of CSS in terms of fonts and margins and displays, you start thinking of CSS in terms of what you want to accomplish. All of that debugging and testing of CSS is done for you by w3schools. You just have to include it in your HTML file.
And on top of that, w3schools is fantastic with the documentation. Their whole entire website is dedicated to teaching programming, so they teach their own product as great as they teach standard HTML and CSS.
Examples, Howtos, and Templates
Are you still not convinced? Then check out the sample templates at W3.CSS Templates
Do you want to see examples? Then check out the example code snippets at W3.CSS Examples.
Do you want to see step by step how-to guides? Then check out w3schools How-To pages. Just remember that these how-to guides include more than just w3css. They include a mixture of technologies.
But if you want to know how to do website design by an idea instead of the individual technical parts, than w3schools and w3css is the website to go to.
21 total views, 21 views today
