Skip to content

Commit 1d031af

Browse files
committed
Merge branch 'master' of http://github.com/telerikacademy/css
2 parents 776e920 + bf1e157 commit 1d031af

File tree

3 files changed

+38
-38
lines changed

3 files changed

+38
-38
lines changed

Topics/03. CSS-Layout/slides/README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -581,7 +581,7 @@
581581
## Questions? -->
582582

583583

584-
<!-- attr: { showInPresentation:true, hasScriptWrapper:true, style:'font-size: 0.9em' } -->
584+
<!-- attr: { showInPresentation:true, hasScriptWrapper:true } -->
585585
# Free Trainings @ Telerik Academy
586586
- "Web Design with HTML 5, CSS 3 and JavaScript" course @ Telerik Academy
587587
- [css course](http://academy.telerik.com/student-courses/web-design-and-ui/css-styling/about)
@@ -592,4 +592,4 @@
592592
- Telerik Software Academy Forums
593593
- [forums.academy.telerik.com](http://telerikacademy.com/Forum/Home)
594594

595-
<!-- <img class="slide-image" showInPresentation="true" src="imgs/pic35.png" style="top:34.35%; left:68.14%; width:36.30%; z-index:-1" /> -->
595+
<!-- <img class="slide-image" showInPresentation="true" src="imgs/pic35.png" style="top:40%; left:68.14%; width:30%; z-index:-1" /> -->

Topics/04. LESS/slides/README.md

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
- [Variables and Interpolation](#variables-and-interpolation)
2525
- [Mixins and Functions](#mixins-and-functions)
2626
- [Loops](#loops)
27-
27+
2828
<!-- <img class="slide-image" src="imgs/pic03.png" showInPresentation="true" style="top:29.78%; left:64.70%; width:38.94%; z-index:-1" /> -->
2929

3030

@@ -33,7 +33,7 @@
3333
<!-- section start -->
3434
<!-- attr: { id:'overview', class:'slide-section', showInPresentation:true } -->
3535
<!-- # <a id="overview"></a>LESS Overview
36-
## What is LESS? -->
36+
## What is LESS? -->
3737

3838
<!-- attr: { showInPresentation:true, hasScriptWrapper:true } -->
3939
# LESS Overview
@@ -46,7 +46,7 @@
4646
- Mixins
4747
- Color editing functions
4848
- Selector nesting and more
49-
49+
5050
<!-- <img class="slide-image" src="imgs/pic05.png" showInPresentation="true" style="top:47%; left:73%; width:30%; z-index:-1" /> -->
5151

5252

@@ -84,7 +84,7 @@
8484
- **Using client-side LESS is slow**
8585
- All the parsing is done by the client
8686
- i.e. spend some of the browser resources for pointless parsing - Imagine a 2000-lines-long LESS file…
87-
87+
8888

8989

9090

@@ -233,7 +233,7 @@ body a:visited {
233233
@border-width: 15px;
234234

235235
border-@{border-side} :
236-
$border-width $border-style $border-color;
236+
@border-width @border-style @border-color;
237237
```
238238

239239
```css
@@ -378,14 +378,14 @@ div.box-div {
378378
- Mixins can define different behavior, depending on its parameters
379379

380380
```less
381-
.color(dark, @color){
381+
.color(dark; @color){
382382
color: @darken(@color);
383383
}
384-
.color(light, @color){
384+
.color(light; @color){
385385
color: @lighten(@color);
386386
}
387387
//called no matter which of the above is called
388-
@color(@_, @color){
388+
@color(@_; @color){
389389
border: 1px solid @color;
390390
}
391391
```
@@ -508,12 +508,12 @@ div {
508508
- "Web Design with HTML 5, CSS 3 and JavaScript" course @ Telerik Academy
509509
- [css course](http://academy.telerik.com/student-courses/web-design-and-ui/css-styling/about)
510510
- Telerik Software Academy
511-
- [academy.telerik.com](academy.telerik.com)
511+
- [telerikacademy.com](https://telerikacademy.com)
512512
- Telerik Academy @ Facebook
513-
- [facebook.com/TelerikAcademy](facebook.com/TelerikAcademy)
513+
- [facebook.com/TelerikAcademy](http://facebook.com/TelerikAcademy)
514514
- Telerik Software Academy Forums
515-
- forums.academy.telerik.com
516-
515+
- [forums.academy.telerik.com](http://forums.academy.telerik.com)
516+
517517
<!-- <img class="slide-image" src="imgs/pic19.png" showInPresentation="true" style="top:58.18%; left:90.52%; width:16.97%; z-index:-1" /> -->
518518
<!-- <img class="slide-image" src="imgs/pic20.png" showInPresentation="true" style="top:34.35%; left:68.14%; width:36.30%; z-index:-1" /> -->
519519
<!-- <img class="slide-image" src="imgs/pic21.png" showInPresentation="true" style="top:48.92%; left:75.91%; width:10.85%; z-index:-1" /> -->

Topics/04. SASS/slides/README.md

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -69,17 +69,17 @@
6969
```bash
7070
npm install -g node-sass
7171
```
72-
72+
7373
- Compile `scss` files on changes:
74-
74+
7575
```bash
76-
node-sass --watch source.sccs dest.css
76+
node-sass --watch source.sccs dest.css
7777
```
7878

7979
- You get the translated CSS
8080

8181
<!-- attr: { class:'slide-section demo', showInPresentation:true } -->
82-
<!-- # Compiling SASS with Node.js
82+
<!-- # Compiling SASS with Node.js
8383
## Demo -->
8484

8585

@@ -118,7 +118,7 @@ body {
118118
font: normal 16px arial;
119119
color: #fff;
120120
background-color: #011b63;
121-
121+
122122
h1 {
123123
font-size: 2.3em;
124124
font-weight: bold;
@@ -177,7 +177,7 @@ body h1{
177177
```sass
178178
a {
179179
color: black;
180-
180+
181181
&:hover {
182182
color: lightblue;
183183
}
@@ -189,7 +189,7 @@ a {
189189
a {
190190
color: black;
191191
}
192-
192+
193193
a:hover {
194194
color: lightblue;
195195
}
@@ -273,8 +273,8 @@ border-top : 15px ridge blue
273273
- How to **define mixins**?
274274
- Use the following syntax:
275275
```sass
276-
@mixin <mixin-name> {
277-
/* SASS styles go here */
276+
@mixin <mixin-name> {
277+
/* SASS styles go here */
278278
}
279279
```
280280
- Then the styles are normal SASS
@@ -284,7 +284,7 @@ border-top : 15px ridge blue
284284
```sass
285285
@mixin clearfix{
286286
zoom:1;
287-
&:after{ display:block; content:""; height:0; clear:both; }
287+
&:after{ display:block; content:""; height:0; clear:both; }
288288
}
289289
```
290290
@@ -351,13 +351,13 @@ div{
351351
352352
```sass
353353
.clearfix, body div {
354-
zoom: 1;
354+
zoom: 1;
355355
}
356356
.clearfix:after, body div:after {
357357
display: block;
358358
height: 0;
359359
content: "";
360-
clear: both;
360+
clear: both;
361361
}
362362
```
363363
@@ -387,7 +387,7 @@ div{
387387
## [Demo](https://github.com/TelerikAcademy/CSS/blob/master/Topics/04.%20SASS/demos/09.%20operators-and-conditional-statements.html) -->
388388
389389
<!-- attr: { class:'slide-section', showInPresentation:true } -->
390-
<!-- # Conditional statements
390+
<!-- # Conditional statements
391391
## Generate style rules depending on conditions -->
392392
393393
<!-- attr: { id:'conditionals', showInPresentation:true, style:'font-size: 0.9em' } -->
@@ -396,9 +396,9 @@ div{
396396
397397
```sass
398398
@mixin opacity($value) {
399-
399+
400400
opacity: $value;
401-
401+
402402
@if(0.75 < $value and $value <= 1) {
403403
color: blue;
404404
} @else if(0.25 < $value and $value <= 0.75) {
@@ -411,7 +411,7 @@ div{
411411
412412
413413
<!-- attr: { class:'slide-section demo', showInPresentation:true, hasScriptWrapper:true } -->
414-
<!-- # Conditional statements
414+
<!-- # Conditional statements
415415
## [Demo](https://github.com/TelerikAcademy/CSS/blob/master/Topics/04.%20SASS/demos/09.%20operators-and-conditional-statements.html) -->
416416
417417
<!-- attr: { class:'slide-section', showInPresentation:true, hasScriptWrapper:true } -->
@@ -426,17 +426,17 @@ div{
426426
- `@each` loop
427427
- Similar to loops in C#, JS, C++ and so on
428428
- Can be used to repeat actions and/or generate css rules
429-
429+
430430
<!-- attr: { showInPresentation:true, hasScriptWrapper:true, style:'font-size: 0.8em' } -->
431431
# `@for` loop
432432
433-
- Syntax:
433+
- Syntax:
434434
```
435435
@for <index-name> <start> through <end> { <loop-body> }
436436
```
437437
- Repeats `<loop-body>` for each value from `start` to `end`
438438
- The index is accessible through the variable with `<index-name>`
439-
439+
440440
```sass
441441
@for $index from 1 through 3 {
442442
.margin-left-#{$index} {
@@ -457,7 +457,7 @@ div{
457457
<!-- attr: { showInPresentation:true, hasScriptWrapper:true, style:'font-size: 0.75em' } -->
458458
# `@while` loop
459459
460-
- Syntax:
460+
- Syntax:
461461
```
462462
@while <condition> { <loop-body> }
463463
```
@@ -570,10 +570,10 @@ $selectors: div p section article;
570570
- "Web Design with HTML 5, CSS 3 and JavaScript" course @ Telerik Academy
571571
- [css course](http://academy.telerik.com/student-courses/web-design-and-ui/css-styling/about)
572572
- Telerik Software Academy
573-
- [academy.telerik.com](academy.telerik.com)
573+
- [telerikacademy.com](https://telerikacademy.com)
574574
- Telerik Academy @ Facebook
575-
- [facebook.com/TelerikAcademy](facebook.com/TelerikAcademy)
575+
- [facebook.com/TelerikAcademy](http://facebook.com/TelerikAcademy)
576576
- Telerik Software Academy Forums
577-
- forums.academy.telerik.com
578-
577+
- [forums.academy.telerik.com](http://forums.academy.telerik.com)
578+
579579
<!-- <img class="slide-image" showInPresentation="true" src="imgs/pic35.png" style="top:34.35%; left:68.14%; width:36.30%; z-index:-1" /> -->

0 commit comments

Comments
 (0)