Skip to content

Commit 865a9ad

Browse files
bmarkovbmarkov
authored
Add files via upload
1 parent 860e0a3 commit 865a9ad

File tree

7 files changed

+460
-203
lines changed

7 files changed

+460
-203
lines changed

‎LICENSE

Lines changed: 201 additions & 201 deletions
Large diffs are not rendered by default.

‎README.md

Lines changed: 123 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,123 @@
1-
# smart-card
2-
Smart Web Components - Card Custom Element
1+
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/htmlelements/smart-card)
2+
3+
# <smart-card>
4+
5+
[Live Demo ↗](https://htmlelements.com/demos/card/)
6+
|
7+
[Documentation ↗](https://www.htmlelements.com/docs/)
8+
|
9+
[Installation ↗](https://www.npmjs.com/package/@smarthtmlelements/smarthtmlelements-core)
10+
11+
[<smart-card>](https://htmlelements.com/demos/card/) is a Custom HTML Element providing Card view with HTML Content](https://htmlelements.com/).
12+
13+
<!--
14+
```
15+
<custom-element-demo>
16+
<template>
17+
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
18+
<script src="../smart-core/source/smart.core.js"></script>
19+
<link rel="stylesheet" href="../smart-core/source/styles/smart.default.css" type="text/css" />
20+
<style>
21+
body {
22+
margin: 0px;
23+
padding: 0px;
24+
}
25+
26+
smart-card.basic-card .card-content,
27+
smart-card.basic-card .card-action {
28+
box-sizing: border-box;
29+
padding: 20px;
30+
color: white;
31+
background-color: #546E7A;
32+
border-bottom: 1px solid rgba(160,160,160,0.2);
33+
border-radius: 2px 2px 2px 2px;
34+
}
35+
36+
smart-card.basic-card .card-title {
37+
font-size: 18px;
38+
}
39+
40+
smart-card.basic-card a {
41+
color: #ffab40;
42+
transition: color .3s ease;
43+
text-transform: uppercase;
44+
border-bottom: none;
45+
text-decoration: none;
46+
margin-right: 20px;
47+
}
48+
49+
smart-card.basic-card a:hover {
50+
color: #ffd8a6;
51+
}
52+
</style>
53+
<next-code-block></next-code-block>
54+
</template>
55+
</custom-element-demo>
56+
```
57+
-->
58+
```html
59+
<smart-card class="basic-card">
60+
<div class="card-content">
61+
<span class="card-title">Card Title</span>
62+
<p>
63+
I am a very simple card. I am good at containing small bits of information.
64+
I am convenient because I require little markup to use effectively.
65+
</p>
66+
</div>
67+
<div class="card-action">
68+
<a href="#">This is a link</a>
69+
<a href="#">This is a link</a>
70+
</div>
71+
</smart-card>
72+
```
73+
74+
[<img src="https://raw.githubusercontent.com/htmlelements/smart-card/master/smart-card-web-component.png" alt="Screenshot of smart-card">](https://htmlelements.com/demos/card/)
75+
76+
## Getting Started
77+
78+
Smart HTML Elements components documentation includes getting started, customization and api documentation topics.
79+
80+
[Getting Started Documentation](https://www.htmlelements.com/docs/)
81+
82+
83+
## The file structure for Smart HTML Elements
84+
85+
- `source/`
86+
87+
Javascript files.
88+
89+
- `source/styles/`
90+
91+
Component CSS Files.
92+
93+
- `demos/`
94+
95+
Demo files
96+
97+
## Running demos in browser
98+
99+
1. Fork the `Smart-HTML-Elements-Core` repository and clone it locally.
100+
101+
1. Make sure you have [npm](https://www.npmjs.com/) installed.
102+
103+
1. When in the `Smart-HTML-Elements-Core` directory, run `npm install` and then `bower install` to install dependencies.
104+
105+
1. Run a localhost or upload the demo on a web server. Then run:
106+
107+
- /demos/smart-card/smart-card-overview.htm
108+
109+
110+
## Following the coding style
111+
112+
We are using [ESLint](http://eslint.org/) for linting JavaScript code.
113+
114+
## Creating a pull request
115+
116+
- Make sure your code is compliant with ESLint
117+
- [Submit a pull request](https://www.digitalocean.com/community/tutorials/how-to-create-a-pull-request-on-github) with detailed title and description
118+
- Wait for response from one of our team members
119+
120+
121+
## License
122+
123+
Apache License 2.0

‎bower.json

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "smart-card",
3+
"authors": [
4+
"jQWidgets Ltd"
5+
],
6+
"description": "Smart Card is a free HTML Card Custom Element, built using native Javascript and CSS.",
7+
"license": "Apache-2.0",
8+
"keywords": [
9+
"Smart Card",
10+
"Card Web Component",
11+
"JS Card",
12+
"html Card",
13+
"javascript Card"
14+
],
15+
"main": "",
16+
"ignore": [
17+
"**/.*",
18+
"**/node_modules",
19+
"**/bower_components",
20+
"**/tests"
21+
],
22+
"dependencies": {
23+
"webcomponentsjs": "^1.0.0",
24+
"smart-core": "HTMLElements/smart-core"
25+
}
26+
}

‎demos/smart-card-overview.htm

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.22/webcomponents-lite.js"></script>
5+
6+
<link rel="stylesheet" href="../../smart-core/source/styles/smart.default.css" type="text/css" />
7+
<!--! do not remove -->
8+
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
9+
<script type="text/javascript" src="../../smart-core/source/smart.core.js"></script>
10+
<style>
11+
body {
12+
margin: 0px;
13+
padding: 0px;
14+
}
15+
16+
smart-card.basic-card .card-content,
17+
smart-card.basic-card .card-action {
18+
box-sizing: border-box;
19+
padding: 20px;
20+
color: white;
21+
background-color: #546E7A;
22+
border-bottom: 1px solid rgba(160,160,160,0.2);
23+
border-radius: 2px 2px 2px 2px;
24+
}
25+
26+
smart-card.basic-card .card-title {
27+
font-size: 18px;
28+
}
29+
30+
smart-card.basic-card a {
31+
color: #ffab40;
32+
transition: color .3s ease;
33+
text-transform: uppercase;
34+
border-bottom: none;
35+
text-decoration: none;
36+
margin-right: 20px;
37+
}
38+
39+
smart-card.basic-card a:hover {
40+
color: #ffd8a6;
41+
}
42+
</style>
43+
</head>
44+
<body>
45+
<smart-card class="basic-card">
46+
<div class="card-content">
47+
<span class="card-title">Card Title</span>
48+
<p>
49+
I am a very simple card. I am good at containing small bits of information.
50+
I am convenient because I require little markup to use effectively.
51+
</p>
52+
</div>
53+
<div class="card-action">
54+
<a href="#">This is a link</a>
55+
<a href="#">This is a link</a>
56+
</div>
57+
</smart-card>
58+
</body>
59+
</html>

‎package.json

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
{
2+
"name": "@smarthtmlelements/smart-card",
3+
"version": "2.0.2",
4+
"description": "Smart Card",
5+
"scripts": {},
6+
"repository": {
7+
"type": "git",
8+
"url": "git+https://github.com/HTMLElements/smart-card.git"
9+
},
10+
"author": "Smart HTML Elements",
11+
"license": "SEE LICENSE IN https://www.htmlelements.com/license/",
12+
"bugs": {
13+
"url": "https://github.com/HTMLElements/smart-card"
14+
},
15+
"homepage": "https://github.com/HTMLElements/smart-card#readme",
16+
"devDependencies": {},
17+
"dependencies": {
18+
"@webcomponents/webcomponentsjs": "^1.0.22",
19+
"@smarthtmlelements/smart-core": "^2.0.1"
20+
},
21+
"main": "index.js",
22+
"directories": {},
23+
"keywords": [
24+
"custom",
25+
"element",
26+
"card custom element",
27+
"html card",
28+
"card",
29+
"web components card",
30+
"card element",
31+
"banner rotator",
32+
"custom card",
33+
"card widget",
34+
"card ui",
35+
"card component",
36+
"card control",
37+
"banner",
38+
"banner element",
39+
"banner user interface",
40+
"material banner",
41+
"material carousel"
42+
]
43+
}

‎smart-card-web-component.png

7.08 KB
Loading

‎styles/demos.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
smart-carousel {
2+
width: 1000px;
3+
height: 450px;
4+
border-width: 0px;
5+
margin-left: auto;
6+
margin-right: auto;
7+
background-color: #d3d3d369;
8+
}

0 commit comments

Comments
 (0)