i have a list of box.
#box-1 {}
#box-2 {}
#box-3 {}
in sass i wrote:
#mixin boxnumerati($levels)
{
#for $i from 1 to $levels
{
#box-#{$i}
{
#if $i == 2 {
background: #ff0000;
height: 200px;
width:200px;
display: inline-block;
} #else {
background: #000;
height: 100px;
width:100px;
display: inline-block;
}
}
}
}
I want that every multiple of 2 the box is red.
how can i do that?
You can use modulo operator %:
#mixin boxnumerati($levels)
{
#for $i from 1 to $levels
{
#box-#{$i}
{
#if $i%2 == 0 {
background: #ff0000;
height: 200px;
width:200px;
display: inline-block;
} #else {
background: #000;
height: 100px;
width:100px;
display: inline-block;
}
}
}
}
Related
I googled everything by now and tried everything including img-fluid, did not work, I can't seem to figure out how to make the image responsive (pretty much a beginner lol), if I resize the browser window the image stays the same size, does not scale.
The logo image size that am trying to keep is 734px x 132px
Edit: I have already tried auto height and still doesn't work
.navbar-brand {
color: $primary;
padding: 0;
img {
max-width: 100%;
height: 132px;
max-height: 132px;
#include media-breakpoint-down(md) {
max-height: 132x;
}
}
}
#include media-breakpoint-up(md) {
.header-navbar-top-right-search {
margin-left: auto;
}
}
#include media-breakpoint-up(lg) {
.header-navbar-top-left {
max-width: 42%;
flex: 0 0 42%;
}
.header-navbar-top-center {
max-width: 16%;
flex: 0 0 16%;
}
.header-navbar-top-right-search {
flex: 0 0 auto;
}
.header-navbar-top-right {
flex: 0 0 auto;
}
}
.header-top-line {
background-color: $section-bg;
a:not(.edit-link) {
padding: 22px $spacer 20px;
font-size: 0.8125rem;
line-height: 1.125rem;
}
.login-list > .nav-item a {
font-weight: 700;
}
}
.header-bottom-line {
background-color: $white;
}
.header-quantity-box {
margin-left: $spacer * 0.25;
}
.nav-link,
.search-module .btn,
.header-navbar a {
color: $white;
&:active,
&:hover {
color: $primary;
}
}
Give it some width and put the height as auto.
img{
width: 100%;
height: auto;
}
Update 1
Now see, You can update max-width as your need
Snippet
.navbar-brand {
color: blue;
padding: 0;
}
.navbar-brand img {
max-width: 734px;
height: auto;
width:30%;
margin: auto;
}
#media only screen and(max-width: 768px){
.navbar-brand img{
width: 40%;
}
}
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<a class="navbar-brand" href="#">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_160x56dp.png" title="borhykerteszetcsomagküldés" alt="borhykerteszetcsomagküldés"></a>
Did this help you 🤨?
I was trying to generate a dynamic grid system using SASS with variable widths using a #for loop. So far I have :
#for $value from 1 through 12 {
$width: percentage(1/$value);
.col-md-#{$value} {
width: $width;
}
}
The output for the above code would be:
.col-md-1 {
width: 100%;
}
.col-md-2 {
width: 50%;
}
.
.
.
.col-md-11 {
width: 9.09091%;
}
.col-md-12 {
width: 8.33333%;
}
Is there anyway this could be reversed by tinkering with the percentage functions in such a way that:
.col-md-12 {
width: 100%;
}
and
.col-md-1 {
width: 8.33333%;
}
The opposite of what I currently have. Thanks in advance.
A simple change to the math should do the trick:
#for $value from 1 through 12 {
$width: percentage($value/12);
.col-md-#{$value} {
width: $width;
}
}
results in:
.col-md-1 {
width: 8.33333%;
}
.col-md-2 {
width: 16.66667%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width: 33.33333%;
}
.col-md-5 {
width: 41.66667%;
}
.col-md-6 {
width: 50%;
}
.col-md-7 {
width: 58.33333%;
}
.col-md-8 {
width: 66.66667%;
}
.col-md-9 {
width: 75%;
}
.col-md-10 {
width: 83.33333%;
}
.col-md-11 {
width: 91.66667%;
}
.col-md-12 {
width: 100%;
}
I have a small question about #content in sass
I still not understand well how to use it, like I did read content is if you want use a mixin and insert something else there.
My question is: why I need use #content if works whithout?
my example:
#mixin context--alternate-template {
margin: 0;
font-size: 14px;
}
.content-sample {
#import context--alternate-template;
background-color: black;
}
output css:
.content-sample {
margin: 0;
font-size: 14px;
background-color: black;
}
sample I a saw on web:
#mixin context--alternate-template {
margin: 0;
font-size: 14px;
#content
}
.content-sample {
#import context--alternate-template;
background-color: black;
}
output css:
.content-sample {
margin: 0;
font-size: 14px;
background-color: black;
}
so yes why I need insert #content in the mixin if works whithout.
#content is useful for injecting a copy of rules inside your mixin. The correct syntax of your sample seen on the web becomes:
SCSS:
#mixin context--alternate-template {
margin: 0;
font-size: 14px;
#content
}
.content-sample {
#include context--alternate-template {
background-color: black;
}
}
Note:- The brackets after the #include call. Now, you have the rule background-color: black; injected after font-size: 14px;.
CSS output:
.content-sample {
margin: 0;
font-size: 14px;
background-color: black;
}
In this case, #content is useless. In fact, the most interesting usage with #content is to inject nested selectors:
SCSS:
#mixin context--alternate-template {
margin: 0;
font-size: 14px;
#content
}
.content-sample {
#include context--alternate-template {
.important-thing {
color: red;
}
&.is-italic {
font-family: 'my-webfont-italic';
}
}
// outside mixin call
background-color: black;
}
CSS output:
.content-sample {
margin: 0;
font-size: 14px;
background-color: black;
}
.content-sample .important-thing {
color: red;
}
.content-sample.is-italic {
font-family: 'my-webfont-italic';
}
One more use case of #content that helped me to see its value - media queries
SCSS:
#mixin desktop {
#media screen and (min-width: $desktop-size) {
#content;
}
}
.main {
display: flex;
flex-direction: row;
#include desktop{
flex-direction: column;
}
}
CSS output
.main {
display: flex;
flex-direction: row;
}
#media screen and (min-width: 60rem) {
.main {
flex-direction: column;
}
}
I'm creating a grid system in wordpress using Skeleton.css
The tutorial shows the following markup for the header, here you can see the logo has has a 3 classes, - five columns and clearfix
<header>
<div class="five columns clearfix">
get_template_directory_uri(); ?>/img/logo.svg"></a>
</div>
</header>
But when I look at the skellton css I cannot see a class of 'five' So i changed it to .five.columns But his make no difference, I i create a border around the class .five.columns, it does not show up am I missing something obvious?
.one.column,
.one.columns { width: 4.66666666667%; }
.two.columns { width: 13.3333333333%; }
.three.columns { width: 22%; }
.four.columns { width: 30.6666666667%; }
.five.columns { width: 39.3333333333%; }
.six.columns { width: 48%; }
.seven.columns { width: 56.6666666667%; }
.eight.columns { width: 65.3333333333%; }
.nine.columns { width: 74.0%; }
.ten.columns { width: 82.6666666667%; }
.eleven.columns { width: 91.3333333333%; }
.twelve.columns { width: 100%; margin-left: 0; }
.one-third.column { width: 30.6666666667%; }
.two-thirds.column { width: 65.3333333333%; }
.one-half.column { width: 48%; }
/* Offsets */
.offset-by-one.column,
.offset-by-one.columns { margin-left: 8.66666666667%; }
.offset-by-two.column,
.offset-by-two.columns { margin-left: 17.3333333333%; }
.offset-by-three.column,
.offset-by-three.columns { margin-left: 26%; }
.offset-by-four.column,
.offset-by-four.columns { margin-left: 34.6666666667%; }
.offset-by-five.column,
.offset-by-five.columns { margin-left: 43.3333333333%; }
.offset-by-six.column,
.offset-by-six.columns { margin-left: 52%; }
.offset-by-seven.column,
.offset-by-seven.columns { margin-left: 60.6666666667%; }
.offset-by-eight.column,
.offset-by-eight.columns { margin-left: 69.3333333333%; }
.offset-by-nine.column,
.offset-by-nine.columns { margin-left: 78.0%; }
.offset-by-ten.column,
.offset-by-ten.columns { margin-left: 86.6666666667%; }
.offset-by-eleven.column,
.offset-by-eleven.columns { margin-left: 95.3333333333%; }
.offset-by-one-third.column,
.offset-by-one-third.columns { margin-left: 34.6666666667%; }
.offset-by-two-thirds.column,
.offset-by-two-thirds.columns { margin-left: 69.3333333333%; }
.offset-by-one-half.column,
.offset-by-one-half.columns { margin-left: 52%; }
}
/* Larger than mobile */
#media (min-width: 400px) {}
Many thanks
Here is a fiddle with some styling for height and color to make it obvious. Is your div 0px height? Check it with your developer tools in the browser - Chrome Developer Tools website.
https://jsfiddle.net/p1w61hmt/.
<header style="height: 100px; background: green;">
<div class="five columns clearfix" style="height: 100%;">
</div>
</header>
.five.columns { width: 39.3333333333%; }
.columns { background: red; }
Its probably some pasting errors but your HTML is not valid and your css looks like an incomplete snippet.
This might be a stupid question, but after looking around the world wide webs for a while, I could not find an answer.
I'm using twitter bootstrap's fluid grid system for my new site. I mocked up the homepage's container area to be wider than twitter's default 1170px (1506px).
The 1506px layout breaks down to:
12 columns each 98px (1176px) with 11 margins of 30px (330px)
1176+300 = 1506.
So is there any way that I can just plug this width (1506) into twitter bootstrap without having to overhaul a bunch of LESS and CSS?
Looks like everything you need starts at line 111:
#media (min-width: 1200px) {
...
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 1170px;
}
.span12 {
width: 1170px;
}
...
}
You can NOT use the customizer at http://getbootstrap.com/customize/ unless you drop and replace the 1200px grid.
Compile your own css will be the easiest way:
see: https://stackoverflow.com/a/12029786/1596547 and also Twitter Bootstrap Customization Best Practices
The example below set the min-width of this grid to 1536pixels (1536 x 864) grid width + gutter
fork twitter-bootstrap from github and clone locally
add your new 1536 variables to less/variables.less (before the 1200 variables, see below)
copy less/responsive-1200px-min.less to less/responsive-1536px-min.less "search and replace" 1200 with 1536:
import responsive-1536px-min.less #import "responsive-1536px-min.less"; in less/resposnive.less (before the 1200 include)
Install the LESS command line tool via Node and run the following command:$ lessc ./less/bootstrap.less > bootstrap.css
variables for step 2.:
// 1536px min
#gridColumnWidth1536: 98px;
#gridGutterWidth1536: 30px;
#gridRowWidth1536: (#gridColumns * #gridColumnWidth1536) + (#gridGutterWidth1536 * (#gridColumns - 1));
// 1536px min
#fluidGridColumnWidth1536: percentage(#gridColumnWidth1536/#gridRowWidth1536);
#fluidGridGutterWidth1536: percentage(#gridGutterWidth1536/#gridRowWidth1536);
Or not preferred create your own 1536 (1506) grid css and add it after the bootstrap css in your source.
1536.css:
/* based on Bootstrap v2.3.2 */
#media (min-width: 1536px) {
.row {
margin-left: -30px;
*zoom: 1;
}
.row:before,
.row:after {
display: table;
content: "";
line-height: 0;
}
.row:after {
clear: both;
}
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 30px;
}
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 1506px;
}
.span12 {
width: 1506px;
}
.span11 {
width: 1378px;
}
.span10 {
width: 1250px;
}
.span9 {
width: 1122px;
}
.span8 {
width: 994px;
}
.span7 {
width: 866px;
}
.span6 {
width: 738px;
}
.span5 {
width: 610px;
}
.span4 {
width: 482px;
}
.span3 {
width: 354px;
}
.span2 {
width: 226px;
}
.span1 {
width: 98px;
}
.offset12 {
margin-left: 1566px;
}
.offset11 {
margin-left: 1438px;
}
.offset10 {
margin-left: 1310px;
}
.offset9 {
margin-left: 1182px;
}
.offset8 {
margin-left: 1054px;
}
.offset7 {
margin-left: 926px;
}
.offset6 {
margin-left: 798px;
}
.offset5 {
margin-left: 670px;
}
.offset4 {
margin-left: 542px;
}
.offset3 {
margin-left: 414px;
}
.offset2 {
margin-left: 286px;
}
.offset1 {
margin-left: 158px;
}
.row-fluid {
width: 100%;
*zoom: 1;
}
.row-fluid:before,
.row-fluid:after {
display: table;
content: "";
line-height: 0;
}
.row-fluid:after {
clear: both;
}
.row-fluid [class*="span"] {
display: block;
width: 100%;
min-height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
margin-left: 1.9920318725099602%;
*margin-left: 1.9388403831482581%;
}
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
.row-fluid .controls-row [class*="span"] + [class*="span"] {
margin-left: 1.9920318725099602%;
}
.row-fluid .span12 {
width: 100%;
*width: 99.94680851063829%;
}
.row-fluid .span11 {
width: 91.50066401062416%;
*width: 91.44747252126245%;
}
.row-fluid .span10 {
width: 83.00132802124833%;
*width: 82.94813653188662%;
}
.row-fluid .span9 {
width: 74.5019920318725%;
*width: 74.4488005425108%;
}
.row-fluid .span8 {
width: 66.00265604249668%;
*width: 65.94946455313497%;
}
.row-fluid .span7 {
width: 57.503320053120845%;
*width: 57.450128563759144%;
}
.row-fluid .span6 {
width: 49.00398406374502%;
*width: 48.95079257438332%;
}
.row-fluid .span5 {
width: 40.504648074369186%;
*width: 40.451456585007485%;
}
.row-fluid .span4 {
width: 32.005312084993356%;
*width: 31.952120595631655%;
}
.row-fluid .span3 {
width: 23.50597609561753%;
*width: 23.45278460625583%;
}
.row-fluid .span2 {
width: 15.006640106241699%;
*width: 14.953448616879998%;
}
.row-fluid .span1 {
width: 6.507304116865869%;
*width: 6.454112627504167%;
}
.row-fluid .offset12 {
margin-left: 103.98406374501992%;
*margin-left: 103.8776807662965%;
}
.row-fluid .offset12:first-child {
margin-left: 101.99203187250995%;
*margin-left: 101.88564889378654%;
}
.row-fluid .offset11 {
margin-left: 95.48472775564409%;
*margin-left: 95.37834477692067%;
}
.row-fluid .offset11:first-child {
margin-left: 93.49269588313412%;
*margin-left: 93.3863129044107%;
}
.row-fluid .offset10 {
margin-left: 86.98539176626825%;
*margin-left: 86.87900878754483%;
}
.row-fluid .offset10:first-child {
margin-left: 84.99335989375828%;
*margin-left: 84.88697691503486%;
}
.row-fluid .offset9 {
margin-left: 78.48605577689243%;
*margin-left: 78.37967279816901%;
}
.row-fluid .offset9:first-child {
margin-left: 76.49402390438246%;
*margin-left: 76.38764092565904%;
}
.row-fluid .offset8 {
margin-left: 69.9867197875166%;
*margin-left: 69.88033680879319%;
}
.row-fluid .offset8:first-child {
margin-left: 67.99468791500664%;
*margin-left: 67.88830493628322%;
}
.row-fluid .offset7 {
margin-left: 61.48738379814077%;
*margin-left: 61.38100081941736%;
}
.row-fluid .offset7:first-child {
margin-left: 59.49535192563081%;
*margin-left: 59.388968946907404%;
}
.row-fluid .offset6 {
margin-left: 52.98804780876495%;
*margin-left: 52.88166483004154%;
}
.row-fluid .offset6:first-child {
margin-left: 50.996015936254985%;
*margin-left: 50.88963295753158%;
}
.row-fluid .offset5 {
margin-left: 44.48871181938911%;
*margin-left: 44.3823288406657%;
}
.row-fluid .offset5:first-child {
margin-left: 42.49667994687915%;
*margin-left: 42.390296968155745%;
}
.row-fluid .offset4 {
margin-left: 35.98937583001327%;
*margin-left: 35.88299285128988%;
}
.row-fluid .offset4:first-child {
margin-left: 33.99734395750332%;
*margin-left: 33.890960978779916%;
}
.row-fluid .offset3 {
margin-left: 27.49003984063745%;
*margin-left: 27.383656861914048%;
}
.row-fluid .offset3:first-child {
margin-left: 25.49800796812749%;
*margin-left: 25.391624989404086%;
}
.row-fluid .offset2 {
margin-left: 18.99070385126162%;
*margin-left: 18.88432087253822%;
}
.row-fluid .offset2:first-child {
margin-left: 16.99867197875166%;
*margin-left: 16.892289000028256%;
}
.row-fluid .offset1 {
margin-left: 10.49136786188579%;
*margin-left: 10.384984883162385%;
}
.row-fluid .offset1:first-child {
margin-left: 8.49933598937583%;
*margin-left: 8.392953010652427%;
}
input,
textarea,
.uneditable-input {
margin-left: 0;
}
.controls-row [class*="span"] + [class*="span"] {
margin-left: 30px;
}
input.span12,
textarea.span12,
.uneditable-input.span12 {
width: 1492px;
}
input.span11,
textarea.span11,
.uneditable-input.span11 {
width: 1364px;
}
input.span10,
textarea.span10,
.uneditable-input.span10 {
width: 1236px;
}
input.span9,
textarea.span9,
.uneditable-input.span9 {
width: 1108px;
}
input.span8,
textarea.span8,
.uneditable-input.span8 {
width: 980px;
}
input.span7,
textarea.span7,
.uneditable-input.span7 {
width: 852px;
}
input.span6,
textarea.span6,
.uneditable-input.span6 {
width: 724px;
}
input.span5,
textarea.span5,
.uneditable-input.span5 {
width: 596px;
}
input.span4,
textarea.span4,
.uneditable-input.span4 {
width: 468px;
}
input.span3,
textarea.span3,
.uneditable-input.span3 {
width: 340px;
}
input.span2,
textarea.span2,
.uneditable-input.span2 {
width: 212px;
}
input.span1,
textarea.span1,
.uneditable-input.span1 {
width: 84px;
}
.thumbnails {
margin-left: -30px;
}
.thumbnails > li {
margin-left: 30px;
}
.row-fluid .thumbnails {
margin-left: 0;
}
}
You can plug in your customised values here:
http://twitter.github.io/bootstrap/customize.html