Giter Club home page Giter Club logo

info-theme's Introduction

NUS WP Info Theme

[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)

Overview

This WordPress theme was created so that all of the National University affiliate info websites would have a standardized codebase to work with.

When building a new info site for an affiliate, the first step is to make a child theme of the info-theme theme.

This will let you use the power of the full theme, while allowing customization where needed.

For information on how to setup this theme with node and gulp, see here.


Features:

  • Gulp setup
  • src folder is where your SASS/SCSS and JS file development should occur
  • assets folder and it's contents are generated by the gulp setup
  • Override the project URL by creating a file in the root of the theme gulp.config.local.js with an object containing your local projectURL

Must includes:

  • Gulp file setup
  • Basic theme setup in ./inc/class-nusa-theme-setup
  • ESLint and stylelint rules are based on our team and industry standards, do not change these.

Can be removed/deleted or changed:

  • Widgets setup inside the theme. The files present are here as an example.
  • Customizer setup. The project might not call for it, but again the files are here as example.

Things you might think are missing but are not:

  • Image optimization in Gulp: This should be done manually because you do not always want to apply the exact same optimization to all images. Refer to our dev tools for options.

Legend

The below numbers correspond to the Numbered Map, explaining what content in the admin changes what on the front end. While we tried to account for as much as possible, each affiliate’s info site will ultimately have its own unique requirements that may need to be added or removed as necessary. Please do not hesitate to ask if you have any questions.

  1. Sets the hero image background URL.
  2. Sets the gravity form that should display on the page.
  3. Sets the Quote.
  4. Sets the Quotee, or who said the quote.
  5. Optional, some pages have an extra line such as “Student, Class of 2020”.
  6. Content for the first column block.
  7. Content for the second column block.
  8. This will set custom content for the callout box. This column is normally the same throughout the site, and is set on a global level via #18 in the customizer. If not custom, leave empty.
  9. Set the awards, using the Media Library. Ignore “Awards - Compatibility”, this is for backwards compatibility on existing info sites.
  10. The <h1> of the page, the main hero tagline. Wrap the content in a <span> element to dictate where the text breaks on mobile resolutions. E.G: <span>This Line Will Be</span> Separate From This Line On Mobile.
  11. The <h2> of the page, in the hero. The rule applies here as well.
  12. Student name in the hero.
  13. Student title in the hero.
  14. This determines what programs are to display on the form, as some forms only have specific programs available to them.This will be up to the developer, as there are a few options:
    1. ( Preferred Method ) Create custom post type of program with a taxonomy of degree-type.
      1. This will always update the dropdown field on the frontend and the choices in the admin when making changes to the CPT’s.
    2. Fill out the drop down once and save it as a “Save as new custom choice”. 2. This will have to be manually updated each time.
  15. Sets the global terms and conditions of the site.
  16. Sets the default form intro text, e.g. “Please complete the form below to get started today.”
  17. Sets the form that should display if no form is selected on a per-page basis.
  18. Sets the default “Callout” column content.
  19. Sets the global “Why Choose” column content.

Info Theme Numbered Guide

Contributors ✨


Mike Estrada

💻 📆 👀 🚧

Alex Gamero

💻 🔧

Chris Maust

💻 ️️️️♿️

The Emoji Key ✨ (and Contribution Types) can be found on allcontributors.org

info-theme's People

Contributors

mestradanu avatar dependabot[bot] avatar dependabot-preview[bot] avatar cmaustnu avatar agameronu avatar allcontributors[bot] avatar

Stargazers

Statanis 123 avatar Joel Yoder avatar

Watchers

James Cloos avatar

Forkers

sts0mrg0

info-theme's Issues

Preload fonts

The theme needs the fonts to be preloaded for best practices and optimization.

Notes:

  • If the font is loaded with a parameter (e.g. ?qop3op) like icon fonts sometimes do, the preload tag must also have that parameter.
  • Reference the main theme in NU for how to implement this.
  • Test with the "Lighthouse" tab in Google Chrome, specifically the "Preload key requests" section in the "Performance" test.

Disabled Submit button

The submit button is disabled by default until the GDPR / Consent field is checked.

An outlier RFI uses this field, however the checkbox is visually hidden as it's not a part of their flow.

This causes the submit button to be forever disabled.

A possible solution might be to check if the consent field is required or not, before disabling the submit button.

Accessibility audit and update

I did a deep dive recently into the theme that refactored a lot of markup and therefore the theme could use with an accessibility audit and markup changes where needed.

Please branch off develop and tag this issue when doing a PR.

Will include this with the next release that will include #60 so that we can integrate it into the NCU project.

"Skip to content" anchor link bug

The "Skip to content" anchor link is pointing to an ID that does not currently exist.

<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'nusa' ); ?></a>

As we discussed in our scrum meeting, lets update that so it points to the main content:

<main id="main" class="site-main">

Validation and military field redundancy

The JS code inside the theme for validations and the custom military Gravity Forms field is unnecessary and since it's directly related to the custom NUS Gravity Forms plugin and should therefore be inside that plugin (already is).

The JS code should be removed and so should some of the tooltip CSS causing issues for displaying the tooltips.

Form default styles non-existent

We should have basic form styles included in the parent theme.

  • Remove bullets from li
  • Remove default margin / padding from ul / li
  • Remove the ::after icon on selects and replace with background image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.