Website templates UI rebuild for the following brands:

• Springster
• Culture brands
  • Tujibebe
  • Zathu
• Ninyampinga
• Yegna

• Modules
  • (Categories/Sections) Navigation menu
  • Footer Navigation menu
  • Social media links + icons (footer, article page)
  • Section page article teaser listing
  • Banners (static homepage, cms section page)
• Pages
  • Article page
  • Section page or sub-section page (Only enabled in Yegna)
  • Footer page
  • Search page
  • Profile page
  • Forms page

---

• Single forms template
• Commenting replies template

Commenting Reply CTA

Commenting Replies (Thread) CTA

_Commenting Flag / Report - I cannot find the template_

• Article page media (YoutTube video, audio, video)

• client_session_id e.g. In Molo ({{request.session.MOLO_GA_SESSION_FOR_NOSCRIPT}})

• KAIOS support

• Service worker tests

---

Frontend build process involves structuring django templates across all the ge-web apps directories such as articles, comments, forms, geweb (base directory), home, profiles, search - broken down into generic re-usable template files inside _patterns as well as brand specific folder. e.g. dir/articles/templates

_patterns - generic article files to be loaded via @include across any or all brand folders e.g.

• dir/templates/articles/[brand-name]/section.html => {% include "../_patterns/article-teasers-listing.html" %}

• - dir/templates/articles/_patterns/article-teasers-listing => {% for post in articlepages %}{% include "./article-teasers.html" %} ...{% endfor %}

• - dir/templates/articles/_patterns/article-teasers.html => {% with post=post.specific %}...{% endwith %}

• dir/templates/articles/section_page.html => {% if theme.slug == '[brand-name]' %} {% include "./ninyampinga/section.html" %} {% endif %}

Results = https://url/section-index/[section-name]

---

General Rules:

Each brand must have a root page (Home page - A CMS default language is applied).

• Choose a home page theme setting.

• The section index page is required.
  
  

Features in Homepage

• In order for the articles to be featued in homepage - a "featured-in-homepage" promotion settings needs to be applied.

Color Themes

We use scss functions and for loop to loop through a list of predefined theme collection names defined inside the dir/geweb/static/styles/[brand-name]/utils/_variables.scss file.

On CMS: For the section page settings - add the name of the section theme as defined below for the section page colors to take effect.

Ninyampinga:-

The theme name is a generic color theme which has no link to the name of the section. Content admins need to define these themselves. See list here. https://github.com/girleffect/ge-web/blob/main/geweb/static/styles/ninyampinga/utils/_variables.scss#L31

So you will apply the css rule as river-aqua, river-yellow which applies the style as shown here.

Springster:-

See list here. https://github.com/girleffect/ge-web/blob/main/geweb/static/styles/springster/utils/_variables.scss#L33 So you will apply the css rule as color e.g. lime_green , gold and etc. OR you can apply a section slug e.g. my-life, my-body and etc. which applies the style as shown here.

Tijibebe:-

See list here. https://github.com/girleffect/ge-web/blob/main/geweb/static/styles/tujibebe/utils/_variables.scss#L17

So you will apply the css rule as a section slug e.g. my-life, my-body and etc. which applies the style as shown here.

Ninyampinga (side-bar) Homepage Feature

1. The homepage has an Announcement sidebar feature. This current implementation can be applied by article promotion setting "show-in-menus" and exclude "featured-in-homepage". The latest published article with this settings is what gets shown

2. The featured navigation column. This current implementation can be applied via section promotion setting "show-in-menus"

3. The homepage hero article with "featured-in-homepage" is chosen based on the latest published article or is random
   
   

Yegna sub-section

1. The section page styling supports 2 levels of nesting on the section page.
2. All the section pages apply the 2 columns look and feel - and the styling is not split between listen and watch sections.
3. The section index page slug must be named either sections or section-index

---

Requirements - https://nodejs.org/en/download/

node -v (Globally installed) npm -v (Globally installed) package.json

Apply your changes on the style or js file accordingly. Open your terminal and navigate to the [local project dir]/geweb Run -

1. npm i (Will generate package-lock.json mapping file - you can delete this file whenever you like)
2. npm run build

HTML class naming style uses BEM naming convention. Read more https://en.bem.info/methodology/quick-start, http://getbem.com/introduction/

All .html files live inside app folders dir/[app]/templates/ and are broken down by brand name folders as outlined under TEMPLATES. BEM naming style * languages * language__label * language__checkbox * language-dropdown * language-list * language-list__item * language-list__label * language-list__title * language-list__anchor etc.

We use CSS extension SASS/SCSS. Read more https://sass-lang.com/ All .scss files live inside the dir/geweb/static/styles and are broken down by brand name folders. SASS naming & folder style uses SMACSS naming convention. Read more https://smacss.com/book/

SMACSS naming & folder style

[brand-name]/modules/[feature-name] _article-page.scss _article-teaser-stacklist.scss

[brand-name]/utils/_variables etc. _normalize.scss - With generic browser default css styles [brand-name].scss - Imports individual or folder/sub-folder wildcard

We use webpack module bundler to combine sass, javascript files. Read more https://webpack.js.org/concepts/

All .js files live inside the dir/geweb/static/js and are broken down by brand name files.

We import brand base style into a JS brand file.

The webpack.config.js contains the js entry files for each brand.

The bundler outputs files into dir/geweb/static/_dist folder - these files are loaded via the script tag inside dir/geweb/templates/base.html

We have set a django content static path called STATIC_URL in order to get the asset directory as well as load the theme.slug string for each brand js file name. See dir/geweb/context_processors.py

Images:- The images live inside the dir/geweb/static/img and are broken down by brand name folders. Image icons, static background images are often compressed into 1 named "image sprite" and used css positioning so that we can optimize the loading of images. Read more https://css-tricks.com/css-sprites/

Fonts:- The fonts live inside the dir/geweb/static/fonts and are broken down by brand name folders. These fonts are mostly loaded inside fonts.scss and manually base64 encoded. See https://www.base64encode.org/ Some brands use the Google fonts in which case you will see the @import "font url" inside the base styles. See https://fonts.google.com/