A new HTML5 Admin Teamplate

http://www.html5admin.com

by ricricucit • 13 years ago

101 110 13 years ago

zamalek• 13 years ago

I was thinking I would have to write something like this. With all the backend admin pages you would think there would be a nice template for it.

Good job!

ricricucit35• 13 years ago

thanks!

davidw2• 13 years ago

What I'd like to see is someone fixing Active Admin to work with Bootstrap.

unwind• 13 years ago

I thought the typo in the title ("Teamplate") was another annoying neologism, almost made me glad to realize it's just a typo! :)

ricricucit35• 13 years ago

eheh. happy......and sorry about it. it's a typo.

corobo• 13 years ago

Not sure what the licensing pricing is telling me here, it looks like all of the licenses are the same except the price?

almoehi• 13 years ago

thanks - I was already thinking it's just me not getting it :-)

Thieum22• 13 years ago

same here - and the checkout doesn't seem to work either, getting the "card is empty" message in chrome and ie.

ricricucit35• 13 years ago

bluehost + wordpress + did not expect to have these many visits.

ricricucit35• 13 years ago

There might be problems in the CSS of the main website (apparently it's not one of the greatest WP Templates i've ever bought) anyway...here's an image that shows you the prices options as they should be:

http://i.imgur.com/p6YzPHw.png

eksith2• 13 years ago

I like it. Nice and clean though, I'm not too big a fan of "flat", it gets the job done without too much fluff. For a developer strapped for time, something simple to slap on the back (no pun intended) definitely works.

Tinsey nitpick in UI http://www.html5admin.com/demo/ui.html , spacing between the input fields in "Inline form" could help, but that's definitely an easy fix.

ricricucit35• 13 years ago

Thanks for pointing that out. I'll be on the quick patch this weekend :)

itsbits• 13 years ago

basically its just design using bootstrap...

ozh• 13 years ago

Worse! It's just CSS, HTML and a couple images!

AgLiAn2• 13 years ago

Yeah, sure. Metronic clone.

http://themeforest.net/item/metronic-responsive-admin-dashbo...

brianbreslin• 13 years ago

they arent identical IMO, similar styles sure. plus so many of these admin themes share elements/styles.

andyhmltn• 13 years ago

I'm unsure of how you classify this as a 'clone'? They are both admin templates. That's the only similarity is it not?

lingben2• 13 years ago

it needs a bit more polish but already it is head and shoulders above metronic

ricricucit35• 13 years ago

