Magento

That’s really a step in the direction of the talked about framework, or extending the current framework.
They had talked about “blocks” in a past magento blog video. I think there’s a newer video out now, in the designing for Magento category.
I don’t have a current webhost, I guess I’ll have to settle for just running a demo on Xampplite.
I can’t imagine I won’t find something to slim down.
I’m from the school of minimal validating coder’s here in the last little over a year. Streamlining the current CSS is right up my alley. I wonder if the current version uses a reset stylesheet, I can’t live without a reset, because I don’t do browser hacks at all.
Thanks for the idea to keep the group moving forward, are we supposed to just post code and things in here or where exactly?
-ty

Just checked, I should of remembered, there are 7 total stylesheets that load for the current Magento demo. One is indeed a reset, that looks like a dandy.
There are 14 total javascripts, I know I don’t have the skills to improve on those, but CSS that is a matter of preference sometimes.
checking the new screencasts now:
http://www.magentocommerce.com/media/screencasts/designers-guide-1/view

I think there are definitely different style of CSS coding per HTML developer. For instance, some may say “hey, if that structural css is just doing a float:right, why dont you just create a float:right class and put that for all the contents that needs to be floated right?”, while others may say “content is content, you have to do .some_meaningful_class: float:right;, to properly present the content”. Its a matter of do you want to really create that much CSS just for aligning things or other small things that are used widely around the site.Of course, this is just part of the many different ways that different developers like to work with CSS.

I’ve read people saying that the CSS for the current theme is too big. And I think it comes with the territory of having Javascript. In order to create “hooks” for javascript, the more javascript, the more css class/ID needs to be created and assigned styles.

What we’re trying to do with the new leaner theme is to reduce the javascript, hence reducing the CSS, along other things. On top of this, the current theme has a lot of “facade” classes - CSS created just to create a “look”. In the cleaner CSS, that will also be changed to the minimum while still maintaining the ability to carry a “look” for a site...etc.

Everybody, come outta your closets and let’s start making some lists to improve what we have now with the default theme. Any sensible input will ensure its place in the upcoming new theme!!

Hi Ohminu

I wouldn’t panic about reducing the css or js volume just yet.

I think with most stores implementing their own graphics etc it would be a bit of a waste of your time (most owners in the future probably wont know how to compress images etc)

One area that can be improved is in the number of connections required due to the way the css and js is split up.

It makes alot of sense logically the way its structured currently, but it does slow downloads because browsers cannot open enough threads simultaneously.

I would look at experimenting with combining the css and js at run time into 2 single files (1 css 1 js) and compress them to remove alot of the wasted bits in the whitespace and comments.

**IF** this works you will be building in the margin of error nessesary for those users later on who reskin it without knowing what they are really doing… and making the site a good bit faster for the rest of us :o)

At that stage any reductions in the quantity of CSS and JS is a bonus.

A good experiment would be calculating what the download time is for only the comments and copyrights in the site (which as far as i can tell are on every page) it may add very little but who knows!

Warren

Hello - Regarding your post about improvements in HTML and CSS of Frontend design…
I feel the default template should have a certain amount of look within (it’s a part of the product)… even when the CSS file(s) is in someway quite big. The template which comes along at present with the installation isn’t bad.
To reduce JS to a minimum, where there is no other way around, is a good idea.

I can’t really say if it makes any differences regarding the loading time of a site, if there is one big CSS-file or many small ones, like now 7 or 14 (I havn’t counted them).
For usability reasons I would like to prefer that the CSS is splitted in different parts. I suggest to have at first a so-called ‘default.css’ which contains only the styles of the pure template design (… like Header; Navigation; Content - 1,2 or 3 coloum; Footer a.s.o).
That will be the CSS file where users will find at ease all styles to change the look of default template… or in case someone has his your own template… to replace it fully.
Than a seperat CSS for all styles of the moduls(Content Blocks) which come along with the default mangento installation.
Maybe there is another CSS necessary regarding some content styles… e.g. image galleries, forms etc...I often keep e.g.  the stylesheet for forms as separat CSS file, because it has to get loaded only once, if someone enters the Contact site.

The default template should be valid xHTML. As the HTML files of demo template is broken in pieces (Structur

The default template should be valid xHTML. As the HTML files of demo template is broken in pieces (Structural Blocks) like Header-Left-Content-Right-Footer is naturell and very good.
Only I would prefer that the Site Navigation is also a Structural Block not a Content Block and in order to that a part of the Header.

Grets mykel

(sorry but my post got cutted!)

Hi
I’m using Firebug with yslow addon on my firefox,I looked at magento and found these:
1. Make fewer HTTP requests
This page has 14 external JavaScript files.

This page has 5 external StyleSheets.

This page has 18 CSS background images.
2. Use a CDN
3. Add an Expires header
4. Gzip components
5. Minify JS
6. Configure ETags
this is significant:
583.8K Total size
52 HTTP requests
52 HTTP requests!
and one more thing,you have Copyright comment on each css and JS file too thats a lot of KB

yo one thing i noticed.
the phtml file in the contacts folder which controls the newly available contact form

well in the code label for= “”

yu guys put firstname for all fields. This would be an acessibility issue as the label for attribute shud change with the field name ( email, telephone etc)

Latez

I think in order to allow designers to create good custom themes, you have to strip everything out giving a good overview. I’ve done a very quick simple css style with very basic styling to give you an example here http://www.cogocreative.co.uk/lite.zip

or an even simplier pasted below

Hi Ian,
Can you post this somewhere as a live demo?

A recent framework looks very promising and simplistic for grid work too, check out:
http://960.gs/
IT has a very basic structure that would be great to build on.

There http://demo2.cogocreative.co.uk/

It aint pretty, but should give an idea of maybe a very simplistic theme that could be easily stripped out to get completely custom design in.

ianj I can’t call it theme

It’s not a theme. it’s a quick 5 min css i done as an example. The point was if there was an alternative theme with very minimal styles and graphics.

This would make magneto easier to strip apart and add in your own custom template.

Instead of people just replacing the odd graphic and colours here and there, then claiming they designed the whole thing.

I would agree with everyone, there REALLY needs to be an included strip down basic design/layout for magento it makes coding time a helluva alot easier.  I don’t want to remove the 1800 # graphic everytime I go to implement a design, it should be very basic and skeleton like.  Very similar to what ianj has posted!

The Magento team is working on a blank theme right now. What it contains is validate, semantically correct HTML with appropriate class hooks that’ll give you something to work with. There will be absolutely no graphics other than the placeholder logo in the header. CSS will be for the most part blank, so CSS designer who know what they’re doing can add in their own without having to bother with conflict with the existing CSS. We will release this theme as soon as work is complete.

that’s what we want

Why don’t you just build out a Blueprint theme?  Blueprint seems to be the CSS schema of choice now for most designers:
http://code.google.com/p/blueprintcss/

Excellent! Can’t wait. I’m looking forward to using the stripped down version.

Currently i’m using a custom e-commerce solution, but it doesn’t have the features magento has, so once a nice light theme is available i’ll start experimenting.

My current custom sites are http://www.weegooseberry.com / http://www.maybebabylingerie.com

It would be nice to get something like these into magento.