The w3css extension adds w3.css support for HTML to Visual Studio Code.
Preview 🕵🏽♂️
Usage
To use the w3.css snippets, open a HTML file, and start typing w3-, followed by pressing Ctrl+Space.
For quick generate snippets start typing w3s-,followed by pressing Ctrl+Space.
w3.css CDN
type w3s-cdn,followed by pressing Enter for import w3.css CDN
Email me => suvam2603@gmail.com
OR
Github => issue
W3.CSS Reference =>
Container Classes
Class
Defines
w3-container
HTML container with 16px left and right padding
w3-panel
HTML container with 16px left and right padding and 16px top and bottom margin
w3-badge
Circular badge
w3-tag
Rectangular tag
w3-ul
Unordered list
w3-display-container
Container for w3-display-classes (enables positioning of elements inside the container)
w3-block
Class that can be used to define a full width for any element
w3-code Code
container
w3-codespan
Inline code container (for code snippets)
w3-content
Container for fixed size centered content
w3-auto Container
for responsive size centered content
w3-stretch
Class that removes right and left margins (especially useful for stretching padded rows (w3-row-padding))
Table Classes
Class
Defines
w3-table
Container for an HTML table
w3-striped
Striped table
w3-border
Bordered table
w3-bordered
Bordered lines
w3-centered
Centered table
w3-hoverable
Hoverable table
w3-table-all
All properties set
w3-responsive
Creates a responsive table
Card Classes
Class
Defines
w3-card
Same as w3-card-2
w3-card-2
Container for any HTML content (2px bordered shadow)
w3-card-4
Container for any HTML content (4px bordered shadow)
Responsive Classes
Class
Defines
w3-row
Container for one row of fluid responsive content
w3-row-padding
Row where all columns have a default padding
w3-auto
Container for responsive size centered content
w3-stretch
Class that removes right and left margins
w3-half
Half (1/2) screen column container
w3-third
Third (1/3) screen column container
w3-twothird
Two third (2/3) screen column container
w3-quarter
Quarter (1/4) screen column container
w3-threequarter
Three quarters (3/4) screen column container
w3-col
Column container for any HTML content
w3-rest
Occupies the rest of the column width
l1 - l12
Responsive sizes for large screens
m1 - m12
Responsive sizes for medium screens
s1 - s12
Responsive sizes for small screens
w3-hide-small
Hide content on small screens (less than 601px)
w3-hide-medium
Hide content on medium screens
w3-hide-large
Hide content on large screens (larger than 992px)
w3-image
Responsive image
w3-mobile
Adds mobile-first responsiveness to any element.
Layout Classes
Class
Defines
w3-cell-row
Container for layout columns (cells).
w3-cell
Layout column (cell).
w3-cell-top
Aligns content at the top of a column (cell).
w3-cell-middle
Aligns content at the vertical middle of a column (cell).
w3-cell-bottom
Aligns content at the bottom of a column (cell).
Bar Classes - Navigation
Class
Defines
w3-bar
Horizontal bar
w3-bar-block
Vertical bar
w3-bar-item
Provides common style for bar items
w3-sidebar
Side bar
w3-collapse
Used together with w3-sidebar to create a fully automatic responsive side navigation. For this class to work, the page content must be within a "w3-main" class
w3-main
Container for page content when using the w3-collapse class for responsive side navigations
