CatmanUI - Open Source Web UI Framework

[loganryan99]

I've been working on a web UI framework for to use with a future Linus Tech Tips project (cough mobile theme cough) for a few days now. It's at the state where It's at least useful, so I figured I would publish it here as open source. 
 
 
Responsive Layout
This is basically the reason why I'm making this. CatmanUI has a grid based layout, with each column representing 10% of the width of the page. You can configure the size of any column using CSS classes, very similar to how Bootstrap works. For those who don't know, a responsive webpage is one that automatically formats its self to any screen size without having separate versions of the same webpage.
 
Mobile Layout:
 

 

 

Low Bandwidth

Unfortunately, not all internet connections are equal. One of my goals with CatmanUI is to keep images/icons to an absolute minimum. CatmanUI is also very lightweight compared to the current IPS framework and Bootstrap, keeping animations to a minimum while still providing a great experience. So far CatmanUI, including all of the demo HTML, weighs in at just 23kb uncompressed. CatmanUI provides a better experience with less.

 

Uniform UI Elements

Although I love IPB as forum software, the code for the front end is honestly a mess. An example is how I changed IPB's modal popup box to be orange, but the ones inside the editor are separate, so those got overlooked and are blue. IPB doesn't re-use code as much as it should, and as a result it's very hard to modify and very resource intensive. CatmanUI solves this problem, making it easier on both the developer and the user. 

 

License

Catman2D licensed under a Creative Commons Attribution 3.0 Unported License. 

It would be almost impossible to say this wasn't inspired by Bootstrap. Check out bootstrap at http://getbootstrap.com/

 

Download

The CatmanUI demo can be downloaded here: https://dl.dropboxusercontent.com/u/27072642/CMUI-demo.zip

 

Remember that this is only days old and the code is not as organized as it could be. The code for each element isn't directly provided, but looking at the test.html source code should be enough to figure out how it works.

 

To try it out, extract the zip file somewhere, then open test.html in any browser besides IE. (IE doesn't play nicely with files that aren't hosted)

[darkstar]

Nice work so far. I'll be interested in seeing what you make of it. Followed.

[colonel_mortis]

I like it. A couple of things that I've noticed: On the dropdown, if you click outside of it it remains open. I know it's not the easiest to code for (AFAIK) but it would be a useful feature, especially if it was an option. I might consider using this (modded a bit) in a project that I'm working on (back end ATM) that may involve fixing all your youtube sub box issues. If I get it to work...

Also, on the narrow width, the menu button thing at the top should have cursor:pointer to make it more clearly a button.

[Torand]

Looks really nice. Simple and intuitive to use.

 

Look forward to future builds.

[loganryan99]

I like it. A couple of things that I've noticed: On the dropdown, if you click outside of it it remains open. I know it's not the easiest to code for (AFAIK) but it would be a useful feature, especially if it was an option. I might consider using this (modded a bit) in a project that I'm working on (back end ATM) that may involve fixing all your youtube sub box issues. If I get it to work...

Also, on the narrow width, the menu button thing at the top should have cursor:pointer to make it more clearly a button.

 

Dropdown issue: Woah... Huge overlook on my part. Will be fixed

 

Cursor issue: I'll add that in, but I intentionally left that out because most small-screened devices don't have a cursor anyways. I see why it might be useful, though

 

Thanks for the feedback

[colonel_mortis]

Messing around with it today, I noticed that sticking images in the nav bar (in desktop mode) doesn't work very well (not vertically centered).

Also, on the javascript file, rather than including it at the end of the html file, just add

$(document).ready(function(){

at the top of the code before anything else and

});

at the very bottom. This will use jquery to only run the code once the DOM has been loaded.

[loganryan99]

Messing around with it today, I noticed that sticking images in the nav bar (in desktop mode) doesn't work very well (not vertically centered).

Also, on the javascript file, rather than including it at the end of the html file, just add

$(document).ready(function(){

at the top of the code before anything else and

});

at the very bottom. This will use jquery to only run the code once the DOM has been loaded.

 

Yeah, thanks for pointing that out. I normally do this, however the JavaScript is just a placeholder at this point (very messy) so I left it out intentionally. Once I decide on a structure for the JS I will clean it up quite a lot. Development of this has kind of been put on hold until IPB 4.0 is released, at least in Beta, because that's the main purpose of this project. (Bringing a light-weight layout to desktop and mobile devices that doesn't use a lot of bandwidth while still providing a great experience.) This'll also allow us to more easily implement (and remove) features of the forum more easily in the future. 

 

As for the images in the navbar, that will probably be implemented sometime in the future. Again, this needs to be light-weight, so I am adding features as I need them. The way the navbar is setup now is just a placeholder (like most of this) and will be completely redone once we build a plan for how we are going to skin IPB 4. 

[kirashi]

I've been working on a web UI framework for to use with a future Linus Tech Tips project (cough mobile theme cough) for a few days now. It's at the state where It's at least useful, so I figured I would publish it here as open source. 

 

 

Responsive Layout

This is basically the reason why I'm making this. CatmanUI has a grid based layout, with each column representing 10% of the width of the page. You can configure the size of any column using CSS classes, very similar to how Bootstrap works. For those who don't know, a responsive webpage is one that automatically formats its self to any screen size without having separate versions of the same webpage.

 

Sir, I am inquiring as to where I would find theses 'widgets' you're selling. It says they're new and for sale in the demo, how much are you asking a piece and what exactly do they do?

 

Seriously, though, I do like that it's unlike other responsive themes that completely change the layout when viewed on a tablet/phone. This one keeps the formatting and simply uses percentages to wrap the content, which is a wonderful touch as you'll always know where things are on different sized screens.

[loganryan99]

Sir, I am inquiring as to where I would find theses 'widgets' you're selling. It says they're new and for sale in the demo, how much are you asking a piece and what exactly do they do?

 

Seriously, though, I do like that it's unlike other responsive themes that completely change the layout when viewed on a tablet/phone. This one keeps the formatting and simply uses percentages to wrap the content, which is a wonderful touch as you'll always know where things are on different sized screens.

 

http://linustechtips.com/main/store/product/1-widget/

[kirashi]

http://linustechtips.com/main/store/product/1-widget/

Thank you sir! Quite an expensive widget what with multi-core operations and such, but definitely bound to be a doozy. I shall return for additional widgets should this one break or not operate to maximum potency!

[colonel_mortis]

http://linustechtips.com/main/store/product/1-widget/

that's giving a 404 now The only thing in the store now is the 3970X at an amazing price

[Nallown]

I like it. A couple of things that I've noticed: On the dropdown, if you click outside of it it remains open. I know it's not the easiest to code for (AFAIK) but it would be a useful feature, especially if it was an option. I might consider using this (modded a bit) in a project that I'm working on (back end ATM) that may involve fixing all your youtube sub box issues. If I get it to work...

Also, on the narrow width, the menu button thing at the top should have cursor:pointer to make it more clearly a button.

dude... do you want to loose all your sessions! if not then you better fix that sub box