[ mmix @ 17.08.2018. 11:35 ] @
Jel postoji neka alternativa Bootstrapu a da nije u mobile-first filozofiji? Treba mi za par lob aplikacija i kad koristim BS4 sve mi je nekako naduvano vizuelno, treba mi neki CSS framework koji je prilagodjeniji vizuelnoj konzumaciji vece kolicine podataka
[ bokinet @ 17.08.2018. 12:01 ] @

Proveriti ostale sa liste... :)

Bootstrap

---

ExtJS
Semantic-UI
Foundation
Materialize
Material UI
Pure
Skeleton
UIKit
Milligram
Susy

[ mjanjic @ 17.08.2018. 12:34 ] @
Pa dizajn (mislim na to što si rekao da izgleda nabudženo) nema veze sa tim da li je mobile-first ili desktop-first.
Jeste da je workflow malo drugačiji, ali u principu šta ti smeta da prvo uradiš mobilnu verziju koja je jednostavnija. Možeš prvo da uradiš i desktop kod Bootstrap-a, ionako u onom delu izvan media upita ne stavljaš ništa od CSS-a, osim ono što je zajedničko za sve ekrane (boje, font i sl.).
Glavna razlika, pored ovoga, je što kod mobile-first media upiti imaju uslove za dimenziju ekrana "min-width", a kod desktop-first je "max-width". Onda, kad je FW mobile-first, a krene se sa desktop-first pristupom, dođe do gomile problema, jer ako je prvi media upit npr. sa uslovom "min-width: 320px", svi stilovi unutar tog media upita će važiti i za veće ekrane, osim ako u kasnije navedenim media upitima za veće ekrane nisu izmenjeni.
Onda tu početnici krenu da meenjaju media upite pa stave npr. "(min-width: 480px) and (max-width: 720px)" i to polako postaje haos za kasnije održavanje.

Ako baš hoćeš desktop-first, probaj Cascade framework (aktuelna verzija 1.6), mada čemu da sad zbog jednog projekta učiš novi FW ako ga nećeš i kasnije koristiti?
Možda je najbolje da uradiš custom CSS (sam napišeš media upite), naoročito pošto si naveo da ti se ne sviđa Bootstrap dizajn pojedinih elemenata.

[Ovu poruku je menjao mjanjic dana 17.08.2018. u 13:54 GMT+1]

[Ovu poruku je menjao mjanjic dana 17.08.2018. u 13:55 GMT+1]

[Ovu poruku je menjao mjanjic dana 17.08.2018. u 13:55 GMT+1]
[ jablan @ 17.08.2018. 12:56 ] @
Mislim da tebi ne treba mobile-first, već desktop-only? Pošto mobile-first zapravo ne znači da UI treba da bude prilagođeniji mobilnim uređajima nego desktopu, već da se uvek prvo proverava kako izgleda na mobilnim uređajima, pošto je to, iz UX perspektive, veći izazov.
[ mmix @ 17.08.2018. 14:00 ] @
Pa ok, prihvatam to. Treba mi desktop-only.

Bootstrap jednostavno igra fast and loose sa marginama i paddinzima i to je ok za vecinu sajtova, ne kazem da ne izgleda lepo, samo ima dosta waste-a. Treba mi nesto sto efikasnije korirsti prostor a opet da ne bude naslovna politike
[ Panta_ @ 17.08.2018. 19:17 ] @
Pogledaj CSS Grid: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

[ mjanjic @ 17.08.2018. 21:51 ] @
CSS grid već traže u nekim firmama i preferiraju ga u odnosu na Bootstrap i slične FW.
Čudno je da CSS grid nije planiran ni za Bootstrap 5, bar je tako bilo kad sam zadnji put čitao nešto na temu BS4.
[ Panta_ @ 18.08.2018. 07:02 ] @
Bootstrap je ipak framework koji pored grida ukljucuje i brojne druge komponente koje omogucavaju brze i lakse dizajniranje web stranica, dok je CSS Grid samo grid sistem integrisan u CSS tako da nema potrebe za instalacijom bilo cega. I jedan i drugi imaju svoje prednosti. Kome treba da nesto brzo i lako napravi, ipak je Bootstrap bolji izbor upravo zbog tih komponenti i dodataka sa kojima dolazi, kome teba veca kontrola nad dizajnom WS-a, onda je CSS grid po meni bolji izbor.

Evo i nekih primera pa prosudite sami:

Bootstrap



Code:
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn...ap/4.1.1/css/bootstrap.min.css">
    <title></title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-12 bg-info py-2 mb-1">HEADER</div>
      </div>
      <div class="row">
        <div class="col-4 bg-success py-5 mb-1">SIDEBAR</div>
        <div class="col-8 bg-warning py-5 mb-1">CONTENT</div>
      </div>
      <div class="row">
        <div class="col-12 bg-info py-2">FOOTER</div>
      </div>
    </div>
  </body>
</html>


CSS Grid



Code:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <div class="container">
    <div class="header">HEADER</div>
    <div class="sidebar">SIDEBAR</div>
    <div class="content">CONTENT</div>
    <div class="footer">FOOTER</div>
  </div>

<style>
  .container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 50px 150px 50px;
    grid-gap: 5px;
  }

  .header {
    grid-column: span 12;
    background: #3FBFBF;
  }

  .sidebar {
    grid-column: 1 / 4;
    background: #3FBF3F;
  }

  .content {
    grid-column: 4 / 13;
    background: #BFBF3F;
  }

  .footer {
    grid-column: span 12;
    background: #3FBFBF;
  }
</style>
</body>
</html>


Takodje, pomocu grid-template-areas mozemo da definisemo polja koja zauzimaju grid kolone:

Code:
.container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 50px 150px 50px;
    grid-gap: 5px;
    grid-template-areas:
      "h h h h h h h h h h h h"
      "s s s s c c c c c c c c"
      "f f f f f f f f f f f f";
  }

  .header {
    grid-area: h;
    background: #3FBFBF;
  }

  .sidebar {
    grid-area: s;
    background: #3FBF3F;
  }

  .content {
    grid-area: c;
    background: #BFBF3F;
  }

  .footer {
    grid-area: f;
    background: #3FBFBF;
  }


[Ovu poruku je menjao Panta_ dana 18.08.2018. u 08:18 GMT+1]