Drupal8 W3CSS Theme

Drupal8 W3CSS Theme is using the W3.CSS framework with built-in responsiveness: Smaller and faster than other CSS frameworks. - Easier to learn, and easier to use than other CSS frameworks. - Uses standard CSS only (No jQuery or JavaScript library). - Speeds up and simplifies web development. - Supports modern responsive design (mobile first) by default. - Provides CSS equality for all browsers. Chrome, Firefox, IE, Safari, and more. - Provides CSS equality for all devices. PC, laptop, tablet, and mobile. - Learn more about W3.CSS https://www.w3schools.com/w3css/

Drupal8 W3CSS Theme - W3CSS References

How does CSS work? When a visitor loads one of your Web pages, by either typing in the address or clicking a link, the server (the computer that stores the Web page) sends the HTML file to the visitor’s computer along with any files linked to or embedded in the HTML file. Regardless of where the CSS code is, the visitor’s browser will interpret it and apply it to the HTML to render the Web page using that browser’s particular rendering engine that is then displayed in the browser window. All modern browsers (Internet Explorer, Firefox, Safari, Opera) support CSS2 (which includes CSS1 and CSS-Positioning). However, after years of development, CSS3 remains a work in progress, supported by some browsers (Firefox, Safari, and Opera) but still under development in others (Internet Explorer)



Container Classes
Class Defines
w3-container HTML container with 16px left and right padding
  Used as header
  Used as footer
w3-panel HTML container with 16px left and right padding and 16px top and bottom margin
  Used to display a note
  Used to display a quote
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-code Code container
w3-codespan Inline code container (for code snippets)
w3-example Deprecated (Use w3-panel instead)
w3-progress-container Deprecated (Use <div> instead)
w3-progressbar Deprecated (Use <div> instead)
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)
w3-card-8 Deprecated (Use another card class instead)
w3-card-12 Deprecated (Use another card class instead)
w3-card-16 Deprecated (Use another card class instead)
w3-card-24 Deprecated (Use another card class instead)
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-content Container for fixed size centered content
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.
Displays elements as block elements on mobile devices.
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).
Deprecated Layout Classes
Class Defines
w3-layout-container Deprecated (Use w3-cell-row instead)
w3-layout-cell Deprecated (Use w3-cell instead)
w3-layout-col Deprecated (Use w3-mobile instead)
w3-layout-top Deprecated (Use w3-cell-top instead)
w3-layout-middle Deprecated (Use w3-cell-middle instead)
w3-layout-bottom Deprecated (Use w3-cell-bottom instead)
Bar - Navigation Classes
Class Defines
w3-bar Horizontal bar
w3-bar-block Vertical bar
w3-bar-item Provides common style for bar items
w3-sidebar Side bar
  A side bar can contain all types of content
  A side bar overlaying main content
  A side bar overlaying all main content
  A side bar shifting main content to the right
  A side bar with an overlay background
  A Side bar on the right side
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
  Fully automatic right-sided responsive side navigation
w3-sidenav Deprecated (Use w3-sidebar instead)
w3-navbar Deprecated (Use w3-bar instead)
w3-navitem Deprecated (Use w3-bar-item instead)
w3-topnav Deprecated (Use w3-bar instead)
w3-navblock Deprecated (Use w3-bar-block instead)
w3-accordion Deprecated (Use w3-show and w3-hide instead)
w3-accordion-content Deprecated (Use w3-show and w3-hide instead)
w3-pagination Deprecated (Use w3-bar instead)
w3-dropnav Deprecated (Use w3-bar-block instead)
Dropdown Classes
Class Defines
w3-dropdown-hover Hoverable dropdown element
  Hoverable dropdown element (used in w3-bar)
  Hoverable dropdown element (used in w3-bar-block)
  Hoverable dropdown element (used in w3-sidebar)
Button Classes
Class Defines
w3-button Grey rectangular button
w3-btn Black rectangular button
w3-ripple Rectangular button with ripple effect
  Circular floating button with ripple effect
w3-bar Can be used to group elements (like buttons) in an horizontal bar
w3-btn-block Deprecated (Use w3-button w3-block instead)
w3-btn-floating Deprecated (Use w3-button w3-circle instead)
w3-btn-floating-large Deprecated (Use w3-circle instead)
w3-btn-group Deprecated (Use w3-bar instead)
w3-btn-bar Deprecated (Use w3-bar instead)
w3-opennav Deprecated (Use w3-button instead)
w3-closenav Deprecated (Use w3-button instead)
w3-closebtn Deprecated (Use w3-button instead)
Input Classes
Class Defines
  Input form as a card
w3-input Input elements
  Input elements (top labels)
  Input elements (bottom labels)
