CSS Preprocessors (SCSS & LESS)

или ти по нашки CSS предпроцесори.

Ја сам се до сада сусрео са два дотична предпроцесора ЅCSS и LESS.

Од два најпознатије frameworks за развој у FrontEnd, један је написа са LESS (Boostrap) а други је написан са SCSS (Foundation), па ћемо ми сада погледамо оба а вама остављам да изабере онај који вам се више допада. За примере ћу користи CodePen.

Па да почнемо… :)

Променљиве:

SCSS
  $white: #fff;
  $spacing: 25px;

  .classname {
    color: $white;
    margin: $spacing;
  }
LESS
  @white: #fff;
  @spacing: 25px;

  .classname {
    color: @white;
    margin: @spacing;
  }

Скоро па идентично, зар не?

Угњеждавање и њихова правила

SCSS
ul {
  margin: 20px auto;
  list-style: none;
    
  li {
    padding: 10px 20px;
        
    a {
      color: #333;
      
      &:hover {
        color: #000;          
      }
    }
  }
}
LESS
ul {
  margin: 20px auto;
  list-style: none;
    
  li {
    padding: 10px 20px;
        
    a {
      color: #333;
      
      &:hover {
        color: #000;          
      }
    }
  }
}

Апсолутно идентично.
Ово су биле основе, сада крећемо у мало напредније ствари где ће почети да се појављују прве разлике између два предпроцесора…

Mixins

Миксеви(нећу проналазити српску реч за ово) су скупови својстава које могу да се убаце у својства неког елемента позивање. Такође, миксеви се могу понашати и као функције и прихватати аргументе.

SCSS
@mixin razmaci($razmak: 10px) {
  padding: $razmak;
}
@mixin crvena-zvezda-scheme {
  background-color: white;
  color: red;
  border: 1px solid red;
}

@mixin partizan-scheme {
  background-color: white;
  color: black;
  border: 1px solid black;
}

// Upotreba
.delije {
  @include razmaci;
  @include crvena-zvezda-scheme;
}

.grobari {
  @incldue razmaci(20px);
  @include partizan-scheme;
}
LESS
.razmaci(@razmak: 10px) {
  padding: @razmak;
}
.crvena-zvezda-scheme {
  background-color: white;
  color: red;
  border: 1px solid red;
}

.partizan-scheme {
  background-color: white;
  color: black;
  border: 1px solid black;
}

// Upotreba
.delije {
  .razmaci;
  .crvena-zvezda-scheme;
}

.grobari {
  .razmaci(20px);
  .partizan-scheme;
}

Ево и тога примењеног.

Функције

Oба предпроцесора долазе са подршком за основне математичке функције, као и још неколико врло корисних и практичних функција које вам могу помоћи приликом развоја сајтова.

SCSS
$razmak: 20px;
$crvena: red;
$bela: #fff;
$crna: #000;

.delije {
  background-color: $crvena;
  color: $bela;
  padding: $razmak / 2; // 10px
  margin: $razmak * 2; // 40px
  
  &:hover {
    color: darken($bela, 20%); // potamni boju
  }
}

.grobari {
  background-color: $crna;
  color: $bela;
  padding: $razmak + 10; // 30px
  margin: $razmak - 10; // 10px
  
  &:hover {
    background-color: lighten($crna, 20%); // posvetli boju
  }
}
LESS
@razmak: 20px;
@crvena: red;
@bela: #fff;
@crna: #000;

.delije {
  background-color: @crvena;
  color: @bela;
  padding: @razmak / 2; // 10px
  margin: @razmak * 2; // 40px
  
  &:hover {
    color: darken(@bela, 20%); // potamni boju
  }
}

.grobari {
  background-color: @crna;
  color: @bela;
  padding: @razmak + 10; // 30px
  margin: @razmak - 10; // 10px
  
  &:hover {
    background-color: lighten(@crna, 20%); // posvetli boju
  }
}

У неком од наредних чланака, ући ћемо у детаљније и још напредније ствари које можете да радите са предпроцесорима…

SCSS
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

… као петље на пример? ;)

