CSS mobile-first vs desktop-first (1)

In this example below you will see how to do a CSS mobile-first vs desktop-first (1) with some HTML / CSS and Javascript

Simple css mobile first complexity code study. See how clean and easier is to understand the mobile-first version.

Thumbnail
This awesome code was written by lnfnunes, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright lnfnunes ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS mobile-first vs desktop-first (1)</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>

<meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="desk-first">
  <p>Desktop-first:</p>
  <section class="content">Content</section>
  <aside class="sidebar">Sidebar</aside>
</div>

<div class="mob-first">
  <p>Mobile-first:</p>
  <section class="content">Content</section>
  <aside class="sidebar">Sidebar</aside>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/lnfnunes/css-mobile-first-vs-desktop-first-1-BNazKy */
*, *:before, *:after {
  box-sizing: border-box;
  transition: all 1s ease-out;
}

p {
  text-indent: 1em;
  font-weight: bold;
  border-bottom: 1px dashed #aaa;
}

.mob-first {
  margin-top: 2em;
}

.content {
  background-color: red;
}

.sidebar {
  background-color: orange;
}

.desk-first .content {
  float: left;
  width: 70%;
}
@media (max-width: 640px) {
  .desk-first .content {
    width: 100%;
    float: none;
  }
}

@media (min-width: 641px) {
  .mob-first .content {
    float: left;
    width: 70%;
  }
}

Comments