Date: 2024-07-17 Page is: DBtxt003.php txt00018733
Computer Science
The CSS framework
Kick start your web-development project via a lightweight and responsive CSS framework called W3.CSS
Burgess COMMENTARY
Peter Burgess
This is your last free story this month.
Upgrade for unlimited access
5
Upgrade
Peter Burgess
Better Programming
ARCHIVE
WRITE FOR US
STYLE GUIDE
JOB BOARD
ABOUT
Getting Started With W3.CSS
Kick start your web-development project via a lightweight and responsive CSS framework called W3.CSS
Ng Wai Foong
Ng Wai Foong
Follow
Sep 18, 2019 · 9 min read
Photo by Pankaj Patel on Unsplash
In this article, I will be introducing an easy-to-use framework called W3.CSS.
Please note: This framework is meant for lightweight projects. I strongly recommend this to those that have just started out in web development in order to familiarize themselves with CSS.
The features available are good enough for a simple website. Based on the official website:
W3.CSS is a modern CSS framework with built-in responsiveness. It supports responsive mobile-first design by default, and it is smaller and faster than similar CSS frameworks.
W3.CSS can also speed up and simplify web development because it is easier to learn and easier to use than other CSS frameworks.
The main advantage is that it is free to use without any licensing required. On top of that, you can easily include it in your project with just a single line of code. We’ll cover three main areas in this article:
Setting up
Basic usage
Conclusion
Setting Up
Version
There are two different versions available:
Default: The original version provided by the official site. At the time of this writing, the latest is version 4.13.
Professional: It is free to use, just like the default version. The pro version is smaller and faster because it has no colors defined. The pro version is designed for use with themes or other color classes supplied by the developer.
Download
You can download the CSS script and link it locally or just follow the code supplied at this link:
For the professional version, you can use the following link:
You can define your own color using the style tag if you are using the professional version:
In addition, you can load your own theme as well, just like the following example:
Each theme will have the following classes:
w3-theme-l5
w3-theme-l4
w3-theme-l3
w3-theme-l2
w3-theme-l1
w3-theme
w3-theme-d1
w3-theme-d2
w3-theme-d3
w3-theme-d4
w3-theme-d5
Basic Usage
All of the CSS classes start with a w3- prefix. You can easily add it inline inside the class of the tag. In this article, I will list out a few important classes we can use to style our page. Let’s have a look at a container class below:
Background color
You can easily add color to a div tag using the w3- class. You can check for the complete list of available classes via the following link.
Welcome to Medium!
Text color
Text color is the same as background color — just with a different class (w3-text-).
Welcome to Medium!
Hover color
You can change the color when a mouse hovers over it using the w3-hover- class.
Welcome to Medium!
You can do the same for the hover effect on text as well. Remember not to overdo it.
Container and panel
This is one of the most important classes, and it’s commonly used for div, header, and footer tags.
It provides a common style for the tag. The w3-container class adds a 16px left and right padding to an element, while the w3-panel class adds a 16px top and bottom margin and a 16px left and right padding to an element.
The image below shows the differences between w3-container and w3-panel.
Border
You can display a border via the w3-border class. You can specify which side to display and whether the border should be thin or thick. The border color can be defined as well.
Let’s have a look at the the following example:
Showing a blue border.
Card
w3-card is a useful class to provide a paperlike effect. It’s most commonly used in a modal to display a form or an image.
Let’s try out three different versions based on the intensity of a bordered shadow:
w3-card
w3-card-2
w3-card-4
Display
You display elements at a specific position via the display class. You need to have a parent div as a container.
Let’s try it out with the following code:
Top Left
Top Right
Bottom Left
Bottom Right
Left
Right
Middle
Top Middle
Bottom Middle
Round
You can add rounded corners to an element — be it a div or an image — using the w3-round syntax. It also has support for different variations of border-radius:
w3-round — element rounded (border-radius) 4px
w3-round-small — element rounded (border-radius) 2px
w3-round-medium — element rounded (border-radius) 4px
w3-round-large — element rounded (border-radius) 8px
w3-round-xlarge — element rounded (border-radius) 16px
w3-round-xxlarge — element rounded (border-radius) 32px
w3-round
w3-round
w3-round
w3-round
Button
The w3-button class can be easily paired with any w3- classes to create your own desired buttons. Let’s have a look at some of the variations of the button classes available:
w3-button — a rectangular button with a gray hover effect. The default color is light gray in W3.CSS version 3. The default color is inherited from the parent element in version 4.
w3-bar — a horizontal bar that can be used to group buttons together
(perfect for horizontal navigation menus)
w3-block — a class that can be used to define a full-width (100%) button
w3-circle — can be used to define a circular button
Bar
You can create your own horizontal bars for the menu selection using the w3-bar class. The following example is based on w3-bar-block for a short width and vertical bar:
London
Paris
Tokyo
Table
W3.CSS offers a few different classes for styling the tables. The easiest method is to rely on the w3-table-all and modify it accordingly.
w3-table — container for an HTML table
w3-striped — striped table w3-border-bordered table
w3-bordered — bordered lines
w3-centered — centered table content
w3-hoverable — hoverable table
w3-table-all — all properties set
Article Name
Author
Fans
Emoji Are the Future of Effective Web Design
Ng Wai Foong
11
A Beginner’s Guide to Rasa NLU for Intent Classification
Ng Wai Foong
29
List
You just need to put the w3-ul class to the ul tag to style your list. You can add w3-border or w3- classes to further improve the design of your list.
1
2
3
Image
You can use the w3-image class to create a responsive image that scales down as the window resize but never scale up larger than the original image. There are also other useful classes that alter the images and provide some amazing effects:
w3-opacity — adds opacity/transparency to an element (opacity: 0.6)
w3-grayscale — adds a grayscale effect to an element (grayscale: 75%)
w3-sepia — adds a sepia effect to an element (sepia: 75%)
Normal (100% opacity):
w3-sepia:
w3-opacity (60% opacity):
w3-grayscale:
Input
You can easily style a text input with your w3-input class.
By default, it will just show a straight line as the input, but you can add a border to it via the w3-border class.
Checkbox
Styling checkboxes is pretty straightforward with the w3-check class.
Radio
Likewise, you can use a w3-radio class for radio buttons.
Select
Use w3-select to style the select tag. Remember to add in w3-border if you intend to display a border.
Conclusion
Congratulations on reaching the end of this article. Let’s recap what we have learned today.
First, we explored a few ways to install and setup W3.CSS.
Then, we moved on to the basic usage of this framework. We can easily define our class inline, and all of the classes use the w3- prefix. We can easily style our elements using the basic classes. You can also add classes on top of each other inline to create the style that you desired.
W3.CSS is definitely a great framework for those that have just started to do web development. It saves you the trouble of having to configure and set up properly before you can even start to code.
Check out the following link to find out more about the rest of the classes available. Thanks for reading — I will be writing on the advance classes that involve a bit of JavaScript in the next article.
Reference
https://github.com/JaniRefsnes/w3css
https://www.w3schools.com/w3css/w3css_downloads.asp
https://www.w3schools.com/w3css/w3css_intro.asp
https://www.w3schools.com/w3css/w3css_references.asp
Better Programming
Advice for programmers.
Follow
117
Web Development
CSS
Lightweight
HTML
Programming
117 claps
Ng Wai Foong
WRITTEN BY
Ng Wai Foong
Follow
AI Engineer@Yoozoo | Content Writer #NLP #datascience #programming #machinelearning | Linkedin: https://www.linkedin.com/in/wai-foong-ng-694619185/
Better Programming
Better Programming
Follow
Advice for programmers.
Write the first response
More From Medium
More from Better Programming
If Programming Languages Had Honest Slogans
Anupam Chugh in Better Programming
Apr 19 · 3 min read
7.6K
More from Better Programming
100 of the Best Engineers, Developers, Coders, and Entrepreneurs to Follow Online
Jana Bergant in Better Programming
Apr 15 · 29 min read
2.3K
More from Better Programming
Should You Stop Using .forEach() in Your JavaScript Code?
Joey Colon in Better Programming
Apr 14 · 4 min read
1.3K
Discover Medium
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Make Medium yours
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Become a member
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade
About
Help
Legal
