create account

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

View this thread on: hive.blog |  peakd.com |  ecency.com
utopian-io · @alfarisi94 · (edited)
$70.37
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](https://utopian.io/utopian-io/@alfarisi94/create-our-own-css-frameworks-part-1), [part2](https://utopian.io/utopian-io/@alfarisi94/create-our-own-css-frameworks-part-3), and  [part3](https://utopian.io/utopian-io/@alfarisi94/create-our-own-css-frameworks-part-3)

#### 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](https://utopian.io/utopian-io/@alfarisi94/create-our-own-css-frameworks-part-3) so you will not be confused.

**Element Card:**

``` html
<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 [](https://utopian.io/utopian-io/@alfarisi94/create-our-own-css-frameworks-part-3)
- **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.

![Screenshot_43.png](https://cdn.utopian.io/posts/c8f5e5b2896051c946cb5023852198d3ae81Screenshot_43.png)



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

**Example Class .cards:** 
<pre>
<code>
.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
</code>
</pre>

- **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 **<img>**. 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":**

``` html
<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:**

![Screenshot_44.png](https://cdn.utopian.io/posts/00995101a7588d138dcf59785c5b2948fdf1Screenshot_44.png)


### Curiculum
- [Setup Gulp](https://utopian.io/utopian-io/@alfarisi94/create-our-own-css-frameworks-part-1)
- [Minify HTML,CSS](https://utopian.io/utopian-io/@alfarisi94/create-our-own-css-frameworks-part-2)
- [Create system grid](https://utopian.io/utopian-io/@alfarisi94/create-our-own-css-frameworks-part-3)
- [Make Helper CSS and Create container](https://utopian.io/utopian-io/@alfarisi94/create-our-own-css-frameworks-part-4)

<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@alfarisi94/create-our-own-css-frameworks-part-5-create-cards">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>
đź‘Ť  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 114 others
properties (23)
authoralfarisi94
permlinkcreate-our-own-css-frameworks-part-5-create-cards
categoryutopian-io
json_metadata"{"community":"utopian","app":"utopian/1.0.0","format":"markdown","repository":{"id":929845,"name":"sass","full_name":"sass/sass","html_url":"https://github.com/sass/sass","fork":false,"owner":{"login":"sass"}},"pullRequests":[],"platform":"github","type":"tutorials","tags":["utopian-io","sass","web","css","frontend"],"users":["alfarisi94"],"links":["https://utopian.io/utopian-io/@alfarisi94/create-our-own-css-frameworks-part-1","https://utopian.io/utopian-io/@alfarisi94/create-our-own-css-frameworks-part-3","https://cdn.utopian.io/posts/c8f5e5b2896051c946cb5023852198d3ae81Screenshot_43.png","https://cdn.utopian.io/posts/00995101a7588d138dcf59785c5b2948fdf1Screenshot_44.png","https://utopian.io/utopian-io/@alfarisi94/create-our-own-css-frameworks-part-2","https://utopian.io/utopian-io/@alfarisi94/create-our-own-css-frameworks-part-4"],"image":["https://cdn.utopian.io/posts/c8f5e5b2896051c946cb5023852198d3ae81Screenshot_43.png","https://cdn.utopian.io/posts/00995101a7588d138dcf59785c5b2948fdf1Screenshot_44.png"],"moderator":{"account":"portugalcoin","time":"2018-04-18T21:05:20.337Z","pending":false,"reviewed":true,"flagged":false},"questions":null,"score":null,"total_influence":null,"staff_pick":null,"config":{"questions":[{"question":"Does the tutorial address a minimum of 3 substantial concepts and no more than 5?","question_id":"tut-1","answers":[{"answer":"3-5 substantial concepts covered in the tutorial.","answer_id":1,"value":10},{"answer":"Less than 3 or more than 5 substantial concepts covered in the tutorial.","answer_id":2,"value":5},{"answer":"No substantial or recognisable concepts.","answer_id":3,"value":0}]},{"question":"Concepts covered in the tutorial are indicated in the post text with a short description of each concept and when appropriate, images?","question_id":"tut-2","answers":[{"answer":"Thorough text and images for concepts covered.","answer_id":1,"value":10},{"answer":"Minimal text and images.","answer_id":2,"value":5},{"answer":"No or very little text and images.","answer_id":3,"value":0}]},{"question":"Does the contributor provide supplementary resources, such as code and sample files in the contribution post or a GitHub repository?","question_id":"tut-3","answers":[{"answer":"Yes","answer_id":1,"value":10},{"answer":"No","answer_id":2,"value":0}]},{"question":"Is the tutorial part of a series?","question_id":"tut-4","answers":[{"answer":"Yes.","answer_id":1,"value":10},{"answer":"Yes, but first entry in the series.","answer_id":2,"value":5},{"answer":"No.","answer_id":3,"value":0}]},{"question":"Is there an outline for the tutorial content at the beginning of the post?","question_id":"tut-5","answers":[{"answer":"Yes.","answer_id":1,"value":10},{"answer":"Yes, but not detailed enough or does not cover all sections.","answer_id":2,"value":5},{"answer":"No.","answer_id":3,"value":0}]},{"question":"Does the writing style meet the Utopian standard considering formalness, informativeness and clarity of the content?","question_id":"c-1","answers":[{"answer":"It is formal, informative and well written with clear content.","answer_id":1,"value":10},{"answer":"It is informative with clear content but not formal enough.","answer_id":2,"value":5},{"answer":"The contribution could be more informative or contains unrelated information, formality and clarity of the content are good enough.","answer_id":3,"value":4},{"answer":"Not all sections were clear enough but overall holds value for the project.","answer_id":4,"value":2},{"answer":"Not at all.","answer_id":5,"value":0}]},{"question":"Was the provided category template for the editor followed?","question_id":"c-2","answers":[{"answer":"All points of the template were included with additional points as well.","answer_id":1,"value":5},{"answer":"The template was followed without additions.","answer_id":2,"value":4},{"answer":"The template was edited but the points were covered in different way.","answer_id":3,"value":3},{"answer":"Not all points of the template were covered in the contribution but the structure is clear enough.","answer_id":4,"value":3},{"answer":"The template was not followed but the structure is clear enough.","answer_id":5,"value":2},{"answer":"The contents are not clearly structured at all.","answer_id":6,"value":0}]},{"question":"Did the contributor tag other users?","question_id":"c-3","answers":[{"answer":"No other users were tagged by the contributor.","answer_id":1,"value":5},{"answer":"Used tags are reasonable and all tagged people are connected to the project and/or the contribution.","answer_id":2,"value":5},{"answer":"The contribution contains mentions of other users that are not directly related to the contribution but related in other ways.","answer_id":3,"value":2},{"answer":"The contributor misuses tagging of other users.","answer_id":4,"value":0}]},{"question":"Did the contributor ask for upvotes, resteems, follows or witness vote?","question_id":"c-4","answers":[{"answer":"No","answer_id":1,"value":5},{"answer":"Yes, but not in a way that disturbs readability. ","answer_id":2,"value":5},{"answer":"Yes.","answer_id":3,"value":0}]},{"question":"Was a graphical content like images, charts, videos or screenshots included?","question_id":"c-5","answers":[{"answer":"Yes, the graphical content is included and adds more value to the contribution.","answer_id":1,"value":5},{"answer":"No but the contribution works well without graphical content well.","answer_id":2,"value":4},{"answer":"Yes, but most of the graphical content’s purpose is just for presentational matters.","answer_id":3,"value":3},{"answer":"No relevant or useful graphical content is included in the contribution.","answer_id":4,"value":0}]},{"question":"How would you rate the overall added value?","question_id":"c-6","answers":[{"answer":"Extraordinary value to both the project and the open source community overall.","answer_id":1,"value":20},{"answer":"Significant value to the project or open source community.","answer_id":2,"value":15},{"answer":"Some value to the project or open source community.","answer_id":3,"value":10},{"answer":"Little value to the project or open source community.","answer_id":4,"value":5},{"answer":"No obvious value to project or open source community.","answer_id":5,"value":0}]}]}}"
created2018-04-18 17:24:21
last_update2018-04-18 21:05:21
depth0
children4
last_payout2018-04-25 17:24:21
cashout_time1969-12-31 23:59:59
total_payout_value50.828 HBD
curator_payout_value19.545 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length5,684
author_reputation5,678,893,550,406
root_title"Create Our Own CSS Frameworks part-5 (Create cards )"
beneficiaries
0.
accountutopian.pay
weight1,500
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id50,796,120
net_rshares14,866,106,482,148
author_curate_reward""
vote details (178)
@portugalcoin · 
Thank you for the contribution It has been approved.

----------------------------------------------------------------------
Need help? Write a ticket on https://support.utopian.io.
Chat with us on [Discord](https://discord.gg/uTyJkNm).

**[[utopian-moderator]](https://utopian.io/moderators)**
properties (22)
authorportugalcoin
permlinkre-alfarisi94-create-our-own-css-frameworks-part-5-create-cards-20180418t210630494z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2018-04-18 21:06:30
last_update2018-04-18 21:06:30
depth1
children0
last_payout2018-04-25 21:06:30
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length294
author_reputation598,828,312,571,988
root_title"Create Our Own CSS Frameworks part-5 (Create cards )"
beneficiaries
0.
accountutopian.pay
weight1,500
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id50,825,817
net_rshares0
@techstack · 
I don’t understand what is the point using own custom CSS when there are plenty of good CSS framework is available which provides everything what ever you want. Take a example of Angular Material Design CSS framework and there are  plenty of others. I guess teaching how to use any CSS framework effectively would be good idea.
properties (22)
authortechstack
permlinkre-alfarisi94-create-our-own-css-frameworks-part-5-create-cards-20180421t222817345z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2018-04-21 22:28:18
last_update2018-04-21 22:28:18
depth1
children1
last_payout2018-04-28 22:28:18
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length327
author_reputation745,033,069,601
root_title"Create Our Own CSS Frameworks part-5 (Create cards )"
beneficiaries
0.
accountutopian.pay
weight1,500
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id51,381,711
net_rshares0
@alfarisi94 · (edited)
I want to share how to create not how to use. in my project also use bootstrap materialize. but have you ever wondered how they made bootstrap and materialize. That is the point of tutorial
properties (22)
authoralfarisi94
permlinkre-techstack-re-alfarisi94-create-our-own-css-frameworks-part-5-create-cards-20180422t030249947z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2018-04-22 03:02:51
last_update2018-04-22 03:11:24
depth2
children0
last_payout2018-04-29 03:02:51
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length189
author_reputation5,678,893,550,406
root_title"Create Our Own CSS Frameworks part-5 (Create cards )"
beneficiaries
0.
accountutopian.pay
weight1,500
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id51,409,321
net_rshares0
@utopian-io · 
### Hey @alfarisi94! Thank you for the great work you've done!
We're already looking forward to your next contribution!
#### Fully Decentralized Rewards
We hope you will take the time to share your expertise and knowledge by rating contributions made by others on Utopian.io to help us reward the best contributions together.
#### Utopian Witness!
<a href="https://v2.steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1">Vote for Utopian Witness!</a> We are made of developers, system administrators, entrepreneurs, artists, content creators, thinkers. We embrace every nationality, mindset and belief.

**Want to chat? Join us on Discord https://discord.me/utopian-io**
properties (22)
authorutopian-io
permlinkre-alfarisi94-create-our-own-css-frameworks-part-5-create-cards-20180423t130045360z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2018-04-23 13:00:45
last_update2018-04-23 13:00:45
depth1
children0
last_payout2018-04-30 13:00:45
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length690
author_reputation152,955,367,999,756
root_title"Create Our Own CSS Frameworks part-5 (Create cards )"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id51,675,485
net_rshares0
Help/Feedback