Styling & Layout
Relevant source files
The following files were used as context for generating this wiki page:
Styling and layout in the yeuems.io project define the visual presentation and interactive behavior of a single-page greeting application. The system combines static CSS for structure, Bootstrap for responsive components, and dynamic JavaScript to manipulate element positioning based on user interaction.
The layout consists of three primary layers: a fixed background layer, a dynamic content layer containing headers and buttons, and a high-priority preloader layer that manages the initial entry state.
Preloading System
The application uses a dedicated preloader to manage visual state during initial script and asset loading. This system ensures the user sees a centered animation before the main content reveals itself.
Preloader Architecture
- Container: The
#preloaderelement occupies the full viewport with a fixed position and a highz-index(9999999). - Animation: A
.spinnerelement contains five rectangular divs (.rect1through.rect5) that execute a vertical scaling animation calledstretchdelay. - Transition: The preloader fades out via jQuery after a 600ms timeout, at which point the body overflow changes to "visible".
Sources: css/spinload.css:1-60, js/myJs.js:15-24, index.html:36-46
Preloader Visual Flow
The following diagram illustrates the transition from the loading state to the active application state.
Sources: js/myJs.js:16-23
Visual Components & Core Layout
The core layout utilizes a fixed background and a centered content wrapper.
Background and Layering
The application separates concerns between the background image and interactive elements using z-index values.
- Background Layer: The
#bgdiv is fixed to the viewport, applies a 4px blur filter, and uses theimg/puung3.jpgimage scaled to cover the screen. - Content Layer: The
.contentdiv contains the primary headers and buttons, positioned relatively with a higherz-index(3) to appear above the blurred background.
Sources: css/style.css:1-20, index.html:47-48
Typography
Headers use the 'Pacifico' cursive font, loaded via Google Fonts. The primary header (h2) has a default font size of 80px, which reduces to 45px on mobile screens.
Sources: css/style.css:26-36, index.html:19-23
Responsive Grid and Elements
The layout adapts to different screen sizes using Bootstrap 4.3.1 and custom media queries.
| Element | Desktop Layout (Default) | Mobile Layout (< 500px) |
|---|---|---|
| "No" Button | left: 35%, top: 40vh | left: 7%, font-size: 14px |
| "Yes" Button | left: 70%, top: 40vh | left: 58%, font-size: 14px |
| Background | fixed, blur(4px) | fixed, blur(4px) |
| Header Text | font-size: 80px | font-size: 45px |
Sources: css/style.css:4-13, css/style.css:38-68
Dynamic Positioning Logic
The project implements an interactive layout where button positions change dynamically in response to cursor movement or clicks.
Button Position Switching
The switchButton() function exchanges the CSS left and top properties between the #yes and #no buttons. This occurs when the cursor first enters the "No" button area.
Sources: js/myJs.js:46-59, js/myJs.js:80-84
Random Displacement
If the user interacts with the "No" button multiple times, the moveButton() function assigns random x and y coordinates to the element. The range of motion is constrained by the screen width.
Sources: js/myJs.js:61-78, js/myJs.js:80-84
Popup Interface Styling
Interactive dialogs are handled by SweetAlert2, which applies specific layout configurations via JavaScript.
- Backgrounds: Popups use
img/iput-bg.jpgfor the background and a custom GIF (img/giphy2.gif) for the backdrop. - Configuration:
width: Set to 900px for response dialogs.padding: Defined as "3em".border-radius: Overridden to 15px instyle.css.titleandcontent: Colors are forced toazureusing!importantflags.
Sources: js/myJs.js:95-135, css/style.css:21-24
Summary
The styling of yeuems.io creates an immersive, mobile-responsive experience through a combination of fixed-position background layers and animated preloading states. The layout is not static; it relies on JavaScript-driven CSS updates to manipulate button positions, creating a playful interaction model. Responsibility for layout is shared between Bootstrap for buttons, SweetAlert2 for modal windows, and custom CSS transitions for button movement.