[SendMeAnAngel]

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. Wszystkie odległości i marginesy w makiecie są w px. Dla ułatwienia mógłbym wszystko określać w px, żeby się coś nie rozjechało i żeby grafik się czepiał, że odstęp o 1px za dużo. W Materialu część rozmiarów jest w px, część w rem, większość w px.

4. Za rem zamiast px przemawia responsywność. Tylko że ktoś zrobił tak:

@media screen and (max-width: 1280px) {
  html {
    font-size: 16px;
  }
}

@media screen and (min-width: 1281px) {
  html {
    font-size: 19px;
  }
}

Nie wiem, czy to dobra praktyka i czy ktoś jest w stanie wymienić popularne serwisy, które w ten sposób się zachowują, czyli zmieniają rozmiary tekstu, a co za tym idzie, elementów UI, paneli, itd. w zależności od wielkości ekranu / okna?

Po upgrade Materiala z 11 do 18 wszystko stało się większe - dziwne - a po upgrade PrimeNG (bo kilka komponentów używamy) wielkość tekstu stała się 2x większa, pewnie dlatego, że przeszli na rem i tekst ma wielkość 19px. Oczywiście PrimeNG ma własne style, ale na szczęście też już używają zmiennych CSS i być może uda się nadpisać np. czcionki.

5. Czy ktoś przechodził z Material 2 na Material 3 i czy jest łatwiej stylować Material 3?

6. Zastanawiam się nad wyrzuceniem w ogóle Material, bo stylowanie jest strasznie toporne, ale używamy wielu komponentów:

- autocomplete - w innym projekcie pisałem od podstaw i z obsługą klawiatury (ech, czasy juniorskie)
- badge - do ogarnięcia zwykłym CSS-em
- button - tylko utrudnia stylowanie
- card - został wyrzucony z projektu
- button toggle
- checkbox
- chips - zostały, ale całkowicie inaczej ostylowane
- datepicker - ciulowy jak na tak znany framework
- dialog - masakra ze stylowaniem, udało się ogarnąć, sam bym lepiej ogarnął serwis
- form field - masakra ze stylowaniem
- icon
- menu
- progress bar / spinner
- ripple (ale w sumie to komu to potrzebne?)
- select
- sidenav
- slide toggle
- snackbar
- toolbar
- tree
- cały szkielet aplikacji

Czyli prawie wszystko, ale większość to tak naprawdę dla efektów i wygody, że wiele rzeczy jest out-of-the-box.

Makiety prawie całkowicie przeorały interfejs. Może dobrym pomysłem jest stopniowe pozbywanie się Materiala.

7. Inny wymóg to żeby wyrównać krawędzie różnych elementów na stronie oraz żeby linie tekstu były na jednym poziomie w komponentach, co są obok siebie i na myśl od razu przychodzi JavaScript, ale to jest antywzorzec. Bardzo by się przydał w CSS np. niech wysokość elementu będzie wielokrotnością pewnej wartości, ale czegoś takiego nie ma. W niektórych przypadkach dałoby się użyć CSS GRID, ale nie we wszystkich, bo te elementy teoretycznie są od siebie niezależne.

8. Sam arkusz stylów to 90% ostylowanie komponentów Materiala, gdzie większość już jest nieaktualna. Trzeba zacząć od ogarnięcia tego syfu.

9. Makiety nie przewidują responsywności, ale strona ma być responsywna.

10. Czy da się pozbyć indigo-pink.css i stworzyć od podstaw własny styl do Materiala? Bo bez sensu, żeby w aplikacji było tyle śmieci, że najpierw indigo, a potem własny theme. Bo większość na pewno zmiennych CSS trzeba nadpisać. Jest jakiś oficjalny generator stylów?

Podsumowując, to wątpliwości mam następujące:

1. Czy iść w rem/em, czy w px? Co jeszcze przemawia za rem?
2. Jaki uzywacie domyślny font size? Jak zmienię na 16px tak jak jest domyślnie w przeglądarkach, to wszystkie remy do przeliczenia (i to jest może dobry argument, aby trzymać się px), ale może warto to zrobić teraz, a nie później.
3. Czy pomniejszać UI na mniejszych ekranach?
4. Co robić z Materialem, który trochę pomaga, ale jednak bardziej utrudnia?

