I just started working with Polymer and their starter kit. I want to have a standard hero image with a text overlay - naturally, I want the image to be responsive. I've gone through all the Iron and Paper elements and can't seem to find anything that works.
I've tried using the Iron image, Flex layout, and Media queries in various compbinations to get what I need, but to no avail. I've found several 3rd party components like x-imager that will do the trick, but I would've thought such basic functionality would be available right out of the box like it is with pretty much every "responsive" framework - and yes, while I know Polymer isn't supposed to be a framework, I guess I expected it to be part of their component library. And yes, I also know I can create a simple CSS class that does that like Bootstrap does too, but I'm looking for native functionality, out of the box here.
Is there something I'm missing here or should I just create a custom component and move on?
Related
Are there any pre-build images that I could use when developing that will display a grid in the background of my browser?
This would make it easier to visualize the layout during development and make sure my design lines up correctly with a grid.
Does bootstrap have anything like this builtin that I can enable in the css?
If I understand you correctly you are looking for something like this?https://chrome.google.com/webstore/detail/bootstrap-grid-overlay/mnlklmelflkheijccafopdohgclfefcg
Apologies if this is not what you are after.
I am looking to recreate this type of view for a list of 'offers' as groupons have when you visit the site on mobile:
As we can see they seem to be using a new unordered list item for each offer box, and then the offer itself is contained within a single list item, which has a link, image, header, and a table for the details about the bottom. This looks good and seems to work nicely.
I want to recreate this using bootstrap - in such a way that when I then view the layout on my desktop, the site scales up and perhaps new fields / details which were not visible in the example above suddenly become visible.
here, they are using tables. But, It is the old way, you can redesign itself with bootstrap. The only thing you should know is bootstrap.
they have a great documentation of their classes and what they do.
for example:- if you need an element to disappear in mobiles and appear in tabs and machines, you can use .sm-hidden class.
Give it a try.
I am studying CSS best practices and methodologies like OOCSS and SMACSS to use in a medium scope project that uses Twitter Boostrap 3 and LESS. I'm starting to get a grasp of these methods but I have some trouble to find out how to handle responsive design and CSS modules relationship.
For example let say I have a button module with all different kind of buttons used in the project (color, shape, size). How could I make the button change depending of the device. The same button should be large in mobile and a normal in desktop.
Following OOCSS I should have 2 skin classes like btn--default and btn--large. But as the HTML is the same for each device I can't switch this class in the HTML. Also using a media query in the module's CSS that would change the size of the button depending of the device size doesn't seem a good idea as I would be coupling the module with this specific need (and what if I want a normal button in mobile later?).
As an other example, I have product section module that have different possible layouts (vertical / horizontal). What if I want to use the vertical layout in desktop and the horizontal in mobile. I'm facing exactly the same issue. I can easily create 2 different submodules (product--horiz, product-vert) but I can't change them.
I could use javascript to switch classes but it doesn't feel right and would break the design with JS disabled. You could tell me that maybe the design is not right if an element is changing so much from one device to another but it would be a real limitation to restrain this.
So what are your thoughts about this issue. Is there any generalised practice used to face it?
To use your example for buttons:
Mobile is also tablet and tablets come in a variety of viewport sizes that are just as large as desktop. Media queries are not detecting features, like touch, so making a media query is only for visual at that viewport size. It's best practice to use large buttons and large click areas for fat fingers for every device unless you do feature detection with js such as .touch .btn- {big styles}. I use a little script to put .no-touch and .touch on my html, but I don't bother making larger areas just for .touch. I make them for everything if at all possible.
Your base button style should be defined in the button module in your 'modules.scss'. Apply any styles here that will transcend across all buttons. Then handle the differences in your smacss 'states.scss' file (compiled last). You should have one 'button' section in your states file in which you handle media queries and unique classes that will alter the appearance of the button. Hope that helps, I can elaborate more if you need.
I had experience with Twitter Bootstrap and Foundation, and I personally think the only thing I want to use is their grid system. Other features are just bloated.
So I read about the prospect of a grid layout. All of the articles I found are oriented toward an 'artistic' explanation (golden ratio ect). I am a coder at heart, I need a clear & logical reason to use a grid layout (for example: 'columns can be easily stacked on top of each other on mobile screen, and expand horizontally on larger screens'). Can someone give me the pros and cons of applying a grid system to my website? Personally do you think using a grid system is good?
If the answer is yes, should I use a premade grid system like from Twitter Bootstrap/Foundation or just make one for my own? All of the other features are unnecessary for me an irrelevant to my problem.
Thanks! :D
I agree with #kunalbhat that this might not be the best area to ask this but since you did I will try to answer it.
The grids are designed allow for speed and adaptability. Speed in multiple senses. The first part of the speed is the speed of writing the code. You can easily get the layout you want when you are using the grid system and everything aligns correctly. You don't have to remember your tables and columns and col-spans, etc.
The second speed is modifying your code. Inevitably you will need to go back and make changes, with a grid this is easily to do. Changing a col-md-7 to a col-md-6 easily makes a little tweak in the layout of your page that can easily be tracked and performed.
You mentioned responsive design, both Bootstrap and Foundation have responsive grids. The grids will snap to different sizes based on the viewport size. However you have control as well. For example if you want something to take 1/12th the screen in desktop, 1/4th on a tablet, and 100% on a phone that is easily done with Bootstrap and Foundation, both have grid classes that target specific viewports.
The also provide visibility classes based on those viewports.
For the "bloated" part that is easily solved. Using SCSS you can easily only import portions of a library. For example for one project I was on I only imported the Grid and it was considerably smaller.
I happen to think that this is a SO question, simply because of one of the main cons of CSS grid systems: semantic.
I think semantic is important for a web developer and having a class named col-md-7 is not the most semantic thing to do.
But I like grids, because they are easy and quick to use, so I started to use LESS. Because it allows me to use variables and functions(mixins) in CSS, I can build my own grid system on my CSS rather then on my HTLM.
You can start on Frameless and customize your own 'classes'.
I'm looking for a good way to implement reusable buttons in CSS on my forms. The requirements:
- Separate image and text (text is in many languages)
- Rollover effects
- Plays nicely cross browser
- No javascript (if possible)
- Rounded corners
Whats the best way to do this? Years ago I was using the sliding doors technique, but this seems out of date now. Would you use CSS3 with a fallback for older browsers? Any particularly well thought of techniques out there?
Jquery UI buttons are AWESOME. They're fully tested, completely compliant, and really look great. With one line of code, you can have a fully styled button in no time flat. Here's the thing--they can be executed without Jquery (go figure)
First, the tut
So, the standard method is to build an element (a, button, input) with an id and set it as a button in Jquery like this:$('#element').button()
However, if you do it in the manner that the tutorial shows, you just have to add some classes to an element to get a similar effect. So, to make a button out of an a tag, it would just be
Button
In this example, there's no need to set the button with the jQuery button declaration...you're doing it by style only. With the flexibility to style so many different type of elements, it opens up a ton of doors.
You would have to have the Jquery UI css loaded, which offers the added benefit of ThemeRoller, which can style elements on the page with a simple change of a file. It's really a great way to "theme" a site that has to change branding in a hurry, which has made custom themed apps my company puts out extremely profitable.
I would use css sprites for this. You can find out about them here:
http://css-tricks.com/css-sprites/
It is basically a way to make one large image that has all states of buttons(normal, hover, selected). The benefit is it is one http request and you don't see a flicker the first time a hover occurs. If you use this route, the css background property will be the image. You can then use text-align and line-height to center the text that you want to place over the image.
This library, Nifty Corners Cubed uses Javascript but is a fairly clean way to round div tags links, etc. It is tough to find a reusable solution without using a sliding doors derived technique. Otherwise you stuck making none-resuable buttons that have to fit to your size.
You can also take a look at PIE http://css3pie.com/
A sprite is a great option and I do use them from time to time.
Personally I don't mind if my websites aren't identical in all browsers and I go the CSS class route. I keep in mind what is and isn't supported by various browsers and if there is an element that needs to be a certain way I will double check with W3Schools for compatibility.
The main benefit the keeps me using CSS/CSS3 classes is if something changes it is done quickly by text in a single file, if need be I can do a quick change from a 10 year old computer with a dial-up connection (if they still exist) and no imaging software.
Where the advantage of a sprite is they are supported across all browsers and they will look identical (more or less). SpriteMe is a bookmarklet that I have heard of to help with sprites if you decide to go down this path.
I see this as a what do you prefer matter... these questions are what I ask myself when making this type of decision:
How often will it change? Big or small changes? Will it be a complete redesign job if it changes? What do you already know? How much time are you willing to spend learning something that you may not know? What does your gut say for this project?
I hope this can help you.