Drupal8 W3CSS Theme is the first theme in Drupal uses w3.css framework. I started by looking around trying to find a theme that uses the w3.css framework and I couldn’t find any theme in Drupal 8 so I decided to build something easy to use and at the same time that loads quickly.
I developed this theme not from a developers perspective, but developed it with the users’ interests in mind instead. I put myself in the shoes of a user who doesn’t have any knowledge about css or coding and thought what they would like to have in their theme. and what things they would love to change frequently- on perhaps a daily or monthly basis-. I created my feature list and I built the first Drupal theme using w3.css framework.
The theme has many unique features, including:
Theme comes with 22 flexible regions, 26 sections on the page with changeable background colors, text colors, padding, margins and more. Just apply any w3.css classes to any of these sections.
The website is responsive, so it will fit any size screen. However, sometimes users want to change the default website width. I created a new feature that will allow you to change the website width.
The theme comes with a responsive main menu with a drop down. That main menu can be horizontal or vertical, depending on what you want.
If you have two or more blocks printed in any region, these blocks will always have the same height in any screen width.
The theme comes with eight social links that are easy to change or disable.
I would think the most powerful feature for this theme is manipulating the colors and the layout for your website in a very short amount of time without any needing any coding experience. Because of that the theme will be a good fit to any personal use, e-commerce use, corporate use or any business use.
Manual reviews of other projects
https://www.drupal.org/node/2893787#comment-12199724
https://www.drupal.org/node/2892949#comment-12199730
https://www.drupal.org/node/2893499#comment-12199733
Documentation:
https://www.drupal.org/node/2866181
Live Demo
https://drupal8-w3css-theme.flashwebcenter.com/
Screenshots
https://drupal8-w3css-theme.flashwebcenter.com/screenshots
Project link
https://www.drupal.org/project/d8w3css
Git instructions
git clone --branch 8.x-1.x https://git.drupalcode.org/project/d8w3css.git
PAReview checklist
https://pareview.sh/pareview/https-git.drupal.org-project-d8w3css.git
Comments
Comment #2
PA robot commentedThere are some errors reported by automated review tools, did you already check them? See http://pareview.sh/pareview/httpsgitdrupalorgprojectd8w3cssgit
We are currently quite busy with all the project applications and we prefer projects with a review bonus. Please help reviewing and put yourself on the high priority list, then we will take a look at your project right away :-)
Also, you should get your friends, colleagues or other community members involved to review this application. Let them go through the review checklist and post a comment that sets this issue to "needs work" (they found some problems with the project) or "reviewed & tested by the community" (they found no major flaws).
I'm a robot and this is an automated message from Project Applications Scraper.
Comment #3
flashwebcenterAll the warning and errors are solved. Here is the last review https://pareview.sh/node/1554
Comment #4
flashwebcenterComment #5
flashwebcenterComment #6
e2tha-e commented@flashwebcenter You indent by 3 spaces instead of 2 in these files.
On line 19 of css/custom/base.css, you prefix max-height with an underscore:
_max-width: 100%;I'll continue to look through the code for more issues.
Comment #7
e2tha-e commentedComment #8
flashwebcenter@e2th-e thank you for taking the time to review it. I appreciate the input. The code preview did not catch it. So I may not have caught it without your comment. I changed the spaces and removed the underscore.
Comment #9
Rounder commentedIs there a location where more detailed instructions and information regarding this theme are discussed, other than the publicized one at: https://www.drupal.org/docs/8/themes/drupal8-w3css-theme-configuration
which is also at their site:
http://drupal8.w3css.theme.flashwebcenter.com/drupal8-w3css-theme-docume...
Or is there an active forum perhaps?
Comment #10
Rounder commentedOriginal post removed. Opened as issues: Web logo (#2895144) and Colors (#2895145).
Comment #11
flashwebcenterComment #12
flashwebcenterComment #13
e2tha-e commentedHello again.
I noticed some issues in the drupal8_w3css_theme.theme file mostly regarding readability.
There are numerous long lines full of complex conditional statements. It's difficult to ascertain what's within an AND and what's within an OR. Here's line 23 as an example:
Since the
!emptychecks are performed so often for the same variables, it might be helpful to assign those evaluations to easier-to-read variables as follows:Then the conditional statement could read:
Also, I don't think it's a good idea to evaluate assignments like on line 50:
The code will certainly work, but the extra equal signs and parentheses, and the additional overhead for readers to process them, are a hindrance to readability. While there are many alternatives to evaluating assignments, I wonder why it's even necessary to declare
$my_equal_widthin the first place. Doesn'ttheme_get_settingreturnNULLon failure? Such a failure would make$variables['equal_width'] == NULL. Then the conditional on line 51 could instead be:Comment #14
flashwebcenterHello e2tha-e,
Thank you for your input. I will change the file to make it easy to read.
Comment #15
nathaniel commentedHello. I have a few suggestions below, but didn't notice any major issues so far. Nice work!
Automated Review
https://pareview.sh/pareview/https-git.drupal.org-project-d8w3css.git
Note that perfect adherence to Drupal Coding Standard is NOT a reason to block an application, except for total disregard of them. However, modules should follow them as closely as possible.
Manual Review
I recommend removing font awesome fonts and library code from the theme and adding the fontawesome module to the recommended modules section in your readme file.
https://www.drupal.org/project/fontawesome
Or instructions on how to install the fontawesome library when installing the theme.
Same with with w3.css. Since it is 3rd party code you might want to include instructions on how to install it in the libraries directory or consider using a CDN if one is available.
The README template could be followed to make it more recognizable / easier to read.
This was returned when running pareview.sh:
This review uses the Project Application Review Template.
Comment #16
flashwebcenterHello Nathaniel,
Thank you very much for your input. I changed the read me file to follow the guidelines and I will look into adding font awesome and w3.css as requirements for the theme.
Again thank you for your time.
Comment #17
flashwebcenterI looked into attaching the css files as external library. However, some templates in my theme will break if either of these two files are missing. In attaching them to the theme, I make sure they're aggregated (so they're smaller) and always there with the exact version that I want.
I like the idea of an independent theme, instead of requiring users to go download extra things in order to get the theme working properly. It's just a bit more accessible and easy for users to install. My main user audience is people who really don't have any experience with coding so I tried to keep it simple for them. I read the Drupal guidance for attaching a third party library but in this particular instance, there are some benefits to having it in the theme.
Comment #18
Deepthi kumari commentedHi @flashwebcenter,
I have installed your theme, its working fine. No issues have been found in Coder Sniffer. The theme looks good.
Thanks for the theme.
Comment #19
flashwebcenterHello Deepthi,
Thank you for taking the time to review the theme.
Comment #20
flashwebcenterTo follow the guidelines for 3rd party assets/code, the dev version for d8w3css theme does not contain the w3.css library and the font awesome css library. The new release 8.x-1.14 will have no 3rd party css library included in the theme.
Comment #21
flashwebcenterComment #22
flashwebcenterThe manual review to the theme in #15 Nathaniel, two things are needed to be changed. The 3rd party assets/code and the README.txt. The two css libraries were removed from the theme and attached externally according to https://www.drupal.org/docs/8/theming-drupal-8/adding-stylesheets-css-an.... Also, the readme file was changed to guidelines.
https://pareview.sh/pareview/https-git.drupal.org-project-d8w3css.git
Comment #23
flashwebcenterComment #24
flashwebcenterComment #25
flashwebcenterComment #26
flashwebcenterComment #27
flashwebcenterComment #28
flashwebcenterComment #29
flashwebcenterComment #30
avpadernoI am re-opening this application, since it has never been approved.
Comment #31
avpadernoComment #32
klausiLooks good to me!
Thanks for your contribution, Alaa!
I updated your account so you can opt into security advisory coverage now.
Here are some recommended readings to help with excellent maintainership:
You can find lots more contributors chatting on Slack or IRC in #drupal-contribute. So, come hang out and stay involved!
Thanks, also, for your patience with the review process. Anyone is welcome to participate in the review process. Please consider reviewing other projects that are pending review. I encourage you to learn more about that process and join the group of reviewers.
Thanks to the dedicated reviewer(s) as well.
Comment #33
flashwebcenterThank you Klaus for taking the time to look it over.
Comment #35
griffin_insight commentedHello. Love the theme. I have recently ran into an accessibility issue however. When scanning the site with a Deque system (its a university website) I am getting the following critical error - "Ensures elements with an ARIA role that require child roles contain them. Required ARIA children role not present: menuitem menuitemradio menuitemcheckbox." Seems like the error is being thrown on each page by the navigation menu.
The menu item has a role natively set to "none." Is there an easy workaround for this other than editing the template?
Thank you for any insight you may have - thanks!
Comment #36
avpaderno@griffin_insight You need to report that in the issue queue for the project. This is the application opened from a user to get the vetted role, not an issue for support requests on the module used for the application.
Comment #37
glasswool commentedHi after I activated this theme, tabs are not displaing sitewide... what would I be doing wrong?
Comment #38
avpaderno