interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

New structure, indentation and content

Browse source 
Adapted w3c structure for html5 elements
New files for different sections of elements
Indentation now made with tabs
Added optional "above the fold" file
This commit is contained in:
Stephan 2016-12-08 17:50:51 +01:00
parent 81acd33c77
commit d8a0b5e8d0
15 changed files with 906 additions and 568 deletions
Download patch file Download diff file Expand all files Collapse all files

119
basic/_common.scss Normal file
View file

@ -0,0 +1,119 @@
// Clearing and floating
// ------------------------------------------------------------------------------
.clear {
clear: both;
&::before,
&::after {
clear: both;
}
}
.float_left {
float: left;
margin-right: $space_3;
}
.overflow {
overflow: auto;
}
// General positioning attributes
// ------------------------------------------------------------------------------
.center_50 {
margin-right: 25%;
margin-left: 25%;
}
.center_25 {
margin-right: 37.5%;
margin-left: 37.5%;
}
.width_full {
width: 100%;
margin-right: 0;
margin-left: 0;
}
// Structure attributes
// ------------------------------------------------------------------------------
// Simulate new body element
.div_body {
width: $basic_width;
@media screen and (orientation: landscape) {
@media (min-width: $screen_small) {
width: $width_2;
}
@media (min-width: $screen_medium) {
width: $width_3;
}
@media (min-width: $screen_large) {
width: $width_4;
}
}
@media screen and (orientation: portrait) {
@media (min-width: $screen_small) {
width: $width_2;
}
}
margin: 0 auto;
border-top-width: $border_width_8;
border-top-style: solid;
border-color: $basic_border_color;
padding-top: $space_3;
}
// Fixed elements
.relative {
position: relative;
}
.div_fix {
position: fixed;
}
.bottom {
bottom: 0;
}
// Space and placeholders
.space_box {
float: left;
display: table;
width: $space_4;
text-align: center;
vertical-align: middle;
span {
display: table-cell;
}
}
.div_placeholder {
width: 100%;
height: $space_4;
border: $border_width_4 solid rgba($black,.1);
border-radius: $basic_corner;
padding: $basic_space;
background-color: rgba($black,.1);
svg {
vertical-align: top;
}
}
.div_placeholder_bkg {
width: 100%;
height: $space_4;
border: $border_width_4 solid rgba($black,.1);
border-radius: $basic_corner;
padding: $basic_space;
/*data:[<mime type>][;charset=<charset>][;base64],<encoded data>*/
background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' width='100%' height='100%'><line x1='2%' y1='2%' x2='98%' y2='98%' stroke='#000' stroke-width='.5'/><line x1='0' y1='100%' x2='100%' y2='0' stroke='#000' stroke-width='.5'/></svg>") no-repeat;
background-color: rgba($black,.1);
}
.div_info {
padding: $space_2 $basic_indent;
border-right: $basic_space solid rgba($echo_color, .6);
background-color: rgba($echo_color, .1) !important;
}