Free Flat Buttons Are Free

Include stylesheet, apply class, done.

I like flat design. I also like Free Flat Buttons, from freeflatbuttons.com. Did I mention they’re free? But most buttons are free, so the naming must be a marketing thing.

It’s been a while since Free Flat Buttons have seen any updates, but there’s really nothing to update in my opinion. They serve their purpose quite well. They look very nice when paired with FontAwesome, too.

Free Flat Buttons can be found on GitHub, it’s repository is very simple and only includes the button stylesheet and the HTML and CSS associated with the freeflatbuttons.com website.

They’re really simple to use, as they should be. All you have to do is include the CSS, <link rel="stylesheet" href="button.css">, include the FontAwesome CSS if you want it, <link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">, and then add a class to an anchor tag.

For a normal sized button, something like this:

To make a button with rounded corners, use style-2, the other styles are listed on the freeflatbuttons.com site:

Aside from the homepage, a demo can also be found on CodePen. I’ve embedded it below. Version 1.0 of Free Flat Buttons can be downloaded from http://www.flatbuttons.com/button.css.

See the Pen Flat Buttons by Anıl Bilir (@Qanser) on CodePen.

Advertisements

Hover.css and iHover: Pure CSS3 Hover Effects Collections

Hover all the things!

I’ve used Hover.css in previous projects and love it. As described by it’s author:

A collection of CSS3 powered hover effects to be applied to call to actions, buttons, logos, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS and SASS.

I recently stumbled on iHover, which is very similar to Hover.css. The only major difference is their homepage demo’s. Hover.css uses text, iHover uses images in their demos.

Here’s how iHover is described on it’s website:

iHover is an impressive hover effects collection, powered by pure CSS3, no dependency, work well with Bootstrap 3!

Hover.css is quite a bit smaller than iHover is, but it’s not as feature packed. That’s the exact reason that I’ve used Hover.css in previous projects. It’s so small but gives so many neat hover effects.

iHover effects are mostly taken from codrops articles, and was inspired specifically by this article on codrops.

You can find a demo of iHover here and a demo of Hover.css here.

Both iHover and Hover.css are on GitHub. iHover can be found on GitHub here, while Hover.css can be found on GitHub here.

What do you think? Would you ever use one of these? Have you used either, or something similar?

GitHub Repository of Front-end Frameworks

I’m partial to Bootstrap, but have recently strayed away from it because I found myself relying too heavily on the default styles. Next I tried Zurb Foundation which I really liked. I used it to build the VPSstat.us blog and main site.

There’s a crap ton of front-end frameworks. Some are barebones, like Skeleton, and others are full featured, like Bootstrap and Foundation.

To help make sense of it all, usabli.ca put together a GitHub repository dedicated to indexing all (or most) of the frontend frameworks. It’s definitely worth checking out, especially if you’re in the market for a new framework or just want to see what options are out there.

Lately I’ve been using Purecss. I think it’s a nice middle ground, providing just enough to get me going quickly on most projects. Purecss can also make use of some Bootstrap elements and scripts, like modals. I’ve been using Purecss with kegplan.io. It forces me to come up with design elements not part of the framework itself, but only where needed.

Your preferred frontend framework?

View Results

Loading ... Loading ...

Update Dec 12, 2013: A few comments were left noting some frameworks that are missing. I added Layers CSS and also fixed the link to Twitter Bootstrap. I’ve also created a branch to add the Inuit.css framework, but there’s currently a pull request pending to add Inuit CSS, however it seems to have stalled. So we’ll see if I can send a pull request in the next day or so for Inuit CSS.

I’ve also submitted pull requests for StackLayout, bootmetro, and hopefully Inuit CSS. I have a personal interest in this repository, so I’ll likely keep contributing to it.

Thanks to Razvan for the Inuit suggestion, and Naeem for the Layers suggestion!

If there’s any other frameworks missing, which I’m sure there are, please mention them here and I’ll get them added to the repository. Or, you can even add to the repository yourself by sending a pull request. Here’s how I typically create a branch for a pull request.

  1. Clone the repo (git clone [email protected]:usablica/front-end-frameworks.git)
  2. Create your feature branch (git checkout -b add-specific-framework)
  3. Make your additions to README.md
  4. Commit your additions to your new branch (git commit -am ‘Add some framework’)
  5. Push to the branch (git push origin add-specific-framework)
  6. Create new Pull Request by going to the original repo. There should be a green “Compare and pull request” button that’s not typically there, click it! Enter your comments and wait for the repo owner to merge your branch or suggest some changes.

Unwakeable Status: Version Bump

Just a quick heads up on what’s been going on with Unwakeable lately. On the top of my priority list is livesearch. Livesearch doesn’t work in Internet Explorer when certain plugins are in use, such as Share This from Alex King. This is caused by multiple prototype.js files being loaded.

The next version of Unwakeable will be 2.0. I’ve been saying 1.3 would be the next version but have since decided to make the bump up to 2.x. I chose to do this because I’m dropping support for WordPress 2.0.x and focusing on supporting WordPress 2.1 fully.

