I've been recently learning about Responsive Design more in detail.
I have used Bootstrap and continue to use it but I came to a point that I'm wondering Pros/Cons and effect on HTML cleanliness and readability (and whether it impacts performance)
Here is what I came to question but haven't found an answer.
With bootstrap, it seems that I need to declare the same section of HTML multiple times, so that I can apply the respective StyleSheets for the media screen size.
<section class="col-md-8">... more html ...</section>
<section class="col-sm-8">... same HTML above or slightly modified ...</section>
<section class="col-xs-12">... similar idea to sm-8 ... </section>
Whereas with straight Media Queries I could have
<section class="my-section> ... some html ... </section>
And then the media queries
#media screen and (max-width: 825px)
section.my-section { ...adjustment... }
#media screen and (max-width: 760px)
section.my-section { ...adjustment... }
#media screen and (max-width: 625px)
section.my-section { ...adjustment... }
These media screen could be separated into respective separate files to keep the code cleaner and more self-contained
So, Given that writing our own media queries require more time and effort, in your experience, what is a better choice, or under which circumstances? (say, small projects vs very large projects with multiple people working on it)
Or are there better practices for Bootstrap that make it better to avoid this HTML duplicated/triplicated/etc html code.
Does the HTML code duplication have an impact on performance, considering that sometimes very large data can be presented. (say using a framework like Angular to iterate and render a list of elements, and thus will have to create the elements for each of the media screen sections declared using bootstrap)
Thank you for your time.
With bootstrap you call all the classes on the same element to give it responsiveness, not create separate divs for each:
<section class="col-md-8 col-sm-8 col-xs-12">
YOUR CONTENT HERE
</section>
Try not to duplicate your html content, though sometimes you just have to when there's no other way.
Related
I ran into a problem at working with Shopware today. I want to restrict the usage of certain CSS files (mobile css and desktop css).
Problem is: both files are being used and it seems to not letting me restrict the files to the viewports. What did I do wrong?
Would be great if you could help me out here, since Ive just started in LESS templating. Cheers!
{extends file='parent:frontend/index/header.tpl'}
#phoneLandscapeViewportWidth: 30em;
#tabletViewportWidth: 48em;
#tabletLandscapeViewportWidth: 64em;
#desktopViewportWidth: 78.75em;
when (#media screen and (min-width: #tabletLandscapeViewportWidth)=true) {
{block name="frontend_index_header_css_screen" append}
<link type="text/css" media="screen, projection" rel="stylesheet" href="{link file='frontend/_public/src/css/custom.css'}" />
{/block}
}
#media screen and (max-width: #tabletLandscapeViewportWidth) {
{block name="frontend_index_header_css_screen" append}
<link type="text/css" media="screen, projection" rel="stylesheet" href="{link file='frontend/_public/src/css/mobile.css'}" />
{/block}
}
First of all: As the comments already state out, you're mixing up different languages.
By now - from your example - you're dealing with three things, that cannot be combined in that way as you try it:
LESS: This is a preprocessor language that - at least in a Shopware 5 context is meant to be compiled and generates your CSS
files (there is a way of including LESS files directly, but this is not recommended for production, so I'd leave this part out).
CSS: Your stylesheets that are rendered. If you statically include them into your template (I mean if you're not using Javascript to dynamically change your DOM) you WILL have to decide whether you use one or another CSS-File before you render the DOM.
This brings us to the next CSS related-topic:
Media Queries: The concept of media queries is not meant to dynamically change the DOM (i.e. clearing out one CSS-Stylesheet and bringing in another).
Imagine the following case: You sit at your Desktop-PC and slowly drag the window of your browser smaller and smaller until your viewport-width is smaller than 64em (#tabletLandscapeViewportWidth). What is the media-query supposed to do? Request the server to load another resource?
Remember: Media Queries are CSS and CSS is all about style of your Website. In a normal case it is served once when the page loads and the rest of the magic happens in your client. There is no further communication with the server (and this is what you'd try to do, i guess).
Smarty (.tpl): The third part you mix up here is the .tpl files, and these come from the Smarty-Template-Engine. So we have to be clear here: Smarty renders your template. This happens server-side before the page is delivered to the requesting client.
That means you can decide to load one or the other css at this point (but not by media-queries, I'll come back to that later) but once the page is delivered to the client, Smarty's work is over and it will do nothing without another server-request (i.e. by an AJAX-call).
I must confess that I am not absolutely understanding what exactly you want to achieve. If you only some CSS definitions to a certian viewport width, you don't need to go into the template at all.
Let's assume you only want your styles that are in the custom.css apply when the viewport is larger than #tabletViewportWidth and everything below should serve mobile.css.
Since you can nest media-queries in CSS3 it shouldn't be a problem to wrap the whole less file into a media-query like that:
#media screen and (min-width: #tabletLandscapeViewportWidth) {
// all your custom.css content
}
#media screen and (max-width: #tabletLandscapeViewportWidth) {
// all your mobile.css content
}
But please keep in mind that this excludes all other media-types, so you maybe should go with #media all.
If you really want to change the stylesheets dynamically you should go with a library like Modernizr and make an AJAX-Request that dynamically changes the stylesheet, but imho this is kind of an ugly solution that only makes (no real, but with a bit of fantasy a little bit) sense if no stylesheet is loaded (or a base-stylesheet with styles, that both .css-files share) and the call is made to request a smaller CSS-File.
But if the production-css-file is minified this shouldn't be worth the effort.
As you can see, in the offered solution we are not even touching a smarty-tpl-file. But i want to mention a little thing if you work with smarty:
You're extending a file here, therefore every junk of code needs to be inside of the {block}-tags you're extending. Smarty doesn't know where to put the code otherwise and will throw an error (even though, as explained LESS-Code won't work anyways here ;) ).
regards
I'm using the tablesaw script to fit tables to smaller screens.
My developer inserted the relevant CSS inside the head tag, this way:
<link rel="stylesheet" type="text/css" href="/tablesaw.css" media="screen and (max-width: 767px)">
The problem is that it is hurting my Google Page-Speed Score for mobile devices, since this is a render blocking element, that comes in addition to my general CSS file.
Therefore, I figure I can just take the whole Tablesaw CSS block, and insert it inside the general CSS file, right at the end of it, But I will need to wrap it like this:
#media screen and (max-width: 767px){[General TableSaw Content][by #media-type Table Saw Content]}
And this indeed increased my page speed score.
So is this a better practice?
Any disadvantages over the method I'm currently using (loading the additional CSS in the head section)?
I am asking this question here to get some information and ideas from the professionals. My question is I just start to learn Bootstrap 3.1 for my front end developments. So I have followed some basic tutorials regarding to the subject. With that tutorials, I found that the look and feels of every page layout have same structure and design. So I am afraid, Can we design advance and very different layout using Bootstrap 3.1?
Here I have attached a navigation bar. Someone can tell me, is it possible to design like this navigation bar using bootstrap 3.1?
I am not asking to someone to code this, just I ask this to make a strong sense about bootstrap 3.1.
hope someone pointed me out to the right direction.
Thank you.
Yes, it is easy to override any bootstrap styles you want.
It is designed to be usable out of the box, but also to provide good base styles in a logical way to be over ridden. The designers did not want to force you to use their styles.
If you use SASS or LESS, it will be easy. If you use the finished compiled CSS, it will be VERY tedious to edit.
I've built several apps entirely from Bootstrap 3, and most do not look like 'bootstrap' but use a ton of their base styles.
Simple answer, Yes you can. I don't think its that complicated to do. You can checkout the Grid system here in Bootstrap that meets your dimensions, it it doesn't meet then you always have your own custom grid made.
Hence you will have to do Media queries condition in your style-sheet on how will the site works on other devices.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
According to bootstrap-responsive.css file,the media query #media (max-width: 767px) is repeated meaning it occurs twice in the file.Why is it repeated?.
You can see the file here http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css
Hmmm, I certainly can't claim to understand what the developers intended when they wrote the CSS, but here's what I think...
I believe the repetition of media queries is just to provide greater modularization of the CSS file. Note that both #media (max-width: 767px) and #media (min-width: 768px) and (max-width: 979px) are actually present twice in the file, so it's not likely an anomaly.
The first declarations of these media queries appear to deal with classes that are added to elements to hide/show them at certain browser widths, so in effect selectively on different devices (specifying the display property). The second declarations seem to deal with the various classes that are foundational to Twitter Bootstrap's design principles, specifying styles (width, margin, min-height, etc.) of the various classes used in the 12-column grid system.
Classes of the first set can be applied at the whim of the developer, to hide/show certain elements when the page is viewed on various devices. Classes of the second set are applied a bit more rigidly than the first set, since they are a more defining characteristic of the framework's grid system (eg. You can give an element classes of both hidden-phone and visible-tablet from the first set and see the effects of both, but giving an element classes of span12 and span6 will cause only the last-given class to take effect).
It is because the first set of classes differs significantly in application from the second set of classes that the media queries declarations are declared twice, one for each set.
In Scalable and Modular Architecture for CSS (2012), Jonathan Snook comments on this concept of modularization, stating,
Yes, this does mean that the media query declaration may (and likely
will) get declared multiple times but it also allows for all
information about a module to be kept together.
(I apologize if I used the wrong terms when referring to styles/CSS/HTML! I'm still learning...)
I have a CSS style sheet utilising Media Queries. My homepage is just a background image 100% x 100% on to which I want to position a centered iframe, which will have a source based on the media query result.
EG:
CSS
#media all and (max-width: 500px) and (min-width: 400px), (min-width: 1151px)
.frame1{
position:absolute;
width:390px;
left:50%;
margin-left:-195px;
}
HTML
<iframe class="frame1"></iframe>
So the width range is 400px to 500px and for any screen in this range the content will be in a centered iframe, with wider screen having a greater margin of background image visible. Now where my problem lays is I want the iframe source to change depending on screen size so I could have the source as mobile.htm (showing a very basic version of website) on small screens, standard.htm (a mid grade version) on average screens and large.htm (additional content included) on large screens.
However I can't get anything I have thought to do this. I assume to be determined by the media query it must be an attribute of the iframe listed in the CSS? I have tried every combination of:
frame src: __.htm;
iframe src: _.htm;
frame src: url(___.htm);
iframe src: url(___.htm);
frame src: url ("__.htm");
etc.
*The underscores being the page name.
But so far nothing works.
Does anyone know if this is possible? If so how? And please be gentle with explanations I am very new to this, trying to self-teach as I go along and learning bits and pieces as I need them to achieve what I want... been going well so far, but has had me stumped for days now!
You can match based on attribute but you can't set attributes using CSS only1
However, you could use a small snippet of JavaScript to detect the result of your media query (albeit indirectly):
use the media query to apply a property value to the IFRAME
select element(s) with that property value using JavaScript (jQuery selectors will work for this, although some iteration may be involved)
update src accordingly
However, there really isn't a direct correlation between media queries and JavaScript. From an article on pairing media queries with JS:
As far as I know there is no direct access to media queries from
JavaScript. You can’t read out whether the example media query above
has fired or not.
The Full Article suggests some script-based workarounds to return results from script which are consistent with the results of the media query.
1 - At least not in a standards-based fashion which is widely supported. There are hacks to execute code inside CSS using IE proprietary expressions (all of which are now deprecated).