Susy este o colectie de functii SASS care iti permite sa iti faci propriul grid pentru layout foarte usor.
Siteul oficial: Susy: your layout, our math
Prezentare video:
Tutoriale:
1 Like
L-am încercat la un moment dat, dar mi s-a părut complicat de setat, așa că am renunțat rapid.
Sunt convins că-i util, dar… tare mi-e că nu va dura mult până când vor începe să apară articolele de genul „CSS fatigue”. 
1 Like
In CSS chior nu poti face propriul grid?
Desigur că poți. Ideea e să fie suficient de permisiv la schimbări & co.
Eu cum sunt afon la front-end, folosesc Bootstrap, mi se pare că foarte mulţi fac asta. Am vreun avantaj dacă folosesc alt grid decât cel oferit de Bootstrap?
Da, poti, dar avantajul Susy peste un grid facut de tine manual in css este ca Susy foloseste multa matematica in spate ca sa calculeze procentele folosite pentru width, padding si margin si tu nu trebuie sa iti bati capul cu astea niciodata 
In bootstrap ai un grid de 12 coloane cu un gutter fix (Gutter width: 30px,15px on each side of a column), iar in Susy gutterul il poti seta individual pe fiecare element pe care vrei sa folosesti grid, si se poate seta ca parte dintr-o coloana, 1/4 din coloana de exemplu, astfel este mai responsive.
Cu Susy ai control total, de exemplu pe elementul x faci un grid de 10 coloane, iar in acel grid poti sa ai un element care are propriul grid de 4 coloane.
Ai mult control si pe responsive, sa zicem un grid pe desktop sa fie de 10 coloane, iar pe mobil sa fie de 4.
Va recomand videoclipul asta:
Pe viitor vom avea grid nativ in css, dar pana atunci Susy mi se pare foarte bun.
2 Likes
Înţeleg, dar de ce nu aş avea două template-uri separate, unul pentru desktop sau tablete mai mari şi unul pentru mobil?
Şi în Bootstrap pot modifica gutterul:
.gutter-20.row { margin-right: -10px; margin-left: -10px; } .gutter-20 > [class^="col-"], .gutter-20 > [class^=" col-"] { padding-right: 10px; padding-left: 10px; }
Şi pot folosi un sub-grid pentru un element particular:
’
</div>
<div class="col-md-8">
<!-- Creating a child here and divide col-8 into 2 parts. -->
<div class="row">
<!-- Note that for bootstrap all the rows are always 12 columns -->
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</div>
</div>
</div>'
Deci cu grid nesting şi gutter custom, pot scrie:
`
</div>
<div class="col-md-8">
<!-- Creating a child here and divide col-8 into 2 parts. -->
<div class="row">
<!-- Note that for bootstrap all the rows are always 12 columns -->
<div class="gutter-20">
</div>
<div class="gutter-20">
</div>
</div>
</div>
</div>
</div>`
Deci voi avea un element care va avea un sub-grid de două coloane cu gutter-ul setat la 20 de pixeli.
Folosind ASP.NET şi Razor, o să scriu în template:
‘.gutter-custom.row {
margin-right: -@MyCustomValue;
margin-left: -@MyCustomValue;
}
.gutter-custom > [class^=“col-”], .gutter-custom > [class^=" col-"] {
padding-right: @MyCustomValue;
padding-left: @MyCustomValue;
}
’
’
</div>
<div class="col-md-8">
<!-- Creating a child here and divide col-8 into 2 parts. -->
<div class="row">
<!-- Note that for bootstrap all the rows are always 12 columns -->
<div class="gutter-custom">
</div>
<div class="gutter-custom">
</div>
</div>
</div>
</div>
</div>``
Iar server side voi avea pe undeva:
public static class MyCustomBootstrapStyle
{
public string MyCustomValue()
{
string result = “30px”;
if(whatEver)
result = "20px";
return result;
}
}'
Şi ca să iasă o chestie amuzantă, pot seta gutterul random:
return (int)Random.Range(0,31).ToString() + “px”;
Sau în funcţie de zi:
return DateTime.Now.ToString(“MM”) + “px”;
Sau în funcţie de secundă:
return (DateTime.Now.ToString(“ss”).ToInt32() % 30).ToString() + “px”;
Pana la urma iti poti face propriul grid foarte simplu si fara bootstrap, cu cateva linii de css:
W3Schools - Responsive Web Design - Grid-View
Acum sunt doua tipuri de programatori sa zicem:
-
Cei ca tine care au experienta intr-un anumit sistem si sunt oarecum sceptici sa invete ceva nou.
E foarte bine ca ai experienta cu bootstrap si stii cum functioneaza astfel ca il poti modifica dupa nevoi. -
Cei care incearca si invata mai multe sisteme si folosesc sistemul potrivit pentru taskul potrivit.
Sa zicem pentru un layout simplu folosesc bootstrap, si pentru un layout mai complicat Susy spre exemplu.
Cred ca important este sa incercam mai multe griduri (in contextul discutiei) ca sa intelegem beneficiile/dezavantajele fiecaruia.
2 Likes
Ai totală dreptate, pe mine mă interesează cel mai mult programarea backend, faptul că folosesc bootstrap e ca să mă ajute să fac ceva simplu pentru front-end.
Probabil că un developer de front-end va avea cu totul altă abordare, eu vreau doar să împing datele din server într-un mod care să arate cât de cât în regulă.
Vroiam doar să spun că te poţi “descurca” şi fără să fii dumnezeul sau guru-ul CSS-ului. Evident, pentru proiecte cu cerinţe specifice, unde contează multe aspecte iar prezentarea e importantă, apelezi la cineva care se pricepe. :))
1 Like
Atunci Susy nu este pentru tine.
Susy este pentru developerii frontend care au nevoie de un sistem grid foarte flexibil si responsive.
In mare parte te poti descurca chiar si fara sistem grid, dar daca faci mult frontend foloseste unelte care iti simplifica munca. Susy este doar unul dintre ele.
1 Like