Difference between revisions of "Popular syntax"

From rbachwiki
Jump to navigation Jump to search
 
(35 intermediate revisions by the same user not shown)
Line 1: Line 1:
==Border Radius==
==Clamp==
@include border-radius(12px);
'''fluid designs without using media quires'''
<pre>
.box{
  margin: 15px auto;
  background: red;
  width: clamp(220px, 55%,300px);
  height: 150px;
}
//min width, prefered width, max width


== Clearfix ==
</pre>
@include clearfix
== Centering divs ==
<pre>


== Breakpoint using juice ==
  .items {
@include bp(small)
    display: grid;
open the juice file, they have a bunch of presets
    grid-template-columns: repeat(4, 1fr);
    background: white;
 
    .item {
      max-width: 350px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      padding: 1rem;
      align-self: center;
      justify-self: center;
     
    }
  }
</pre>


== Juice Center an element vertically and horizontally ==
== Centering Divs using AutoFit==
  .element {
 
   @include centerer;
<p class="subhead">The auto-fit keyword does the same as auto-fill, except for this: empty tracks are collapsed. since you have 1fr set as the max-size in the minmax() function, the extra space is distributed among both grid items</p>
}
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
== Text Shadow ==
 
  @include text-shadow(black 0 0 20px);
<p class="subhead">As described above, centering the grid items is not possible because there is no free space available on the line for alignment purposes.</p>
 
<p class="subhead">One way around this, which still allows for flexible column sizes, is to use max-content instead of 1fr, along with auto-fit.</p>
 
grid-template-columns: repeat(auto-fit, minmax(100px, max-content));
justify-content: center;
 
== Centering Text Vertically in DIV ==
HTML Markup
<pre>
<div class="main">
<div class="right"> <img src="https://picsum.photos/75/150?random=1" alt=""></div>
<div class="left"> <p>some text</p></div>
</div>
</pre>
 
'''CSS Markup'''
<pre>
.main{
   display: flex;
  align-items: center;
}
</pre>
 
==Dealing with images==
  img{width: 100%}
img{aspect-ratio: 1 / 1;
    object-fit: contain;}
 
or
  img{aspect-ratio: 1 / .5;}


== Background Linear Gradient ==
<p class="subhead"> Make images the same size without stretching and knock out the background</p>
  @include background-image(linear-gradient($navcolor1, $navcolor2));
img{
width: 15%;
aspect-ratio: 3/2;
object-fit: contain;
  mix-blend-mode: color-burn;


=== Tips ===
==Media Queries==
when you use @include span(4 of 12) and you have three columns only 2 will display inline. So the fix is to @include span(4 of 14) This should fix the problem


== Include a background image in the right corner ==
/* On screens that are 992px or less, set the background color to blue */
  @include background-image(url('../images/misc/greenplanet.png'));
  @media screen and (max-width: 992px) {
      background-size: 400px; // makes the image 400 px wide
  body {
      background-repeat: no-repeat;
    background-color: blue;
      background-position: 120% center; // sets the background position of an image default is top-left
  }
      padding-right: 300px;
}
----
----


==[[#top|Back To Top]]-[[Main_Page| Home]] - [[Css|Category]]==
==[[#top|Back To Top]]-[[Main_Page| Home]] - [[Css|Category]]==

Latest revision as of 16:16, 17 June 2023

Clamp

fluid designs without using media quires

.box{
  margin: 15px auto;
  background: red;
  width: clamp(220px, 55%,300px);
  height: 150px;
}
//min width, prefered width, max width

Centering divs


  .items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: white;
  
    .item {
      max-width: 350px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      padding: 1rem;
      align-self: center; 
      justify-self: center;
      
    }
  }

Centering Divs using AutoFit

The auto-fit keyword does the same as auto-fill, except for this: empty tracks are collapsed. since you have 1fr set as the max-size in the minmax() function, the extra space is distributed among both grid items

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

As described above, centering the grid items is not possible because there is no free space available on the line for alignment purposes.

One way around this, which still allows for flexible column sizes, is to use max-content instead of 1fr, along with auto-fit.

grid-template-columns: repeat(auto-fit, minmax(100px, max-content));
justify-content: center;

Centering Text Vertically in DIV

HTML Markup

<div class="main">
<div class="right"> <img src="https://picsum.photos/75/150?random=1" alt=""></div>
<div class="left"> <p>some text</p></div>
</div>

CSS Markup

.main{
  display: flex;
  align-items: center;
}

Dealing with images

img{width: 100%}
img{aspect-ratio: 1 / 1;
    object-fit: contain;}

or

 img{aspect-ratio: 1 / .5;}

Make images the same size without stretching and knock out the background

img{
width: 15%;
aspect-ratio: 3/2;
object-fit: contain;
mix-blend-mode: color-burn;

Media Queries

/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 992px) {
 body {
   background-color: blue;
 }
}

Back To Top- Home - Category