Theming and Styling
Relevant source files
The following files were used as context for generating this wiki page:The theming and styling system for the website is built upon a foundation of core CSS files, utilizing CSS variables for a consistent color palette, and a responsive design implemented through extensive media queries. The primary files governing the visual appearance are design.css and iite.css. iite.css handles base styles, fonts, and global utilities, while design.css defines the layout, component-specific styles, and responsive behavior.
Dynamic styling and interactivity are introduced via JavaScript in iite_components.js, which handles behaviors like conditional element styling based on the page URL and user interactions with UI components like menus and tabs. Text content, including navigation labels, is managed through apps/translations.json and injected into the HTML structure by PHP scripts, ensuring a separation of content and presentation.
Core Styling and Theming
The core of the theming system is a set of CSS custom properties (variables) defined in the :root pseudo-class in both design.css and iite.css. This allows for a centralized and easily modifiable color scheme and theme configuration.
Sources: [themes/css/design.css:1-19](https://github.com/Institute-Itech/oldwebsite/blob/HEAD/themes/css/design.css#L1-L19), [themes/css/iite.css:3-19](https://github.com/Institute-Itech/oldwebsite/blob/HEAD/themes/css/iite.css#L3-L19)
CSS Variables
A consistent color palette is enforced through CSS variables. These variables are used throughout the stylesheets to color text, backgrounds, borders, and other elements.
The following diagram shows the relationship between the core CSS files and the variables they define.
The primary color variables are:
| Variable | Value | Description | Source File |
|---|---|---|---|
--static-background | #BFBFBF | A static grey background color. | design.css, iite.css |
--navbar-background | #02274c | Dark blue background for the navigation bar. | design.css, iite.css |
--w-white | white | Standard white color. | design.css, iite.css |
--w-black | black | Standard black color. | design.css, iite.css |
--w-grey | #e9e9e9 | Light grey, used for backgrounds and text. | design.css, iite.css |
--w-midnight | #222940 | A very dark blue, used for text and backgrounds. | design.css, iite.css |
--w-blue | #0448d5 | A bright blue, used for links, highlights, and active states. | design.css, iite.css |
--w-orange | #fc6d49 | An orange color used for specific UI elements like tags. | design.css, iite.css |
--w-yellow | #FFC34A | A yellow color used for specific UI elements. | design.css, iite.css |
--w-green | #26A646 | A green color used for specific UI elements. | design.css, iite.css |
--w-crimson | #f22e52 | A crimson/red color. | design.css, iite.css |
Sources: themes/css/design.css:3-17, themes/css/iite.css:5-17
Base Styles
iite.css establishes foundational styles for the entire application. This includes:
- Importing the 'Barlow Semi Condensed' font from Google Fonts.
- Setting
margin: 0andpadding: 0on thebodyand all elements (*) to reset default browser styling. - Defining default
font-sizefor heading elements (h1throughh6) and paragraphs. - A global
::selectionstyle that changes text selection color to white on a blue background.
Sources: themes/css/iite.css:1-1, themes/css/iite.css:25-54
Layout System
The website employs a flexible layout system primarily using Flexbox and CSS Grid. Key layout containers are defined in design.css to structure different page types.
Main Page Structure
- Navigation (
nav): Aposition: fixednavigation bar is present at the top of the viewport. - Homepage Background (
.background-homepage): A full-viewport (100vh) flex container with a background image and a semi-transparent overlay. - Grid Layouts (
.grid-company,.grid-departments): These classes use Flexbox to create card-based layouts. They have hover effects that applytransformandbox-shadowfor a subtle animation. - CSS Grid (
.grid-inside-departments,.container-backinfo-swipewindows): More complex layouts are built using CSS Grid, allowing for precise placement of elements in rows and columns.
Sources: themes/css/design.css:34-50, themes/css/design.css:127-133, themes/css/design.css:549-556, themes/css/design.css:1222-1229
Component Styling
Navigation Menu
The navigation system is complex, featuring multi-level dropdowns that appear on hover. For smaller screens, it collapses into a mobile-friendly hamburger menu.
Desktop Navigation
The desktop navigation uses hover pseudo-classes (:hover) to reveal sub-menus. For example, hovering over an element with the class .iiteonemenu will cause its child .iiteonebkmenu to be displayed as a flex container.
/* themes/css/design.css:301-303 */
.iiteonemenu:hover .iiteonebkmenu {
display: flex;
}
The following flowchart illustrates how a user interaction triggers the display of a sub-menu.
Sources: themes/css/design.css:300-316
Mobile Navigation
On screens narrower than 1201px, the desktop navigation is hidden, and a mobile menu icon (.menu-nav-mobile) is shown. The menunavmobile function in iite_components.js handles the click event on this icon to toggle the visibility of the full-screen menu container (#container-menu-nav).
Sources: themes/css/design.css:1350-1370, apps/js/iite_components.js:93-128
Interactive UI: The "Interface" Page
The page at inside/interface.php features a tabbed content area. This is controlled by the interface() function in iite_components.js.
- Buttons: A set of buttons, each with a
menu-interfaceattribute. - Content Panes: Corresponding content containers with the class
.w-interface.
When a button is clicked, the script removes the .interface-active and .btn-interface-active classes from all elements and then adds them only to the clicked button and its corresponding content pane, effectively showing the selected tab's content.
Sources: inside/interface.php, apps/js/iite_components.js:132-149, themes/css/design.css:1125-1134
The sequence diagram below shows the interaction flow for switching tabs.
Sources: apps/js/iite_components.js:132-149
Responsive Design
The website is fully responsive, using @media queries to adapt its layout and styling to various screen sizes. The breakpoints are defined in design.css.
| Breakpoint | Description | Example Changes |
|---|---|---|
max-width: 1700px | For large desktops. | Reduces padding on grid components. |
max-width: 1600px | For standard desktops. | Adjusts font sizes and grid gaps. |
max-width: 1201px | Tablet/Laptop breakpoint. | Hides desktop navigation (.content-dropdown-nav) and shows the mobile menu icon (.menu-nav-mobile). |
max-width: 900px | Smaller tablets. | Adjusts padding on message containers and font sizes in the mobile menu. |
max-width: 500px | Mobile breakpoint. | Reduces the width and font size of the main logo/link (.iite-a-www). |
Sources: themes/css/design.css:1325-1557
An example of a media query block:
/* themes/css/design.css:1371-1374 */
@media screen and (min-width: 320px) and (max-width: 1201px) {
.content-dropdown-nav {
display: none;
}
}
This rule hides the main desktop navigation container on screens smaller than 1201px wide.
Dynamic Styling with JavaScript
apps/js/iite_components.js provides client-side logic to dynamically alter styles based on application state.
Conditional Logo Color
The color of the main logo (#iitelogo) is changed from its default white to black on specific pages. This is determined by checking if the window.location.pathname matches any of the paths in the whitePages array.
// apps/js/iite_components.js:29-39
const whitePages = [
'/iite/company',
'/iite/wep',
'/iite/relationship',
'/departments/overview',
'/inside/overview',
'/inside/ets.php'
];
if (logo) {
const isWhite = whitePages.some(page => path.includes(page));
logo.style.color = isWhite ? 'black' : '#ffffff';
}
Sources: apps/js/iite_components.js:29-39
Hiding the Navigation Bar
On certain pages like /login, the entire navigation bar is hidden. While this is primarily handled server-side, a client-side fallback exists in the JavaScript to prevent a "flash" of the navbar on page load. The hideNavPages array contains the paths where the navbar should be hidden.
Sources: apps/js/iite_components.js:42-54, themes/css/design.css:1560-1564
Internationalization and Styling
The text content for UI elements, such as navigation links and titles, is sourced from apps/translations.json. PHP scripts like iite/overview.php use a t() function to retrieve the appropriate string based on the current language session ($_SESSION['lang']). The CSS styles the containers, and the text is populated dynamically. This architecture separates the concerns of styling, content, and logic.
Sources: iite/overview.php:3-23, apps/translations.json:82-87