Skip to content

Instantly share code, notes, and snippets.

@mstijak

mstijak/styles.md

Last active May 22, 2019 12:13
Show Gist options
  • Save mstijak/e6457ef9d17817b121b30e8666229cc7 to your computer and use it in GitHub Desktop.
Save mstijak/e6457ef9d17817b121b30e8666229cc7 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mstijak revised this gist May 22, 2019. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions styles.md
    View file
    Original file line number Diff line number Diff line change
    @@ -102,7 +102,7 @@ NE:
    }
    ```

    ### Preferirati > (child selector) za stilizovanje elemenata za neki mod ili state
    ### Preferirati > (child selector) kod stilizovanja elemenata za neki mod ili state

    DA:
    ```css
    @@ -118,7 +118,7 @@ NE:
    }
    ```

    ### Modovi se pisu lijevo od blok elemente, helperi i state klase se pisu desno
    ### Modovi se pisu lijevo od blok/element klase, helperi i state klase se pisu desno

    DA:
    ```css
  2. mstijak revised this gist May 22, 2019. 1 changed file with 23 additions and 23 deletions.
    46 changes: 23 additions & 23 deletions styles.md
    View file
    Original file line number Diff line number Diff line change
    @@ -118,29 +118,6 @@ NE:
    }
    ```

    ### Globalne utility klase treba da sadrze prefix koji opisuje funkciju i minus separator
    DA:
    ```css
    .flex-row {

    }

    .size-l {

    }
    ```

    NE:
    ```css
    .row {

    }

    .large {

    }
    ```

    ### Modovi se pisu lijevo od blok elemente, helperi i state klase se pisu desno

    DA:
    @@ -188,3 +165,26 @@ NE:
    background: lightred;
    }
    ```

    ### Globalne utility klase treba da sadrze prefix koji opisuje funkciju i minus separator
    DA:
    ```css
    .flex-row {

    }

    .size-l {

    }
    ```

    NE:
    ```css
    .row {

    }

    .large {

    }
    ```
  3. mstijak revised this gist May 22, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion styles.md
    View file
    Original file line number Diff line number Diff line change
    @@ -102,7 +102,7 @@ NE:
    }
    ```

    ### Preferirati > (child selector) za elemente unutar moda ili state-a
    ### Preferirati > (child selector) za stilizovanje elemenata za neki mod ili state

    DA:
    ```css
  4. mstijak revised this gist May 22, 2019. 1 changed file with 7 additions and 12 deletions.
    19 changes: 7 additions & 12 deletions styles.md
    View file
    Original file line number Diff line number Diff line change
    @@ -57,17 +57,17 @@ NE:
    DA:
    ```css
    .navbar_menuitem {
    ...

    }
    ```
    NE:
    ```css
    .menuitem {
    ...

    }

    .navbarmenuitem {
    ...

    }
    ```

    @@ -91,14 +91,14 @@ NE:
    DA:
    ```css
    .tab.selected {
    ...

    }
    ```

    NE:
    ```css
    .selected {
    ...

    }
    ```

    @@ -122,7 +122,7 @@ NE:
    DA:
    ```css
    .flex-row {
    ...

    }

    .size-l {
    @@ -133,7 +133,7 @@ DA:
    NE:
    ```css
    .row {
    ...

    }

    .large {
    @@ -188,8 +188,3 @@ NE:
    background: lightred;
    }
    ```





  5. mstijak revised this gist May 22, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion styles.md
    View file
    Original file line number Diff line number Diff line change
    @@ -13,7 +13,7 @@ Primjer komponente:
    ```


    ### Naziv bloka ili elementa ne moze sadrzavati crtice
    ### Naziv bloka ili elementa ne smije sadrzavati crtice

    DA:
    ```css
  6. mstijak revised this gist May 22, 2019. 1 changed file with 43 additions and 11 deletions.
    54 changes: 43 additions & 11 deletions styles.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,15 +1,18 @@
    # CSS konvencije

    Primjer komponente:

    ```html
    <header class="flex-row align-center">
    <ul class="navbar">
    <li class="navbar_item active">Home</li>
    <li class="navbar_item active">Home</li>
    <li class="navbar_item active">Home</li>
    <li class="primary navbar_item active">Home</li>
    <li class="navbar_item">Products</li>
    <li class="navbar_item disabled">Resources</li>
    </ul>
    </header>
    ```


    ### Naziv bloka ili elementa ne moze sadrzavati crtice

    DA:
    @@ -33,9 +36,24 @@ NE:

    .navbar-menu-item {

    }

    .navbar_menu-item {

    }

    .navbar-menu_item {

    }

    .navbar_menu_item {

    }
    ```
    ## klasa elementa mora sadrzavati naziv bloka i separator - ili _


    ### Klasa elementa mora sadrzavati naziv bloka i separator _

    DA:
    ```css
    .navbar_menuitem {
    @@ -47,9 +65,13 @@ NE:
    .menuitem {
    ...
    }

    .navbarmenuitem {
    ...
    }
    ```

    ## ne koristimo prefikse na blok, element, state ili mod klasama
    ### Ne koristimo prefikse za blok, element, state ili mod klase
    DA:
    ```
    .navbar.selected {
    @@ -64,7 +86,8 @@ NE:
    }
    ```

    mod i state klase moraju se nastavljati na blok ili element
    ### Mod i state klase se moraju pisati u kombinaciji sa blok ili element klasom u CSS-u

    DA:
    ```css
    .tab.selected {
    @@ -79,7 +102,7 @@ NE:
    }
    ```

    preferirati > za elemente unutar moda ili state-a
    ### Preferirati > (child selector) za elemente unutar moda ili state-a

    DA:
    ```css
    @@ -95,22 +118,31 @@ NE:
    }
    ```

    globalne utility klase treba da sadrze prefix
    ### Globalne utility klase treba da sadrze prefix koji opisuje funkciju i minus separator
    DA:
    ```css
    .flex-row {
    ...
    }

    .size-l {

    }
    ```

    NE:
    ```css
    .row {
    ...
    }

    .large {

    }
    ```

    //modovi se pisu lijevo od blok elemente, helperi i state klase se pisu desno
    ### Modovi se pisu lijevo od blok elemente, helperi i state klase se pisu desno

    DA:
    ```css
    .primary.btn {
    @@ -142,14 +174,14 @@ NE:
    <button class="btn primary pressed">Click Me</button>
    <button class="btn pressed pad-xl">Click Me</button>
    ```
    //mod definisan poslije mora definisati sve stateove
    ### Mod za neki element mora definisati sve stateove
    ```css
    .btn.selected {
    background: yellow;
    }

    .primary.btn {
    background: red;
    background: red; //overrides selected state
    }

    .primary.btn.selected {
  7. mstijak revised this gist May 22, 2019. 1 changed file with 36 additions and 9 deletions.
    45 changes: 36 additions & 9 deletions styles.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,5 @@
    # CSS konvencije

    ```html
    <header class="flex-row align-center">
    <ul class="navbar">
    @@ -24,99 +26,124 @@ DA:
    ```

    NE:
    ```css
    .nav-bar {

    }

    .navbar-menu-item {

    }

    ```
    ## klasa elementa mora sadrzavati naziv bloka i separator - ili _
    DA:
    ```css
    .navbar_menuitem {
    ...
    }

    ```
    NE:
    ```css
    .menuitem {
    ...
    }
    ```



    //ne koristimo prefikse na blok, element, state ili mod klasama
    ## ne koristimo prefikse na blok, element, state ili mod klasama
    DA:
    ```
    .navbar.selected {
    }
    ```

    NE:
    ```
    .b-navbar.s-selected {
    }
    ```

    mod i state klase moraju se nastavljati na blok ili element
    DA:
    ```css
    .tab.selected {
    ...
    }
    ```

    NE:
    ```css
    .selected {
    ...
    }
    ```

    preferirati > za elemente unutar moda ili state-a

    DA:
    ```css
    .section.card > .section-body {

    }
    ```

    NE:
    ```css
    .section.card .section-body {

    }

    ```

    globalne utility klase treba da sadrze prefix
    DA:
    ```css
    .flex-row {
    ...
    }
    ```

    NE:
    NE:
    ```css
    .row {
    ...
    }
    ```

    //modovi se pisu lijevo od blok elemente, helperi i state klase se pisu desno
    DA:
    ```css
    .primary.btn {

    }

    .btn.pressed {

    }
    ```

    ```html
    <button class="primary btn">Click Me</button>
    <button class="btn pressed">Click Me</button>
    <button class="primary btn pressed">Click Me</button>
    <button class="btn pad-xl pressed">Click Me</button>
    ```

    NE:
    ```css
    .btn.primary {

    }
    ```

    ```html
    <button class="btn primary">Click Me</button>
    <button class="pressed btn">Click Me</button>
    <button class="btn primary pressed">Click Me</button>
    <button class="btn pressed pad-xl">Click Me</button>

    ```
    //mod definisan poslije mora definisati sve stateove
    ```css
    .btn.selected {
    background: yellow;
    }
    @@ -128,7 +155,7 @@ NE:
    .primary.btn.selected {
    background: lightred;
    }

    ```



  8. mstijak revised this gist May 22, 2019. 2 changed files with 4 additions and 87 deletions.
    86 changes: 0 additions & 86 deletions styles.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,86 +0,0 @@
    <header class="flex-row align-center">
    <ul class="navbar">
    <li class="navbar_item active">Home</li>
    <li class="navbar_item active">Home</li>
    <li class="navbar_item active">Home</li>
    </ul>
    </header>


    ## naziv bloka ili elementa ne moze sadrzavati crtice

    DA:
    .navbar {

    }

    .navbar_menuitem {

    }

    ## klasa elementa mora sadrzavati naziv bloka i separator - ili _
    DA:
    .navbar_menuitem {
    ...
    }

    NE:
    .menuitem {
    ...
    }


    NE:
    .nav-bar {

    }

    .navbar-menu-item {

    }

    //ne koristimo prefikse na blok, element, state ili mod klasama
    DA:
    .navbar.selected {

    }

    NE:
    .b-navbar.s-selected {

    }

    mod i state klase moraju se nastavljati na blok ili element
    DA:
    .tab.selected {
    ...
    }

    NE:
    .selected {
    ...
    }

    preferirati > za elemente unutar moda ili state-a

    DA:
    .section.card > .section-body {

    }

    NE:
    .section.card .section-body {

    }


    globalne utility klase treba da sadrze prefix
    DA:
    .flex-row {
    ...
    }

    NE:
    .row {
    ...
    }
    5 changes: 4 additions & 1 deletion styles.md
    View file
    Original file line number Diff line number Diff line change
    @@ -8,17 +8,20 @@
    </header>
    ```


    ### Naziv bloka ili elementa ne moze sadrzavati crtice

    DA:
    ```css
    .navbar {

    }
    ```

    ```css
    .navbar_menuitem {

    }
    ```

    NE:
    .nav-bar {
  9. mstijak revised this gist May 22, 2019. 1 changed file with 54 additions and 9 deletions.
    63 changes: 54 additions & 9 deletions styles.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    ```
    ```html
    <header class="flex-row align-center">
    <ul class="navbar">
    <li class="navbar_item active">Home</li>
    @@ -20,6 +20,15 @@ DA:

    }

    NE:
    .nav-bar {

    }

    .navbar-menu-item {

    }

    ## klasa elementa mora sadrzavati naziv bloka i separator - ili _
    DA:
    .navbar_menuitem {
    @@ -32,14 +41,6 @@ NE:
    }


    NE:
    .nav-bar {

    }

    .navbar-menu-item {

    }

    //ne koristimo prefikse na blok, element, state ili mod klasama
    DA:
    @@ -86,3 +87,47 @@ NE:
    .row {
    ...
    }

    //modovi se pisu lijevo od blok elemente, helperi i state klase se pisu desno
    DA:
    .primary.btn {

    }

    .btn.pressed {

    }

    <button class="primary btn">Click Me</button>
    <button class="btn pressed">Click Me</button>
    <button class="primary btn pressed">Click Me</button>
    <button class="btn pad-xl pressed">Click Me</button>

    NE:
    .btn.primary {

    }

    <button class="btn primary">Click Me</button>
    <button class="pressed btn">Click Me</button>
    <button class="btn primary pressed">Click Me</button>
    <button class="btn pressed pad-xl">Click Me</button>

    //mod definisan poslije mora definisati sve stateove
    .btn.selected {
    background: yellow;
    }

    .primary.btn {
    background: red;
    }

    .primary.btn.selected {
    background: lightred;
    }






  10. mstijak revised this gist May 22, 2019. 1 changed file with 88 additions and 0 deletions.
    88 changes: 88 additions & 0 deletions styles.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,88 @@
    ```
    <header class="flex-row align-center">
    <ul class="navbar">
    <li class="navbar_item active">Home</li>
    <li class="navbar_item active">Home</li>
    <li class="navbar_item active">Home</li>
    </ul>
    </header>
    ```


    ### Naziv bloka ili elementa ne moze sadrzavati crtice

    DA:
    .navbar {

    }

    .navbar_menuitem {

    }

    ## klasa elementa mora sadrzavati naziv bloka i separator - ili _
    DA:
    .navbar_menuitem {
    ...
    }

    NE:
    .menuitem {
    ...
    }


    NE:
    .nav-bar {

    }

    .navbar-menu-item {

    }

    //ne koristimo prefikse na blok, element, state ili mod klasama
    DA:
    .navbar.selected {

    }

    NE:
    .b-navbar.s-selected {

    }

    mod i state klase moraju se nastavljati na blok ili element
    DA:
    .tab.selected {
    ...
    }

    NE:
    .selected {
    ...
    }

    preferirati > za elemente unutar moda ili state-a

    DA:
    .section.card > .section-body {

    }

    NE:
    .section.card .section-body {

    }


    globalne utility klase treba da sadrze prefix
    DA:
    .flex-row {
    ...
    }

    NE:
    .row {
    ...
    }
  11. mstijak revised this gist May 22, 2019. 1 changed file with 4 additions and 2 deletions.
    6 changes: 4 additions & 2 deletions styles.css
    View file
    Original file line number Diff line number Diff line change
    @@ -6,7 +6,9 @@
    </ul>
    </header>

    //naziv bloka ili elementa ne moze sadrzavati crtice

    ## naziv bloka ili elementa ne moze sadrzavati crtice

    DA:
    .navbar {

    @@ -16,7 +18,7 @@ DA:

    }

    klasa elementa mora sadrzavati naziv bloka i separator - ili _
    ## klasa elementa mora sadrzavati naziv bloka i separator - ili _
    DA:
    .navbar_menuitem {
    ...
  12. mstijak revised this gist May 22, 2019. 1 changed file with 66 additions and 6 deletions.
    72 changes: 66 additions & 6 deletions styles.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,16 +1,52 @@
    naziv blok elementa ne moze sadrzavati crtice
    <header class="flex-row align-center">
    <ul class="navbar">
    <li class="navbar_item active">Home</li>
    <li class="navbar_item active">Home</li>
    <li class="navbar_item active">Home</li>
    </ul>
    </header>

    .navbar
    //naziv bloka ili elementa ne moze sadrzavati crtice
    DA:
    .navbar {

    }

    .navbar_menuitem {

    }

    klasa elementa mora sadrzavati naziv bloka i separator - ili _
    DA:
    .navbar_menuitem {
    ...
    }

    NE:
    .menuitem {
    ...
    }


    ne koristimo prefikse na blok, element, state ili mod klasama
    NE:
    .nav-bar {

    }

    .navbar.selected a ne .b-navbar.s-selected
    .navbar-menu-item {

    }

    .button.primary a ne button button-primary
    .menu.primary
    //ne koristimo prefikse na blok, element, state ili mod klasama
    DA:
    .navbar.selected {

    }

    NE:
    .b-navbar.s-selected {

    }

    mod i state klase moraju se nastavljati na blok ili element
    DA:
    @@ -22,3 +58,27 @@ NE:
    .selected {
    ...
    }

    preferirati > za elemente unutar moda ili state-a

    DA:
    .section.card > .section-body {

    }

    NE:
    .section.card .section-body {

    }


    globalne utility klase treba da sadrze prefix
    DA:
    .flex-row {
    ...
    }

    NE:
    .row {
    ...
    }
  13. mstijak created this gist May 22, 2019.
    24 changes: 24 additions & 0 deletions styles.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,24 @@
    naziv blok elementa ne moze sadrzavati crtice

    .navbar



    ne koristimo prefikse na blok, element, state ili mod klasama

    .navbar.selected a ne .b-navbar.s-selected

    .button.primary a ne button button-primary
    .menu.primary


    mod i state klase moraju se nastavljati na blok ili element
    DA:
    .tab.selected {
    ...
    }

    NE:
    .selected {
    ...
    }