Building Data-Driven Web Apps with Flask and SQLAlchemy Transcripts
Chapter: Bootstrap and frontend CSS frameworks
Lecture: Style the login form
0:00 We have our button style
0:02 but would you accept that as a login form?
0:05 I don't know I guess maybe in 1995 you would
0:07 you would not accept it now.
0:08 But we're actually so so close to making this beautiful.
0:11 Lets just do a little tiny bit more work here.
0:14 Over on this lets go to the body
0:17 and set a background color.
0:21 It didn't matter what I pick, I'm just going to use
0:23 this little feature here that lets me kind of pull
0:26 and grab cool like, lets go for a light blue
0:29 but then lighten it up.
0:31 That could be a cool one and then for the form
0:33 I say background color is white.
0:36 How we doing?
0:38 Okay, next lets have this kind of float in the middle
0:41 so we're going to say max width
0:45 is going to be 450 px.
0:48 Better, getting there.
0:50 Now I'd like that to be down and centered.
0:54 Right how do we do that? Well we can set the margin left to be auto
0:59 and the margin right to be auto
1:02 and that puts it right in the middle
1:03 you can see it centers, that's a pretty cool little trick
1:05 and then lets say margin top is going to be 50 px
1:11 pretty good and hey while we're at it lets do
1:14 border radius to be, I don't know, 10 pixels.
1:19 There we go, beautiful.
1:21 Next lets come down here and we'll put maybe an h2 login
1:27 here we go and lets have that centered as well
1:30 do a couple of things, also want to center those buttons
1:33 and put them on their own line
1:35 so I'll put them into a div.
1:38 I'll add a class of actions
1:41 up here we'll say the actions and the h2's
1:44 have a text line of center.
1:48 There we go, a little bit better.
1:49 The only thing we have left to work with
1:51 are those two things right there.
1:53 Now that turns out to be pretty easy.
1:57 We can come over here and say that these
2:00 do we have a class, no classes yet
2:02 so we'll say it has a class and it'll
2:04 be a form control, this is a bootstrap thing.
2:09 Ready, look at that, looks pretty awesome.
2:13 I really like the way this looks, it kind of lights up
2:15 when you go in there, its got the cool rounded edges
2:17 if you make a mistake that rounded edge turns red
2:21 really quite nice.
2:22 Now one thing that is a little funky
2:24 that seems to happen here always
2:25 is a little too much padding on the right
2:27 so lets just go to the form, say "padding right"
2:32 it's going to be 30 px, lets try that.
2:35 There we go, good enough maybe 40 something like that.
2:40 Here we go, I feel like that's pretty balanced right there.
2:43 So there's our login page.
2:44 We used the bootstrap form control there
2:47 and the button style right there
2:49 and you know there's a little bit more work to do.
2:52 So I feel like our little login form
2:54 is looking really good, we used the styles.
2:55 One thing to note if we didn't set this width here
3:01 like so, they actually look really bad
3:03 and bootstrap is kind of mobile first in its style
3:06 it look okay like that but it looks terrible like this.
3:10 So you want to either constrain the size of these things
3:13 or just put them into something
3:14 that is itself constrained like this
3:16 and then it will look really good. That's it.
3:20 Hopefully you like this little log and form we built
3:22 and you saw how incredibly easy this was.
3:25 Had a couple of classes on form elements
3:28 make our buttons button style and off we go.