Ich benutze nur noch bootstrap fuer alle seiten; das hat schon alle noetigen seitenelemente (formulare, tabellen, menu, ...) definiert, ist super responsive und man muss die existierenden elemente nur noch zu einer seite zusammensetzen. Ich habe seit ich bootstrap benutzte kaum noch CSS angefasst, und auch keine probleme mit responsive designs, breakpoints oder probleme zwischen Android, iPhone, IE, Firefox mehr.
Klar, man kann sein Layout noch selber von grund auf schreiben, nur dauert es halt ewig, wird niemals so gut wie bootstrap und muss jedesmal wieder sachen aendern.
Bootstrap ist halt schon eine ganze weile am start, hat jede menge support, der aufbau ist gut durchdacht und nachvollziehbar, es gibt online tools um sich ein einfaches layout zumindest fuer den grundaufbau zurechtzuklicken (https://www.layoutit.com/) und alle bekannten probleme wurden schon gefixt.
Statt breakpoints setzt man einfach klassen (12-col system):
- col-lg-4: Auf "large" screens (oder groesser), nutze 4 columns
- col-md-6: Auf "medium" screens (oder groesser), nutze 6 columns
- col-xs-12: Auf "extra small" screens (oder groesser), nutze 12 columns
Hier hast du ein layout, die je nach bildschirmgroesse verschiede platzaufteilungen erzeugen:
<div class="row">
<div class="col-xs-12 col-md-6 col-lg-3"> ... </div>
<div class="col-xs-12 col-md-6 col-lg-3"> ... </div>
<div class="col-xs-12 col-md-6 col-lg-3"> ... </div>
<div class="col-xs-12 col-md-6 col-lg-3"> ... </div>
</div>
Ergebniss:
lg: 1x4 blocks mit je 3 col breite:
[] [] [] []
md: 2x2 blocks mit je 6col breite:
[] []
[] []
xs: 4x1 blocks mit je 12col breite:
[]
[]
[]
[]
auf https://getbootstrap.com/docs/3.4/customize/ kannst du breakpoints, farben, fonts usw. anpassen, oder auch sachen die du nie brauchst abwaehlen.
Fuer ein internes system nutze ich AdminLte, was auf Bootstrap aufsetzt aber noch ein paar mehr sachen fuer anspruchsvollere applikationen definiert hat:
https://adminlte.io/