The main thing I want to do is define a couple nice main colors, and get a coherent Bootstrap theme. The website Lavish sort of does this, but I think the themes it puts together are kind of unstylish. I used it for Feminist Hacker Barbie, but I want something more refined now and I don't just want a prebuilt Bootswatch theme.
Step 1: Try running 'less' in mac terminal and then remember that that less is a normal little unix command that I totally use now and again.
Step 2: Go ponder this Bootstrap instruction post and realize there are so many other things involved, like Node.js and Grunt. Huh.
Step 3: Download Bootstrap source code from the website, unzip it, enter the directory. Oh hey, there's a grunt directory and this package.json and all the things that the bootstrap guide was mentioning.
Step 4: Read enough to realize I don't want to just run 'grunt' because that'll compile a ton of things and run tests and good software development crap I don't care about right now! Run 'grunt dist' instead. "We regret to inform you that grunt is not installed." That's not what it said but it's how I feel. Hello, you hairy yak, let's give you a haircut.
Step 5: Start shaving the yak. Luckily, the bootstrap page tells me what to do. At this point, I'm basically just live-blogging me reading that page. Sorry. Good thing I had the node package manager already installed. AHH it's not working, why is it not working? The yak, it is hairy:
- Got this error: "TypeError: Object Gruntfile.js has no method 'flatten'" so I did this: http://stackoverflow.com/a/20004014/915016 (which may not be required)
- Now this damn computer's all ">> Error: Cannot find module './valid-callable' ... Aborted due to warnings." It even has angry colors.
- I don't know or care who's angry right now. Bootstrap suggests deleting the note_modules folder and getting it to regrow, so I'm trying that.
- Omg it made it better! Yay! I know this isn't a yak, but... so fancy!
Step 6: Try to remember what we were doing. Ah yes. 'grunt dist' seemed to work. It made a 'dist/' folder that looks like what I put in my websites. If I delete it, it grows back when I run the command again. When I do copy bootstrap.min.css to my website, it looks like normal bootstrap. For now...!
Step 7: NOW finally I can go mess with the less variables! They're in 'less/' of course. I'm tweaking variables, then basically running 'grunt dist && cp dist/css/bootstrap.min.css ~/mywebsite/static/css/' repeatedly and refreshing the page. I'm discovering that Lavish seems to change the 'gray-*' less variables to get its effect, which is maybe why it looks cheesy.
Step 8: Fiddle until vaguely satisfied! It probably looks similar. It probably is really similar. I am not really a graphic design person. Did I mention, I totally used Lavish and a photo for inspiration.
Short summary of steps:
- Get bootstrap source code from website
- Get npm and grunt-cli as the bootstrap website also says
- Go to where you put your bootstrap source code and go into the less/ folder and change things in variables.less! Maybe use Lavish or Bootswatch for inspiration/starter values.
- Compile with 'grunt dist'
- Copy dist/css/bootstrap.min.css (and/or other relevant files) to where you need it to go
There. So now you (and I) know.