Skip to content

Commit f6385d9

Browse files
afshinmafshinm
committed
CSS improvements. formatting and externalized demo styles.
Edit, related to usablica#37
2 parents 8c0b160 + 6eadc4a commit f6385d9

File tree

4 files changed

+127
-114
lines changed

4 files changed

+127
-114
lines changed

‎README.md

Lines changed: 37 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
1-
Intro.js
2-
========
1+
# Intro.js
32

4-
Better introductions for websites and features with a step-by-step guide for your projects.
3+
> Better introductions for websites and features with a step-by-step guide for your projects.
54
6-
##How to use
5+
6+
## How to use
77
Intro.js can be added to your site in three simple steps:
88

99
**1)** Include `intro.js` and `introjs.css` (or the minified version for production) in your page.
1010

1111
**2)** Add `data-intro` and `data-step` to your HTML elements.
12+
1213
For example:
14+
1315
```html
1416
<a href='http://google.com/' data-intro='Hello step one!' data-step='1'></a>
1517
````
@@ -19,54 +21,57 @@ For example:
1921
introJs().start();
2022
````
2123

22-
Optionally, pass one parameter to `introJs` function to limit the presentation section, for example `introJs(".introduction-farm").start();` runs the introduction only for elements with `class='introduction-farm'`.
24+
Optionally, pass one parameter to `introJs` function to limit the presentation section.
25+
26+
**For example** `introJs(".introduction-farm").start();` runs the introduction only for elements with `class='introduction-farm'`.
2327

2428
<p align="center"><img src="http://usablica.github.com/intro.js/img/introjs-demo.jpg"></p>
2529

26-
##Using with:
2730

28-
###Rails
31+
## Using with:
2932

33+
### Rails
3034
If you are using the rails asset pipeline you can use the [introjs-rails](https://github.com/heelhook/intro.js-rails) gem.
3135

32-
###Yii framework
36+
### Yii framework
3337
You can simply use this project for Yii framework: https://github.com/moein7tl/Yii-IntroJS
3438

35-
##Roadmap
39+
## Roadmap
3640
- More browser compatibility
3741
- Adding ability to define tooltip position in each step, `top`, `left,` `right` and `bottom`
3842
- Fix overlay layer bug while using it in wide monitors and `document` object
3943
- Change `Next` and `Skip` buttons
4044
- Add complete introduction callback
4145

42-
##History
4346

44-
###v0.1.0 - March 16, 2013
45-
First version
47+
## Release History
48+
* 2013-03-16 v0.1.0 First commit.
4649

50+
## Author
51+
**Afshin Mehrabani**
4752

48-
##Main Contributors
49-
- [Afshin Mehrabani](http://afshinm.name/)
53+
+ [https://github.com/afshinm](https://github.com/afshinm)
54+
- [http://afshinm.name/](http://afshinm.name/)
5055

51-
other contributors: https://github.com/usablica/intro.js/contributors
56+
[Other contributors](https://github.com/usablica/intro.js/graphs/contributors)
5257

53-
##Support/Discussion
5458

59+
## Support/Discussion
5560
- [Google Group](https://groups.google.com/d/forum/introjs)
5661

57-
##License
58-
59-
Copyright (C) 2012 Afshin Mehrabani ([email protected])
60-
61-
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
62-
documentation files (the "Software"), to deal in the Software without restriction, including without limitation
63-
the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
64-
and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
65-
The above copyright notice and this permission notice shall be included in all copies or substantial portions
66-
of the Software.
67-
68-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
69-
TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
70-
THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
71-
CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
72-
IN THE SOFTWARE.
62+
63+
## License
64+
> Copyright (C) 2012 Afshin Mehrabani ([email protected])
65+
66+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
67+
documentation files (the "Software"), to deal in the Software without restriction, including without limitation
68+
the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
69+
and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
70+
The above copyright notice and this permission notice shall be included in all copies or substantial portions
71+
of the Software.
72+
73+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
74+
TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
75+
THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
76+
CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
77+
IN THE SOFTWARE.

‎example/css/demo.css

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
body {
2+
padding-top: 20px;
3+
font-family: "Myriad Pro", Verdana, Arial, Tahoma;
4+
padding-bottom: 40px;
5+
}
6+
7+
/* Custom container */
8+
.container-narrow {
9+
margin: 0 auto;
10+
max-width: 700px;
11+
}
12+
.container-narrow > hr {
13+
margin: 30px 0;
14+
}
15+
16+
/* Main marketing message and sign up button */
17+
.jumbotron {
18+
margin: 60px 0;
19+
text-align: center;
20+
}
21+
.jumbotron h1 {
22+
font-size: 72px;
23+
line-height: 1;
24+
}
25+
.jumbotron .btn {
26+
font-size: 21px;
27+
padding: 14px 24px;
28+
}
29+
30+
/* Supporting marketing content */
31+
.marketing {
32+
margin: 60px 0;
33+
}
34+
.marketing p + h4 {
35+
margin-top: 28px;
36+
}

‎example/index.html

Lines changed: 5 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -7,50 +7,13 @@
77
<meta name="description" content="Intro.js -Better introductions for websites and features with a step-by-step guide for your projects.">
88
<meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
99

10-
<!-- Le styles -->
11-
<link href="css/bootstrap.css" rel="stylesheet">
10+
<!-- styles -->
11+
<link href="css/bootstrap.min.css" rel="stylesheet">
12+
<link href="css/demo.css" rel="stylesheet">
13+
1214
<!-- Add IntroJs style -->
1315
<link href="../introjs.css" rel="stylesheet">
14-
<style type="text/css">
15-
body {
16-
padding-top: 20px;
17-
font-family: "Myriad Pro", Verdana, Arial, Tahoma;
18-
padding-bottom: 40px;
19-
}
20-
21-
/* Custom container */
22-
.container-narrow {
23-
margin: 0 auto;
24-
max-width: 700px;
25-
}
26-
.container-narrow > hr {
27-
margin: 30px 0;
28-
}
29-
30-
/* Main marketing message and sign up button */
31-
.jumbotron {
32-
margin: 60px 0;
33-
text-align: center;
34-
}
35-
.jumbotron h1 {
36-
font-size: 72px;
37-
line-height: 1;
38-
}
39-
.jumbotron .btn {
40-
font-size: 21px;
41-
padding: 14px 24px;
42-
}
43-
44-
/* Supporting marketing content */
45-
.marketing {
46-
margin: 60px 0;
47-
}
48-
.marketing p + h4 {
49-
margin-top: 28px;
50-
}
51-
</style>
52-
<link href="css/bootstrap-responsive.css" rel="stylesheet">
53-
16+
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
5417
</head>
5518

5619
<body>

‎introjs.css

Lines changed: 49 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,113 +1,122 @@
11
.introjs-overlay {
22
position: absolute;
33
z-index: 999999;
4-
background-color:rgb(0, 0, 0);
4+
background-color: #000;
55
opacity: 0;
66
-webkit-transition: all 0.3s ease-out;
7-
-moz-transition: all 0.3s ease-out;
8-
-o-transition: all 0.3s ease-out;
9-
-ms-transition: all 0.3s ease-out;
10-
transition: all 0.3s ease-out;
7+
-moz-transition: all 0.3s ease-out;
8+
-ms-transition: all 0.3s ease-out;
9+
-o-transition: all 0.3s ease-out;
10+
transition: all 0.3s ease-out;
1111
}
12+
1213
.introjs-showElement {
13-
z-index: 9999999;
1414
position: relative;
15+
z-index: 9999999;
1516
}
17+
1618
.introjs-helperLayer {
17-
background-color: rgba(255, 255, 255, 0.9);
18-
z-index: 9999998;
1919
position: absolute;
20+
z-index: 9999998;
21+
background-color: rgba(255,255,255,.9);
22+
border: 1px solid rgba(0,0,0,.5);
2023
border-radius: 4px;
21-
border: 1px solid rgba(0, 0, 0, 0.5);
22-
box-shadow: 0px 2px 15px rgba(0,0,0,0.4);
24+
box-shadow: 0 2px 15px rgba(0,0,0,.4);
2325
-webkit-transition: all 0.3s ease-out;
24-
-moz-transition: all 0.3s ease-out;
25-
-o-transition: all 0.3s ease-out;
26-
-ms-transition: all 0.3s ease-out;
27-
transition: all 0.3s ease-out;
26+
-moz-transition: all 0.3s ease-out;
27+
-ms-transition: all 0.3s ease-out;
28+
-o-transition: all 0.3s ease-out;
29+
transition: all 0.3s ease-out;
2830
}
31+
2932
.introjs-helperNumberLayer {
33+
position: absolute;
34+
top: -16px;
35+
left: -16px;
3036
z-index: 9999999999 !important;
37+
width: 20px;
3138
padding: 2px;
32-
background: #ff3019; /* Old browsers */
33-
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6+ */
34-
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
35-
background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
36-
background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Opera 11.10+ */
37-
background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* IE10+ */
38-
background: linear-gradient(to bottom, #ff3019 0%,#cf0404 100%); /* W3C */
39-
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */ color: white;
40-
position: absolute;
41-
border-radius: 50%;
4239
font-family: Arial, verdana, tahoma;
4340
font-size: 13px;
4441
font-weight: bold;
42+
color: white;
4543
text-align: center;
46-
width: 20px;
44+
text-shadow: 1px 1px 1px rgba(0,0,0,.3);
45+
background: #ff3019; /* Old browsers */
46+
background: -webkit-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* Chrome10+,Safari5.1+ */
47+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff3019), color-stop(100%, #cf0404)); /* Chrome,Safari4+ */
48+
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6+ */
49+
background: -ms-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* IE10+ */
50+
background: -o-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* Opera 11.10+ */
51+
background: linear-gradient(to bottom, #ff3019 0%, #cf0404 100%); /* W3C */
4752
border: 3px solid white;
48-
box-shadow: 0px 2px 5px rgba(0,0,0,0.4);
49-
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
50-
filter: progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=ff0000);
51-
left: -16px;
52-
top: -16px;
53+
border-radius: 50%;
54+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3019', endColorstr='#cf0404', GradientType=0); /* IE6-9 */
55+
filter: progid:DXImageTransform.Microsoft.Shadow(direction=135, strength=2, color=ff0000); /* IE10 text shadows */
56+
box-shadow: 0 2px 5px rgba(0,0,0,.4);
5357
}
58+
5459
.introjs-arrow {
5560
border: 5px solid white;
5661
content:'';
5762
position: absolute;
5863
}
59-
.introjs-arrow.top{
64+
.introjs-arrow.top {
6065
top: -10px;
6166
border-top-color:transparent;
6267
border-right-color:transparent;
6368
border-bottom-color:white;
6469
border-left-color:transparent;
6570
}
66-
.introjs-arrow.right{
71+
.introjs-arrow.right {
6772
right: -10px;
6873
top: 10px;
6974
border-top-color:transparent;
7075
border-right-color:transparent;
7176
border-bottom-color:transparent;
7277
border-left-color:white;
7378
}
74-
.introjs-arrow.bottom{
79+
.introjs-arrow.bottom {
7580
bottom: -10px;
7681
border-top-color:white;
7782
border-right-color:transparent;
7883
border-bottom-color:transparent;
7984
border-left-color:transparent;
8085
}
81-
.introjs-arrow.left{
86+
.introjs-arrow.left {
8287
left: -10px;
8388
top: 10px;
8489
border-top-color:transparent;
8590
border-right-color:white;
8691
border-bottom-color:transparent;
8792
border-left-color:transparent;
8893
}
94+
8995
.introjs-tooltip {
9096
position: absolute;
9197
padding: 10px;
9298
background-color: white;
9399
border-radius: 3px;
94-
box-shadow: 0px 1px 10px rgba(0,0,0,0.4);
100+
box-shadow: 0 1px 10px rgba(0,0,0,.4);
95101
-webkit-transition: all 0.1s ease-out;
96-
-moz-transition: all 0.1s ease-out;
97-
-o-transition: all 0.1s ease-out;
98-
-ms-transition: all 0.1s ease-out;
99-
transition: all 0.1s ease-out;
102+
-moz-transition: all 0.1s ease-out;
103+
-ms-transition: all 0.1s ease-out;
104+
-o-transition: all 0.1s ease-out;
105+
transition: all 0.1s ease-out;
100106
}
107+
101108
.introjs-tooltipbuttons {
102109
font-size: 10px;
103110
text-align: right;
104111
}
112+
105113
.introjs-tooltipbuttons .introjs-skipbutton {
106114
margin-right: 5px;
107115
color: gray;
108116
}
117+
109118
.introjs-tooltipbuttons .introjs-nextbutton {
119+
font-size: 11px;
110120
font-weight: bold;
111121
color: #2071d3;
112-
font-size: 11px;
113122
}

0 commit comments

Comments
 (0)