w3-check Checkbox input type
w3-radio Radio input type
w3-select Input select element
w3-animate-input Animates the width of an input to 100%
w3-form Deprecated (Use w3-container or w3-panel instead)
w3-group Deprecated (use w3-section instead)
w3-label Deprecated (Use <label> instead)
w3-validate Deprecated (Use programmed validation instead)
Modal Classes
Class Defines
w3-modal Modal container
w3-modal-content Modal pop-up element
w3-tooltip Tooltip element
w3-text Tooltip text
Animation Classes
Class Defines
w3-animate-top Animates an element from the top -300px to 0px
w3-animate-left Animates an element from left -300px to 0px
w3-animate-bottom Animates an element from the bottom -300px to 0px
w3-animate-right Animates an element from right -300px to 0px
w3-animate-opacity Animates an element's opacity from 0 to 1
w3-animate-zoom Animates an element from 0 to 100% in size
w3-animate-fading Animates an element's opacity from 0 to 1 and 1 to 0 (fades in AND out)
w3-spin Spin an icon 360 degrees
  Spin any element 360 degrees
w3-animate-input Animates the width of an input field to 100%
Font & Text Classes
Class Defines
w3-tiny Specifies a font size of 10 pixels
w3-small Specifies a font size of 12 pixels
w3-large Specifies a font size of 20 pixels
w3-xlarge Specifies a font size of 24 pixels
w3-xxlarge Specifies a font size of 32 pixels
w3-xxxlarge Specifies a font size of 48 pixels
w3-jumbo Specifies a font size of 64 pixels
w3-wide Specifies a wider text
w3-serif Changes the font to serif
w3-text-shadow Deprecated (Use CSS3 instead)
w3-slim Deprecated (Use letter-spacing instead)
w3-vertical Deprecated (Use w3-container or w3-panel instead)
Display Classes
Class Defines
w3-center Centered content
w3-left Floats an element to the left (float: left)
w3-right Floats an element to the right (float: right)
w3-left-align Left aligned text
w3-right-align Right aligned text
w3-justify Right and left aligned text
w3-circle Circled content
w3-hide Hidden content (display:none)
w3-show Show content (display:block)
w3-show-block Alias of w3-show (display:block)
w3-show-inline-block Show content as inline-block (display:inline-block)
w3-top Fixed content at the top of a page
w3-bottom Fixed content at the bottom of a page
w3-display-container Container for w3-display-classes (position: relative)
w3-display-topleft Displays content at the top left corner of the w3-display-container
w3-display-topright Displays content at the top right corner of the w3-display-container
w3-display-bottomleft Displays content at the bottom left corner of the w3-display-container
w3-display-bottomright Displays content at the bottom right corner of the w3-display-container
w3-display-left Displays content to the left (middle left) of the w3-display-container
w3-display-right Displays content to the right (middle right) of the w3-display-container
w3-display-middle Displays content in the middle (center) of the w3-display-container
w3-display-topmiddle Displays content at the top middle of the w3-display-container
w3-display-bottommiddle Displays content at the bottom middle of the w3-display-container
w3-display-position Displays content at a specified position in the w3-display-container
w3-display-hover Displays content on hover inside the w3-display-container
Effect Classes
Class Defines
w3-opacity Adds opacity/transparency to an element (opacity: 0.6)
  Add opacity/transparency to text
