Czy frameworki takie jak Bootstrap lub HTML5 oferują coś dla projektanta (nie programisty)?

Uwaga: chodzi o projektowanie znacznie więcej niż o rozwój.

Strony buduję od zera za pomocą całkowicie odręcznie napisanego CSS i HTML.

Od pewnego czasu wiem o gotowych szablonach css, takich jak Bootstrap lub HTML5 Boilerplate . Patrzyłem na nich krótko w przeszłości, ale nigdy nie wskoczyłem na faktyczne wykorzystywanie ich do niczego. Nie mam żadnych problemów ze zresetowaniem CSS, włączeniem javascript w razie potrzeby lub konfiguracją dla rzutni.

Tego wieczoru zakodowałem podstawową stronę HTML5 / CSS. Pod względem układu nic nie jest wstrząsające. Po prostu punkt odskoczni. Następnie postanowiłem dać Bootstrapowi wir o takim samym układzie. To dość standardowa, 3-kolumnowa 960px ze stroną ze zdjęciem bohatera.

Gdy zmieniam Bootstrap, przyszło mi do głowy, że 80% lub więcej czasu spędzam na uczeniu się, jaką klasę lub identyfikator zastosowano do czegoś, a następnie znajdowaniu tego w CSS do dostosowania. Stało się jasne, że Bootstrap w ogóle mnie nie uratuje. W rzeczywistości Bootstrap znacznie wydłużyłby czas produkcji ze względu na * nadmiernie szablonowany CSS.

* ( przez „nadmiernie szablonowane” mam na myśli, że jest dużo CSS, którego prawdopodobnie nie użyłbym na żadnej stronie internetowej. Nie, że w ogóle nie ma niepotrzebnego CSS ).

Rozumiem, że gdybym był zaznajomiony z Bootstrap, byłbym zaznajomiony z nazwami klas / identyfikatorów i ogólną lokalizacją w arkuszach stylów. Tak więc jestem skłonny pochylić się nad czasem, który mi to zabiera, zdając sobie sprawę, że niektóre z nich wynikały z mojej własnej nieznajomości.

Nie mogę jednak nie zastanawiać się, czy Bootstrap i in. glin. są kulami, które paraliżują projektantów łyżką, karmiąc ich własną marką kodu. W ten sposób zamykamy bazę klientów, która w całości będzie polegać na rozwiązaniu innej firmy i jej funkcjonalności dla wszystkiego, a przynajmniej dla większości. Przypomina mi tych, którzy mogą zaprojektować witrynę internetową tylko wtedy, gdy mogą korzystać z Dreamweaver. Niebiosa zabraniają, jeśli nie mają dostępu do Dreamweaver i konieczna jest zmiana.

Kiedy tworzę witrynę, używam własnego zestawu standardowych nazw klas i identyfikatorów. Struktura CSS jest dla mnie intuicyjna. Mam własny zestaw szablonów gotowych do szybkiej konfiguracji. Dlatego każdą witrynę, którą zbuduję, mogę edytować dość szybko. Korzystanie z dowolnego ze wstępnie skonfigurowanych pakietów interfejsu oznacza po prostu, że muszę nauczyć się ich konwencji nazewnictwa i ich struktury, zamiast polegać na własnych.

• Czy ktoś może mi wychwalać wielkie zalety takich systemów szablonów, jak Bootstrap lub HTML5 Boilerplate ?
• Co sprawia, że ​​są dla ciebie cenne?
• Czy znasz tylko system, z którego korzystasz, aby łatwo nim nawigować, czy nadal musisz szukać przedmiotów?
• Czy mógłbyś zbudować witrynę bez nich, gdybyś musiał?

Przez ostatni miesiąc dużo badałem ramy. Właściwie nie zanurkowałem w żadnym z rozwiązań, ale kilka alternatywnych ram, które znajdują się na mojej krótkiej liście, to Foundation , Intuit oraz YAML i Base .

