Hey guys…I’m sorry if I’ve asked this before but I’ve been missing in action for quite some time. My question is…can anyone point me to some good online resources that can give me some insight on how professional developers write code to detect a mobile device’s page request, and then determine its screen size so the data can be displayed in a presentable manner? I’m assuming this info is on the web somewhere…
More often these days developers building responsive HTML pages. There are a lot of frameworks to use but maybe one of the most famous is https://getbootstrap.com/ (take a look at the examples and resize your browser from wide to small or vica versa)
that’s a frontend topic, so just make some research on responsiv layout and css grids, e.g.
thank you so much guys! I will take a look. =)
CSS Flexbox can make responsive layouts as well as Grid. Research the two and decide which will be easier for you. You will need to define your own CSS classes, so there is a bit to learn. Alternatively, use Bootstrap, mentioned above. The thing with Bootstrap is that if you use the default styles, your pages will kind of look the same in terms of features as any other sites using it. I think it uses a JQuery module for any animated effects, but at least you won’t need to know how to code JQuery.
hey you guys,
I have downloaded the compiled version of CSS and JS here: https://getbootstrap.com/docs/4.4/getting-started/download/
however, it comes with 6 CSS files, called “css” and “css.min”. it also comes with 6 “.map” files. I really don’t have the time to research what all of this means. I simply made a PHP page and put the following code inside the header tag:
<link rel="stylesheet" href="https://www.site.com/test/includes/css/bs441/css/bootstrap.css">
what I noticed is that all of the classes of HTML tags were changed appropriately and the visual appeal was changed. what I’m trying to do here is make this as simple as possible, and considering the fact that AI in the corporate world is now enabling developers to write code simply by clicking buttons instead of pounding on the keyboard, isn’t there an easier way to use this bootstrap thing without actually writing source code anymore? I would assume AI’s sophistication at this point would enable me to click buttons and make responsive pages without knowing how to code anymore. isn’t this true guys? thanks.
Adam
The truth is always in the middle. There are tools that build the HTML and/or CSS for you and you can write or build anything yourself. The goal is to use the right tools for the job that needs to be done.
I like bootstrap for modern administrative tools like admin panels and other kind of business tools. But to create your own very beautiful layout with lot of colors and images where everything got to do with design i would recommend to look for another tool. I know that some designers like Sketch which is available for the Mac only… But the key is always to use the right tool for the right job.
That said, you can simply use the starters template from Bootstrap and you only need a few files which you could use from a CDN. Here is the starters template:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
The only thing that i mostly change is the jquery.slim version for the normal version because i like jQuery to use for AJAX calls too. Replace the JQuery include for the full version from the JQuery CDN when you like:
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
After including the Bootstrap CSS you could include your own CSS file to overwrite some Bootstrap rules. e.g.
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- My own CSS -->
<link rel="stylesheet" /css/main.css">
Things are getting different when you like to tweek Bootstrap widely. In that case you could take a look at Bootstraps customizer or you could download the Sass files.