This is a good compliment, thanks! (FYI: i didn't even know about metronic)

ricricucit35• 13 years ago

NO. I can ensure you i did the whole template from scratch. I don't even know what metronic was until now.

eksith2• 13 years ago

Your definition of "clone" needs a bit of adjusting, methinks. Also, your history of posting one-sentence replies and dismissals isn't terribly productive.

ricricucit35• 13 years ago

thanks for noticing that eksith.

joshuacc• 13 years ago

Those don't even look remotely similar other than the general "flat ui" style.

ricricucit35• 13 years ago

thanks joshuacc!

afandian3• 13 years ago

My first reaction was ARGH MY EYES! Not in a pompous design way, but looking at that blurry image actually made my head hurt. Maybe it's just me but I find the blurred-image-in-the-background very difficult to work with.

I wasn't surprised when Microsoft did it (they never had much design sense), but it was a surprise to see it in iOS.

seszett• 13 years ago

It might be more acceptable if it was a lot more blurry. But right now, my eyes keep trying to focus on the big "A", especially since the image first loads and then the buttons are shown.

josefresco• 13 years ago

I agree, it actually hurts my eyes to look at it. There's probably some science behind this...

afandian3• 13 years ago

I don't know if you're being sarcastic or not (I'm not!) but this is the same as putting on spectacles of the wrong prescription. Everything is fuzzy and your eyes try to compensate for the lack of focus.

RyanMcGreal2• 13 years ago

I found my eyes kept trying to focus the image - especially the A - and I felt a visceral frustration when they couldn't do it.

Keyframe2• 13 years ago

I think it has to do with text over it, so your pattern recognition thing in brain gets thrown off because it needs clear edges. I find it unsettling as well.

On the other hand I was toying around with idea of blurred backgrounds about a month ago based on several things I saw people were trying to do with it. It can be extremely pleasant if it's not upsetting outlines. Here's what I quickly proto'd based on what I saw elsewhere in several instances: http://cssdesk.com/VYN67

afandian3• 13 years ago

I found the 100px radius acceptable, personally. I wonder what the tipping point is. Perhaps it's when it's no longer possible to do feature detection.

bradleyland• 13 years ago

It's not the text. It's the fact that when the page first appears, there's nothing but the blurred image. Our eyes immediately set to the task of focusing, which can't be accomplished.

The reason I don't believe it's not the text over a blurred image is because our eyes deal with this on a daily basis.

Any time you look at an object (like someone's face) where the background is distant, you're seeing a foreground object on a blurred background. Depending on lighting, visual acuity, and the use of glasses, the DOF of the human eye can be startlingly small (less than a foot), or it can be very large (practically infinity). It's the cognitive portion of our visual processing that makes the difference. Our brains do a great job of filtering out what we're not focused on.

My recommendation would be to ditch the animation on the HTML5 logo, tagline, and buttons. I think if you do that, this becomes a non-issue for the vast majority of people.

k-mcgrady• 13 years ago

I normally like that blurring in the background effect but this was really jarring. It actually hurts to look at. The blurred background is too prominent and trying to draw my focus.

(I'm being completely serious, this actually hurts my eyes to look at).

paaaaaaaaaa3• 13 years ago

It's good but I think it needs a bit more work. I have found a couple issues.

Sliders do not work in firefox, they are missing the handles.

The switches or very difficult to understand whats active. However I guess that's a common issue with switches like these.

Some other things seem broken for me too. The html5 date picker "Works on every HTML5 device" doesn't work along with the colour picker.

I do like that ink filepicker though. Not seen that before, very useful.

Personally I would go for something on wrapbootstrap eg: https://wrapbootstrap.com/theme/ace-responsive-admin-templat...

frankacter• 13 years ago

What version of FireFox are you using? I'm using FF24 and the sliders and date picker work as expected. Can you provide steps for reproducing?

ricricucit35• 13 years ago

same here.

paaaaaaaaaa3• 13 years ago

Here's a screen shot. http://sdrv.ms/16sGL2Z

I'm using FF24. When turning off box shadow or opacity the handles show fine.

I have a feeling it could be a rendering issue with the GPU?

adem• 13 years ago

Am I the only one who thinks that those one-size-fits-all solutions (esp. Bootstrap) are really not the way to go? Sure, it drastically reduces the development time, but using templates for specific purposes are meant to fail, aren't they?

Cthulhu_• 13 years ago

"Meant to fail" is a bit of a strong phrasing; like in all things, it depends. Bootstrap and the like are ideal if you just need to get something up and running without looking terrible, I've used it in both my current and previous project. For an end-product though, I'm not sure if it's ideal. In my previous project, we ended up hiring a CSS jesus who single-handedly created a Bootstrap-like framework (or based it on Bootstrap) for the entire company's web projects (a large international bank). In my current assignment, we use Bootstrap with a number of customisations and custom parts. In both cases, Bootstrap was used to create something pretty, fast - without again falling into the 'how to css positioning' rabbit hole.

ngcazz• 13 years ago

It's nice, but did that page really need 30 seconds for the text and images to render at all?

ricricucit35• 13 years ago

bluehost

lignuist• 13 years ago

A new HTML5 Admin Teamplate

And I thought this is a new way of collaborative ("Team") template creation. :)

ricricucit35• 13 years ago

woops. sorry about that.

est3• 13 years ago

I've tried many beautiful admin templates, all of them are visually nice, quite suitable for integrating as dashboards and "read-only" panels. But very few of them actually tries to solve the "hard" problem: how to transform "rational" row based data into read-writable web forms.

Server-side & client side interactions, validations, cascading events, descriptive forms, etc. Given two or three slightly sophisticated m2m models you get stuck either to re-write from scratch or re-invent your own.

bbx2• 13 years ago

I'm actually considering designing a Bootstrap admin template myself. Do you have any suggestion or example of the kind of data interaction you need from a template like that?

est3• 13 years ago

Well,

Suppose we want a web based UI for editing an email compaign to promoting an app of yours

For campaign: title, content, etc.

For recipients: you have to design something like Django's admin inline, user name, email, maybe facebook/twitter id.

Here a simple demo for inlines: http://admin:admin@demo.xadmin.io/host/hostgroup/add/ from the project https://github.com/sshwsfc/django-xadmin which is basically Django on steroids

Now recipients are growing, you can't hold them all on one page inline, you wanna filter the inline, but only on the client side.

Then you need pagination on the inline.

Then you need grouping recipients like folders

Next folders suck, let's re-organize them by tags.

Soon your product line expands, you have to support Android platform as well. Each user has installed either android or iOS app, or even both, so each user as associated one or more `device_type` attributes. Filter the inlines. Don't send iOS emails to Android users.

Then you want to set the campaign to iOS version with greater than 5.0 users. (How to design greater than or equal to logic visually?)

Now you want your message to be i18n supporting more languages, e.g. more collapsable textarea on the form

Now you want your message to be selected randomly from a pool of messages for A/B testing.

Then your messages are provided by a third party. You need a review board for external messages, as well as supporting inhouse messages.

I didn't even mention marketing feedback loops from real-time statistis, and that requires much more blood and tears making dashboards.

How to make a admin UI like that? The associated information grows with your business. Generic admin templates are not enough.

The basic problem is that those widgets, are not composable, nor nestable. even if nestable, not sortable.

Even if all goes well, widgets not splittable, but we often split data horizontally or vertically. And much more complex transformation like from a collection of items to uniformed array, nested array, dict (for grouping), sorted dict, nested sorted dict, dict with local & remote values, etc.

How many inline widgets can automatically support re-open itself in new window and communicate back with window.opener? What about switch from new window to in-page lightbox via history.js and ajax?

rrrx32• 13 years ago

That's because, functionally, that sort of interaction does not belong on a dashboard. Dashboards are meant to succinctly summarize what's going on under the hood. "Bakery 47 is running low on cinnamon rolls" && "Coffee shop on Main is your #1 seller this week" - Rolling up your sleeves and manipulating that data is best done in a bespoke screen/view.

est3• 13 years ago

dashboard is only a subset admin templates

They are mostly read-only, useful for OLAP data. Admin templates are useful for OLTP data.

thesimon• 13 years ago

Not one of the best designs, especially at that price.

ricricucit35• 13 years ago

really? 20EUR to save you -at least- 1 week of work or a paid professional guy to help you out with HTML/CSS/JS while you focus on back-end code?

Seems reasonable to me.

maaaats• 13 years ago

That's one thing that has always bugged me about some developers. Some have the attitude that they should never pay for anything, and that "I could code this in a few days myself" instead of paying $20 and have it implemented in an hour.

dictum• 13 years ago

Like Bootstrap itself, this would greatly benefit from having the line-height in body set to 1.6 or 1.7.

Test it with Inspect Element: http://www.html5admin.com/demo/ and http://getbootstrap.com/css/

locusm• 13 years ago

I think the DesignModo guys set the standard for paid themes with their FlatUI pack which is also Bootstrap based. http://designmodo.com/flat/

davidw2• 13 years ago

The flat design and teal colors remind me of twm:

http://www.tuxradar.com/files/LXF2.roundup.twm-1.jpg

http://en.wikipedia.org/wiki/Twm

philliphaydon• 13 years ago

Am I the only one who doesn't like this? IMO for an administration site its pretty bad.

AgLiAn2• 13 years ago

You are not alone.

dubcanada• 13 years ago

Nope, not only does half the widgets not work on my Chrome, it's actually very hard to look at for longer then 10 seconds.

ricricucit35• 13 years ago

about the "10 seconds thing" i guess it's a matter of taste. but widgets are working.....you might have too many Chrome plugins installed...

laveur• 13 years ago

I like what I saw until I saw that it wasn't open source and based on Bootstrap. This saddens me.

braveheart1723• 13 years ago

you've clearly ripped off themes from wrapbootstrap http://wrapbootstrap.com/

identical icons, graphs, colors, animations.

epo• 13 years ago

Examples?

ricricucit35• 13 years ago

good point epo. Examples?

ricricucit35• 13 years ago

First of all: NO, and guess what? I can prove it with my nice bitbucket commits history.

Second: I won't prove it to someone that is clearly not able to spot the difference between original and ripped-off versions of products.

brndn• 13 years ago

he/she didn't rip them off. they just used the same libraries. font-awesome/glyphicons for icons, flot for graphs, etc.

ricricucit35• 13 years ago

thanks brndn

ceejayoz• 13 years ago

The icons come with Bootstrap, the graphs appear to be open-source libraries like Flot, etc.

ricricucit35• 13 years ago

thanks for explaining.

chickenrun• 13 years ago

awesome!

ricricucit35• 13 years ago

thanks chickenrun!

m4tthumphrey• 13 years ago

Looks ok, but I feel this one is by far the cleanest, usable and extendable. https://wrapbootstrap.com/theme/detail-admin-responsive-them...

ricricucit35• 13 years ago

i don't think so.

Plus: I HATE TEMPLATE MARKETPLACES. They are starting to ridiculously rip developers off with their fees.

Wrapbootstrap can legally steal up to 75% (seventy five percent) of the earned amount. Making a developer earn 25% (twenty five percent) of a product that he ENTIRELY made and market (created images, advertising material, etc.).

It's freaking ridiculous.

coderdude5• 13 years ago

That's not accurate. 75% is the maximum commission for sellers with 55% being the starting rate. 35% is the minimum and applies to themes sold non-exclusively.

https://wrapbootstrap.com/help

jdhendrickson• 13 years ago

Font Awesome stuff fails to load for me in firefox 24 for this site. If you are associated with the site, this might be the problem. http://wpvkp.com/font-awesome-doesnt-display-in-firefox-maxc...

ricricucit35• 13 years ago

Thanks for pointing that out. I'll add it to my TODOs.

timsayshey3• 13 years ago

Finally a free admin bootstrap theme! These are stinkin' hard to find, actually this is the first I've seen. Well done sir. Btw, were is the github link?

reustle• 13 years ago

It's 15-55 EUR for the theme

http://www.html5admin.com/download/

timsayshey3• 13 years ago

-_- The search continues!

wehadfun• 13 years ago

Nice work. Are you selling it on any other websites or just html5admin.com?

ricricucit35• 13 years ago

just http://www.html5admin.com/download can i ask you "why this question" ?

jwarren• 13 years ago

That's a really nice, really usefully thorough admin template. Good work dude.

Small suggestion - I found the demo pages very, very busy and tricky to parse at first. Perhaps a few sample layout pages with a bit more space on them could be a good idea before people get to the "kitchen sink" style pages?

ricricucit35• 13 years ago

mh. good thought. I'll work on it this weekend! Thanks!

leviathan• 13 years ago

I can't tell the difference between the different licenses. The description for each seems to be exactly the same, so what's the difference between them?

phy6• 13 years ago

This template needs about 2x as many features (really just integrating other's libraries, like all other templates) if it's going to compete with other bootstrap templates out there (which sell for less).

ricricucit35• 13 years ago

"2x as many features". Mh. Ok. Examples?

A new HTML5 Admin Teamplate

Related Stories