Mam do ostylowania projekt w Angular Material na postawie makiet, gdzie nic nie jest spójne:

1. W makietach wszystkie rozmiary są w px, a wielkości czcionek w pt. Jak wprowadzisz te wartości w CSS, to wszystko jest większe niż ma być. Nie wiem, może 1pt w MacOS jest mniejsze niż 1pt w Windzie.

2. Można przeliczyć px/pt na rem. Podobno zaleca się podawać rozmiary czcionek w rem / em. Ale w Angular Material rozmiary czcionek są w px, np. 400 14px / 20px Roboto. Czy jest jakieś wytłumaczenie, dlaczego px?

3.
  • 9
  • Odpowiedz
  • Otrzymuj powiadomienia
    o nowych komentarzach

@tommyrb: Makieta jest przygotowana w Adobe XD i raczej nie pod konkretny framework. W Materialu jest koncepcja density, czyli jak chcesz, żeby interfejs był większy na dużych ekranach, to musisz tworzyć kilka theme z różnymi wartościami density, a to wygeneruje CSS-y dla każdego komponentu materialowego osobno dla różnych szerokości ekranu.

Density nie wpływa na wielkość tekstu, więc dla każdego theme trzeba też definiować osobny typography.

A wystarczy wszystkie wielkości określać w rem i wszystko się ładnie przeskaluje, zmieniając globalny
  • Odpowiedz
@SendMeAnAngel: działałem tylko z mui reactowym w Figmie, tam mam tylko 2 opcje - dense albo nie xD
ja bym chyba na twoim miejscu został przy 12px globalnie skoro tak jest na makiecie zrobione i klient to zaakceptował. więcej nie pomogę bo programista ze mnie żaden, ale nie wydaje mi się żeby określanie dla konkretnych szerokości było warte zachodu
  • Odpowiedz
Angular Material to najgorszy framework CSS, jaki kiedykolwiek powstał. Może to się sprawdza w przypadku prostych aplikacji mobilnych, ale nie w aplikacjach webowych. Najmniejsza rzecz ma na sztywno ustalone rozmiary, kolory, marginesy, nawet czcionkę (zamiast globalnie dziedziczyć, to dawniej na sztywno, a teraz trzeba nadpisać tysiąc zmiennych CSS, żeby wszędzie była taka sama czciojnka) i to w taki sposób, że stylami nie da się ogarnąć i trzeba godzinami analizować, jak każdy komponent
  • 9
  • Odpowiedz
  • Otrzymuj powiadomienia
    o nowych komentarzach

@wemwuem nie wiesz o czym mówisz.
tailwind to też gówno, jeśli chcesz mieć burdel w projekcie to można korzystać

@SendMeAnAngel nie używaj bezpośrednio angular materiał jeśli chcesz zmieniać style, użyj angular material cdk
  • Odpowiedz
@wemwuem: Akurat Angular 18 z signalami daje możliwość pisania całkiem wydanych appek. Imho dużo większym problemem jest major release co 6 miesięcy. Powodzenia w migrowaniu tego gówna co pół roku jak masz dużą aplikację ¯\(ツ)/¯
  • Odpowiedz
Jaka jest u was praktyka w Angular Material? Czy aktualizujecie do nowej wersji, żeby nie było długu technologicznego, czy jak macie już zrobione UI na starej wersji, to nie tykacie? Aktualizowałem z 11 do 17 i tragedii nie było, bo nazwy klas itd. googlowski konwerter zmienił, natomiast dużo rzeczy jest do poprawy. Ale po aktualizacji z 17 do 18 znów dużo rzeczy się posypało. Największy bajzel jest w oknach dialogowych. Jak coś

Czy aktualizujecie Angular Material?

  • Tak, staramy się mieć najnowszą wersję 33.3% (8)
  • Nie, działamy na starej wersji 16.7% (4)
  • Pozbyliśmy się Angular Material 20.8% (5)
  • Używamy innego lub własnego frameworka 16.7% (4)
  • Nie dotyczy 12.5% (3)

Oddanych głosów: 24

  • 1
  • Odpowiedz
  • Otrzymuj powiadomienia
    o nowych komentarzach

Staramy się mieć najnowszą wersję, ale jak update jest bardziej skomplikowany to dajemy sobie więcej czasu na migrację, i tak było na przykład z przejściem na cdk. Planowany czas na migrację mieliśmy pół roku. Migracja zajęła jakieś 2 miesiące, ale w tym było sporo czasu żeby zmiany się odleżały.
  • Odpowiedz