Steev/steevcss
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

swapped to SASS base

Browse Source 
removed vanilla css code and changed to
SASS Base and tweaked Code to be way more responsive
This commit is contained in:
steevLP
2021-01-23 21:24:33 +01:00
parent d5cb0a849e
commit 2285a21721
18 changed files with 17587 additions and 494 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/index.html Normal file
View File

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="de-DE">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sass test</title>
<link rel="stylesheet" href="scss/main.sass">
<style>
/* Dev Classes */
.display {
background-color: lightcoral;
border: 1px solid red;
text-align: center;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<div class="container">
<h1>Grid System</h1>
<div class="row">
<div class="col-12 display"> 12 </div>
<div class="col-11 display"> 11 </div>
<div class="col-1 display"> 1 </div>
<div class="col-10 display"> 10 </div>
<div class="col-2 display"> 2 </div>
<div class="col-9 display"> 9 </div>
<div class="col-3 display"> 3 </div>
<div class="col-8 display"> 8 </div>
<div class="col-4 display"> 4 </div>
<div class="col-7 display"> 7 </div>
<div class="col-5 display"> 5 </div>
<div class="col-6 display"> 6 </div>
<div class="col-6 display"> 6 </div>
</div>
</div>
</body>
</html>

26
src/scss/main.sass Normal file
View File

@ -0,0 +1,26 @@
$primBG: rgb(245, 245, 245)
$columns: 12
*
box-sizing: border-box
body
margin: 0
padding: 0
background: $primBG
font-family: sans-serif
.dev
border: 1px solid black
.container
width: calc( 100% - 10em )
max-width: 60em
margin: 0 auto
div[class^="col-"]
padding: 1rem 0
text-align: center
.row
display: flex
flex-wrap: wrap
@for $i from 1 through $columns
.col-#{$i}
flex: 0 0 100% / $columns * $i
.col-offset-#{$i}
margin-left: 100% / $columns * $i