w3-opacity-off Turns off opacity/transparency (opacity: 1)
w3-opacity-min Adds opacity/transparency to an element (opacity: 0.75)
w3-opacity-max Adds opacity/transparency to an element (opacity: 0.25)
w3-grayscale-min Adds a grayscale effect to an element (grayscale: 50%)
w3-grayscale Adds a grayscale effect to an element (grayscale: 75%)
w3-grayscale-max Adds a grayscale effect to an element (grayscale: 100%)
w3-sepia-min Adds a sepia effect to an element (sepia: 50%)
w3-sepia Adds a sepia effect to an element (sepia: 75%)
w3-sepia-max Adds a sepia effect to an element (sepia: 100%)
w3-overlay Creates an overlay effect
Background Color Classes
Class Defines
w3-red Background color red
w3-pink Background color pink
w3-purple Background color purple
w3-deep-purple Background color deep purple
w3-indigo Background color indigo
w3-blue Background color blue
w3-light-blue Background color light blue
w3-cyan Background color cyan
w3-aqua Background color aqua
w3-teal Background color teal
w3-green Background color green
w3-light-green Background color light green
w3-lime Background color lime
w3-sand Background color sand
w3-khaki Background color khaki
w3-yellow Background color yellow
w3-amber Background color amber
w3-orange Background color orange
w3-deep-orange Background color deep orange
w3-blue-grey Background color blue grey
w3-brown Background color brown
w3-light-grey Background color light grey
w3-grey Background color grey
w3-dark-grey Background color dark grey
w3-black Background color black
w3-pale-red Background color pale red
w3-pale-yellow Background color pale yellow
w3-pale-green Background color pale green
w3-pale-blue Background color pale blue
w3-transparent Transparent background-color
Text Color Classes
Class Defines
w3-text-red Text color red
w3-text-pink Text color pink
w3-text-purple Text color purple
w3-text-deep-purple Text color deep purple
w3-text-indigo Text color indigo
w3-text-blue Text color blue
w3-text-light-blue Text color light blue
w3-text-cyan Text color cyan
w3-text-aqua Text color aqua
w3-text-teal Text color teal
w3-text-green Text color green
w3-text-light-green Text color light green
w3-text-lime Text color lime
w3-text-sand Text color sand
w3-text-khaki Text color khaki
w3-text-yellow Text color yellow
w3-text-amber Text color amber
w3-text-orange Text color orange
w3-text-deep-orange Text color deep orange
w3-text-blue-grey Text color blue grey
w3-text-brown Text color brown
w3-text-light-grey Text color light grey
w3-text-grey Text color grey
w3-text-dark-grey Text color dark grey
w3-text-black Text color black
w3-text-white Text color white
Hover Classes
Class Defines
w3-hover-white Hover color white
w3-hover-black Hover color black
w3-hover-red Hover color red
w3-hover-blue Hover color blue
w3-hover-green Hover color green
w3-hover-aqua Hover color aqua
w3-hover-orange Hover color orange
w3-hover-grey Hover color grey
w3-hover-pale-green Hover color pale green
w3-hover-text-red Hover text color red
w3-hover-text-blue Hover text color blue
w3-hover-text-green Hover text color green
w3-hover-text-purple Hover text color purple
w3-hover-border-color Hover border color
w3-hover-opacity Adds transparency to an element on hover (opacity: 0.6)
w3-hover-opacity-off Removes transparency from an element on hover (100% opacity)
w3-hover-shadow Adds shadow to an element on hover
w3-hover-grayscale Adds a black and white (100% grayscale) effect to an element
w3-hover-sepia Adds a sepia effect to an element on hover
w3-hover-none Removes hover effects from an element
Round Classes
Class Defines
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-jumbo Deprecated (Use w3-round-xxlarge instead)
Padding Classes
Class Defines
w3-padding-small Padding 4px top and bottom, and 8px left and right.
w3-padding Padding 8px top and bottom, and 16px left and right.
w3-padding-large Padding 12px top and bottom, and 24px left and right.
w3-padding-16 Padding 16px top and bottom
w3-padding-24 Padding 24px top and bottom
w3-padding-32 Padding 32px top and bottom
w3-padding-48 Padding 48px top and bottom
w3-padding-64 Padding 64px top and bottom
w3-padding-tiny Deprecated (Use CSS padding instead)
w3-padding-medium Deprecated (Use w3-padding instead).
w3-padding-xlarge Deprecated (Use CSS padding instead)
w3-padding-xxlarge Deprecated (Use CSS padding instead)
w3-padding-jumbo Deprecated (Use CSS padding instead)
w3-padding-4 Deprecated (Use CSS padding instead)
w3-padding-8 Deprecated (Use CSS padding instead)
w3-padding-12 Deprecated (Use CSS padding instead)
w3-padding-128 Deprecated (Use CSS padding instead)
w3-padding-0 Deprecated (Use CSS padding:0 instead)
w3-padding-left Deprecated (Use CSS padding-left instead)
w3-padding-right Deprecated (Use CSS padding-right instead)
w3-padding-top Deprecated (Use CSS padding-top instead)
w3-padding-bottom Deprecated (Use CSS padding-bottom instead)
Margin Classes
Class Defines
w3-margin Adds an 16px margin to an element
w3-margin-top Adds an 16px top margin to an element
w3-margin-right Adds an 16px right margin to an element
w3-margin-bottom Adds an 16px bottom margin to an element
w3-margin-left Adds an 16px left margin to an element
w3-section Adds an 16px top and bottom margin to an element
w3-margin-0 Deprecated (Use CSS margin:0 instead)
Border Classes
Class Defines
w3-border Borders (top, right, bottom, left)
w3-border-top Border top
w3-border-right Border right
w3-border-bottom Border bottom
w3-border-left Border left
w3-border-0 Removes all borders
w3-border-color Displays any defined borders in a specified color (like red, etc)
w3-bottombar Adds a thick bottom border (bar) to an element
w3-leftbar Adds a thick left border (bar) to an element
w3-rightbar Adds a thick right border (bar) to an element
w3-topbar Adds a thick top border (bar) to an element
w3-hover-border-color Hoverable border color

Drupal8 W3CSS Theme - Modal Classes

Once your libraries, frameworks, and sitewide CSS are ready to go live, you need to pick the best strategy for deployment. It is always recommended that you place all your styles in one or more external style sheets, and then use either the @import code to apply them to a Web document.

Drupal8 W3CSS Theme - Container Classes

Working with Pseudo-classes Many HTML elements have special states or uses associated with them that can be styled independently.

Drupal8 W3CSS Theme - Font-Size Classes

What Is a Markup Language? HTML is used to mark up the structure of Web pages, but other markup languages are used by computers on the Web and beyond. The Standard Generalized Markup Language (SGML) is the grandfather of most markup languages used for print and the Internet.

Drupal8 W3CSS Theme - Padding Classes

At first glance, padding seems to have an effect identical to margins: It adds space around the element’s content. The difference is that padding sets the space between the border of the element and its content rather than between the element and the other elements in the window.

Drupal8 W3CSS Theme - Effect Classes

Most HTML tags have browser inherited styles associated with them. These default styles are actually defined by the Web browser developer. Because the browser developer has added them, you need to remember that they are there and will affect your design.