The front-end guidance on the HTML / CSS implementation of UI.

Guide by NB

List of main tasks:

1. Basic page layouts.
2. Title and nav-bar.
3. Left bar layout.
4. Sessions list
5. Schedule view
6. Listed layout 1
7. Listed layout 2 (hard task)
8. Unlisted no-navbar layout
9. Green bar layout
10. Scroll bar
11. Buttons links and inputs

IMPORTANT! Read carefully

--Don’t forget to include all the libraries you were are using when posting your work.

--Don’t make buttons, links, lists, or borders of listed divs.

Those are separate tasks. If you need to put a space for them, create just an empty div which takes required space.
Later, elements from other tasks will be placed inside those divs.
For instance :
If you are making layout of user options page, for the input field you must leave just a div box.
After another person will be finished with creating buttons, their code will be passed inside your, specially placed div.

--The main font is Arial. (Also in the project is Helvetica, recently I found out is not good for Windows OS, ).
Usual font size is 22px. It can also be 30, 32, 44, 28, 26.
Colour references :

Please, use the following code in css:

:root {
--bgcol-top: #0E312A;
--bgcol-nav: #DCFAF8;
--bgcol-list: #EFF8F7;
--bgcol-inac: #EBEBEB;
--bgcol-dark: #696969;
--shad: #C4C4C4;
--txt: #5A605D;
--txt-active: #6BB590;
--txt-alert: #19BAB0;
--txt-inac: #C6CCCE;
--border: #707070;
}

This line will allow you to use colours without writing the hex code.
Basically you declare variable.
So when you need a colour, just write var(--color-name); , like this :
#foo {
color: var(--txt);
}

Thank you, stackoverflow, very cool.

1. There are 4 basic types of layout.
Your task is to simply put every div to take enough space.

A window with the left bar (top right) : left bar as, for instance, on schedule page as Filter, is !!!always 370px, and at the left from it it is always
a main area, taking all the rest of the space. It is a static window, means only elements inside can be scrolled, div itself stays at one position.
The entire page is fixed. So the only scrollable area is after the navbar.

On the page with no navbar (bottom left), the white narrow block is placed inside. Please, make two size classes for it as one class with fixed
size 700px.
And the other changes it’s size depending on the elements inside.
This white block should always be in the middle.

On the page with a wide white div (bottom right), there must be a small margin from the sides. Around 60-50px;
It will be better if it will change with smaller devices.

The last page is the green block (top left), which stays 900px in width.

This is the easy task, so if you take it, please, do it as fast as you can.
2. A simple task in creating title and nav-bar
3. From the layout with the left bar

Your task is to create the white div itself.

As in the first task your code will be placed inside a bigger layout, please, use zero margins on the whole div itself.
To test your code, just create a div with the height of 80% and width of 370px.
4. All you need is to create blocks which will form a dynamic list.
As those blocks are the same size, they must always be in the middle, no matter the size of the screen.
You can also make a dynamic margin, so there is always an equal amount of space between each.
You can also make them change size of the screen is really small and the one regular block can’t fit inside.
As you may understood, they must go one by one, and if one doesn’t fit, it goes to the next line.
So if the screen is big enough, even four can fit in one line etc.
Don’t forget, you do not define the main div size (the big, outer div). You just make those session blocks fit it.
5. A tough assignment to create a fully operational schedule window.

You better take this task if you are good at css/html/js !

Not only you must create a table – space where sessions will fit.
It must have several days and vertical divisions by hours.
Moreover, your job is to create inner divs representing individual session.
But the most important this is that those sessions should be possible to change!
For instance – manager makes one session longer, so it takes up more space.
Think on future use of JavaScript with this one.
There will be sessions at the same time, so the must be able to change in height.
Also your task is to make them buttons!
Unfortunately, if you make this code, it will be easier for you to make them active buttons.
(those are not form submission buttons. They will call a JS functions)
Also when selected they change border colour.
6. Listed layout Part one.

This is a medium hardness task.

Listed layout is everything that has lists in the main section.
It means, that except of : navbar + title + Left bar + single white block + green block;

For instance : look at the VIEW_ARTICLES_LIST_REVIEWER window.

After the Filter bar, there goes the main section.
Your task is to create list of those divs.
!!! Not what is inside, but only outer part.
Or windows like EDIT PROFILE MANAGER
Where you must create a layout for those fields, BUT NOT fields themselves.

The list of your windows :

EDIT PROFILE ; VIEW_INFORMATION ; VIEW_INFORMATION_MANAGER+SUBORDINATE ; BROWSE_SUBORDINATE ;
BROWSE_TASKS-SUBORDINATE ; EDIT PROFILE MANAGER ; VIEW_ARTICLES_LIST_MANAGER/EDITOR ; VIEW_ARTICLES_LIST_AUTHOR ;
VIEW_ARTICLES_LIST_REVIEWER ; VIEW_ARTICLE_AUTHOR ; VIEW_ARTICLE_MANAGER/EDITOR ; BROWSE_TASKS-SUBORDINATE ;

Putting that easy way, you create layout for everything except of what’s inside boxes with border.
You must put those empty boxes in their place, and other people will put right things inside them.
7. Listed layout pard two.

A very hard assignment.

You will have to create many different layouts inside blocks forming lists.
The hardness of the task is that each block have an individual design.
It is up to you to find similarities between them, so you can use the same code for each of them.
Find a way to break them into chunks which you can program as one class.

So your main task is opposite from the task 6.

You create everything INSIDE the blocks with borders.

Even if the list is inside the one big bordered div, it is still your task to create the list inside it.
Or if there are many bordered divs in list, you create personal layout for their inner part.

Please, don’t hesitate to ask in facebook any question, and not only personally.

Main windows you are working with are :

VIEW_INFORMATION ; VIEW_INFORMATION_MANAGER+SUBORDINATE ; BROWSE_SUBORDINATE ; BROWSE_SUBORDINATE – MANAGE ;

VIEW_ARTICLES_LIST_MANAGER/EDITOR ; VIEW_ARTICLES_LIST_AUTHOR ; VIEW_ARTICLES_LIST_REVIEWER ; BROWSE_TASKS-SUBORDINATE;
8. Unlisted, no nav-bar div is this white block on a green background.

Your assignment is to create layout for this blocks.

DON”T create the block itself, means don’t make white div be in the middle etc.
Your only task is to make this block take 100% of height and width, as in the first task, it will be given a defined width.
Try to make it as dynamical and flexible for different widths as possible.
9.Green bar layout is a way to break down tasks between us.

Your task is basically combination of task 6 and 7.

But you only have two windows to complete.

This task is pretty simple.

!You must not to define size of a div itself, but make it fill 100% of width, as it will be placed
In an another div. So you don’t care about defying size of it.
Of course, you can test with different widths, as it is better if it is dynamically flexible.
But at the end your code will be placed in a big, main div. So just create things inside a green bar.
10. Design of a scroll bar.
As it is the question of a final look, you can try to make a custom scroll bar.
It is a very simple task.

Use references to understand how it should look, give your ideas and ask people on any new designs.
Also, it is the only element which uses dark shadow colour : --shad-dark;

11. Buttons, links and forms should be implemented separately, as for the reason of consistency.

All the interactable text like links or edit button will have underline on hover.

Buttons must NOT have underline, but when hovered it has a shadow.

Don’t forget :
Some people will make a special divs for your buttons, with predefined size.
But maybe some won’t.
So when you define a size for buttons, links, inputs, create a separate class.

Any other suggestions on the design are welcome.