W3CSS Theme is the first Drupal theme that uses the w3.css framework.
When building this theme, I focused on ease of use and a fast load time. Now, you have the power to create unlimited UI design by using the W3CSS Paragraphs.
-
⚡️W3CSS Paragraphs 3D Carousel Bundle - Images
⚡️W3CSS Paragraphs 3D Carousel Bundle - Text - ⚡️W3CSS Paragraphs 3D Flip Box Bundle
- ⚡️W3CSS Paragraphs Accordion Bundle
- ⚡️W3CSS Paragraphs Card Bundle
- ⚡️W3CSS Paragraphs Contact Form Bundle
- ⚡️W3CSS Paragraphs Drupal Block Bundle
- ⚡️W3CSS Paragraphs Hero Bundle
- ⚡️W3CSS Paragraphs Image Bundle
- ⚡️W3CSS Paragraphs Image Overlay Bundle
- ⚡️W3CSS Paragraphs Modal Bundle
- ⚡️W3CSS Paragraphs Parallax Bundle
- ⚡️W3CSS Paragraphs Simple Bundle
- ⚡️W3CSS Paragraphs Slideshow Bundle
- ⚡️W3CSS Paragraphs Tabs Bundle (Horizontal/Vertical)
- ⚡️W3CSS Paragraphs One Column Bundle
- ⚡️W3CSS Paragraphs Three Columns Bundle
- ⚡️W3CSS Paragraphs Two Columns Bundle
- ⚡️W3CSS Paragraphs Quicklinks Bundle
- ⚡️W3CSS Paragraphs Views Bundle
- ⚡️W3CSS Paragraphs Webform Bundle
Why W3.CSS?
- ⚡️ 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.
Features
⚡️ W3CSS Theme is using the modern W3.CSS framework with built-in responsiveness
⚡️ W3CSS Theme has 22 regions. Check README.txt for more details.
⚡️ W3CSS Theme has 26 sections. In the theme settings under Advanced Site Colors you have 26 fields for CSS customization.(Background Colors - Background Hover Colors - Text Colors - Text Hover Colors - Link Text Colors - Link Text Hover Colors - Link Background Colors - Button Colors - Button Hover Colors).
⚡️ W3CSS Theme comes with ability to change the website width. Just insert any of the predefined classes into website width in theme settings. (w3-width-100-percent, w3-width-2560, w3-width-1920, w3-width-1600, w3-width-1360, w3-width-1280, w3-width-1024 and w3-width-800).
⚡️ W3CSS Theme comes with horizontal main menu or vertical side nav. Simply add the main menu to the horizontal region or the vertical region.
⚡️ W3CSS Theme V2 comes with 101 fonts. 50 fonts can be applied to the global site, 26 fonts for heading (H1, H2 and H3 and 25 special fonts can be applied to any html tag. Any uploaded font has a CSS class can be applied to any html tag.
⚡️ W3CSS Theme V2 comes with 24 CSS text animation effects. can be applied to site name, page title or use the css class to apply it to any html tag.
⚡️ W3CSS Theme V2 comes with a custom page layout for user login/register/reset password.
⚡️ W3CSS Theme V2 comes with a custom border animation for top regions, bottom regions and footer regions.
⚡️ W3CSS Theme comes with over 50 predefined color themes. Simply insert the name of any of the predefined themes. More will be added.
Now you can view each predefined theme live, by clicking on any link under "Predefined Color Themes".
⚡️ W3CSS Theme comes with the ability to create your own private W3.CSS theme and apply it to your site.
⚡️ W3CSS Theme V1 comes with 6 color libraries. (US Highway, US Safety, Camouflage, Vivid, European Signal and Food).
⚡️ W3CSS Theme V2 comes with 11 color libraries. (Camouflage, European Signal, Fashion, Flat UI, Food, IOS, Metro UI, US highway, US Safety, Vivid and Win8). You can create unlimited color themes.
⚡️ W3CSS Theme comes with 8 social media links that are easy to configure.
⚡️ W3CSS Theme has a top region that includes three flexible regions. (The total space in the top region will be divided by the number of regions you filled.)
⚡️ W3CSS Theme has a bottom region that includes four flexible regions. (The total space in the bottom region will be divided by the number of regions you filled.)
⚡️ W3CSS Theme has a footer region that includes three flexible regions. (The total space in the footer region will be divided by the number of regions you filled.)
⚡️ W3CSS Theme comes with Font Awesome 4.7.0 added to the css library.
⚡️ W3CSS Theme comes with jQuery match height. Example: If you have three blocks in the top area, they will always have matching height on the large screen size. The script was removed and it uses CSS Flexbox.
⚡️ W3CSS Theme comes with a responsive main menu and It is three level drop-down menu. The drop-down works on hover for big screen and on click for small screen.
⚡️ W3CSS Theme will hide completely (divs, wrappers, classes) any region you don't use. Nothing will be printed in the back.
⚡️ W3CSS Theme uses the minimum HTML structure to show the content. Example, You will not see div > div > div > div > div.
⚡️ W3CSS Theme comes with the ability to create a custom page template according to content type's name. If you have two content types article and video you can have page--article.html.twig and page--video.html.twig
⚡️ W3CSS Theme comes with the ability to create a custom page template for any view. Example if you have a view name "recent_video", then you can create a page template name page--recent-video.html.twig.
⚡️ W3CSS Theme comes with the ability to create a custom page template for any vocabulary. Example if you have a vocabulary name "Tags", then you can create a page template name page--taxonomy--tags.html.twig.
⚡️ W3CSS Theme comes with the ability to change the main container's columns layout to equal width. Change the columns from (25% 50% 25%) to (33% 33% 33%)
⚡️ W3CSS Theme comes with the ability to create a responsive horizontal three level secondary menu or a responsive vertical three level secondary menu.
⚡️ W3CSS Theme comes with customized Sub-themes. Each sub-theme has different layout/template.
⚡️ How to update the theme from V1 To V2?
The new version was added with all new featuers. If you are using V1 and you did not override the page.html.twig, then you can update the theme however you normally do. If you did override the page.html.twig, then you will need to clone the new page.html.twig and update it.
⚡️ W3 CSS Templates
You can build any website layout with the w3.css library. I try to add the most well-known templates/layouts. I added some sub-themes to include different layouts. If you see a w3css template that you want to have available in this theme then let me know and I'll customize it and add it to the collection as a sub-theme.
Note: All customized Sub-themes have an extra region in addition to the regions in the parent theme for the sticky search block. If you click on the search icon, you'll get a sticky search bar on the top in return.
What are drupal8 w3css Sub-themes? They are custom themes with different page layouts.
What are drupal8 w3css predefined color themes? They are color skins that can be applied to a W3CSS Theme or any of its sub-themes.
|
W3CSS Theme has a horizontal/vertical main menu. The page template has the default layout.
⚡️ D8W3CSS - Live Demo  back to top ☝️ |
Amun Theme is a sub-theme with a sticky main menu, user menu and search icon on the top then the header below it.
⚡️ Amun - Live Demo ? Download The Sub-theme Amun |
|
Amunet Theme is a sub-theme with an invisible vertical menu. Menu button on the left and search icon on right.
⚡️ Amunet - Live Demo ? Download The Sub-theme Amunet |
Anhur Theme is a sub-theme with a visible vertical fixed main menu on the left and search button on the right.
⚡️ Anhur - Live Demo ? Download The Sub-theme Anhur |
