I knew how to make custom Bootstrap themes with color variables defined in Less at one point. Maybe I never really knew, but I managed to successfully do it once. I would like to do it again, but I don't remember how! So let's learn together.
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:
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.
Anyway, to summarize, the words you (past me) was looking for was not "make bootstrap with less" but "use grunt to compile bootstrap css from another css language 'less'".
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.
Comments
Post a Comment