DEV Community: Viktor

Uizard

Viktor — Wed, 29 Apr 2020 15:19:13 +0000

I found on net one tool called Uizard. It's pretty cool. Because it can generate ui from hand drawed picture. Can you tell me are there any other tools like this one?
https://uizard.io/i/z2Paj

Css grid part 2

Viktor — Tue, 28 Apr 2020 18:40:48 +0000

This tutorial is for css grid.In this tutorial with css grid and the grid-template-areas.First of all let's add our html:

<div class="grid">
<div class="header card">header</div>
<div class="main card">main</div>
<div class="header card">ads</div>
<div class="header card">footer</div>
</div>

Now it is time for css:

body {
margin: 2px;
}
.header {
grid-area: header;
} 
.main {
grid-area: main;
}
.ads {
grid-area: ads;
} 
.footer {
grid-area: footer;
} 
.grid {
display: grid;
grid-template-areas: 
'header header header header' 
'main main main ads' 
'main main main ads' 
'main main main ads' 
'main main main ads' 
'main main main ads' 
'main main main ads' 
'main main main ads' 
'main main main ads' 
'footer footer footer footer' ;
width: 100%;
height: 640px;
} 
.card {
background-color: grey;
}

With grid-area in the child classes of grid class we are defining the name of the area that they represent in the layout. grid-template-areas is defining the look of the page.

Css grid part 1

Viktor — Tue, 28 Apr 2020 16:46:47 +0000

Css grid is a technology for making responsive Web site features.It is very simple to add grid to your site.We will make it in few steps:


<div class="grid">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
<div class="card">6</div>
<div class="card">7</div>
<div class="card">8</div>
<div class="card">9</div>
<div class="card">10</div>
</div>

Now let's add css to our project:

body {
margin: 10px;
}
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
} 
.card {
height: 35px;
width: 140px:
background-color: dodgerblue;
text-align: center;
}

the display: grid; in the grid class tells the compiler that there we are using grid. grid-gap is the gap between two grid elements.
With grid-template-columns we are entering the number of columns.
With repeat(auto-fit, minmax(210px, 1fr)) we make the grid to fit whatever the size of the screen is.

New grid lesson will be soon