Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 0d4825e

Browse files
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

Lines changed: 110 additions & 4 deletions
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)

AltStyle によって変換されたページ (->オリジナル) /