Dobrą rzeczą jest to, że nie mają wyglądu „Bootstrap” i wydają się zachęcać projektantów do pracy (projektowania), podczas gdy dbają o szybkość reakcji.

Oto duża lista ram i więcej informacji w tym artykule .

Jak wspomniano, wykonałem prace badawcze, ale nie zacząłem ich testować, więc wszelkie komentarze na temat któregokolwiek z ram byłyby pomocne.

Zalety to przede wszystkim:

• Szybkie prototypowanie (tj. Prędkość)
• Wbudowana spójność między przeglądarkami

Jeśli musisz utworzyć siatkę, a siatka, którą musisz utworzyć, pasuje do gotowego frameworka CSS, logika jest taka, że ​​jesteś w połowie drogi, używając frameworka.

To powiedziawszy, raczej się z tobą zgadzam. Frameworki CSS, IMHO, są jak szablony projektowania wizualnego, ponieważ jeśli spełniają 90% twojego celu, są świetne, ale jeśli nie, poświęcasz znacznie więcej czasu i wysiłku na modyfikację domyślnego niż po prostu budowanie od zera.

UZUPEŁNIENIE:

Powinienem dodać jeszcze jedną potencjalną korzyść:

• to udokumentowany system

W środowisku korporacyjnym, w którym może być kilku programistów frontonu, a projekt może trwać kilka lat z kilkoma różnymi zespołami programistów frontonu, posiadanie udokumentowanej podstawowej struktury warstwy prezentacji może pomóc.

Nie oznacza to, że twoja własna platforma nie może być udokumentowana, po prostu dokumentacja często nie jest priorytetem.

Znam Boilerplate HTML5, ale bardziej znam Bootstrap, więc o tym porozmawiam. Pamiętaj, że oba są ukierunkowane na dwa różne zadania (H5BP to responsywny znormalizowany szablon, Bootstrap to zbiór widżetów HTML / CSS / JS i responsywna siatka.) W rzeczywistości można ich używać razem .

Nie mogę jednak nie zastanawiać się, czy Bootstrap i in. glin. są kulami, które paraliżują projektantów łyżką, karmiąc ich własną marką kodu. W ten sposób zamykamy bazę klientów, która w całości będzie polegać na rozwiązaniu innej firmy i jej funkcjonalności dla wszystkiego, a przynajmniej dla większości. Przypomina mi tych, którzy mogą zaprojektować witrynę internetową tylko wtedy, gdy mogą korzystać z Dreamweaver. Niebiosa zabraniają, jeśli nie mają dostępu do Dreamweaver i konieczna jest zmiana.

Analogia kończy się niepowodzeniem, ponieważ masz pełny dostęp do źródła Bootstrap. Jeśli nie podoba ci się, jak coś działa, możesz to zmienić. Dla mnie jest to przeciwieństwo kuli - możesz użyć kodu źródłowego, aby nauczyć się technik CSS.

Nie zgadzam się z tym, że „projektowanie strony internetowej” musi być tak blisko metalu, jak uważam, że koderzy C nie muszą mieć dogłębnej znajomości języka asemblera. Chociaż nawet ta analogia nie pasuje, ponieważ dostosowanie HTML / CSS jest po prostu kwestią rozszerzenia selektorów i dodania tego, czego potrzebujesz.

Czy ktoś może mi wychwalać wielkie zalety takich systemów szablonów, jak Bootstrap lub HTML5 Boilerplate?

Zabójcza funkcja Bootstrap jest dla mnie spójną i łatwą do zastosowania stylizacją widgetów i komponentami Javascript. Chcesz, aby link wyglądał jak przycisk? Dodaj klasę „.btn”. Chcesz stolik? Dodaj klasę „.table”. Chcesz element nawigacyjny? Skonfiguruj nieuporządkowaną listę i dodaj klasy nawigacji.

Listy rozwijane, wyskakujące okienka, alerty itp. Można łatwo dodawać do elementów z atrybutami danych. Bootstrap zawiera bardzo ładnie wyglądający zestaw ikon, które można łatwo zintegrować z widżetami.

