Instructions:

What is OOCSS?:
- OOCSS (Object-Oriented CSS) is a CSS methodology that focuses on separating the structure of HTML from its appearance. It encourages code reuse and modularity by treating UI components as objects.
Core Principles:
- Separation of Structure and Skin: Divide elements’ structure (layout) and visual design (colors, fonts) into separate styles.
- Separation of Container and Content: Make components flexible and reusable regardless of where they are placed in the layout.
Advantages:
- Encourages reusable code.
- Helps create scalable, maintainable CSS.
Practice:
- Implement a simple webpage following OOCSS principles. Focus on reusable components like buttons or cards.
Document Your Work:
- Include code examples, screenshots, and explanations of how you applied OOCSS.
- Publish your work on Hashnode.com or Medium.com.
- oct 4
- repo

OUTPUT:

It shown the 4 Card with an image of my partner and text inside of the box. More detailed in the code snippets explanation.

MY FOLDER

My html named ACTOOCSS.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>ACTIVITY 21: Research OOCSS</title>
</head>
<body>
  <div class="containimage">

<div class="card card-img">
    <h2>My Partner</h2>
    <img src="partner1.jpg" alt="girl" class="img">
    <p>WORKING STUDENT</p>
  </div>

   <div class="card card-img">
    <h2>BORN ON 2004</h2>
    <img src="partner2.jpg" alt="girl" class="img">
    <p>20 yrs old, Very Demure</p>
  </div>
  <div class="card card-img">
    <h2>3RD YEAR STUDENT</h2>
    <img src="partner3.jpg" alt="girl" class="img">    <p>COURSE: BEED</p>
  </div>

  <div class="card card-img">
    <h2>PRETTY</h2>
    <img src="partner4.jpg" alt="girl" class="img">
    <p>LAGING GALIT</p>
  </div>





</div>
</body>
</html>

In this code snippets, it shows 4 various containers with the same class. the class containing in the external CSS (look for link rel within head tags to connect your external CSS) is the one use to modify and change appearance based on what we are accessing. In this example I access card and also card-img the actual is “class=”card card-img”. That shows with a block called card is use and under of card bloc, use a card-img therefore, it will not go in outside of the box. That’s how one of the Object-Oriented Cascading Stylesheets works.

My style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-image: linear-gradient(to bottom, #8c12d8,#efe7e7);
    background-repeat: no-repeat;
    background-size: contain;
    background-attachment:fixed;
}
.containimage {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}
.card {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-radius: 8px;
    max-width: 300px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    align-self: auto;
}
p {
    margin-top: 10px;
    font-size: 18px;
}
h2 {
    margin-bottom: 10px;
}
.card-img {
    background-image: linear-gradient(to bottom, #c645f5,#3d91df);
    border: 2px solid #0d47a1; 
    color: wheat; 
    font-weight: bolder;
    font-family:'Courier New', Courier, monospace;
}
.img {
    border-radius: 15px 55px 15px 15px;
    max-height: 700px;
    transition: transform 0.3s ease; 
}
.img-hover:hover {
    transform: scale(1.1);
    opacity: 0.8s;
}

As you can see all classes have a different sets obviously, the advantage of having OOCSS is to make our html understandable, readable and clean code. It’s like only accessing the set per classes like card and the card-img sets in external css without creating a block of codes in html that make it a not scalable reusable since the design was specific in container. Accessing every block of classes of CSS to have a design without interfering and adding more complexity html codes.

In this case, the block or sets of design implement in CSS will help to be scalable overtime.

Repository Link (GitHub):

https://github.com/Rhedaligan8/SIA102Activities.git

Act 21 Research OOCSS - Object-Oriented CSS | Aligan, Rhed N.

Instructions:

OUTPUT:

Under SIA102ACTIVITIES,

I use branch named ACT21OOCSS

Subscribe to my newsletter

Rhed Aligan

Rhed Aligan