hariskar Posted November 12, 2016 Share Posted November 12, 2016 (edited) My css is follows Desktop-first design. Should I convert it to Mobile-first? Would there be any advantages? Would it be smaller? Is there a procedure to find the css parts used from mobile now, keep them and add as media query the desktop parts? Thank you! Here is my css: *{box-sizing:border-box} html{overflow-y:scroll;position:relative;height:100%} header.top{height:92px;width:100%;margin:auto;background-color:#1a3365;border-bottom:2px solid #6e98c2} header>.container{overflow:visible;white-space:nowrap} #nav a{color:#d2dce6;display:block;padding:3px 4px;font-weight:bold} #nav li{margin-left:8px;border:2px solid #6e98c2;border-radius:5px;float:left} #nav li:hover,#nav li:active,#nav li.selected{background-color:#101f3d;border:2px solid #4b80b4} #l1{color:#f2f2f2;font-size:19px} #l2{color:#d2dce6;font-size:14px} #logoArea{display:inline-block;float:none;vertical-align:top;font-weight:bold;font-family:Arial} #logoArea>a{white-space:normal} #logoArea>a div{margin-left:12px} #nav{list-style:outside none none;overflow:hidden;margin:0;padding:0} #navArea{display:inline-block;margin:50px 0 0;position:relative;white-space:nowrap} .container{width:81%;margin:0 auto;max-width:1000px} aside{height:100%;margin:12px 0 15px 0} h1{color:#4a6b98;font-size:21px} h2{font-size:19px} #block1{height:auto;margin-top:14px} #block1 ul{height:auto;padding:0;margin:0} #block1 li{list-style:none;padding:6px;text-align:left;margin:0 6px;border-bottom:1px solid #d9d9d9} #block1 a{display:block;font-weight:bold} #block1 a:hover,#block1 a.selected{color:#262626} #block1 li:first-child{border-top:1px solid #d9d9d9} #block2,#block3{height:auto;background-color:#ecf1f8;border-top:1px solid #fff;box-shadow:1px 1px 3px rgba(0,0,0,0.2);border-radius:5px;padding:10px;margin-top:20px} #block2 h2,#block3 h2{margin:0;font-size:18px} #block2 p,#block3 p,#block2 form{font-size:13px} body{height:100%;background:#fff;margin:0;padding:0;font-family:"Trebuchet MS",Helvetica,Arial;font-size:15px;color:#404040;line-height:1.5} body a{text-decoration:none;color:#4a6b98} footer.col-12{position:relative;bottom:auto;overflow:hidden;min-height:100px;padding-top:0;padding-bottom:0;margin-top:-100px;background-color:#dae4f1;border-top:#6e98c2 2px solid} footer p{font-size:12px;margin:0;line-height:1.43} #iso{float:left;margin-right:5px} #p1,#c{color:#1a3365} #p2{color:#dae4f1} ul.topnav li.icon{display:none} .row::after{content:"";clear:both;display:block} [class*="col-"]{float:left;padding:15px} #wrapper{min-height:100%} aside:after,#content:after{content:"";display:block;padding-bottom:100px} @media screen and (min-width:1001px){#content{margin:26px 0 15px} .col-2{width:16.6667%} .col-3{width:25%} .col-4{width:33.3333%} .col-9{width:75%} .col-12{width:100%} } @media screen and (max-width:1000px){aside:after{padding-bottom:15px} #content h1:first-child{margin:0 auto;display:block} ul.topnav li:not(:first-child){display:none} ul.topnav li.icon{float:right;display:inline-block} #logoArea{display:block;text-align:center} header.top{height:auto} #navArea{display:block;height:30px;margin:1em 15px} [class*="col-"]{width:100%} #nav li{float:none;margin:0;background-color:#1a3365} #nav{position:absolute;left:0;right:0} ul.topnav li.icon{display:inline-block;position:absolute;right:0;top:0} #nav a{font-size:16px} #content{margin-top:0} aside{margin-bottom:0} .container{width:auto} ul.topnav.responsive{position:relative} ul.topnav.responsive li.icon{position:absolute;right:0;top:0} ul.topnav.responsive li{float:none;display:block;margin:0} ul.topnav.responsive li a{display:block;text-align:left} #nav.topnav.responsive>li:not(:first-child):not(:last-child){margin-top:-2px}} Edited November 12, 2016 by hariskar Link to comment Share on other sites More sharing options...
ahmad-q Posted November 12, 2016 Share Posted November 12, 2016 I recommend you read this book: " Mobile First" by Luke Wroblewski. There are many benefits for thinking adopting mobile first approach. First, it tell you which contents are important and which are not. Basically, when we design for mobile we only focus on the important things. So, you can scale your content based on the importance. It also logical: start from small to big: smart phone then tablet then desktop" not from desktop to small. 1 Link to comment Share on other sites More sharing options...
Ingolme Posted November 12, 2016 Share Posted November 12, 2016 Mobile first is the preferred approach these days, but it would be good to list the actual reasons rather than just blindly following the crowd. It is also not logical to start from small to big, it is merely conventional. Logic only works if you start off with premises that are true. From my experience, both mobile first and desktop first approaches get you to the same destination with very little difference. 1 Link to comment Share on other sites More sharing options...
dsonesuk Posted November 12, 2016 Share Posted November 12, 2016 If you start from desktop you would setup float: to place element adjacent to each other, then smaller devices you would use float: none; two styling's set for same element Whereas starting from mobile no float required as default give required result, desktop float: left required, one styling required. 1 Link to comment Share on other sites More sharing options...
hariskar Posted November 13, 2016 Author Share Posted November 13, 2016 I finished the mobile part and started the desktop part. My css is small, it seems that my only gain will be the elimination of 2-3 float:none. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now