Difference between revisions of "Popular syntax"

From rbachwiki
Jump to navigation Jump to search
 
(15 intermediate revisions by the same user not shown)
Line 1: Line 1:
== Centering Text Vertically in DIV ==
==Clamp==
HTML Markup
'''fluid designs without using media quires'''
<pre>
<pre>
<div class="main">
.box{
<div class="right"> image</div>
  margin: 15px auto;
<div class="left> some text</div>
  background: red;
</div>
  width: clamp(220px, 55%,300px);
  height: 150px;
}
//min width, prefered width, max width
 
</pre>
</pre>
== Centering divs ==
<pre>


CSS Markup
  .items {
<pre>
    display: grid;
.main{display: table
    grid-template-columns: repeat(4, 1fr);
.right{
    background: white;
display: table-cell;
 
}
    .item {
.left{
      max-width: 350px;
display: table-cell;
      display: grid;
vertical-align: middle;
      grid-template-columns: 1fr 1fr;
padding: 20px;
      gap: 1rem;
}
      padding: 1rem;
}
      align-self: center;  
      justify-self: center;
     
    }
  }
</pre>
</pre>


==Using Pre==
== Centering Divs using AutoFit==
@include pre(2)
This will move over 2 columns from the left -- >
== Border Box code  - add to every project ==
*, *:before, *:after{
  box-sizing: border-box;
}
==using Pull==
@include pull(1)
Will move over 1 column from the right <--
==Using Break==
@include break;
Lets say you have six divs and you want to break at div3 then you would include the break in the div3
==Using Gutters==
Gutters function provides margins
.class{
@include gutters(3em inside) // other options split, outside
}
This will provide extra margins on the class


==Using span() ==
<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>
You can pass percent pixel or columns to spans
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
@include span(50%)
@include span(2 of 4)
@include span(200px)
@include span(50% .25 inside)//diferent gutter and padding directive
Other span directives
  @include span(wide 4) // (wider)
height: span(12);// would take the value from span and use it for the height


==Using Susy Gallery function==
<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>
HTML Markup
<pre>
<div class="myphotos">
  <div> <img src="" alt=""> </div>
  <div> <img src="" alt=""> </div>
  <div> <img src="" alt=""> </div>
  <div> <img src="" alt=""> </div>


</div>
<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>
</pre>
CSS Markup


<pre>
grid-template-columns: repeat(auto-fit, minmax(100px, max-content));
$gallery_layout: layout(12 .125 fluid float after); // this has nothing to do with the gallery() function. this is just a custom layout thats also applied to the .myphotos
justify-content: center;
.myphotos{
@include full;
div{
@include with-layout($gallery_layout){
@include gallery(4);
margin-bottom: gutter();


}// layout
== Centering Text Vertically in DIV ==
HTML Markup
} //div
}// myphotos
</pre>
The with-layout and the margin bottom is not necessary.
The with-layout allows you to use another layout with the gallery layout
The margin-bottom: gutter() gets the preset gutter margins and applies them to the bottom, making all the margins even.
 
==Using Alternate Layout==
$nav_layout: layout(12 0 fluid float inside); // 12 columns 0 gutter fluid layout margins on the inside
nav{
@include full;
.nav-item{
@include span(3 of $nav-layout);
}
}
HTML markup
<pre>
<pre>
<ul>
<div class="main">
<li class="nav-item"> home </li>
<div class="right"> <img src="https://picsum.photos/75/150?random=1" alt=""></div>
<li class="nav-item"> home </li>
<div class="left"> <p>some text</p></div>
<li class="nav-item"> home </li>
</div>
</ul>
</pre>
</pre>
using this particular layout for nav would remove the spacing between li items
==Use full to span and clear floats==
Use this on the on the containing div and then set spans for internal divs
this is like spanning the entire gird, but using the 'full' will apply clearfix and other settings that will prevent weird floating issues.


@include full;
'''CSS Markup'''
 
example: HTML markup
<pre>
<pre>
<header>
.main{
<div class="logo"> </div>
  display: flex;
<div class="text"> </div>
  align-items: center;
</header>
</pre>
CSS markup
<pre>
header{
@include full;
.logo{
@include span(3);
}
.text{
@include span(last 7);
}
 
}
}
</pre>
</pre>


==Border Radius==
==Dealing with images==
  @include border-radius(12px);
  img{width: 100%}
img{aspect-ratio: 1 / 1;
    object-fit: contain;}


== Clearfix ==
or
@include clearfix
  img{aspect-ratio: 1 / .5;}


== Breakpoint using juice ==
<p class="subhead"> Make images the same size without stretching and knock out the background</p>
  @include bp(medium) affects medium and down
img{
  @include bp(large-up) // affects large and up
  width: 15%;
  aspect-ratio: 3/2;
object-fit: contain;
mix-blend-mode: color-burn;


open the juice file, they have a bunch of presets
==Media Queries==


== Juice Center an element vertically and horizontally ==
/* On screens that are 992px or less, set the background color to blue */
When you use this the container has to have a position set. absolute, relative etc..
  @media screen and (max-width: 992px) {
  .element {
   body {
   @include centerer;
    background-color: blue;
  }
  }
  }
== Text Shadow ==
@include text-shadow(black 0 0 20px);
@include text-shadow(black 1px 1px);
== Background Linear Gradient ==
@include background-image(linear-gradient($navcolor1, $navcolor2));
=== Tips ===
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 ==
@include background-image(url('../images/misc/greenplanet.png'));
      background-size: 400px; // makes the image 400 px wide
      background-repeat: no-repeat;
      background-position: 120% center; // sets the background position of an image default is top-left
      padding-right: 300px; // keeps the text away from the background image
== Using Fonts ==
@import url('https://fonts.googleapis.com/css?family=David+Libre');
$para2: 'David Libre', serif;
body{
font-family:$para2;
}
----
----


==[[#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

Retrieved from "https://www.r512.com/index.php?title=Popular_syntax&oldid=2710"