Może w swoich projektach mieliście podobne dylematy lub coś się nie sprawdziło i poszliście w innym kierunku.

#frontend #angularmaterial #angular #programowanie #webdev

[SendMeAnAngel]

Teraz się sczaiłem, że zielony na lewym ekranie wygląda inaczej niż zielony na prawym ekranie, a cały czas się zastanawiałem, dlaczego na makietach jest trochę inna barwa niż wartość koloru, jaką mam wstawić. Co jest z tymi monitorami?

[SendMeAnAngel]

Kiedy wszystkie rozmiary macie w rem, a nagle zmienia się rozmiar czcionki, to co robicie?

Na makietach teraz patrzę większość 12pt, czyli wg konwerterów 16px.

No i druga kwestia, czy wielkość elementów (chodzi o responsive design) powinniśmy zmieniać poprzez zmniejszenie font-size, czy jest jakaś rekomendacja, czy tak robić, czy tak nie robić. Chyba tak nie robić.

[lojawyk]

@SendMeAnAngel: Co to za dziwna makieta, że nie możesz przeliczyć jednostek? Na pewno jest tam konkretna wartość w px. Przecież to byłoby bez sensu, gdyby makieta wszędzie wyglądała inaczej. Powinieneś mieć coś typu figma, xd i projekt w wersji dev, żeby wszystkie assety ładnie wyeksportować.

Trzymasz się makiety w takiej rozdziałce jaka była przygotowana. Wygląda jakbyś pierwszy raz miał front kodować.
Jak nie ma projektów dla wersji rwd lub nie pokrywają dostatecznie dożo breakpointów (częstszy przypadek), to robisz wg doświadczenia np. nie mieści się, to wskakuje pod siebie, font mniejszy itp.
Na koniec nakładasz obraz na obraz i w danej rozdzielczości ma być prawie 1:1, bo inaczej trafisz na klienta, co będzie marudził i będziesz poprawiał.
Nie ważne, że można coś zrobić lepiej. Od tego był grafik, a makiety przed kodowaniem musiał

[lojawyk]

@SendMeAnAngel: Z następnych wiadomości wynika, że jednak robisz to chyba pierwszy raz.
Jeśli jesteś na praktykach lub stażu to zapytaj kogoś. Pokaże ci i wyjaśni jak działają makiety, jakich jednostek użyć i jak projekt będzie sprawdzany.
Jeśli jako junior, to i tak powinieneś mieć kogo zapytać o szczegóły.

[SendMeAnAngel]

Co to za dziwna makieta, że nie możesz przeliczyć jednostek? Na pewno jest tam konkretna wartość w px. Przecież to byłoby bez sensu, gdyby makieta wszędzie wyglądała inaczej. Powinieneś mieć coś typu figma, xd i projekt w wersji dev, żeby wszystkie assety ładnie wyeksportować.

@lojawyk: Jest xd i są podane wartości w px, ale mam już takie zboczenie, że używam rem. I gość, co wcześniej przenosił makiety, też używał rem, tylko wpisał jakieś wartości z tyłka, pewnie przeliczył px na rem dla 19px.

Jak nie ma projektów dla wersji rwd lub nie pokrywają dostatecznie dożo breakpointów (częstszy przypadek), to robisz wg doświadczenia np. nie mieści się, to wskakuje pod siebie, font mniejszy

[cyborgkombat]

@SendMeAnAngel: używać wszędzie px i w------e, jakieś remy sremy i potem same problemy

[tommyrb]

@SendMeAnAngel: zależy, ale ogólnie sam material (mówie ze strony designera) w figmie jest przygotowany tak, że np body1 jest na 16px i to 16px jest odpowiednią wielkością dla widoków mobilnych jak i normalnych webowych (1440,1920 itp.). Teoretycznie mógłbys używać rem, ja spotykałem się zawsze z tym że 1 rem=16px. Jeśli ktoś robił widoki z użyciem biblioteki figmowej do materiala to powinna być każda nazwa body1,body2, subtitle itd. chyba że ktoś

[SendMeAnAngel]

@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

[tommyrb]

@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