Is Flexbox a good tool to use for Responsive Design (or should I
stick to grids)?
Can anyone share some information on working with images in Flexbox and why they may be handled differently than text?
You can use Flexbox for responsive grids no problem. Great example can be found here http://philipwalton.github.io/solved-by-flexbox/demos/grids/ if anything they could be better, but it really depends on your browser support.
From my experience in using Flexbox, I've not needed to handle images differently to text.
Related
How can I design material design card view in cn1? It can be done pretty easily in android native and react native etc. But I'm confused how easily can it be done in cn1 with all those shadows and card radius etc. Is there any example on it? Plz see the design below.
Sure. You can use RoundRectBorder in the designer tool or through CSS. It includes support for the slight roundness of the corners as well as support for shadows. Just place containers with that styling in a BoxLayout Y.
I'm currently putting together a PoC for the web. I've done about 9 years of iOS development so I think in those contexts/concepts. What I need to build is something similar to a UIScrollView/CATiledLayer for the web.
I need to build out a tool that allows users to build their own flowcharts, something I've already built on iOS. I'm prototyping on the web and I'm not sure where to get started. I've played around with a few canvas libraries thus far.
I want to build something that can have a fixed viewport with other components rendered off-screen. The viewport has fixed bounds that you can expand and allows me to put subcomponents in the view and move them around if I'd like to.
My web/javascript experience is pretty much Ember, React and plain old ES5/ES6. My HTML skills aren't that strong and I think I may have missed something fundamental.
My goal is to have something that can work with an existing react stack my company uses. I'm happy to roll my own solution but would love to get advice about the right direction to pursue. I feel like I have almost nil domain knowledge in this area.
This JS library, Dracula should be of great help to you since you're working with drag and drop flowcharts. You can see a working example here. NOTE: This lib is based on SVG and doesn't use canvas.
Here's another beautiful live demo: Source code for JS Flowchart here
Also take a look at this Dragon drop fiddle
And regarding ScrollView in HTML, you can simply use divs with css styles overflow-y: scroll and/or overflow-x: scroll. Using flex layouts, apart from giving you mobile-like development feel, will help you have so much control over your layouts based on the screen size.
Hope this should get you started.
I would like to making a fixed header and Mobile Menu in wordpress mobile theme, such as the following example. how to make it?? thx
and by the way, I like this menu, what is this menu call? thx
http://themeforest.net/item/jackdaw-wordpress-mobile-theme/10563037
If you'd like a quick, acceptable and straight forward approach to a responsive header, you can make use of various libraies such as twitter-bootstrap.
By using such a library, you will not need to worry about most of the responsive coding behind the scenes.
However, if you would like a more custom approach to responsive design. You would want to look into making use of CSS media-queries(Base layout on various device parameters such as width, height and so on) and responsive best practices(Such as not being over using explicit sizing in your CSS)
So I realize one of the big problems currently in responsive web design is that you download large images when they might not be needed, like on a phone-causing a serious performance hit-which you also get to an extent with conditional loading with JS; so my question is couldn't I just load most of my images as background images within media queries and overcome this problem until something better comes around? Example:
/* base styles */
#media all and (min-width: 53.75em) {
header .inner{
background: url(‘../images/football_bg.png’) bottom right
no-repeat;
}
Obviously this is completely non semantic, but could solve the performance issues right?
Yes, using media queries and background images works like a charm, so if it's a good fit for your project then by all means use it.
Using background images isn't always possible though.
If this is the case, one option is Adaptive Images, which will serve different sized images based on the visitor's viewport. It's easy enough to retro-fit to an existing site and check if it will work for you.
Another possiblity if you use Foundation is that they've just released something similar which looks really interesting: Interchange
Good luck!
You could look into using Adaptive Images if you really care about semantics: http://adaptive-images.com/
Also here is a good article about solutions for images and responsive design. http://css-tricks.com/which-responsive-images-solution-should-you-use/
I used Highslide JS about 5 years ago on this site: http://wela.ctc.edu/academy12-13.aspx (example page). Now I'm redesigning the site use Twitter.Bootstrap and am trying to figure out how I can tweak the Highslide popups to work in a small device width. Is this possible or should I use find another solution to implement? I've played around with the setting parameters in my highslide-with-html.js file, but the results have been unsatisfactory. If it is possible to use Highslide in a responsive design, would be grateful for any URLs to look at.
The short answer is that Highslide adapts very well to small devices if you're opening images. The expander is purpose-built to do just that - display the image as large as it can without exceeding the boundaries of the viewport.
But when opening anything else - an expander with HTML content, an iframe, etc. - the expander must initially be a fixed size. You can put a resize handle on it, but that's not really good enough for handling everything from a smartphone to a large monitor.
Without rewriting Highslide JS, overcoming this limitation would require that your page do its own detection of the viewport size, then either modify the call to htmlExpand() on the fly, probably with some jQuery manipulation, or change the .highslide-html CSS class width. The latter approach (targeting the CSS) seems like it would be easier.