Skip to content

Commit 0d4825e

Browse files
dinanathsj29dinanathsj29
authored
chapter 2 - 2.1 demo uploaded
chapter 2 - 2.1 demo uploaded
1 parent 87be2cb commit 0d4825e

File tree

1 file changed

+110
-4
lines changed

1 file changed

+110
-4
lines changed

‎README.md

+110-4
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,10 @@ Topics included/covered
6363
[Using CSS Variables](#15-using-css-variables)
6464
- 1.6. [CSS Variables vs Preprocessor Variables](#16-css-variables-vs-preprocessor-variables) | [Difference Between CSS Variables and Preprocessor Variables](#16-difference-between-css-variables-and-preprocessor-variables)
6565
- 1.7. [CSS Variables with JavaScript](#17-css-variables-with-javascript)
66-
66+
67+
2. [CSS Variables Practical Demo Examples](#2-css-variables-practical-demo-examples)
68+
- 2.1. [Managing Colors-Theme](#21-managing-colors-theme )
69+
6770
1 Introduction to CSS Variables Custom Properties
6871
=====================
6972

@@ -777,7 +780,8 @@ Variables are one of the major reasons why CSS preprocessors like `SASS` or `LES
777780
- One of the important benefits of CSS Variables is that it can interact via the power of JavaScript
778781
- While dealing with CSS Variables JavaScript widely uses `getComputedStyle()` `getProperty()` and `style.setProperty()` methods
779782

780-
**Syntax & Example**: `1.7.1-css-variables-javascript-interaction.html`
783+
> **Syntax & Example**: `1.7.1-css-variables-javascript-interaction.html`
784+
781785
```html
782786
<!DOCTYPE html>
783787
<html lang="en">
@@ -824,7 +828,8 @@ Variables are one of the major reasons why CSS preprocessors like `SASS` or `LES
824828
</html>
825829
```
826830

827-
**Syntax & Example**: `1.7.1-css-variables-javascript-interaction.html`
831+
> **Syntax & Example**: `1.7.1-style-variables-javascript-interaction.css`
832+
828833
```css
829834
:root {
830835
--font-face: Arial;
@@ -866,7 +871,8 @@ ul > li {
866871
}
867872
```
868873

869-
**Syntax & Example**: `1.7.1-css-variables-javascript-interaction.html`
874+
> **Syntax & Example**: `1.7.1-script-variables-javascript-interaction.js`
875+
870876
```js
871877
console.log('in 1.7.1-script-variables-javascript-interaction.js');
872878

@@ -900,3 +906,103 @@ root.style.setProperty('--base-bg-color', '#f66969') // red- #f66969; green - #6
900906
<figcaption>&nbsp;&nbsp;&nbsp; Image 1.7.1.2 - CSS variable interaction with JavaScript updated Red output </figcaption>
901907
</figure>
902908
</p>
909+
910+
2 CSS Variables Practical Demo Examples
911+
=====================
912+
913+
2.1. Managing Colors-Theme
914+
---------------------
915+
916+
> **Syntax & Example**: `2.1-css-var-demo-managing-colors-themes.html`
917+
918+
```html
919+
<!DOCTYPE html>
920+
<html lang="en">
921+
922+
<head>
923+
924+
<meta charset="UTF-8">
925+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
926+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
927+
<title>2.1-css-var-demo-managing-colors-themes.html</title>
928+
929+
<link rel="stylesheet" href="2.1-style-css-var-demo-managing-colors-themes.css">
930+
931+
</head>
932+
933+
<body>
934+
935+
<div class="container">
936+
937+
<h1 class="top-heading-text" id="topHeadingText">2. CSS Variable Demo</h1>
938+
939+
<h2 class="subheading-text" id="subHeadingText">2.1 - Managing Colors Themes</h2>
940+
941+
<article class="info-text">
942+
The benefits of using variables in CSS are not that much different than from those of using variables in any other programming languages (define/initiate once and use when required). <br/> <br/>
943+
The beauty of variables is that they let you store your valuables/properties in one place and update it on the fly for several various purposes. <br/>
944+
</article>
945+
946+
<footer class="footer-text">This is footer Text</footer>
947+
948+
</div>
949+
950+
</body>
951+
952+
</html>
953+
```
954+
955+
> **Syntax & Example**: `2.1-style-css-var-demo-managing-colors-themes.css`
956+
957+
```css
958+
:root {
959+
/* define/set variables */
960+
--main-font-family: Verdana;
961+
--main-theme-color: #ff7f50;
962+
--main-line-height: 2;
963+
}
964+
965+
body {
966+
font-family: var(--main-font-family);
967+
text-align: center;
968+
}
969+
970+
.top-heading-text {
971+
/* refer/call variables */
972+
background-color: var(--main-theme-color);
973+
line-height: var(--main-line-height);
974+
}
975+
976+
.subheading-text {
977+
color: var(--main-theme-color);
978+
}
979+
980+
.info-text {
981+
color: var(--main-theme-color);
982+
margin: 0 auto;
983+
max-width: 70%;
984+
margin-bottom: 2em;
985+
}
986+
987+
.footer-text {
988+
background-color: var(--main-theme-color);
989+
line-height: var(--main-line-height);
990+
font-size: 0.75em;
991+
}
992+
```
993+
994+
<p>
995+
<figure>
996+
&nbsp;&nbsp;&nbsp; <img src="_images-css-variables/2.1.1-css-var-demo-managing-colors-themes.png" alt="CSS Variables Demo - Managing Colors Themes" title="CSS Variables Demo - Managing Colors Themes" width="1000" border="2" />
997+
<figcaption>&nbsp;&nbsp;&nbsp; Image 2.1.1 - CSS Variables Demo - Managing Colors Themes </figcaption>
998+
</figure>
999+
</p>
1000+
1001+
<p>
1002+
<figure>
1003+
&nbsp;&nbsp;&nbsp; <img src="_images-css-variables/2.1.2-style-css-var-demo-managing-colors-themes.png" alt="Style CSS Variables Demo - Managing Colors Themes" title="Style CSS Variables Demo - Managing Colors Themes" width="1000" border="2" />
1004+
<figcaption>&nbsp;&nbsp;&nbsp; Image 2.1.2 - Style CSS Variables Demo - Managing Colors Themes </figcaption>
1005+
</figure>
1006+
</p>
1007+
1008+

0 commit comments

Comments
 (0)