Bootstrap 3 Select Product And Price
@ Just tested with the latest stable FF. You must be working on the site or something because there were weird things happening and now they're gone!You should remove inline styles from inputs, selects where possible since it messes with the default bootstrap styles (left-hand search for instance)Video can't be seen onI would suggest moving forms out of the structure and instead use the form classes available. Form-horizontal for instance.Overall nice effort so far. I'm glad to see things moving away from 960gs.
Find the Bootstrap slider that best fits your project. The best free slider snippets available. Design elements using Bootstrap, javascript, css, and html. Buy XtraForm - Bootstrap 3 Xtra Animated Form by aydev on CodeCanyon. XtraForm is an xtra bootstrap 3 based animated sign in/up forms with dark skin, ready to use and simple to customize.
Let me know if you want any help working on the responsive design aspects. Tested it in IE, Chrome. The youtube popup works OK.In Firefox, the opened modal includes the video = OK.But the window has no height.Reason. Ive also been working on one that is compatible with the frame controller mod I recently released.Its not much to lok at right now, but I took the same category/grid list and did a rough setup with a button dropdown for sorting, and added a jQuery cookie so that it will remember a users choice of grid or list from page to page:Other changes I have done were to the input fields and forms, I added the nessasary classes VIA the function to give them the polished look Bootstrap provides.
I also added upon tepdrawinputfield to add in HTML5 fields for email, number, date, etc; It makes it so much more user friendly when accessing from a mobile device.The button function was also slightly changed to allow for the bootstrap button classes, and font-awesome icons.Perhaps I should place mine on git hub and we share code. Hi @ I really like what I'm seeing and the direction your taking things.we really need a responsive design. In an effort to try and give you some input I took a good look around and the only thing I noticed that seemed strange is the images on the productinfo pages.they seem to come up in an oversized mode and if you click on them they shrink to a thumbnail size.maybe they just need to have separate images uploaded but in any case I thought I'd point that out in case it is of any help.You're getting me excited about upgrading now.Dan Edited February 17, 2014 by Dan Cole.
I can't contribute anything to this topic since i have no clue about bootstrap or anything you guys are talking about here. Sounds all like rocket science to me.i only have a question regarding responsive design.i have seen a couple ecommerce and non ecommerce sites that implement bootstrap or like mommaroodles recently created HTML5 to create a responsive function.what all have in common is this 'flat' design, i don't know how to explain this in web developers term.maybe this article (point 3) explains it better.is this a 'must have' for a site to be responsive or can it be changed to look more.different? For this we who have forks will need a lot more input from shopowners (by going to the test shop and looking around) please, make note of any inconsistencies - test it out on your ipad, on your iphone etc.For iphones etc I'm wondering if we're going to need to rethink the entire shop design?
Seems like all the 'boxes' end up towards the bottom of the display on small screens.for example the search box (and others of course) end up below the products being displayed.at least that is what I'm seeing. Probably not the best way to present those options, shout outs etc for customers. We might need to rethink the overall shop design.
Bootstrap Style Select Option
I'm not sure what other e-commerce sites do in that regard but it's probably worth looking at. Essential links, navigation and search can be placed in the header so that they are easily accessible on all devices.Which also opens up for having a 1 column or 2 column design as opposed to the 'boxy' 3 column design.@ Agreed!BTW, I took a quick look at the demo sites for Prestashop, Magento and Opencart.Burt had linked to them in a previous post and found that none of them are using a responsive design. No learning there but on a positive note we'll be out in front of the pack with the bootstrap version you guys are working on.:)Dan. @Here's some feedback from a shopowner/(ex-)developer;-)The banner image at the bottom doesn't scale down on small screens.The listing of products in the 'New Products for xxx' is slightly differently structured from the product listing where you don't have a view button. I personally favour consistent layout of the thumb/mini description in product listing, modules and boxes.As all the boxes are full width at the bottom, they take up a lot of space when they should not.I don't remember where exactly, but in other designs optimized for small screens, the link to what's new and specials is usually very prominent and opening up a new screen. They do not show the little picture boxes.While for medium (tablet) size screens, the layout is more visual, so you'd show a rather big picture of the new item with a prominent link to see more new items next to it.An icon (wheel like top right on facebook) is often used to hide configuration settings behind on small screens.
I think it could be used to put the language and currency options behind on small screens.Navigation on top, and responsive is one of the big issues.Should it support multi-level dropdown out of the box, apparently some functionality removed from bs3, but implemented by this guy againHaving bmcategories, and wanting it on top, I think that we are also looking at having header content modules (and then possibly footer too while we are at it.). What's the effect on the layout if a larger shop logo is used? On smartphone, it appears the logo is affecting the way the header shortcuts appear in portrait or landscape view.
on a smartphone, at the index page, the new products is exclusively in list format which leads to a lot of scrolling, whereas grid layout would be more space efficient. This is more pronounced when the phone is held landscape view. Or give view a list/grid option there. I ran a test purchase all the way through, no layout/graphical issues appeared in the process.
Doing a search box query for 'dvd' the results are somewhat elongated product displays with a lot of blank space between the image/title above and the price / buy now button below. That's in both grid and list layout.
in mobile device view, my preference would be to want the category box before the 'what's new' list. If the shop owner could control placement of the boxes on the admin side as can be done in the current system that may deal with such preferences.Good to see this move to address built in core responsiveness. I see in my Google Analytics a significant portion of site visitors using mobile devices when visiting my shops. The way things are going on with mobile site visitation this seems to be the way to go for shop design.:thumbsup: Edited February 18, 2014 by altoid.