CSS - tailwind, layoutok, hogy "jegyzed meg"?
junior backend fejlesztő vagyok egy cégnél, elkezdtem foglalkozni most a frontenddel is, csak úgy hobbiból. Tailwindet használ a cég is ahol vagyok, szóval azért használom én is azt.
Az már biztos hogy nincs szemem a design-hoz, valahogy nincs érzékem hozzá, viszont kisebb-nagyobb dolgokat meg akarok tanulni.
Most pl egy szimpla layoutot akarok összerakni, hogy responsive legyen, sima sidebar, header/navbar és a content. Odáig el is jutok még tán, bújva a doksit meg a google-t hogy mit-hol-hogyan-hova kell rakjak, mi legyen flex, minek milyen poziciója legyen, még talán a szélességekkel is megbírkózok hogy mi milyen széles legyen, de a responsivitás kiakaszt. Bárhogy próbálkozom megtanulni, valami mindig kimarad - hogyan "tolod ki" mobilon a képből a sidebart? hogyan hozod be? ha behoztad, hogyan tolod ki ismét? hova rakod a gombot ami vissza kitolja? hasonlítson egy sima icon sidebarra, vagy legyen bootstrap-hez hasonló offcanvas? legyen olyan, hogy a contentet arrébb tolva jön képbe?
Egyszerűen nem tudom megjegyezni hogy mi után mi jön, minek hogy kéne kinéznie. Harmadik hete szívok vele, egyetlen egy dashboarddal, és már megint ott vagyok hogy ok, megvan a desktop layout, próbálom összehozni a mobilosat, erre jön a kérdés, hogy mivel zárom be, mivel sötétítem a contentet a háttérben, és stb.
van valami tanács/ötlet/kurzus/videó sorozat vagy bármi, ami segíthet ezeket megtanulni?
Backenden pöpec vagyok, de a frontend? Ez kész halál nekem.
Válaszokat előre köszönöm!
~egy junior php fejlesztő
válasza:Nem értem a kérdésedet.
Én Bootstrap-et használok, de ahogy látom, Tailwind-ben is megvannak a komponensek mindenhez, csak össze kell rakosgatni őket.
"Hogyan "tolod ki" mobilon a képből a sidebart?"
A sidebar alapból 0px szélességű, ha megnyitod (egy gombbal), akkor X szélességű lesz, és kitolja a mellette lévő contentet. Hogy pontosan hogyan csinálod meg, az igazából részletkérdés. Régebben position:relative és float:left volt a divat, újabban ugye flexbox van, azza meg mégkönnyebb, mert ha a sidebar szélességét megnöveled, a content össze tud menni.
"hova rakod a gombot ami vissza kitolja?"
Teljesen mindegy, ahova akarod. Vagy a sidebarra teszel egy bezáró X-et, vagy egy vissza nyilat, illetve ezek mellett a body onclickje is triggereljen egy eventet, ami bezárja a siderbart.
Ezek a dolgok nincsenek kőbe vésve. Amire van Tailwind-es megoldást, használd azt, amire nincs, ott légy kreatív.
Egyébként azt rontod el, hogy először megcsinálod a desktopot, utána állsz neki a mobilnézetnek. Pont fordítva kell, illetve én konkrétan a kettőt együtt csinálom. Amikor azon agyalok, hogy desktopon hogyan nézzen ki, közben azon is gondolkodom, hogy mobilon hogyan oldom meg, és a kettő egyszerre megy.
Tailwind komponensek 90%-a fizetős, a kódját sem tudod már megnézni sajnos.
Köszönöm a segítséget!
Egyébként ha csak kinézed a doksiból azt amire épp szükséged van, az nem probléma? Mármint ha pl nem tudom hogy hogy épül fel/hogy kell osszerakni egy bootstrap card-ot (példa), akkor nem gond ha csak kiveszem a doksiból és kész?
válasza:Mindenki úgy csinálja, hogy kinézi magának a doksiból azt, amire szüksége van. Senki sem úgy indul neki, hogy leül, és megtanulja elejétől a végétől az egész frameworköt.
Előbb-utóbb úgyis rászorulsz, hogy mélyebben belemenj, legalábbis én eddig mindig így voltam. Mondjuk ha meg akarod változtatni a card footerénak a háttérszínét, azt simán felül tudod írni CSS-ből. De ha mondjuk a primary-button hátterét akarod megváltoztatni, akkor nem fogod a háttér, a border, meg azoknak a különböző állapotait (:hover, :active, :focus stb.) felülírkálni CSS-ben, hanem akkor bele kell menj az SCSS-be, meg kell, hogy keresd az adott szín változóját, le kell tudni fordítani az SCSS-t...
Szerintem azzal nincs baj, ha az ember az elején nincs tisztában mindennel. Ezért hívják a kezdőt juniornak. Ahogy többet és többet használod az adott technológiát, úgy fog rögzülni. Illetve minél többet gyakorolsz, annál ügyesebb leszel, nyilván...
További kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!