Activity 22: Research SMACSS - Scalable and Modular Architecture for CSS

Base

The Base category contains the default styles that apply to HTML elements. These styles are applied globally, setting up the foundational look and feel of your webpage.

Example:

cssCopy codebody {
    font-family: Arial, sans-serif; /* Sets the font for the entire page */
    margin: 0; /* Removes default margin */
    padding: 0; /* Removes default padding */
    background-color: #f8f8f8; /* Light background color */
}

h1, h2 {
    margin: 0; /* Resets margin for headings */
}

• Here, we define a consistent font, reset margins and paddings to avoid browser inconsistencies, and set a light background color for the body. This ensures that all text is readable and has a consistent look.

2. Layout

The Layout category organizes the major sections of the webpage, such as the header, main content area, and footer. This helps define the overall structure.

Example:

cssCopy code.layout-header {
    background-color: #4CAF50; /* Green background for the header */
    color: white; /* White text color */
    padding: 20px; /* Spacing around the header content */
    text-align: center; /* Center-aligns text */
}

.layout-main {
    padding: 20px; /* Adds space inside the main content */
}

.layout-footer {
    background-color: #333; /* Dark background for the footer */
    color: white; /* White text color */
    text-align: center; /* Center-aligns footer text */
    padding: 10px 0; /* Spacing around footer content */
    position: relative;
    bottom: 0; /* Ensures footer stays at the bottom */
    width: 100%; /* Footer spans the entire width */
}

• In this section, we create specific classes for each layout element, providing distinct background colors, text alignment, and padding. This improves the visual hierarchy and makes the layout easily adjustable.

3. Module

The Module category defines reusable components or widgets. These are the building blocks of your site that can be reused in multiple places, like buttons or cards.

Example:

cssCopy code.module-title {
    font-size: 24px; /* Larger font for titles */
}

.module-nav {
    margin-top: 10px; /* Adds space above the navigation */
}

.module-nav ul {
    list-style-type: none; /* Removes bullets from the list */
    padding: 0; /* Resets padding for the list */
}

.module-link {
    color: white; /* White text color for links */
    text-decoration: none; /* Removes underline from links */
    margin: 0 10px; /* Adds space between links */
}

.module-card {
    background-color: white; /* White background for the card */
    border: 1px solid #ccc; /* Light gray border */
    border-radius: 5px; /* Rounded corners */
    padding: 20px; /* Inner spacing */
    margin: 20px 0; /* Outer spacing */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.module-button {
    background-color: #4CAF50; /* Green background for button */
    color: white; /* White text color */
    border: none; /* Removes default border */
    padding: 10px 15px; /* Inner spacing */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Changes cursor on hover */
}

• In this part, we create styles for common components like titles, navigation links, cards, and buttons. Each module is styled in a way that makes it easy to reuse throughout the site while maintaining a consistent appearance.

4. State

The State category defines styles that apply to elements in different states, such as when they are active, hovered, or focused.

Example:

cssCopy code.is-active {
    font-weight: bold; /* Makes the active link bold */
}

• In this example, we style the active link in the navigation to appear bolder. This visual cue helps users identify their current location in the site.

5. Theme

The Theme category can be used for defining styles that create visual variations, such as color schemes or styles for different contexts (e.g., light vs. dark mode).

Example (commented out):

cssCopy code/* Example: Alternate theme (optional) */
/* .theme-dark {
    background-color: #333;
    color: white;
} */

• Here, a potential dark theme is provided as a commented-out example. You can uncomment it or modify it to switch to a different visual presentation easily.

By organizing styles into these categories, SMACSS encourages modularity and scalability. This approach makes it easier to maintain large projects as developers can quickly find and modify styles related to specific components or sections of the site without affecting the entire stylesheet.

When using SMACSS, the goal is to create a consistent, maintainable, and scalable CSS architecture that facilitates collaborative development and enhances the long-term manageability of web

https://github.com/JoshuaNato/Act22

The landing page of the website has been depicted on the webpage, with a green header and a white body. The header contains the text "Welcome to SMACSS" along with the navigation bar, which carries links for "Home", "About", "Profile", and "Contact". The body of the representation highlights the component "Module Card", which explains its reusability as well as independent styling capabilities. A "Learn More" button has also invited the readers to proceed further. The overall cleanliness of the website, the green color scheme, and the clarity of its navigation are all present in this representation.