Veze, linkovi
Kompjuter biblioteka
Korpa

Preporučujemo

Prilagodljiv web dizajn pomoću HTML-a 5 i CSS-a 3

Prilagodljiv web dizajn pomoću HTML-a 5 i CSS-a 3

Cena: 1870 rsd
Popust i do: 1309 rsd

Angular kuvar

Angular kuvar

Cena: 2970 rsd
Popust i do: 2079 rsd

Responsive design 251

elcome to RWD Weekly edition #251.

Thank you to everyone who replied to last week's milestone with your feedback, it's always such a treat to get an email back from you.

 

Snippet Show

This week the snippet comes from a component/module that I had created in codepen to show a client what I was referring to when talking about the layout changing from vertical to horizontal when increasing the viewport. There are three key feature blocks that need to be shown "above the fold", on small screens we want to stack them on top of each other and on larger viewports we want to sit them next to each other.

To a lot of clients I may as well have been saying "bling blang fling flong wobble dibble dobble". By handing them a phone, a tablet and a laptop with the same codepen open they could then see exactly what I meant.

.feature-modules {
  height: 95vh;
// almost full viewport height
  display: flex;
  justify-content: space-around;
  flex-direction: column;
// display vertically 
  @media (min-width:800px) {// when more than 800px
    flex-direction: row;// display horizontally
  }
  section {
    display: flex;
    flex: 1 1 33%;
// grow or shrink to fit all items
    border-bottom: 1px solid ;
    align-items: flex-end;
    @media (min-width: 800px) {
          border-right: 1px solid ;
    &:last-child{ border-right: none;}
      border-bottom: none;
    }


flex-direction is such a valuable tool, not just for realigning page elements like this but for juggling items that might need their visual order different to their source order.

Headline 

Self-driving cars in the browser

When I say responsive we think media queries. These days the term can mean so many things outside the traditional mental model of responsive web design. In this little experiment the javascript built cars race around a set of obstacles while learning what to miss and where to avoid again in the future. This is a system whose design is truly responsive to its environment.

Practical CSS Grid: Adding Grid to an Existing Design

A couple of weeks ago I covered an article from Eric Myer who had rebuilt his site using CSS Grid Layout. Now, the site isn't going to win any design awards (sorry Eric) but the point is that a lot of you are probably thinking about doing the same thing to your own sites in exactly the same way that we all did when RWD was first a thing. Check out this tutorial and see the step by step process he went through

Articles

How to Design a Large Scale Responsive Site

An overview of bringing a large-scale site like Quidco from fixed to responsive. 

Better grid systems in UI design tools

A really great overview on what is needed in design tools when dealing with flexible grids. 

Need to Catch Up on the AMP Debate?

Chris sums up the current state of the AMP debate really well in this post. He covers off a lot of the discussions from articles we've covered already but puts his own thoughts down at the same time.

 Toggle Buttons

If you thought toggle buttons were pretty straight forward then do we have a post for you!
 

Smashing Magazine just got 10x faster

Smashing Magazine have made a massive move after 10 years on the same CMS platform. While Wordpress has done them well over that time, Netlify offers a static CMS that can't help but be lightning fast.
 

Announcing Test Profiles and Budgets 2.0

Calibre can emulate real-world devices, connection speeds, and more. This was news to me... in fact, until this article, I'm not even sure I'd heard of Calibre. I certainly have now though and I'm very impressed with what they can do.
 

Automating the Guetzli JPEG Encoder

There's a new encoder in town and it's coming to an imageOptim near you. Smaller, better quality images that are going to load faster and reduce file size... can it get any better?
 

Why I ditched Sketch for Webflow

Tutorials

Design a responsive site with em-based sizing

Here's how to use relative CSS units to build scalable, responsive designs with simpler code.
 

Progressive Web Apps — The Next Step in Responsive Web Design

PWA's won't necessarily be for everyone but they're a great way to provide something to your visitors when they're offline.... even if it's just a page to let me know they're offline!
 

Practical Color Theory for People Who Code

A great introductory article on colour theory which is extended into how we can apply it simply through some mixins. So get ready to be mixin some colours together (pun intended... I'm so sorry)
 

Getting to know CSS Grid Layout

Resources

 

Calibre

Comprehensive web performance monitoring. Gives you powerful analytics that provide insights you need to improve your site.
 

Grid “fallbacks” and overrides

Here is a quick reference to the defined overrides with simple examples. See the resources at the end of this cheatsheet for more advice and examples.
 

Learn X in Y Minutes

Take a whirlwind tour of your next favourite language. Community-driven!

Tools

 

Design. Prototype. Share. All in one app.

Go from idea to prototype faster with Adobe XD (free Beta), the first all-in-one cross-platform tool for designing and prototyping websites and mobile apps. // Sponsored
 

Bideo.js

These days most clients are asking for video in the background instead of imagery.... *sigh*. While it can be easy to whip up in theory, in practice it can be a pain.
 

AOS - Animate on scroll library

Another interactive feature that clients are asking about more often is some subtle movement of content when it appears within the viewport as you scroll. Another tough one to get right, but this works well.
 

Subform

Subform is a modern tool for digital product designers. It is a CAD inspired tool focussed on the UX/UI of design. If you liked the article about Better Grid UI Tools, it was written by the creator of this tool



 

 


 

         
Twitter Facebook Linkedin Pinterest Email
         

Budite prvi koji će ostaviti komentar.

Ostavite komentar Ostavite komentar

 

 

 

Veze, linkovi
Linkedin Twitter Facebook
 
     
 
© Sva prava pridržana, Kompjuter biblioteka, Beograd, Obalskih radnika 4a, Telefon: +381 11 252 0 272