Co sprawia, że ​​są dla ciebie cenne?

• Może szybko prototypować strony
• Wszystkie debugowanie css w różnych przeglądarkach i na różnych platformach zostało dla mnie zrobione.
• Łatwo dostosowywany CSS z szerokim wyborem zmiennych, dzięki czemu mogę szybko eksperymentować i prototypować układy.
• Standardowe widżety nawigacyjne
• Kod źródłowy otwarty i darmowy, mogę ubrudzić sobie ręce i dostosować MNIEJ, jeśli potrzebuję nowego miksu lub zmieniam zachowanie tak, jak potrzebuję.

Czy znasz tylko system, z którego korzystasz, aby łatwo nim nawigować, czy nadal musisz szukać przedmiotów?

Jedną z największych cech Bootstrap jest doskonała dokumentacja . Mogę z łatwością nawigować, a selektory css są intuicyjne i łatwe do zapamiętania.

Czy mógłbyś zbudować witrynę bez nich, gdybyś musiał?

Tak, ale to wyraźnie więcej pracy. Mogę skupić się na UX i szybko prototypowych układach z gotowymi, dobrze wyglądającymi widżetami i spójną funkcjonalnością.

Zaletą systemów szablonów i frameworków jest to, że mogą zaoszczędzić dużo czasu, jeśli pracujesz tak, jak chcesz. Tak więc, dzięki Bootstrap, kiedy nauczysz się ich semantyki do robienia karuzeli JS, jest to prawie przestępczo łatwe do wdrożenia. Ponadto, Bootstrap wydaje się znacznie prostszy, jeśli albo rzucisz swoją własną przed rozpoczęciem, albo użyjesz czegoś takiego jak bootstrap-sass w Railsach, aby zmienić te zmienne w locie; uratuje cię przed zmienianiem wszystkiego później.

DA01 mówi o spójności przeglądarki ... to dla mnie duży czynnik. Dlatego używam jQuery, mimo że dowolna liczba osób w SO przypomina, że ​​dodanie dużej biblioteki tylko po to, aby zrobić kilka rzeczy, to marnowanie zasobów. Wiem, że kiedy korzystam z jQuery, będzie on działał w określonym zestawie przeglądarek, więc nawet jeśli prawdopodobnie mogę samodzielnie opracować lżejsze rozwiązanie, przekonałem się, że korzystniej jest dowiedzieć się, jak jQuery chce, żebym pisał JavaScript, a następnie zrób to po swojemu.

Na koniec uważam, że ramy HTML / CSS są restrykcyjne; Jestem dość maniakiem kontroli, który wciąż lubię pisać ręcznie, kiedy mogę. Ale szanuję fakt, że ludzie mądrzejsi i bardziej zaawansowani ode mnie spędzili dużo czasu na konfigurowaniu tych szablonów / ram.

Zainteresowany, czy ktoś z was pracuje w dużym zespole dla dużej firmy?

Frameworki, takie jak bootstrap, są fantastyczne do tworzenia spójnego standardu kodu w całym projekcie, oznacza to również, że podczas rekrutacji dla nowych programistów osoby z doświadczeniem w popularnym frameworku będą już zaznajomione ze składnią i mogą stać się produktywne znacznie szybciej ... świetna wiadomość dla dużych firm.

Ponadto .. dzięki frameworkom, takim jak bootstrap, stale aktualizują go, obsługując więcej rozmiarów ekranów, więcej urządzeń i lepsze funkcje, w firmie takiej jak nasza (gdzie używamy bootstrap), to sprowadza się do oszczędności zasadniczo.

Czytając niektóre z odpowiedzi, wydaje się, że są one bardzo ograniczone, zakładam, że większość odpowiedzi pochodzi od ludzi przyzwyczajonych do pracy w pojedynkę lub w bardzo małych zespołach i przy mniejszych projektach, w których tego rodzaju rzeczy zwykle nie stanowią problemu .

