Example [Table layout VS Grid layout (responsive)]
Table layout
The NWU recognises that a supportive and developmental probation process is vital in providing the appropriate level of assistance and training for new staff members on commencing their employment. Performance management of new employees is important during the probationary period, and performance gaps identified in this time need to be continually documented and addressed. This will help employees become productive quickly, or provide evidence to support a decision not to employ the person at the end of the probationary period. Performance management of new employeesPerformance management techniques for new employees could include:
Probation Guidelines have been developed to assist managers in the management of probation for all new employees. Contact your relevant Human Capital practitioner to assist with the probation process.
|
|
|
Looking at this table it seems that it could be divided in 3. The paragraph width seems about 2/3 and the links on the right seems about 1/3.
Grid/divs layout (Same content)
The NWU recognises that a supportive and developmental probation process is vital in providing the appropriate level of assistance and training for new staff members on commencing their employment.
Performance management of new employees is important during the probationary period, and performance gaps identified in this time need to be continually documented and addressed. This will help employees become productive quickly, or provide evidence to support a decision not to employ the person at the end of the probationary period.
Performance management of new employees
Performance management techniques for new employees could include:
- Regular meetings with their line manager to summarise feedback on work performance and clarify the performance standards and performance criteria of the job.
- Periodic review of the induction checklist to ensure all items are covered and to identify gaps.
- Collaborative goal setting (with the line manager) against the performance criteria for the job.
- Knowledge gap analysis and skills gap analysis when the employee is performing below standard.
- Collaborative development (with the line manager) of a personal development plan (PDP).
- Formal probation reviews using tools such as performance appraisal forms; this is linked to the wider performance management system for the university.
Probation Guidelines have been developed to assist managers in the management of probation for all new employees.
Contact your relevant Human Capital practitioner to assist with the probation process.
Grid System for Page Layout
You could use up to 12 columns across the page. You could also group columns together to create wider columns. The grid system is responsive.
span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
span 4 | span 4 | span 4 | |||||||||
span 4 | span 8 | ||||||||||
span 6 | span 6 | ||||||||||
span 12 |
Remember: The grid columns should add up to twelve for a row.
Grid Classes
- col-xs-* (for phones)
- col-sm-* (for tablets)
- col-md-* (for desktops)
- col-lg-* (for larger desktops)
The classes above can be combined to create more dynamic and flexible layouts.
Tip: Each class scales up, so if you wish to set the same widths for xs and sm, you only need to specify xs.
Grid System Rules
- Rows must be placed within a .container
.container
(fixed-width) or .container-fluid.container-fluid
(full-width) for proper alignment and padding - Use rows to create horizontal groups of columns
- Content should be placed within columns, and only columns may be immediate children of rows
- Predefined classes like
.row
.row and.col-sm-4
.col-sm-4
.col-sm-4 are available for quickly making grid layouts - Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows
.rows
- Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three .col-sm-4
.col-sm-4
Basic Structure of Grid
< div class= "container" >
< div class= "row" >
< div class= "col-*-*" > < /div >
< /div >
< div class= "row" >
< div class= "col-*-*" > < /div >
< div class= "col-*-*" > < /div >
< div class= "col-*-*" > < /div >
< /div >
< div class= "row" >
...
< /div >
< /div >