Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I've set up 3 different breakpoints using bourbon and neat. I've followed some of the info in bitters to set up to variable to use in the media mixin. This makes it ridiculously easy to throw in breakpoints.
#include media($small-screen-up) {
.foo {property; value;}
}
Historically, I've set up breakpoints and basically contained all the appropriate styles within the breakpoints.
#media screen and (min-width: 40em) and (max-width: 53.75em) {
// all my medium screen rulesets here, yay!
.foo {
property: value;
}
}
#media screen and (min-width: 53.76em) and (max-width: 80em) {
// all my large screen rulesets here, yay!
.foo {
property: value;
}
}
With this mixin and variables set up for breakpoints, I found myself approaching it differently.
.foo {
property: value;
#include media($medium-screen-up) {
property: value;
}
#include media($large-screen-up) {
property: value;
}
}
So you can see that I'm working within one ruleset and tweaking styles within the ruleset depending on the target screen size.
This feels right, but it also feels dirty.
It seems right because I have all the rules no matter what the size contained in a single area. It feels easier to mentally track inheritance and specificity.
If feels dirty because it adds a ton of #media rules in the processed output. I would never actually write vanilla CSS that way.
Am I crazy? How do "professional" front-end devs approach this? (I'm a designer by trade). What are the best practices for managing breakpoints using bourbon, neat, and sass across complex (enterprise level) applications?
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 months ago.
Improve this question
I have been working on making my website mobile responsive with media queries. But it's very tiring to have to adjust every element when the width reduces by 50px. I have too many media queries and wish to shorten my code. what is the best way to use media queries? or is there a better alternative to build my responsive design with?
In my opinion, the best way to reponsive, is to use the property, attribute, units ... relative.
you can use box-sizing: border to avoid recaculating the width, height of content. You can use rem, percentage to change size of elements when you code #media screen.
Making the elements depend on each other and depends only on a few initial elements like font-size of html...will be increase responsiveness
you can follow some tutorial about Responsive Beginner JS Project
https://www.youtube.com/watch?v=FazgJVnrVuI&ab_channel=BrianDesign
https://www.youtube.com/watch?v=3-2Pj5hxwrw&ab_channel=BrianDesign
You can use CSS variables. Then within #media change the variables as follows.
:root{
--font: 12px;
}
.title{
font-size: calc(var(--font) + 10px);
}
.subtitle{
font-size: calc(var(--font) + 5px);
}
#media only screen and (max-width: 700px){
:root{
--font: 15px;
}
}
There is a w3schools documentation at https://www.w3schools.com/css/css3_variables.asp
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
this is my first post so excuse me if I'm doing anything wrong. My question is how should I layout my CSS files? Just curious to see if there's a "right way" CSS should be written. Thanks!
Understanding how browsers parse CSS and render websites is an important first step towards writing more efficient code.
There are four kinds of key selectors: ID, class, tag, and universal. It is that same order in how efficient they are.
#main-navigation { } /* ID (Fastest) */
body.home #page-wrap { } /* ID */
.main-navigation { } /* Class */
ul li a.current { } /* Class *
ul { } /* Tag */
ul li a { } /* Tag */
* { } /* Universal (Slowest) */
#content [title='home'] /* Universal */
You can refer below articles to write more efficient CSS
Efficiently rendering css
Writing efficient css selectors
You can indent your css. Or minimize it at the end of the project.
You can use plenty of websites that can help you to do it.
That's an example - CleanCSS
CSS should be laid out by specificity.
IDs are more specific than classes which are more specific than tags. Therefore you would want general tag styles at the top of your sheet and then classes and the IDs.
p { }
.p { }
#p { }
You can also, matter of preference, in large projects, separate CSS styles into different sheets to make it easier for other people to read through your code.
CSS is whitespace insensitive so it tabbing will not make the compilation change, but it is of course common practice to tab accordingly.
There are plenty of other rules that many programmers follow, but the majority of them are opinionated so it is up to you to adopt an efficient way to layout your CSS. Even the rules I have stated will not "break" your CSS if not used, but they tend to help cause less problems. Research this topic further and try and adopt a set of rules to follow and stay consistent with them.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I've never used media queries before and I'm really not sure if my code will work properly on all devices. Therefor I want to ask you to speak from your experience and knowledge and tell me what problems may appear on some special/any devices.
After some reading, I decided to go with as simple as I thought way and used simple rule:
#media (max-width:504px){
/* My style for mobile/ipad etc */
}
#media (min-width:505px){
/* My style for laptops/desktop etc */
}
IMO it is still better to write CSS for one of two display sizes, and then override the styles with media query. Fo ex. mobile-first approach:
#some-element { font-size: 2em; }
.container { color: red; }
.another-class { width: 100px; }
#media (min-width: 505px) {
#some-element { font-size: 1.5em; }
.container { color: blue; }
}
This way have two advantages:
You dont have to write the same code for two media queries, only overrides (you dont have to duplicate .another-class for media query).
Ancient browsers without media queries support will render site using styles that are not in media query.
Artur answer is correct, old browsers like IE7 don't support media queries, but media queries design is intended mostly for moderns browsers, so creating a fallback CSS isn't exactly required unless you want to, mostly because some CSS properties (hiding certain elements with display:none for example) won't work so your intended web design will lose purpose. Each web designer have their own way of writing CSS, but I prefer this method:
body, html{
width:100%;
margin:0;
/* Base CSS that will affect all resolutions */
}
#elements-up-to-320px{
/* CSS for elements up to first media query */
}
#media (min-width:320px){
/* CSS for elements from 320px and up until next media query */
}
#media (min-width:480px){
/* CSS for elements from 480px and up until next media query */
}
This way it's more understandable and last CSS media query will apply for higher screen sizes.
#media is good if you want to create a CSS-Gridsystem (for example) It takes a parameter with the min-width or more. So you have the possibility to set different CSS-Propeties for different Screen-Sizes.
Links:
SELFHTML
w3schools
Hope that helped you :)
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I want to reduce the the width by which col-md-offset-1 of bootstrap assigns margin-left at a certain place. I would prefer this to be done by using LESS.
You don't really need Less for this since the solution there would be exactly the same as in pure CSS. Just override the corresponding property:
#media (min-width: 992px) {
.col-md-offset-1 {
margin-left: 42%; /* <- your value here */
}
}
In Less you could modify the method Bootstrap generates all such offset classes (by overriding/cascading these mixin and variables) but that would be an overkill for that tiny change you actually need).
#seven-phases-max wrote:
You don't really need Less for this since the solution there would be
exactly the same as in pure CSS.
I don't agree with that. Bootstrap uses Less to help you code DRY (don't repeat yourself). When your start hard coding your changes, your changes will break in future when you change some of the framework parameters.
Changing the behaviour of the .col-md-offset-1 depends on the #screen-md-min variable which sets the min-width for the media query, see: http://getbootstrap.com/css/#grid-media-queries
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
So in my opinion your Less code should look like that shown beneath:
#import "bootstrap"
#media (min-width: #screen-md-min) {
.col-md-offset-1 {
margin-left: 42%; /* <- your value here */
}
}
Using the above you should notice that you can not recompile Bootstrap without running the autoprefixer, see: http://bassjobsen.weblogs.fm/compile-bootstrap-less-v2-autoprefix-plugin/
To keep you changes future proof you should also consider to make your modification only be applied for the situation where you need it (and do not change the properties of the predefined .col-md-offset-1 itself). For instance by using a unique parent of your grid;
html
<div id="maincontent"><div class="container"><class="row"><div class=".col-md-offset-1">
less
#import "bootstrap"
#media (min-width: #screen-md-min) {
#maincontent .col-md-offset-1 {
margin-left: 42%; /* <- your value here */
}
}
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I would like to know how you are handling Responsive design combined with SCSS in SASS. The main question is about media queries.
1) Are you writing media queries straight inside styled element using breakpoint mixin like this:
.element{
width:40%;
#media screen (min-width:700px){
width:100%;
}
#media screen (min-width:1000px){
width:50%;
}
}
// CSS
#media screen (min-width:700px){
.element{
width:100%;
}
}
#media screen (min-width:700px){
.element2{
width:50%;
}
}
2) Or are you writing them to special separate partial file? Like this for instance:
/* _responsive_wide_screen.scss */
#media screen (min-width:1000px){
.element{
width:50%;
display:inline-block;
}
.element2{
width:20%;
}
}
More faster to do is probably example number 1, but the problem is that the media query statement is generated for each element and the CSS file size is getting bigger and bigger. Should I avoid this approach?
I’m using example number 2 but sometimes is not so user friendly to switch between the files.
Thanks
My own preference is to use the first approach you showed. I like the benefits it provides in terms of localizing media queries to a specific element; I find it speeds up responsive workflow and encourages making adjustments where they are needed for the design/layout rather than just at specific breakpoints.
For large projects where it's worth the extra time, I then go through and consolidate media queries with identical min-width and max-width values. Having to do this secondary optimization is certainly a drawback of this approach -- I am hopeful that an upcoming release of Sass will automate this feature for us.