Oprócz tego, co powiedziano we wcześniejszych świetnych odpowiedziach, kolejną zaletą tych szablonów byłaby spójność na różnych urządzeniach . Wbudowane siatki ułatwiają projektowanie dowolnego systemu operacyjnego.

Nadal wolę pisać własny kod z następujących powodów:

• Znajomość tego, co już napisałem. Jeśli muszę coś zmienić, wiem dokładnie, gdzie to jest;

• Struktura zorientowana na projekt. Każda nowa witryna / aplikacja będzie mieć inne potrzeby niż poprzednie, dlatego pliki i zasoby mogą wymagać osobnej organizacji.

• Dostosowane widoki dla różnych urządzeń.

Jeśli nie stworzysz bardzo ograniczonej strony, w końcu dodasz coraz więcej stylów do nowych elementów i zastąpisz istniejące.

Ponieważ lubię pracować z responsywnymi projektami, głównym powodem, dla którego nie chciałbym ich używać, jest to, że wolę projektować każdy responsywny krok „osobno” i jako całość. Te szablony zwykle działają z mniej lub bardziej sztywną siatką, której nie można w pełni dostosować.

Największą zaletą jest to, że możesz eksperymentować ze zmianą rozmiaru, zamiast spekulować, jak by to wyglądało.

Mam podejście programistyczne oparte na zasadzie „najpierw na pierwszym miejscu”, w którym koduję nawigację i dodaje treść tekstową. Ma tendencję do narażania cię na rzeczy, których nie spodziewałeś się, gdy byłeś w fazie projektowania.

Korzystając z frameworka, takiego jak Twitter Bootstrap, możesz faktycznie testować strony jeszcze w fazie projektowania, a nawet odkryć problemy z użytecznością i innymi wyzwaniami User Experience. Ramy mają wiele klas wielokrotnego użytku, z którymi się zapoznasz i zaoszczędzisz czas.

Wspomniałeś, że dużo kodujesz od zera. Kiedy mam coś, co musi być bardzo niestandardowe lub bardzo lekkie, wybieram Skeleton

Przez lata ręcznie kodowałem wszystko, ale obecnie zwykle używam Bootstrap. Dlaczego to robię?

1. Otrzymuję responsywny układ z bardzo małą ilością pracy. Na niektórych stronach, nad którymi pracowałem, wystarczy kilka drobnych poprawek, aby uzyskać układ zoptymalizowany pod kątem tabletów i urządzeń mobilnych. Responsywny pasek nawigacyjny jest jednym z moich ulubionych składników bootstrap.
2. Domyślne elementy sterujące nie są spójne między przeglądarkami i systemem operacyjnym, nie wspominając już o tym, że wszystkie są niezmiennie brzydkie niezależnie od używanego systemu operacyjnego lub przeglądarki. Dzięki bootstrap zyskujesz przyzwoity, spójny wygląd i nie odczuwasz pracy. Jeśli mimo wszystko chcesz zmienić styl wszystkich elementów sterujących, tak, Bootstrap nie pozwoli ci zaoszczędzić dużo czasu, ale z mojego doświadczenia wynika, że ​​przez większość czasu nie będziesz mieć czasu na zmianę stylów wszystkich elementów sterujących, ale nadal będziesz zirytowany brzydkim domyślnym ustawieniem sterownica.
3. Ogranicza to, co chcesz zrobić, co jest dobrą rzeczą, ponieważ pracując w czystym CSS, zwykle chcesz poprawiać każdy drobiazg (kolor, grubość ramki, gradient, cień, promień ramki, przejścia, a lista jest długa), choć pojedynczo zajmują mało czasu, ogólnie jest to znaczny spadek czasu. Pracując nad projektami w terminie, chcesz ograniczyć to, co możesz, a czego nie możesz zrobić; użycie frameworków pozwala myśleć w bardziej zgrubnych komponentach zamiast o tym, jakie właściwości CSS poprawić.
4. Niektóre frameworki po stronie serwera mają integrację z bootstrap. Na przykład, używając django-bootstrap, możesz po prostu zrobić, {{ form|as_bootstrap }}aby uzyskać formularze w stylu bootstrap, w tym czerwone podświetlenie komunikatów o błędach itp.

