Własny framework CSS w stylu Material Design

Question

Stworzyłem własny framework CSS w stylu Material Design. Tym razem bardziej przemyślany i według wielu sugestii, w SASS-ie.

Github:

https://github.com/jpacanowski/CSSFramework

screen:

https://cdn.pbrd.co/images/38gh7VvSW.png

Framework jest w pełni responsywny oraz oparty na Flexbox-ie.

Aby ostylować przycisk, piszemy:

<a href="#" class="btn"

jeśli chcemy aby był w kolorze indigo, dodajemy klasę z nazwą jednego z predefiniowanych przez Material Design kolorów:

<a href="#" class="btn indigo"

Tak samo z navbarem i innymi komponentami:

<div class="navbar"

(domyślnie niebieski)

<div class="navbar indigo"

(w kolorze indigo)

To dopiero pierwszy commit. Liczę na uwagi oraz sugestie.

Comments

Dość długo siedzę i się zastanawiam: czy to już framework czy jeszcze gotowa strona? Opcje personalizacji tego "frameworka" są bardzo słabe. Właściwie dostajemy kilka klas, a następnie stylizowanie globalne po elementach.

Jedyne co możemy zmienić to kolor elementu, chodź nie powinno to być zrobione w ten sposób. Nazwa klasy powinna określać zawartość, a nie wygląd. Więc btn-cancel zamiast btn-red.

Kolory już sam zmienia użytkownik w custom.scss czy w podobnym pliku.

---

a następnie stylizowanie globalne po elementach.

Pokaż przykład.

Nazwa klasy powinna określać zawartość, a nie wygląd. Więc btn-cancel zamiast btn-red.

To nie Bootstrap, ale framework ze stylem Material Design... Tak, dla 19 zdefiniowanych przez Material Design kolorów będę sobie wymyślał nazwy...
Spójrz sobie chociażby na framework MDBootstrap.com
https://cdn.pbrd.co/images/39RZOourn.png

Kolory już sam zmienia użytkownik w custom.scss czy w podobnym pliku.

Nie, nie powienien, bo to Material Design i się powinno korzystać tylko ze zdefiniowanych kolorów...

---

Nie, nie powienien, bo to Material Design i się powinno korzystać tylko ze zdefiniowanych kolorów...

Nie, Google tylko proponuje używać kolorów z zdefiniowanej palety. Jeśli chodzi o kolory, to rzeczą większej wagi jest tutaj widoczność poszczególnych elementów z różnymi odcieniami. Było gdzieś nawet narzędzie, sprawdzające, czy podane odcienie pasują do siebie względem kontrastu.

Tak ogólnie, to sam projekt nie posiada jakiejkolwiek dokumentacji, do wyboru jest albo wybieranie komponentów na czuja albo grzebanie w kodzie.

Co do ścigania się jeśli chodzi o wagę bibliotek, to w aspekcie szerszym i dalekowzrocznym widać, że jest to głupota, bo prędzej czy później i tak zauważa się problem w rozszerzalności (ehh, flexible brzmi ładniej) tego podejścia (przykład: preact, który jest o niebo lepszy od zwykłego reacta... jeśli budujemy aplikację o funkcjonalności Hello World). Ale oczywiście wszystko zależy i nie mnie oceniać poszczególnych przypadków użycia.

Jeśli miałbym coś zmienić, to prawdopodobnie konwencję nazewnictwa komponentów. A tak właściwie to metodologię; mówię tutaj o BEM.

---

Chociażby navbar. 6 zagnieżdżanień. I weź to później nadpisz.

Bootstrap w kwestii nazewnictwa i specyficzności selektorów nie jest dobrym przykładem, a tym bardziej jego modyfikacja.

Answer 1

Nie, Google tylko proponuje używać kolorów z zdefiniowanej palety. Jeśli chodzi o kolory, to rzeczą większej wagi jest tutaj widoczność poszczególnych elementów z różnymi odcieniami. Było gdzieś nawet narzędzie, sprawdzające, czy podane odcienie pasują do siebie względem kontrastu.

Ba nawet Compass ma taką funkcję :).

http://compass-style.org/reference/compass/utilities/color/contrast/

Przydałby się jakiś przykład online. Fajnie, jakbyś udostępnił github pages :).

To co mi się nie podoba, to lekki bałagan SCSS. Sensowniej jest podzielić na paczki z Compnentami (mniej błądzenia ) , -> header.scss,main.scss,footer.scss itd. 

Co do samego nazewnictwa.

Plik materialize.scss,

media (min-width:768px) {
    .container {
        width: 750px;
    }
}

@media (min-width:992px) {
    .container {
        width: 970px;
    }
}

@media (min-width:1200px) {
    .container {
        width: 1170px;
    }
}

Według mnie, to nie powinny być osobne klasy określonej specyfikacji. np: container--width1200. A nie próba nadpisywania klas CSS.

Trochę małą faktycznie customizacja. Przydałaby się jakaś fabryczka np: buttons-factory, a inny plik SCSS by ją implementował. Fajnie również, do typography można było zrzucić jakiś link url do web-fonts.

Spokojnie więcej mixinów można wymyśleć :).

Nie zauważyłem żadnego pliku do resetowania CSS. 

Jak dopiszesz dokumentacje jak tego używać, przetestuję w kolejnym projekcie :).

 

Comments

Nie zauważyłem żadnego pliku do resetowania CSS.

Materialize.css przecież używam...

Według mnie, to nie powinny być osobne klasy określonej specyfikacji. np: container--width1200. A nie próba nadpisywania klas CSS.

Nie rozumiem tego.

Dzięki za uwagi.

---

Ok faktycznie nie zajrzałem do tego pliku.

Już ci tłumacze, jeżeli masz klasę container, która powiedzmy ma określoną jakąś wartość powiedzmy : width, to media-queries będzie działało bodajże do pierwszego wywołowania container, a następnie już nie, gdyż nie dałeś mu znać, że ma nadpisać wartości (!important), wadą tego rozwiązania jest, ze musisz dać mu znać, że ma nadpisywać. Druga, jeżeli usuniemy choć z jednej klasy important, to będzie on szukał pierwszej tą, która ma important i z niej brał wartości. A to bywa nieprzyjemne do dkręcania.

Dlatego tworzy się wyspecjalizowane klasy jak np: container--phone320, te "--" oznaczają, że konkretna specyfikacja(wartość) dla danego elementu.