Since Unwakeable 2.0 is a couple weeks out still, this will hopefully give everyone enough time to upgrade to WordPress 2.1. There shouldn’t be anything holding you back from upgrading at this point. As of right now, I’m taking out all the old WordPress 2.0.x functions and replacing them with the new functions found in WordPress 2.1. I really don’t want to try to support both versions of WordPress. Doing so could cause pages to load slowly due to all the checking I’d have to do for existing functions. So, as of right now, Unwakeable 2.0 will be WordPress 2.1 only!!

Also slated for Unwakeable 2.0 is additional support for more plugins. Unwakeable 2.0 will have support for the following plugins, in addition to those already supported:

  1. WPVideo
  2. Yet Another Photo Blog (YAPB)
  3. LMB^Box Comment Quicktags

I’ve retooled the various post styles that were introduced in Unwakeable 1.1. I’ve slimmed them down quite a bit and have included icons from Dropline Neu by Silvestre Herrera.

Also, I should have some additional options for Unwakeable. One additional option will be the number of related posts to show on the sidebar, as well as the number of recent posts to show on the sidebar. Also, I’d like to include an option to specify weather or not to use a fixed width , which is pixel based, or variable width, which is percentage based. This will give greater flexibility to bloggers who post large images frequently. I haven’t looked into how feasable this will be to do yet. Provided it’s not too difficult, this feature should be included in Unwakeable 2.0.

I’m still planning support for user defined color schemes in the options panel, although not in time for Unwakeable 2.0. I’m not quite sure how to go about displaying all these options in an efficient manner. It may be easier for me to just allow users to create custom style sheets that apply only to colors. Not really sure as of right now how I should exactly go about this. This how-to from Thomas looks pretty good, although little of it probably relates to WordPress 2.1.

So, there you have it. I’m really looking forward to releasing Unwakeable 2.0, it’s gonna be the best release yet. Again, I’d like to thank everyone who uses Unwakeable. Your kind words and feedback make every bit of time I put into Unwakeable very much worth it. Thank you all for your support. And as always, let me know if there’s any features you’d like to see or if you’d like support for a certain plugin.

WordPress Theme: Unwakeable 1.2

Unwakeable 1.2 is out! You can download it or you can visit the Unwakeable page for some more details. You may also be interested in the ChangeLog, although I’ll go over a number of the changes in this post.

Probably the most notable change is the separate options for Unwakeable in the wp_options table. Let me explain a little bit. Basically, I’ve renamed the options to be unwakeable specific. Previously, Unwakeable would pick up options already set in K2 or it would just set the default values, still with the K2 names. So, if you’re upgrading to Unwakeable 1.2 from an earlier version, you’ll want to click the “Copy Options” button from the Unwakeable Options page. Clicking that button will take the options you had set in previous versions and will update them to work with Unwakeable 1.2. You can also copy your options from K2 to Unwakeable 1.2 with this button. If you’re installing Unwakeable for the first time, this probably doesn’t apply to you.

Now, if you’d rather not copy your old options over, that’s OK. You can just go into the Unwakeable Options page and set the options as you normally would. If this scares you, don’t worry, you can’t really break anything by not copying options over. Really, you can’t break anything even if you do want to copy your previous options over. If you have any questions, just get in touch with me.

I’ve also added support for two more plugins, Landing Sites and Gregarious. Gregarious is a replacement for the Digg This Reloaded plugin, which is now dead. Unwakeable 1.2 still has support for the Digg Integrator plugin also. I suggeset you use Gregarious if you want Digg buttons on your pages. It makes use of the new Digg API where Digg Integrator loads Digg buttons in an iframe, not the ideal way to display Digg buttons these days.

Now, you may be wondering why I built in support for Gregarious. Gregarious has a feature called auto-append that will automatically place a Digg button on your page. However, that feature isn’t enabled by default. And, there’s no option to place the Digg button in the sidebar with the auto-append feature. So, I added some code that will detect if auto-append is enabled. If auto-append is enabled, the Digg button isn’t displayed on the sidebar. However, if auto-append isn’t enabled, the Digg button will be displayed in the sidebar. That way you still have the option of displaying the Digg button in your sidebar, even if you use Gregarious.

Also, I’ve made a small fix to the CSS that should get rid of the few pixels of whitespace that were showing in the header, between the black and gray sections. The black in the header is now flush with the right side of the page. You can see what it looked like previously in this image. And you can see it fixed in this image (or right here on this blog). I’d like to thank Jason for pointing out that whitespace.

Is there anything you guys would like to see in the next version of Unwakeable? Could be anything from support for a plugin to design changes. Anything? Anybody?

Enjoy this new version and let me know if you have any problems getting Unwakeable functioning properly. I will provide almost unlimited support for people having issues with Unwakeable. Although, I won’t always be able to support Unwakeable if you’ve made numerous changes to the CSS or PHP for your site.

And lastly, a big “thank you” to everyone who is using Unwakeable. I never anticipated that this theme would become so popular. At my last rough count, there’s about 300 blogs using Unwakeable, I expected maybe 20. 🙂 Thanks again everyone for your support! It’s now far past my bed time…