Read More

FrontEnd development – alatke

Verovatno najbitniji aspekt rada jednog programera su alatke koje koristi za kvalitetniji i produktivniji rad. Međutim i tu postoje aplikacije koje su bitnije od ostalih a to je, naravno, ona u kojoj svi mi pišemo naš kod…

Dakle, editori.

Ja sam ljubitelj SublimeText-a, koji ću vam ukratko predstaviti sa objašnjenjem zašto je baš isti moj omiljeni editor i zašto biste trebali da ga, barem, probate.

* Multi cursor podrška
* Plugins & snippets
* Brzina

Dovoljno je da čovek ode na sajt [sublime text](http://www.sublimetext.com/) kako bi mogao da vidi koliko multi-cursor podrška znači u svakodnevnom radu sa kodom.

MultiCursors

 

SublimeText ne dolazi sa instaliranim menadžerom za pluginove ili snippets ali instalirati isti je izuetno lako. [Package Control](https://sublime.wbond.net/). Podržava stare(a i nove) Textmate bundles. ;)

PackageControl

U pitanju je tkzv “fuzzy search” koja radi po principu traženja patterna u bilo kom delu reč ili čak rečenice. Vrlo korisno kada se traži nešto zašta nemamo jasno definisani naziv ili znamo kako bi se možda moglo zvati.

 

Brzinu ćete najbolje videti kada budete instalirali program i počeli da kodirate u istom…

Uživajte!

Read More

Crtanje laptopa samo sa CSS-om :)

Danas je bio spor dan na poslu, pa između gomile prototipova koje sam napravio za razno razne potrebe, slučajno sam napravio nešto što je ličilo na ekran laptopa… 10minuta kasnije napravio sam ovo:

Screen Shot 2013-07-10 at 7.35.30 PM

CSS:


.notebook {
  position: relative;
  width: 350px;
  margin: 25px auto;
}
.notebook .display {
  width: 250px;
  height: 175px;
  margin: 0 auto;
  background-color: #796cce;
  border: 10px solid #333;
  -webkit-border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
}
.notebook .display:before {
  content: '';
  position: absolute;
  top: 2.5px;
  left: 50%;
  margin-left: 2.5px;
  width: 5px;
  height: 5px;
  background: #ccc;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
}
.notebook .bottom {
  position: relative;
  width: 350px;
  height: 12.5px;
  background: #cccccc;
  margin: 0 auto;
}
.notebook .bottom:before {
  content: '';
  position: absolute;
  top: 0;
  top: 0px;
  left: 50%;
  margin-left: -25px;
  width: 50px;
  height: 5px;
  background: #8e8e8e;
  -webkit-border-radius: 0 0 10px 10px;
  -moz-border-radius: 0 0 10px 10px;
  border-radius: 0 0 10px 10px;
}
.notebook .bottom:after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  border-top: 4px solid #959595;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

HTML:


<div class="notebook">
  <div class="display"></div>
  <div class="bottom"></div>
</div>

Codepen mozete pogledati ovde

Read More

Korisna Javascript skripta za proveru širine ili visine viewporta browsera korisnika

Pozdrav svima

Pre izvesnog vremena sam radio na jednom projektu gde sam imao potrebu da prikazujem dodatne helper elemente u relativnoj poziciji u odnosu na input za koji su bili vezani.

Pošto je na širim rezolucijama bilo moguće pozicionirati helper element u desnom od input elementa, trebao mi je način da kroz jednostavnu JS skriptu proveravam širinu viewport-a samog browsera i da na taj način odredim da li će biti pozicionirano desno od input polja ili ispod(na mobile uređajima…).

Ovo je skripta:

function viewportSize(side) { 
  var w = window, 
      d = document, 
      e = d.documentElement, 
      g = d.getElementsByTagName('body')[0], 
      x = w.innerWidth || e.clientWidth || g.clientWidth, 
      y = w.innerHeight|| e.clientHeight|| g.clientHeight;

    return side === 'width' ? x : y;

}

Upotreba je vrlo jednostavna:

viewportSize('height');

Read More