Results 1 to 10 of 10

Thread: CSS for responsive website

  1. #1
    Join Date
    Mar 2019
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CSS for responsive website

    Hello,
    I am designing a new web page. I have always used one css file for the computer version and another one for the mobile version. The fact is that this time I want to create a web 100% responsive, so that it is able to adapt to different screens without having to change files.
    For this I have implemented layers with minimum size and maximum size 100% of the screen, but in some layers I need to have a fixed size depending on the size of the screen. Do you know if there is a directive with which you can put a fixed size in front of the size of the screen?

    Thank you in advance.

  2. #2
    Join Date
    Jan 2009
    Location
    NH
    Posts
    667
    Thanks
    97
    Thanked 26 Times in 26 Posts

    Default

    have you tried using Bootstrap? https://getbootstrap.com/

  3. #3
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,258
    Thanks
    1
    Thanked 237 Times in 232 Posts

    Default


    Quote Originally Posted by mlegg View Post
    have you tried using Bootstrap?
    Let's hope not.


    Why Bootstrap Is Bad

    1. Bootstrap encourages the use of classes in a presentational manner,
      which defeats the reason for keeping HTML and CSS separate.

    2. Bootstrap encourages the use of endless pointless redundant classes
      with pointless divs, resulting in two to three times the HTML as one
      would have without it, only further compounded by one having to write
      as much CSS as one would have without the framework. If it saves one
      anything in CSS, it only does so by making one write sufficiently more
      HTML that it's awash. It's a step sideways on work and a step backwards
      on methodology.

    3. Since it's use results in presentational classes and excessive div and
      span elements, it is basically putting presentation in the markup where it
      has absolutely no business. HTML and CSS are separate so one can
      have multiple appearances, slapping a class in for each of those
      possibilities is really nonsensical.

    4. The way Bootstrap works is as flawed as the new, allegedly structural,
      tags from HTML 5. It undoes nearly twenty years of progress to the point
      where one might as well go back to writing HTML 3.2 and pretending that
      CSS never even existed. It can only make one's work harder.

    5. The HTML should say what things are, not how one wants them to look
      like. By using classes to say what things are going to look like, one
      violates that most basic rule of what HTML is actually for. That's why
      OOCSS and the the frameworks based on that notion are utter rubbish.

    6. If it looks simpler, one falls into the trap of false simplicity. It is as much if
      not more work, resulting in one writing as much if not more code, not
      counting the massive size of the framework against it. The only way it
      could 'be simpler' or 'easier' or 'faster' is if one doesn't know enough
      about HTML or CSS to to make a rational choice about using a framework.

    coothead
    ~ the original bald headed old fart ~

  4. The Following User Says Thank You to coothead For This Useful Post:

    mlegg (03-01-2019)

  5. #4
    Join Date
    Dec 2018
    Location
    Texas
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    The GOOD
    Bootstrap was very good to us over the years. We became more efficient and put our projects out faster. The framework also thought us how to be better developers. I know a lot of people out there say that there are bad practices in the core of Bootstrap – the naming is not always semantic, and you can end up with a DOM crammed full of classes. But it does handle modularity very well and I personally grew as a frontend developer through it. By analyzing the internals of Bootstrap I picked up the good stuff it does and started to apply it to my own code. Because of this, with time I have learned to write extremely re-usable CSS code that is easy to maintain.


    The BAD
    What bugged me with Bootstrap is it’s heaviness and how I started using less of it’s features over the years. When I was starting out as a web developer like many others I didn’t regard performance. I thought – well its the year 20-something, Internet connections are pretty fast, what difference does 100kb here or there make? Oh how wrong was I! Over the years I learned every kilobyte counts and today I’m obsessed with making everything as lean as possible.

  6. #5
    Join Date
    Mar 2019
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I haven't tried Bootstrap... I am going to valorate it, because I do not know how difficult it is to integrate it into a project. Is possible integrate Bootstrap in any CMS?

  7. #6
    Join Date
    Sep 2012
    Posts
    19
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    It's a pity your reply did not offer the OP a better alternative

  8. #7
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,258
    Thanks
    1
    Thanked 237 Times in 232 Posts

    Default


    Quote Originally Posted by wkennyspain View Post
    It's a pity your reply did not offer the OP a better alternative
    Responsive web pages should be coded using em and % instead of px units.

    CSS modifications for various screen widths are simply handled with @media queries.

    This is not rocket science, it is a basic coding skill for a webpage developer.

    Here is an example...

    Code:
    
    <!DOCTYPE html>
    <html  lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
    
    <title>untitled document</title>
    <!--<link rel="stylesheet" href="screen.css" media="screen">-->
    <style media="screen">
    body {
        background-color:#f0f0f0;
        font: 1em/1.62em verdana, arial, helvetica, sans-serif;
     }
    #gallery {
        padding: 0.625em;
        margin: 0;
        border: 0.06em solid #999;
        border-radius: 1em; 
        background-color: #fed;
        overflow: hidden;
        list-style-type: none;
     }
    #gallery li {
        float: left;
        width: 24%; /* 4 columns ~ 100%/4 - 1% margin value */
        margin: 0.5%;
        padding: 0.625em;
        border: 0.06em solid #999;
        border-radius: 0.75em;
        box-sizing: border-box;
        background-color: #fff;
        box-shadow: 0.375em 0.375em 0.375em #999;
        overflow: hidden;
     }
    #gallery img {
        display: block; 
        width: 100%;
        height: auto;
        border: 0.06em solid #000;
        border-radius: 0.625em;
        box-sizing: border-box;
     }
    #gallery span {
        display: block;
        margin-top: 0.625em;
        border: 0.0625em solid #000;
        border-radius: 0.625em;
        background-color: #ccc;
        line-height: 2;
        text-align: center;
     }
    @media screen and (max-width: 63.75em) {
    #gallery li {
        width: 32.333%; /* 3 columns ~ 100%/3 - 1% margin value */
      }
     }
    @media screen and (max-width: 42.5em) {
    #gallery li {
        width: 49%; /* 2 columns ~ 100%/2 - 1% margin value */
      }
     }
    @media screen and (max-width: 21.25em) {
    #gallery li {
        width: 99%; /* 1 columns ~ 100%/1 - 1% margin value */
      }
     }
    </style>
    
    </head>
    <body>
    
    <ul id="gallery">
     <li><img src="http://lorempixel.com/g/300/486/people/7" width="300" height="486" alt=""><span>description</span></li>
     <li><img src="http://lorempixel.com/g/300/486/people/6" width="300" height="486" alt=""><span>description</span></li>
     <li><img src="http://lorempixel.com/g/300/486/people/5" width="300" height="486" alt=""><span>description</span></li>
     <li><img src="http://lorempixel.com/g/300/486/people/9" width="300" height="486" alt=""><span>description</span></li>
     <li><img src="https://via.placeholder.com/300x486" width="300" height="486" alt=""><span>description</span></li>
     <li><img src="https://via.placeholder.com/300x486" width="300" height="486" alt=""><span>description</span></li>
     <li><img src="https://via.placeholder.com/300x486" width="300" height="486" alt=""><span>description</span></li>
     <li><img src="https://via.placeholder.com/300x486" width="300" height="486" alt=""><span>description</span></li>
     <li><img src="https://via.placeholder.com/300x486" width="300" height="486" alt=""><span>description</span></li>
     <li><img src="https://via.placeholder.com/300x486" width="300" height="486" alt=""><span>description</span></li>
     <li><img src="https://via.placeholder.com/300x486" width="300" height="486" alt=""><span>description</span></li>
     <li><img src="https://via.placeholder.com/300x486" width="300" height="486" alt=""><span>description</span></li>
    </ul>
    
    </body>
    </html>

    coothead
    ~ the original bald headed old fart ~

  9. #8
    Join Date
    Mar 2019
    Location
    Birmingham, United Kingdom
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Bootstrap isn't bad, I think it is great and I always use it to make websites responsive and It works well!

  10. #9
    Join Date
    Mar 2019
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you for the example coothead, is going to help me very much... I have been studied about it and is not difficult, but is necessary experience to not spend lot time to do it
    Thank you again

  11. #10
    Join Date
    Mar 2019
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    What advantages of Bootstrap?

Similar Threads

  1. Website Design (Website Layout)
    By mada9369 in forum General Paid Work Requests
    Replies: 5
    Last Post: 01-28-2019, 06:04 AM
  2. Replies: 6
    Last Post: 05-25-2016, 11:58 AM
  3. Replies: 4
    Last Post: 08-12-2015, 02:11 AM
  4. I am web designer looking for Good Information on Mobile Responsive WordPress Website
    By vedinter in forum Looking for such a script or service
    Replies: 1
    Last Post: 12-17-2012, 12:47 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •