tfoman/Angel6
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Responsive Web Design tutorial files

Browse Source
This commit is contained in:
Unknown
2017-10-28 17:21:27 +01:00
parent 7f3ed7f70c
commit de29cbe405
8 changed files with 254 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
WebDevelopment/06-ResponsiveDesign/Source/Html/_footer.dhtml Normal file
View File

@ -0,0 +1,2 @@
</body>
</html>

8
WebDevelopment/06-ResponsiveDesign/Source/Html/_header.dhtml Normal file
View File

@ -0,0 +1,8 @@
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>Title</title>
<link href="/Assets/Css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>

31
WebDevelopment/06-ResponsiveDesign/Source/Html/index.dhtml Normal file
View File

@ -0,0 +1,31 @@
<!--@ include header @-->
<div class="container header">
<div class="wrapper">
<div class="grid">
<div class="col center">
<h1>AngelSix</h1>
<p>I develop software and hardware</p>
<div class="grid">
<div class="col half right"><div class="button">Tell me more</div></div>
<div class="col half left"><div class="button">Contact me</div></div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="wrapper">
<div class="grid center">
<div class="col content-a">Content A</div>
<div class="col content-b">Content B</div>
<div class="col content-c">Content C</div>
<div class="col content-d">Content D</div>
</div>
</div>
</div>
<!--@ include footer @-->

3
WebDevelopment/06-ResponsiveDesign/Source/Sass/dna.config Normal file
View File

@ -0,0 +1,3 @@
{
"outputPath": "../../WebRoot/Assets/Css"
}

95
WebDevelopment/06-ResponsiveDesign/Source/Sass/style.scss Normal file
View File

@ -0,0 +1,95 @@
html
{
background: black;
color: white;
font-family: sans-serif;
}
body { margin: 0; }
h1,h2,h3,h4,h5,h6,p { margin: 0; line-height: 1.3; }
.container
{
padding: 24px;
}
.header { background: blue; }
.wrapper
{
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
.center { text-align: center; }
.grid
{
font-size: 0;
.col
{
box-sizing: border-box;
font-size: 16px;
display: inline-block;
width: 100%;
&.half { width: 50%; }
&.content-a, &.content-b, &.content-c, &.content-d
{
width: 25%;
padding: 20px;
}
// Below Desktop Responsive Styles
@media only screen and (max-width: 900px)
{
&.content-a, &.content-b, &.content-c, &.content-d
{
width: 50%;
}
.button
{
text-align: center;
display: block;
}
}
// Below Tablet Responsive Styles
@media only screen and (max-width: 600px)
{
&.content-a, &.content-b, &.content-c, &.content-d
{
width: 100%;
}
.half
{
width: 100%;
}
}
&.content-a { background: red; }
&.content-b { background: green; }
&.content-c { background: blue; }
&.content-d { background: yellow; }
}
}
.button
{
border: 1px solid white;
border-radius: 5px;
padding: 20px;
margin: 5px;
display: inline-block;
}
.left { text-align: left; }
.right { text-align: right; }

4
WebDevelopment/06-ResponsiveDesign/Source/dna.config Normal file
View File

@ -0,0 +1,4 @@
{
"outputPath": "../WebRoot",
"liveServers": [ "../WebRoot" ]
}

72
WebDevelopment/06-ResponsiveDesign/WebRoot/Assets/Css/style.css Normal file
View File

@ -0,0 +1,72 @@
html {
background: black;
color: white;
font-family: sans-serif; }
body {
margin: 0; }
h1, h2, h3, h4, h5, h6, p {
margin: 0;
line-height: 1.3; }
.container {
padding: 24px; }
.header {
background: blue; }
.wrapper {
max-width: 1000px;
margin-left: auto;
margin-right: auto; }
.center {
text-align: center; }
.grid {
font-size: 0; }
.grid .col {
box-sizing: border-box;
font-size: 16px;
display: inline-block;
width: 100%; }
.grid .col.half {
width: 50%; }
.grid .col.content-a, .grid .col.content-b, .grid .col.content-c, .grid .col.content-d {
width: 25%;
padding: 20px; }
@media only screen and (max-width: 900px) {
.grid .col.content-a, .grid .col.content-b, .grid .col.content-c, .grid .col.content-d {
width: 50%; }
.grid .col .button {
text-align: center;
display: block; } }
@media only screen and (max-width: 600px) {
.grid .col.content-a, .grid .col.content-b, .grid .col.content-c, .grid .col.content-d {
width: 100%; }
.grid .col .half {
width: 100%; } }
.grid .col.content-a {
background: red; }
.grid .col.content-b {
background: green; }
.grid .col.content-c {
background: blue; }
.grid .col.content-d {
background: yellow; }
.button {
border: 1px solid white;
border-radius: 5px;
padding: 20px;
margin: 5px;
display: inline-block; }
.left {
text-align: left; }
.right {
text-align: right; }
/*# sourceMappingURL=style.css.map */

39
WebDevelopment/06-ResponsiveDesign/WebRoot/index.html Normal file
View File

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>Title</title>
<link href="/Assets/Css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container header">
<div class="wrapper">
<div class="grid">
<div class="col center">
<h1>AngelSix</h1>
<p>I develop software and hardware</p>
<div class="grid">
<div class="col half right"><div class="button">Tell me more</div></div>
<div class="col half left"><div class="button">Contact me</div></div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="wrapper">
<div class="grid center">
<div class="col content-a">Content A</div>
<div class="col content-b">Content B</div>
<div class="col content-c">Content C</div>
<div class="col content-d">Content D</div>
</div>
</div>
</div>
</body>
</html>