Wet-boew: New to WET - Need Further Guidence

Created on 5 Dec 2019  路  7Comments  路  Source: wet-boew/wet-boew

Hello WET Team
I am looking to utilize WET in a web project I working on for the GoC.
Very new to the framework and need further guidance on implementation.
I look through the website and I cannot find a specific code snippet on how to hook up the CSS and JS files, and there is a lot of CSS and JS within WET, so I am confused.

I have prior experience with Aurora and Bootstrap.

Implementation Question
Source
picture qfung

Most helpful comment

Hi @qfung
I keep meaning to post this on the WET documentation page...
WET / GCWeb quick start guide

  1. Download themes-dist-5.0.1-gcweb.zip and unzip
  2. Copy the wet-boew and GCWeb folders into your project (public) root
  3. Begin your HTML page with the following code, adding your own content such as </li> </ol> <pre><code class="prettyprint"><!DOCTYPE html><!--[if lt IE 9]><html class="no-js lt-ie9" lang="en" dir="ltr"><![endif]--><!--[if gt IE 8]><!--> <html class="no-js" lang="en" dir="ltr"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1" name="viewport"> <!--[if gte IE 9 | !IE ]><!--> <link href="./GCWeb/assets/favicon.ico" rel="icon" type="image/x-icon"> <link rel="stylesheet" href="./GCWeb/css/theme.min.css"> <!--<![endif]--> <!--[if lt IE 9]> <link href="./GCWeb/assets/favicon.ico" rel="shortcut icon" /> <link rel="stylesheet" href="./GCWeb/css/ie8-theme.min.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="./wet-boew/js/ie8-wet-boew.min.js"></script> <![endif]--> <!--[if lte IE 9]> <![endif]--> <noscript><link rel="stylesheet" href="./wet-boew/css/noscript.min.css" /></noscript> </head> </code></pre> <ol> <li>Before the closing </body> tag, add the following scripts:</li> </ol> <pre><code class="prettyprint"> <!--[if gte IE 9 | !IE ]><!--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.js"></script> <script src="./wet-boew/js/wet-boew.min.js"></script> <!--<![endif]--> <!--[if lt IE 9]> <script src="./wet-boew/js/ie8-wet-boew2.min.js"></script> <![endif]--> <script src="./GCWeb/js/theme.min.js"></script> </code></pre> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/1150048?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt=" picture"> <strong>juleskuehn</strong> <span class="text-muted ml-1">on 6 Dec 2019</span> </div> <div class="col text-right"> 👍<span class="ml-2 mr-3">3</span> </div> </div> </div> </div> </div> <div class="col-12"> <div class="mb-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="9295564578" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="col-12 d-flex align-items-center mb-4"> <h2>All 7 comments</h2> </div> <div class="col-12"> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>As someone that has built a lot of GC wxT sites I would recommend starting with <a rel="nofollow noopener" target="_blank" href="https://www.drupal.org/project/wxt">https://www.drupal.org/project/wxt</a> unless you have a very, very unique set of requirements. This distribution is becoming the standard in GC for CMS as it incorporates WxT and hits multilingual and accessibility standards. As well it is very flexible and open source. Note that I do not work for the WxT team at TBS so I am not speaking on behalf of them.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/1280955?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="joel-osc picture"> <strong>joel-osc</strong> <span class="text-muted ml-1">on 5 Dec 2019</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>@joel-osc Thank you for getting to me so quick! I am looking to use WET to develop user interfaces developed using native HTML/CSS/JS. Not sure if Drupal would be the way to go for this project.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/37078772?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="qfung picture"> <strong>qfung</strong> <span class="text-muted ml-1">on 5 Dec 2019</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>DrupalWxT allows that... you need to consider your current and future requirements. For example:</p> <ul> <li>will the site have content that non-developers should be able to maintain by logging in and changing it with a nice WYSIWYG editor? </li> <li>should the end client be able to fix a translation without calling a dev? </li> <li>will the site ever have other features that require login from people with different roles?</li> <li>will the site have forms? Will they connect to another system via API?</li> <li>etc... the list is long.</li> </ul> <p>These are all things that DrupalWxT can do without a line of code!</p> <p>From our work with TBS I know they are looking for some sort of standardization on web properties and are looking to Drupal for that. Again, it won't fit all requirements but it is super-powerful and a great foundation for being able to turn around features quickly and future-proof yourself for the ones you don't even know yet.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/1280955?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="joel-osc picture"> <strong>joel-osc</strong> <span class="text-muted ml-1">on 5 Dec 2019</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>@joel-osc For the current project I am working on does not have non developers needing a login page and there is no role assignment, it is nothing too complex, but it does require the WET framework, and it does require a solution that is coded.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/37078772?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="qfung picture"> <strong>qfung</strong> <span class="text-muted ml-1">on 5 Dec 2019</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>Hi @qfung<br /> I keep meaning to post this on the WET documentation page...<br /> <strong>WET / GCWeb quick start guide</strong></p> <ol> <li>Download themes-dist-5.0.1-gcweb.zip and unzip</li> <li>Copy the wet-boew and GCWeb folders into your project (public) root</li> <li>Begin your HTML page with the following code, adding your own content such as <title></li> </ol> <pre><code class="prettyprint"><!DOCTYPE html><!--[if lt IE 9]><html class="no-js lt-ie9" lang="en" dir="ltr"><![endif]--><!--[if gt IE 8]><!--> <html class="no-js" lang="en" dir="ltr"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1" name="viewport"> <!--[if gte IE 9 | !IE ]><!--> <link href="./GCWeb/assets/favicon.ico" rel="icon" type="image/x-icon"> <link rel="stylesheet" href="./GCWeb/css/theme.min.css"> <!--<![endif]--> <!--[if lt IE 9]> <link href="./GCWeb/assets/favicon.ico" rel="shortcut icon" /> <link rel="stylesheet" href="./GCWeb/css/ie8-theme.min.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="./wet-boew/js/ie8-wet-boew.min.js"></script> <![endif]--> <!--[if lte IE 9]> <![endif]--> <noscript><link rel="stylesheet" href="./wet-boew/css/noscript.min.css" /></noscript> </head> </code></pre> <ol> <li>Before the closing </body> tag, add the following scripts:</li> </ol> <pre><code class="prettyprint"> <!--[if gte IE 9 | !IE ]><!--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.js"></script> <script src="./wet-boew/js/wet-boew.min.js"></script> <!--<![endif]--> <!--[if lt IE 9]> <script src="./wet-boew/js/ie8-wet-boew2.min.js"></script> <![endif]--> <script src="./GCWeb/js/theme.min.js"></script> </code></pre> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/1150048?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="juleskuehn picture"> <strong>juleskuehn</strong> <span class="text-muted ml-1">on 6 Dec 2019</span> </div> <div class="col text-right"> 👍<span class="ml-2 mr-3">3</span> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p><strong>@juleskuehn</strong> Thank you so much for the code snippet!! </p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/37078772?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="qfung picture"> <strong>qfung</strong> <span class="text-muted ml-1">on 9 Dec 2019</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p><strong>@qfung</strong> There is also a quick implementation guide for the Canada.ca Theme here: <a rel="nofollow noopener" target="_blank" href="https://wet-boew.github.io/themes-dist/GCWeb/gcweb-theme/implementing.html">https://wet-boew.github.io/themes-dist/GCWeb/gcweb-theme/implementing.html</a></p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/1676030?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="duboisp picture"> <strong>duboisp</strong> <span class="text-muted ml-1">on 29 Jan 2020</span> </div> <div class="col text-right"> </div> </div> </div> </div> </div> <div class="col-12"> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown text-center helpful"> <div class="title">Was this page helpful?</div> <div class="mt-1" onMouseLeave="rating(533612641, 0);"> <i class="fas fa-star inactive" id="star-1" onMouseOver="rating(533612641, 1);" onclick="rate(533612641, 1);"></i> <i class="fas fa-star inactive" id="star-2" onMouseOver="rating(533612641, 2);" onclick="rate(533612641, 2);"></i> <i class="fas fa-star inactive" id="star-3" onMouseOver="rating(533612641, 3);" onclick="rate(533612641, 3);"></i> <i class="fas fa-star inactive" id="star-4" onMouseOver="rating(533612641, 4);" onclick="rate(533612641, 4);"></i> <i class="fas fa-star inactive" id="star-5" onMouseOver="rating(533612641, 5);" onclick="rate(533612641, 5);"></i> </div> <div class="description text-small"><span id="rating-val">0</span> / 5 - <span id="rating-count">0</span> ratings</div> </div> </div> <div class="mb-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3452512275" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> <div class="col-12 col-lg-4"> <div id="ph-above-related"></div> <div class="card card-custom issue-box"> <div class="card-body pt-3 pb-5"> <h2 class="mb-4">Related issues</h2> <div> <strong> <a href="/wet-boew/563195361/forms-validation-is-it-possible-to-customize-the-error">Forms Validation - Is it possible to customize the error messages?</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/59836293?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="kitana-ifbbpro picture"> <strong class="pr-1" dir="ltr">kitana-ifbbpro</strong>  路  <span class="px-1" dir="ltr">6</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/wet-boew/419016539/using-data-wb-tables-order-0-desc-for-a-column-that-has-date">Using data-wb-tables='{"order": [ 0, "desc" ]}' for a column that has date</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/10691970?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="WebWars picture"> <strong class="pr-1" dir="ltr">WebWars</strong>  路  <span class="px-1" dir="ltr">4</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/wet-boew/547552107/how-to-append-to-i18ndict-before-plugins-are-loaded">How to append to i18nDict before plugins are loaded?</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/1838943?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="vallieresc picture"> <strong class="pr-1" dir="ltr">vallieresc</strong>  路  <span class="px-1" dir="ltr">7</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/wet-boew/244377621/form-validation-error-anchor-label-hidden-when-focus">Form validation: Error anchor, label hidden when focus</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/2575266?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="shawnthompson picture"> <strong class="pr-1" dir="ltr">shawnthompson</strong>  路  <span class="px-1" dir="ltr">4</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/wet-boew/350085044/documentation-header-logo-link-broken">Documentation: Header logo link broken</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/1150048?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="juleskuehn picture"> <strong class="pr-1" dir="ltr">juleskuehn</strong>  路  <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> </div> </div> <div class="sticky-top pt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div id="ph-below-related-2" class="mt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> <div class="col-12 col-lg-4"> </div> </div> <div class="skyscraper-container"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="7879185320" data-ad-format="vertical" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="mt-5 spacer"></div> <footer class="mt-5 pb-2 py-4 text-center mt-auto"> <div class="container"> <a class="navbar-brand logo mr-5" href="/"> <img src="/assets/img/logo.svg" width="40" height="40" alt="bleepingcoder logo"> bleeping<strong>coder</strong> </a> <div class="mt-4"> bleepingcoder.com uses publicly licensed GitHub information to provide developers around the world with solutions to their problems. We are not affiliated with GitHub, Inc. or with any developers who use GitHub for their projects. We do not host any of the videos or images on our servers. All rights belong to their respective owners. </div> <div> Source for this page: <a href="https://www.github.com/wet-boew/wet-boew/issues/8784" rel="nofollow noreferrer" target="_blank">Source</a> </div> </div> <hr class="mb-5 mt-5"> <div class="container"> <div class="row"> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular programming languages</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/python" dir="ltr">Python</a> </li> <li class="mb-2"> <a href="/javascript" dir="ltr">JavaScript</a> </li> <li class="mb-2"> <a href="/typescript" dir="ltr">TypeScript</a> </li> <li class="mb-2"> <a href="/cpp" dir="ltr">C++</a> </li> <li class="mb-2"> <a href="/csharp" dir="ltr">C#</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/microsoft/vscode" dir="ltr">vscode</a> </li> <li class="mb-2"> <a href="/numpy/numpy" dir="ltr">numpy</a> </li> <li class="mb-2"> <a href="/ant-design/ant-design" dir="ltr">ant-design</a> </li> <li class="mb-2"> <a href="/mui-org/material-ui" dir="ltr">material-ui</a> </li> <li class="mb-2"> <a href="/vercel/next-js" dir="ltr">next.js</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-0"> <strong>More GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/rust-lang/rust" dir="ltr">rust</a> </li> <li class="mb-2"> <a href="/moment/moment" dir="ltr">moment</a> </li> <li class="mb-2"> <a href="/yarnpkg/yarn" dir="ltr">yarn</a> </li> <li class="mb-2"> <a href="/mozilla/pdf-js" dir="ltr">pdf.js</a> </li> <li class="mb-2"> <a href="/JuliaLang/julia" dir="ltr">julia</a> </li> </ul> </div> </div> </div> <hr class="mb-5 mt-5"> <div class="container text-muted"> 漏 2026 bleepingcoder.com - <a href="/bleeps" rel="nofollow">Contact</a><br /> By using our site, you acknowledge that you have read and understand our <a href="/cookies" rel="nofollow">Cookie Policy</a> and <a href="/privacy" rel="nofollow">Privacy Policy</a>. </div> </footer> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script> <script async src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <!--<script defer type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5fb2db66acbd74b2"></script>--> <script type="text/javascript" src="/assets/js/main.js"></script> <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script></body> </html>