Gdy zmieniam Bootstrap, przyszło mi do głowy, że 80% lub więcej czasu spędzam na uczeniu się, jaką klasę lub identyfikator zastosowano do czegoś, a następnie znajdowaniu tego w CSS do dostosowania.

Tam źle to rozumiesz. Jeśli chcesz skorzystać z Bootstrap, nie powinieneś zbytnio dostosowywać; rezygnujesz z elastyczności i możliwości dostrajania wszystkiego podczas korzystania z gotowych komponentów. Dekorując pokój z elementów IKEA, nie powinieneś spędzać czasu na piłowaniu lub rzeźbieniu desek.

Bootstrap jest dobry, gdy trzeba szybko załatać działającą stronę internetową z gotowych komponentów; ich elementy wystają jak obolałe kciuki, jeśli umieścisz je w witrynach o fantazyjnych wzorach, więc zwykle upuszczam Bootstrap dla tego rodzaju projektów.

Korzystanie z dowolnego ze wstępnie skonfigurowanych pakietów interfejsu oznacza po prostu, że muszę nauczyć się ich konwencji nazewnictwa i ich struktury, zamiast polegać na własnych.

To właściwie zaleta korzystania z popularnego pakietu. Łatwiej jest przekazać projekt innemu deweloperowi, gdy oboje wiecie, co robi „btn-group”, „btn btn-large”, z osobistymi ramami musieliby nauczyć się twoich osobliwości (lub częściej, po prostu kaskadowo css z ich zmianami i nie zawracaj sobie głowy próbą odszyfrowania lub zmodyfikowania kodu).

Czy znasz tylko system, z którego korzystasz, aby łatwo nim nawigować, czy nadal musisz szukać przedmiotów?

Zwykłe takie jak btn, table, row *, span * itp. Byłyby naturalne. Ale w przypadku html dla głównych komponentów, znacznie szybciej jest po prostu skopiować i wkleić z ich przykładów, niż je wpisywać.

Czy mógłbyś zbudować witrynę bez nich, gdybyś musiał?

Byłem tam, robiłem to wiele razy.

nadają się tylko do:

1. projektanci, którzy nie są zaznajomieni z kodowaniem, ale chcą rozwiązania, które pozwoliłoby przenieść ich projekty na stronę.
2. sposób na streamowanie produkcji liniowej dla kogoś, kto nie chce budować własnego frameworka.

osobiście mam własne metody i nie chcę iść tą drogą, ponieważ już nauczyłem się kodować CSS, HTML i jQuery. Widzę w tym korzyści dla osób, które nie mają pojęcia i próbują nauczyć się kodować. Byłoby miło zobaczyć coś takiego około pięć lat temu. Jak już wspomniałeś, wdrożenie tego w obecnych metodach produkcji zajmie Ci więcej czasu.

EDYCJA: nie próbuję podkręcić twojego wątku, ale ja też zastanawiam się nad tym samym, ale w odniesieniu do WordPress. Lekko użyłem WordPressa, ale nie wiem, czy framework jest korzystny. Planowałem pójść staroświecką drogą, dopóki nie znajdę dużej korzyści.

Bootstrap jest dobry jako punkt wyjścia do responsywnego układu. Ale jeśli chodzi o projekt, to wydaje mi się, że brakuje go. Robi swój jedyny w swoim rodzaju wygląd „bootstrappy”, który ze względu na to, że szablon jest bardzo używany.

Ale musisz pamiętać, do czego został stworzony bootstrap, aby zapewnić spójność wewnętrznych aplikacji zbudowanych przez twittera, a jeśli miałbyś go do tego użyć, a nawet jeśli jesteś programistą, który chce szybko świerczyć w sieci aplikacja bez większego namysłu, być może jako mvp lub prototyp, to naprawdę świetne narzędzie.