Create Our Own CSS Frameworks part-5 (Create cards )

What Will I Learn?

• Create element cards
• Create CSS card
• Implement Cards system

Requirements

• Intermediate CSS , HTML, Javascript
• Basic SASS
• Watch part1, part2, and part3

Difficulty

• Intermediate

What is a card ?

Card is a frequently used part of some popular CSS frameworks such as bootstrap, materialize, Bulma and others. Cards are used to group elements such as pictures, paragraphs, and more. Card has two forms. vertical and horizontal. in this tutorial we will make a card that is vertical.

Create Element

in the previous tutorial, I have created a container to set the width of our web content. please follow my previous tutorial Create Our Own CSS Frameworks part-3 so you will not be confused.

Element Card:

<div class="columns">
            <div class="column">
                <img src="assets/example-img.png">
                <div class="title">Title Cards</div>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>
            <div class="column">
                <img src="assets/example-img.png">
                <div class="title">Title Cards</div>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>
            <div class="column">
                <img src="assets/example-img.png">
                <div class="title">Title Cards</div>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>
        </div>

• class="column": We give the class column to make the look like a column lined up. to see more detail please see my tutorial on
• assets/example-img.png: I added a picture as an example element card.
• < div class="title" >Title Cards< /div >: This is part of the title of the card I gave the class title that I will use to give the CSS style.
• < p >Text Card< /p >: I added a text for a useful card as info.

Result:

Open a command prompt on your project and run gulp. Open http://localhost:8080/ in your browser to see the results.

Create Class

I will create a class that will be responsible for styling the card. the class name is class="cards".

Example Class .cards:

.cards
    background: white
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04)
    border-radius: 3px
    img
        width: 100%
    .title
       font-size: 20px
        font-weight: bold
        margin: 10px 0px

• background: white: This CSS background property to make the background cards white
• box-shadow: This css property creates a shadow box on content cards. This is for a vertical value 0 1px 3px 0 rgba(0, 0, 0, 0.12) and this is for horizontal 0 0 3px 0 rgba(0, 0, 0, 0.04)
• border-radius: This CSS property to give a radius effect on each end of the content .cards.
  There are several other CSS radius properties: border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.
• img: In content .cards, we have . we give style width: 100% to give the original image width.
• .title: In the cards class, we also have element title, we can style title by writing .title below class .cards

Use the ".cards":

<div class="column cards">
                <img src="assets/example-img.png">
                <div class="title">Title Cards</div>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>

After we create the class .cards, we can easily use it like this < div class = "column cards" > </ div >,
we still use the class column because we need it to create a column effect on our cards. Now we can use it by adding class "cards". You can try replacing the CSS with the style you want.

Result:

Curiculum

• Setup Gulp
• Minify HTML,CSS
• Create system grid
• Make Helper CSS and Create container

---

Posted on Utopian.io - Rewarding Open Source Contributors

---