Are there known issues with Web Essentials and Bootstrap mix-ins? I am getting incorrect CSS (repeatable -- see my code below).
I am working with the bootstrap.less package and using Web Essentials to compile the less file to css. (VS 2013 + Update 1/Latest web essentials)
So, if I create a simple page like so, everything works:
that is, the 2 divs stack horizontally, until my browser window gets too small, then they stack vertically.
<div class="container">
<!-- this row uses no LESS-->
<div class="row">
<div class="col-sm-12 col-md-6">
<span>Div1</span>
</div>
<div class="col-sm-12 col-md-6">
<span>Div2</span>
</div>
</div>
</div>
Now, if I create this little block of LESS
#import (reference) 'bootstrap/bootstrap.less';
.div-container {
.make-md-column(6);
.make-sm-column(12);
}
And then change my code like this:
<div class="container">
<!-- this row uses the bootstap LESS mixin (css compiled with Web Essentials)-->
<div class="row">
<div class="div-container">
<span>Div1</span>
</div>
<div class="div-container">
<span>Div2</span>
</div>
</div>
</div>
It stops working -- specifically, the divs stack vertically, even on a medium or large width.
Now, I think that the LESS that I put in is exactly equivalent to the bare classes that I was using in my first snippet.
I think that the problem is that WebEssentials/Visual Studio is not compiling the LESS correctly.
I believe that is the problem, becuase if I look at the generated css, there are no media queries in it, but the bootstrap mixin file (mixins.less to be specific) specifies a media query for hte .make-xx-col mixins.
I'm probably not the first person to hit this, so I must just be doing something wrong. Is there a workaround? Have I mis-configured something? Is there some other LESS compilation solution that I should use instead of Web Essentials?
Reorder the mixins so the compiled css output doesn't override the selectors with larger min widths.
Less:
.div-container {
.make-sm-column(12);
.make-md-column(6);
}
CSS:
.div-container {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
#media (min-width: 768px) {
.div-container {
float: left;
width: 100%;
}
}
#media (min-width: 992px) {
.div-container {
float: left;
width: 50%;
}
}
#import (reference) 'bootstrap/bootstrap.less';
.div-container {
.make-md-column(6);
.make-sm-column(12);
}
I think this is a simple file import problem..Try Using
#import '../../../bootstrap/bootstrap.less';
Or Modify your code using '../../../' ..
This is an impotent thing...
Note :-
If you are using Web Essential ..Then you should import the files like this.Otherwise the .Less to .CSS conversion will not work..
#import "../../../content/bootstrap/variables.less";
#import "../../../content/bootstrap/mixins.less";
#import "../../../content/bootstrap/utilities.less";
Related
I have the follow html in Angular2.
<div class="col-xs-12 col-lg-8" >
<p style="font-size: 30px">
{{ teacher.personalInfo.name }}<br/>{{ teacher.personalInfo.surname }}
</p>
</div>
In my view, the text is aligned at the left (as I wanted). How can I say that when is for col-xs-12 it has to be centred?
Thank you.
The best approach for this would be to create a specific class for you container and only use media queries to modify the text position on mobile.
Here's the general idea following the BEM CSS naming convention:
<style type="text/css">
.thing {
... some styles
}
.thing__title {
text-align: center;
}
// tablets start at 768px width
#media (max-width: 767px) {
.thing {
... some mobile styles
}
.thing__title {
text-align: left;
}
}
</style>
<div class="thing col-xs-12 col-lg-8">
<p class="thing__title">... some text</p>
</div>
No need to increase the loading time of your site by adding jQuery to add styles to an element.
Bad idea to target modifier classes from component libraries. Especially your grid as you might removing that or the class name could be deprecated in later versions leaving your site vulnerable.
Can you use jquery?
$('.col-xs-12').css('text-align','center');
There is a good explanation of Bootstrap 3 and 4 Media Queries here at Bootstrap 3 breakpoints and media queries.
Bootstrap provides a great deal of flexibility to your project, but from minute details such as text justification between breakpoints, you will need to add a media query to your own CSS and apply the styles as desired.
So you might try something like this:
<div class="teacher-info col-xs-12 col-lg-8" >
<p class="ta-xs-left" style="font-size: 30px">
{{ teacher.personalInfo.name }}<br/>{{ teacher.personalInfo.surname }}
</p>
</div>
<style>
// Default to center the paragraph to center
.teacher-info p {
text-align:center;
}
// Large devices (desktops, 992px and up)
#media (min-width: 992px) {
// When the screen is larger than a tablet, left align the text
.ta-xs-left {
text-align:left;
}
}
</style>
Edit
In line with martinsoender's answer, I agree you shouldn't target modifier classes, and should add your own classes. This edit is to show how I would do that.
Essentially, I would add a class to the parent to denote what holds (teacher-info), then give the element I want to modify a class. In this case I create a class that looks similar to a bootstrap class. ta-xs-left ({text-align}-{Xtra-Small}-{Alignment}), then it can be reused wherever you need it.
I am a web front-end developer (newbie).
Hypothetically, if I am writing code for a web page using Twitter Bootstrap and want a responsive sidebar, I can do something like this:
<div class="col-xs-12 col-md-3">...</div>
Let's say, in the interest of separation of concerns, I would like the design people to decide how many columns wide the sidebar should be on each screen width.
Wouldn't it be better to do something like this:
<div class="sidebar">...</div>
and have the designer do something like this:
sidebar = col-xs-12 col-md-3
somewhere in the CSS?
Is this possible? Are there tools that will allow this? Am I way off base?
This is possible, with some help from a CSS preprocessor like the following:
Sass
.sidebar {
#extends .col-xs-12;
#extends .col-md-3;
}
Less
.sidebar {
&:extend(.col-xs-12);
&:extend(.col-md-3);
}
Hope this helps!
You should use a preprocesor to compile your CSS, and create semantic class from unit classes.
For example in Sass:
.sidebar {
#extends .col-xs-12;
#extends .col-md-3;
}
You can download Bootstrap in Sass on the offical website.
You can read the article "Using Sass To Semantically #extend Bootstrap", it can help you achieve what you want.
You propose instead of determining it in the html with a class on div like this:
<div class="col-xs-12 col-md-3">...</div>
determine it in the css with something like this:
.sidebar {
width: 100%;
#media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
width: 50%;
}
#media (min-width: $screen-md-min) {
width: 33%;
}
}
In any case you have to edit something: either html file or css file. Consider your project, to know which one is easier.
I would suggest to put columns into the html (it would be kind of default case)
<div class="sidebar col-xs-12 col-md-3">...</div>
and then, if needed, override it for specific pages in css with something like this:
.page-order .sidebar {
width: 33%;
}
I am wondering please what is the best way to move an element from one div to another in responsive design?
I have the current setup in my page:
<div class="container">
<div class="desktop"><h2>Hello I show on desktop</h2></div>
<div class="mobile"><h2>Hello I show on mobile</h2></div>
</div>
And then the relevant CSS media queries to either display the mobile or desk top version and it works...but is it the right way?
Try to design the page for mobile. Then add the stuff that's required for desktop. Share as much as possible and try not to duplicate content on the same page.
<div class="container">
<h2>Hello world!</h2>
<div class="desktop">
this is an extended block only visible on desktop
</div>
<p>
this text is visible from both
</p>
</div>
You can also try bootstrap http://getbootstrap.com - it does a lot - including dynamic resizing of images and columns. It's really worth trying - might save you a whole bunch of work.
There is no right or wrong way but the way you are doing it is perfectly suitable.
.desktop{
display:block;
}
.mobile{
display:none;
}
#media all and (max-width:400px){
.desktop{
display:none;
}
.mobile{
display:block;
}
}
Personally I only use one div and make it responsive.
.desktop{
width:100%;
font-size:1em;
}
#media all and (max-width:400px){
.desktop{
font-size: 0.7em;
}
}
Yes, you are doing it right. Use media queries for the two different classes like below.
.mobile,
.desktop {
display: block;
}
#media (max-width: 768px) {
.desktop {
display: none;
}
}
#media (min-width: 768px) {
.mobile {
display: none;
}
}
<div class="container">
<div class="desktop">
<h2>Hello I show on desktop</h2>
</div>
<div class="mobile">
<h2>Hello I show on mobile</h2>
</div>
</div>
I'm trying to apply Bootstrap to a specific div. To do this, I'm importing the Boostrap LESS files as follows:
.bootstrap_wrap {
#import 'bootstrap/bootstrap.less';
#import 'bootstrap/responsive.less';
}
However, doing so seems to break media queries.
Is there any way to selectively apply Boostrap without breaking media queries within the Boostrap CSS?
It's not clear to me if you are compiling this or using less.js
I'm able to compile it without errors (using Codekit), and the results look good, just make sure the paths are correct.
If I create a new bootstrap_wrap.less file with
.bootstrap_wrap {
#import 'bootstrap.less';
#import 'responsive.less';
}
and place it in the same directory as the other bootstrap less files, then compile it this is the result:
bootstrap_wrap.css
The results look promising to me, for example I see:
#media (max-width: 767px) {
.bootstrap_wrap #footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}
Good luck!
I have researched SASS and Blueprint seperately, and think I understand how they work, and I have set up my project directory using the compass CLI tool, but I am at a loss as to the correct way to organize my project.
After initializing my project with
$ compass create my_project --using blueprint/semantic
...I was told to link the generated CSS files in my HTML with these lines
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
...but where should I put my own application-specific .scssfiles and how should I include the appropriate blueprint files?
It seems to me that I should not be including the generated print.css and screen.css directly into my HTML but instead doing something like:
#import "screen";
body {
#include container;
}
...and then using only the file generated from the above in my HTML. Otherwise why would we have a line like this in screen.scss?:
// Import all the default blueprint modules so that we can access their mixins.
#import "blueprint";
I can't use mixins in my HTML.
I'm finding the docs to be very vague and contradictory, and any sort of short example illustrating the combination of:
HTML
SCSS files generated from compass command above
SCSS files containing site-specific styling
would be very helpful for me and probably others.
The "screen.scss" and "print.scss" files are nothing magical. These are just example filenames given to the output which you can link from your HTML, but you don't have to: just delete them and create your own files if you prefer, or add your own styles to them. The intent with these 2 files is to keep the style concerns organized separately: you could add a "mobile.scss" and then link all these in your HTML, or import them together into one master file under #media blocks.
I can't use mixins in my HTML.
Mixins don't apply to your HTML. They are a helpful technique used for writing your SCSS source code: the compiled CSS output or the HTML doesn't know anything about them. You should be using mixins to take advantage of Sass.
I have researched SASS and Blueprint seperately
It's important to understand what the Blueprint classes do first, but when you use Compass there are different approaches for how you apply frameworks like Blueprint:
1. Use Blueprint's original non-semantic class names throughout your HTML
This is not considered best-practice, but it's a way to get started especially when wireframing/scaffolding:
screen.scss
#import "blueprint";
// This outputs Blueprint's classes into your stylesheet:
#include blueprint;
#sidebar { background: $blue; }
#main { background: $yellow; }
screen.css (compiled)
.column { float: ... }
.span-6 { width: ... }
.span-12 {width: ... }
/* ...etc., all of Blueprint's classes ... */
#sidebar { background: #ccf; }
#main { background: #ffc; }
index.html
<div id="sidebar" class="column span-6">sidebar content</div>
<div id="main" class="column span-12">main content</div>
The result is the same as using Blueprint without Sass/Compass. Your HTML would contain the presentational classes, which are really not too different from just using style="width:120px" on your elements: it's just done using classes instead.
2. Use Blueprint as mixins into your own semantic class names:
screen.scss
#import "blueprint";
// Do not output Blueprint's classes into your stylesheet.
// Instead, write your own classes and mixin the functionality:
#sidebar {
#extend .column;
#include span(6);
background: $blue; }
#main {
#extend .column;
#include span(12);
background: $yellow; }
screen.css (compiled)
.column, #sidebar, #main { float: left; ... }
#sidebar { width: 240px; background: #ccf; }
#main { width: 480px; background: #ffc; }
index.html
<div id="sidebar">sidebar content</div>
<div id="main">main content</div>
As you can see, the second method moves Blueprint's presentation logic out of the HTML and into the stylesheet.
The judicious use of #extend (instead of #include) is an optimization that lets you group common styles together, e.g. all the elements that are "columns" are defined once as a list of selectors; only their different widths are included directly into each element.