Incorporated Bootstrap, Sass, and Account Registration

[klosstep]

Everything seems to function properly. Let me know if you need it needs work. Thanks! @chrisvfritz

[klosstep]

finished adding simple form as well. So... SCSS implementation (2) Integrate Bootstrap (1) Simple Form (1) Sign up for accounts (1)

[chrisvfritz]

I'll give feedback for these one at a time. Under each section, I'm either listing which criteria aren't yet complete (and why in parentheses) or giving a :+1:. Let me know if you have any questions!

SCSS

• The only file in the root of the stylesheets directory is application.scss (I see all of your styles in the root of the stylesheets directory)
• All SCSS is in logically organized folders (all files are in the root, rather than organized into subfolders)
• Any colors and other repeated values with a logical connection are extracted SCSS to variables (I see quite a few repeated values with a logical connection to one another, that are not extracted out to variables)

Bootstrap

• You are overriding at least 3 Bootstrap variables (without using !important), for visible effect in your app (I don't see where any Bootstrap variables are being overridden)

simple_form

• All the forms in your app that are tied to a specific model are written using simple-form (the first form I looked at isn't using simple_form)

Account signup

:+1: This one looks good!

[klosstep]

What kind of subfolders do you want for the scss files? And can you give me an example of what you mean by overriding a bootstrap variable? I turned my colors and fonts into variables and i also added simple form to the database entry form (forgot about that one).

[chrisvfritz]

What kind of subfolders do you want for the scss files?

Codekwondo's source features one potential way of organizing scss, but if you search for rails scss organization, you'll see that a lot of other people like to do it differently. The only thing that really matters to me is that I can see your logic and that organizing things that way would scale well as you need to add more styles.

And can you give me an example of what you mean by overriding a bootstrap variable?

Check out this Stack Overflow question.

I turned my colors and fonts into variables

I typically find it more useful to name my variables after their purpose, rather than describing their specific content. For example, instead of something like:

$violet: #EE82EE;
$tan: #E0A366;
$dark-brown: #663300;

I might define:

$breed-fairy-color: #EE82EE;
$breed-ground-color: #E0A366;
$breed-rock-color: #663300;

That way, when I'm styling other breed-specific elements, I don't have to remember whether I used $tan or $brown or $dark-brown or $light-brown for ground Pokemon, for example. And if I want to change that color to something more bluish later, I don't have to change the name of the variable - just it's value in one place.

Does that make sense?

i also added simple form to the database entry form (forgot about that one).

:+1: on the simple_form integration now

[klosstep]

okay think I've got everything down now. https://limitless-journey-4602.herokuapp.com/

[chrisvfritz]

SCSS

This is looking much better, though there are some styles within the bootstrap folder that don't look like they have anything to do with Bootstrap. This entire file, for example, looks like it's just general layout styles.

[chrisvfritz]

Bootstrap

$gray is the only Bootstrap variable that I see being overridden.

[chrisvfritz]

simple_form

:+1:

[klosstep]

Bootsrap is just the name I gave the folder, it tells me thats where all the general styles are. What are you talking about overridden?

[klosstep]

gray isnt even used in my file.

[klosstep]

I decided not to use it

[chrisvfritz]

Naming that folder bootstrap could be confusing, since you're using it to mean two different things - general base styles and the Bootstrap library. I'd recommend renaming it to something like base instead.

As for $gray, it looks like it's used here. Either way though, this is how you override Bootstrap variables, which Bootstrap uses when it compiles to define how it works.

Does that make sense?

[klosstep]

No, it doesnt. The colors are used in the pokemon database for each type. and all the variables are listed before the @import's.

[chrisvfritz]

Just so you know, I can't give you credit for the the SCSS or Bootstrap skills, since we weren't able to get them approved before the deadline last night. If you'd like to complete them for learning purposes though, I'm still happy to give you feedback.

To clarify, those pokemon color variables are good, but they aren't variables defined or used by the Bootstrap project, so that's why they don't count as Bootstrap variables. They're just variables. If that still doesn't make sense, it might be most productive to work it out in real time in a Hangout.

[klosstep]

You're about to give me a 3.0 because I didn't finish a small step on the bootstrap task, and because I didn't rename a folder? Are you kidding me? I replied before 5pm yesterday and I think that was worthy of a response then. I showed up to all three non-mandatory lectures. You also could have told me to rename the folder and to override the variables two weeks ago when I submitted my project for review.

[klosstep]

Excuse me a 2.5.

[chrisvfritz]

I'm not "kidding you." Though what you do have approved doesn't leave you with a 2.5. You've completed all the non-final projects, which earns you a 3.0. Then your two approved skills for the final give you 0.2 each, adding up to 3.4, which will round up to 3.5 for your final grade.

As stated in the syllabus:

[Skills for the final project] must be completed by the end of the day on 4/27, then approved by the end of the following Friday (5/1), for them to count toward your final grade.

At the end of the day on Friday, those skills were not in an approvable state, so they don't count towards your final grade.

That "small step" on the Bootstrap task demonstrates a familiarity with the Bootstrap variables docs and the proper way to override those variables in SCSS, which is an essential part of using Bootstrap in Rails. The logical naming and organization of files and folders in SCSS is also essential to maintaining a project of any considerable size, so that too is not a small thing.

We had 15 hours of class time to work on these, I'm available almost every weekday for Hangouts, I've been available every week for one-on-one, in-person help, and I've always responded to email and GitHub comments within 24 hours. I'm frankly more responsive and available than any instructor I've ever met.

The work on these projects is done on your own timeline, so it's up to you to take advantage of the resources available to you to make sure you can finish on time. You're not entitled to an immediate response to a comment written at 4:45pm the day something is due. And a tip for the future: accusing indignation isn't a helpful tone to take on when you're not happy about a policy. People will not feel inclined to help you.