Giter VIP home page Giter VIP logo

working-three's Introduction

Working 3 by WorldDigital


@Front-end developers

  • Less files should be in /assets/less/
  • Generated CSS files should be located in /assets/css/
  • Images assets/img/
  • Fonts assets/fonts/
  • Plugins/vendors assets/vendor
    • If you know how to use bower, just load all dependencies there.
    • To merge scripts and move js files to designate folders, just add your command in Gruntfile.js
    • Note: Ask @champsupertramp if you need any help/assistance.
  • Add your HTML files in the root folder.

@Back-end/WordPress

  • Use bower to load all required dependencies.
  • Gruntto move all files to the set folders in Gruntfile.js
  • Currently using Codestar Framework for options and page settings. Read the (documentation)[http://codestarframework.com/documentation/#options]
  • Add configurations in working-three/cs-framework-override/framework.config.php
  • Keep 2-tab code indentation for readable and maintanable theme.
  • Follow WordPress coding standards.
  • Ask @champsupertramp if you need any help/assistance.

working-three's People

Contributors

champsupertramp avatar motekaj avatar alexandru-b avatar

Watchers

James Cloos avatar  avatar Levon avatar  avatar  avatar  avatar

Forkers

alexandru-b

working-three's Issues

Home Page - navigation item/logo 2

navigation menu site

these is how the navigation/main menu be

and this is how i is now

navigation menu how it is

there is already issue about this explaining how it should be. but again here is the explanation

  1. OUR WORK NAVIGATION HOVER
    The only section in the navigation with sub-categories is the 'our
    work' tab. This is how the sub-sections should display on click.

Case study images on home page

  1. CASE STUDY IMAGES
    These images will need to be called in from a 'featured' case study
    category. Only the most recent three case studies applied to the
    category will be displayed.

home page - sectional navigation

SECTIONAL NAVIGATION
These are relative to the homepage. Active states will transform the
number into alhpanumeric, rather than numeral. These will need to
sync with each section based on scroll, aswell as on click.

Desktop - Contact page

  1. SOCIAL ACCOUNTS
    These are just links to take the user to our company facebook /
    twitter / linked in accounts.
  2. BASIC GRAVITY FORM
    We can update the notification settings etc.

SERVICE PAGE TABLET

tablet arrows

  1. ARROWS
    Clickable arrows will appear at the bottom of the sections. If clicked,
    they'll scroll the user to the next section.

TABLET - NAvigation

  1. NAVIGATION
    Once the window size reaches the width of an iPad, the navigation is
    to become a sticky bar at the bottom of the page.
  2. SECTIONAL NAVIGATION
    Due to the lack of room as the site becomes responsive, the active
    stays will stay numerical, but become highlighted with an active
    circle.
  3. SUBSCRIBE LINK
    The subscribe section moves to the center with the baseline
    matching that of the Logo and the phone number.

tablet home

MOBILE - active page states

  1. ACTIVE PAGE STATES
    Icons will have a filled in element to indicate active pages. Examples
    of these will be provided.

TABLET our work sub menu

our work tablet

  1. OUR WORK TABLET NAVIGATION
    The sub-nav items under our work should appear like this on tablet
    sized devices. The section should slide up from under the nav items
    smoothly.

home page - blog posts

  1. BLOG POSTS
    The three latest blog posts are to be displayed. No thumbnails are
    needed.

contact us btn/link

wrong link - it should most probably take to contact us page. its returning you back at the top of the page.

TABLET - BLOG

  1. DATE / SEARCH STRIP
    This section has a darker strip appear once it reaches it's
    breakpoint.

tablet blog

MOBILE naviagtion

mobile

  1. NAVIGATION
    The navigation converts into 4 clickable panels on mobile, with the
    3 more important pages visible, and the rest of the pages to show
    when the "More" button is clicked.
  2. MORE BUTTON
    The newsletter nav and remaining navigation items will appear in
    here. Once touched, a panel will expand up showing the navigation
    list.

Desktop - Leadership

  1. LONG PAGES REQUIRE SECTIONAL NAVIGATION
    Like the homepage, this page will require a sectional navigation list.
  2. COLOURS
    Each section will be a selected colour from the brand colours. These
    colours should match the relevant sections from the Home Page.
  3. LAYOUTS VARIATIONS
    Page structures will rarely change - so each different sections may
    need custom fields (page specific) to allow the different column
    layouts.
  4. ALTERNATIVE SECTION COLOURS
    For long pages, there'll need to be a sectional colour difference to
    help divide page sections up.
  5. PROFILES
    There'll be three profile categories - Board, Leadership and Seniors.
    They will need to have the ability to enter/upload the following:
  6. Profile Image
  7. Name
  8. Job title
  9. Personal Linked In URL, and personal Twitter URL (These will be
    optional fields, and will display if one of these members creates a
    blog post).

leadership

1,2,3,4,5 buttons on home page

on firefox browser.
here what is happening. when you are on page 3 pres for example page 4(button 4) the page is moving down, than up again and than placing the correct page again.
check what can be the problem.

DEsktop - Case study

  1. IMAGES
    There'll only be one featured image displayed.
  2. BACKGROUND COLOUR FOR INTRO
    A colour selector to control the background will be needed to allow
    us to change the background to reflect the clients brand colours. By
    default, the colour will be the Working Three blue.
  3. SLIDER FUNCTIONALITY
    The slider is to be a toggable feature through the back-end. If the
    slider option has been toggled, the ability to upload slider images
    should appear, and allow us to upload the slider images. (These will
    be just the mobile screenshots). They should appear in the layered
    hand which will be provided.
    If the slider option is not toggled, the ability to be left blank, or
    upload a static image should appear. The static image will not be
    displayed in a mobile, or have the hand.

case study desktop

HOmepage - CONTENT / BACKGROUND

  1. CONTENT / BACKGROUND
    Once approx half the content has start scrolling up under the nav,
    the backgrounds will transition to the next relevant section's colour,
    and the content will auto-scroll to the next section.

MOBILE - BLOG

  1. SOCIAL menu
    This will become static and sit above the content. It'll also need to
    be re-added to the bottom of the content, just before the Author
    info.

Remaining Feature work

Here are some remaining tasks that i remember, feel free to add more:

Desktop - BLOG

  1. INTRO SECTION
    This is the same copy to be used in the excerpt (of course, with
    the excerpts limiting the character count). This will need to be in
    a seperate WYSIWYG editor, with the standard content appearing
    below.
  2. BLOCK QUOTES
    These sections will just be block-quotes.
  3. SOCIAL ICONS
    These are to stack horizontally and become sticky once you scroll.

Home Page - navigation item/logo

  1. LOGO / NAVIGATION ITEMS
    These will stay fixed on the homepage.
    A transparent gradient matching the background will sit under the
    header. As content scrolls, this will give the illusion that the copy is
    fading underneath the header, to avoid overlap of links over content.

Always be outstadning

  1. SECTION TITLE UNDERLINE
    It's unlikely that this title will change, so stopping the underlining
    border just before the G via positioning is required here.

tablet - INSIGHT / blog

  1. SLIDER / IMAGE POSITION
    Once the site reaches it's stackable breakpoint, the slider is to
    appear below the content, rather than before.
  2. OTHER CASE STUDIES
    Other case studies drops from three thumbnails down to two
    thumbnails.

main menu - OUR WORK

  1. OUR WORK NAVIGATION HOVER
    The only section in the navigation with sub-categories is the 'our
    work' tab. This is how the sub-sections should display on click.

our work

TABLET - case study home page

  1. CASE STUDY IMAGES
    The case study sections only show the two latest case studies
    rather than three (based on the featured category) as the site
    becomes responsive.
  2. BUTTON ALIGNMENT
    Buttons become left aligned

case tablet

OUR WORK / who we wrok with sub-menu

  1. FILTERS
    These will work like isotope filters. When a category is selected, the
    logos below will shuffle around and only display the relevant items.

DEsktop - case studies

  1. LOGO IS TO BE UPLOADED AS A SEPERATE IMAGE TO THE
    THUMBNAIL IMAGE.
    This is so that the logo can be transitioned out on hover without
    affecting the background image.
  2. BACKGROUND BLUR
    Background is to blur on the thumbnail when the tile is hovered over,
    with a subtle black overlay appearing over the image.

case desk

TABLET - OUR WORK / who we work with sub-menu

  1. FILTERS
    Once filters reach the break point, they'll convert into a slide-able
    section allowing you to swipe left and right through different filters
    before toggling them.
  2. POP-UPS
    Pop-ups will be the same for all devices (Desktop to mobile).
    If a square has "View Case Study", clicking the tile will take them to
    the actual relevant case study. If no case study is available, a pop-up
    will appear prompting the user to get in touch with us.
  3. POP-UP LOGOS
    The relevant logo to what was clicked will need to be called into the
    modal.

popups

DEsktop - INSIGHTS / blog

  1. BLOG CATEGORIES
    There'll only be four blog categories. Each link will be related to a
    colour. They are as follows:
  2. Insights : Green
  3. Strategy : Purple
  4. Design : Blue
  5. Technology : Yellow
  6. BLOG IMAGES
    At this stage, no blog images will be used.

READ MORE link - HOME PAGE

read more

when I pressed the read more from 5th part of the HOME page. the link is redirecting me to this page.

home page - section layouts

section layouts

  1. SECTION LAYOUTS
    Layouts will vary quite a lot throughout the site, and may move
    around the grid. It's imporant that these are paid close attention to.

SERVICE PAGE

services

  1. SECTIONS
    On most internal pages, there needs to be an editable Header
    section, Content section and footer / sub section.
  2. COLOURS
    Each section will be a selected colour from the brand colours. These
    colours should match the relevant sections from the Home Page.

Our work link name

according to design that i got the link name should be "our work" not "who we work with"

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.