It took a while to finally get around to building out a theme/framework, but it is about that time. It is still a work in progress, but you can now view, borrow, take, fork, add to or do whatever you’d like with Headstart. Headstart is a theme/framework combo I guess you’d say, so I’m calling it a themework. I think it is a framework, but I put a little bit of effort into it so that you can install it and feel like you are starting out with a theme.
Head over to Github to take a look and maybe take it for a test drive.
What’s in it?
Headstart is based off of the _s (Underscores.me) starter theme, which by itself is pretty amazing. I got into a habit of starting all of my theme and development projects with a new _s download and then start customizing it with all of the same things I put in every theme. I realized after a few that I was using the same (or close to it) Sass variables, mixins, and basic layouts, as well as calling the same external stylesheets to use. So rather than risk missing a step or forgetting anything, I started putting together a master theme that I would use from then on out. This is that theme.
Why not a taskrunner start a new project?
Good question. The answer is that internally, I do use them to start most of my projects and automate my workflow. But you can’t really tap into my computer whenever you want now, can you? This was created for people like me that aren’t me. Not everyone wants to get to know those things and that is fine. This theme does however have Sass baked right in, so if you aren’t using Sass in your workflow, can I recommend changing your workflow?
So What is in it?
Underscores
First and foremost, this is an extension of the _s starter theme. I took what they started and gave it some more bells and whistles. I also went in and did a bit of work on some files. If you’ve ever used _s, you know that out of the box it is a bit rough and tough to work with. It has no layout and no style added. I added a very, very small amount to get you going. I added a little padding and spacing so it looks a little cleaner and easier to digest.
I also created and set up a few variables in the SCSS files. I added some color variables (see below), some typography variables for you to use (add your font-family choices in _typography.scss and then add them to the preset $sans and $serif variables. Then you just need to call them elsewhere in the code as those variables and you are good to go. Or change them. Make a $sans-title and a $serif-pullquote variable and add totally different fonts. Do whatever makes your life easier and makes you happy. Once you download it, it is yours. But I started a few variables off so if you haven’t used this theme or Sass before, you can see how it works.
Sass!
If you are used to using Sass/SCSS, you’re in luck. Just open up the project and the files are already set up for you. First time you compile it, you will have a fancy style.css file in your root folder that is ready to make your site all pretty. No work needed here except you will need some way to compile your Sass. I’ll recommend Codekit if you want something awesome that costs money and LiveReload if you are looking for really good and free. Both will compile, both will refresh your browser on Save and both are awesome.
Bootstrap Grids
In the Sass part of the theme, there is already a few stylesheets baked right in. First is Bootstrap grids. I didn’t include all of Bootstrap because I didn’t want to take a starter theme and make it giant, but I did want to make it usable without a ton of work. So you can use your normal Bootstrap syntax to create your containers, rows, columns, etc. right out of the box.
Animate.css
Almost all of us use it, so why bother dealing with getting it set up for every project? The minified version is already in the theme and linked in header.php (I know there is a better way to enqueue scripts, but right now this is how it is set up. Once I get around to finishing the right way of doing the functions.php file, I will delete this sentence and you won’t have to worry about it. If anyone wants to fix that for me on Github, I’ll be your pal. If not, I’ll get to it in a few days/weeks/whenever.)
Material Design Colors
In the Sass files, there is a _colors.scss file with all the color variables and whatnot. What I did is go ahead and add all the Material Design colors with named variables. I got it from someone on Github or elsewhere and for the life of me I can’t find where right now. Once I find it, I’ll credit them properly. It’s just a bunch of variables, but it is pretty cool. Once I have time (or you do if you want to fork and help…), I would like to change this to a Material Design mixin. On the to-do list… But for now, variables are still cool.
Media Queries
I found an awesome Sass media query mixin that I added to this that allows us to set a few breakpoints as variables, then call nested media queries. Example:
@include media(">medium", "<=large") {
width: 100%;
}
So you can just nest this media query inside the class or id and do responsive design and media queries on the fly. I for one hate having to deal with an extra media query file and feel like I am essentially recoding a whole site just to get the breakpoints right. This mixin is amazing. Here is more information on it so you can add it to your own project or if you use mine, you know how to handle media queries.
What to do?
The code is all out there for you on Github. Do what you'd like with it. I'm not a heavyweight with Github, so if anyone wants to work with me on this or sees anything I did wrong putting a theme on there, let me know or jump in and help out. Otherwise, take this Headstart and hopefully it will help you get your next project going a bit faster.