Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.

Kao Bootstrap samo desktop-first

[es] :: Web dizajn i CSS :: Kao Bootstrap samo desktop-first

[ Pregleda: 1180 | Odgovora: 8 ] > FB > Twit

Postavi temu Odgovori

Autor

Pretraga teme: Traži
Markiranje Štampanje RSS

mmix
Miljan Mitrović
Profesorkin muz
Passau, Deutschland

SuperModerator
Član broj: 17944
Poruke: 6004



+4616 Profil

icon Kao Bootstrap samo desktop-first17.08.2018. u 11:35 - pre 25 meseci
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
Sloba je za 12 godina promenio antropološki kod srpskog naroda. On je od jednog naroda koji je bio veseo, pomalo površan, od jednog naroda koji je bio znatiželjan, koji je voleo da vidi, da putuje, da upozna,
od naroda koji je bio kosmopolitski napravio narod koji je namršten, mrzovoljan, sumnjicav, zaplašen, narod koji se stalno nešto žali, kome je stalno neko kriv… - Z.Đinđić
 
Odgovor na temu

bokinet

Član broj: 29844
Poruke: 428



+39 Profil

icon Re: Kao Bootstrap samo desktop-first17.08.2018. u 12:01 - pre 25 meseci

Proveriti ostale sa liste... :)

Bootstrap

---

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

 
Odgovor na temu

mjanjic
Šikagou

Član broj: 187539
Poruke: 1911



+551 Profil

icon Re: Kao Bootstrap samo desktop-first17.08.2018. u 12:34 - pre 25 meseci
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]
Blessed are those who can laugh at themselves, for they shall never cease to be amused.
 
Odgovor na temu

jablan

Član broj: 8286
Poruke: 4541



+709 Profil

icon Re: Kao Bootstrap samo desktop-first17.08.2018. u 12:56 - pre 25 meseci
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.
 
Odgovor na temu

mmix
Miljan Mitrović
Profesorkin muz
Passau, Deutschland

SuperModerator
Član broj: 17944
Poruke: 6004



+4616 Profil

icon Re: Kao Bootstrap samo desktop-first17.08.2018. u 14:00 - pre 25 meseci
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
Sloba je za 12 godina promenio antropološki kod srpskog naroda. On je od jednog naroda koji je bio veseo, pomalo površan, od jednog naroda koji je bio znatiželjan, koji je voleo da vidi, da putuje, da upozna,
od naroda koji je bio kosmopolitski napravio narod koji je namršten, mrzovoljan, sumnjicav, zaplašen, narod koji se stalno nešto žali, kome je stalno neko kriv… - Z.Đinđić
 
Odgovor na temu

Panta_
Aleksandar Pantić
Kragujevac

Član broj: 214959
Poruke: 707



+121 Profil

icon Re: Kao Bootstrap samo desktop-first17.08.2018. u 19:17 - pre 25 meseci
Pogledaj CSS Grid: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

 
Odgovor na temu

mjanjic
Šikagou

Član broj: 187539
Poruke: 1911



+551 Profil

icon Re: Kao Bootstrap samo desktop-first17.08.2018. u 21:51 - pre 25 meseci
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.
Blessed are those who can laugh at themselves, for they shall never cease to be amused.
 
Odgovor na temu

Panta_
Aleksandar Pantić
Kragujevac

Član broj: 214959
Poruke: 707



+121 Profil

icon Re: Kao Bootstrap samo desktop-first18.08.2018. u 07:02 - pre 25 meseci
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]
 
Odgovor na temu

[es] :: Web dizajn i CSS :: Kao Bootstrap samo desktop-first

[ Pregleda: 1180 | Odgovora: 8 ] > FB > Twit

Postavi temu Odgovori

Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.