W tym screencastie zajmiemy się budowaniem formularza komentarza w HTML / CSS. Znaczniki formularza komentarza znajdują się w pliku comments.php w naszym motywie. Szukamy elementu, aby go znaleźć.
Układamy każde z trzech danych wejściowych (imię i nazwisko, adres e-mail, adres URL) za pomocą systemu grid, który mamy na miejscu. Chłopcze, dobrze z tego skorzystaliśmy, co?
Mamy już plik CSS przeznaczony wyłącznie do obsługi komentarzy, więc tam będziemy pracować. Pierwszą rzeczą, o której piszemy, jest wykonanie danych wejściowych w naszej małej siatce o 100% szerokości, aby pasowały do kolumny. Elementy div zrobiłyby to naturalnie, ale dane wejściowe zachowują się bardziej jak inline-block i nie wypełniają automatycznie szerokości swoich kontenerów nadrzędnych. Bawimy się też trochę głównym obszarem tekstu, dzięki czemu jest on w 100% szeroki i nie tak wysoki, jak był. Postanawiamy nie mieszać w możliwości zmiany rozmiaru obszaru tekstowego. To naprawdę niczego nie psuje.
Wtedy otrzymujemy działający link Odpowiedz. JavaScript już działa dobrze, ponieważ nie zepsuliśmy identyfikatora formularza, na którym opiera się JavaScript. Musimy jednak wprowadzić kilka poprawek, takich jak nadanie formularzowi szarego tła, aby projekt działał.
Resztę czasu spędzamy na poprawianiu niektórych rzeczy za pomocą zapytań o media, aby formularz wyglądał dobrze na małych ekranach.