swapped to SASS base
removed vanilla css code and changed to SASS Base and tweaked Code to be way more responsive
This commit is contained in:
parent
d5cb0a849e
commit
2285a21721
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
node_modules
|
||||
.cache
|
||||
16
README.md
16
README.md
@ -1,16 +0,0 @@
|
||||
# what is steevcss
|
||||
SteevCSS is like the name says a CSS Framework!
|
||||
This Framework is optimized and maintained for my usecases and my usecases only please keep that in mind when reporting anything..
|
||||
|
||||
# what steevcss not is
|
||||
this librarie is not and wont ever be perfect for your use.. i excpect you to at leaste be able to override css on yourend when using my framework.
|
||||
It is not maintained by a big team like bootstrap is if you want a professional librarie you won't need to debug as much as mine. then dont use it
|
||||
|
||||
# disclaymer
|
||||
it can happen that things from one second to another change entirely it will be documented somwhere
|
||||
i am not offering much support and only documentation i can fully understand.
|
||||
|
||||
# My GitHub todolist
|
||||
creating documentation
|
||||
|
||||
i am updating this Readme on the fly so it may change as the librarie does
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
197
css/steev.css
197
css/steev.css
@ -1,197 +0,0 @@
|
||||
* {
|
||||
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
||||
font-size: 12pt;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
/*
|
||||
Container CSS
|
||||
*/
|
||||
.container {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
@media (min-width: 770px) {
|
||||
.container {
|
||||
width: 750px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.container {
|
||||
width: 970px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
width: 1170px;
|
||||
}
|
||||
}
|
||||
/*
|
||||
Grid
|
||||
*/
|
||||
.row { width: 100%; }
|
||||
.col-1 { width: 100.0%; float: left; }
|
||||
.col-2 { width: 50.00%; float: left; }
|
||||
.col-3 { width: 33.33%; float: left; }
|
||||
.col-4 { width: 25.00%; float: left; }
|
||||
.col-5 { width: 20.00%; float: left; }
|
||||
.col-6 { width: 16.66%; float: left; }
|
||||
.col-7 { width: 14.28%; float: left; }
|
||||
.col-8 { width: 12.50%; float: left; }
|
||||
.col-9 { width: 11.11%; float: left; }
|
||||
.col-10 { width: 10.00%; float: left; }
|
||||
.col-11 { width: 09.09%; float: left; }
|
||||
.col-12 { width: 08.33%; float: left; }
|
||||
/*
|
||||
NavBar CSS
|
||||
*/
|
||||
.nav {
|
||||
position: relative;
|
||||
background-color: aliceblue;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
ul.nav-list {
|
||||
display: flex;
|
||||
margin:0;
|
||||
padding: 5px;
|
||||
min-height: 60px;
|
||||
line-height: 60px;
|
||||
}
|
||||
li.nav-item{
|
||||
float:left;
|
||||
list-style: none;
|
||||
color:black;
|
||||
font-size: 10pt;
|
||||
margin-left: 10px;
|
||||
}
|
||||
li.nav-item:hover{
|
||||
font-size: 12pt;
|
||||
}
|
||||
a.brand {
|
||||
position: inherit;
|
||||
display: flex;
|
||||
}
|
||||
/*
|
||||
Dropdown
|
||||
*/
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #f9f9f9;
|
||||
min-width: 160px;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
padding: 12px 16px;
|
||||
z-index: 1;
|
||||
}
|
||||
.dropdown:hover .dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
/*
|
||||
SlideShow CSS
|
||||
*/
|
||||
* {box-sizing: border-box}
|
||||
body {font-family: Verdana, sans-serif; margin:0}
|
||||
.mySlides {display: none}
|
||||
img {vertical-align: middle;}
|
||||
|
||||
/* Slideshow container */
|
||||
.slideshow-container {
|
||||
max-width: 1000px;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
/* Next & previous buttons */
|
||||
.prev, .next {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: auto;
|
||||
padding: 16px;
|
||||
margin-top: -22px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
transition: 0.6s ease;
|
||||
border-radius: 0 3px 3px 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Position the "next button" to the right */
|
||||
.next {
|
||||
right: 0;
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
/* On hover, add a black background color with a little bit see-through */
|
||||
.prev:hover, .next:hover {
|
||||
background-color: rgba(0,0,0,0.8);
|
||||
}
|
||||
|
||||
/* Caption text */
|
||||
.text {
|
||||
color: #f2f2f2;
|
||||
font-size: 15px;
|
||||
padding: 8px 12px;
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Number text (1/3 etc) */
|
||||
.numbertext {
|
||||
color: #f2f2f2;
|
||||
font-size: 12px;
|
||||
padding: 8px 12px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* The dots/bullets/indicators */
|
||||
.dot {
|
||||
cursor: pointer;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
margin: 0 2px;
|
||||
background-color: #bbb;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
transition: background-color 0.6s ease;
|
||||
}
|
||||
|
||||
.active, .dot:hover {
|
||||
background-color: #717171;
|
||||
}
|
||||
|
||||
/* Fading animation */
|
||||
.fade {
|
||||
-webkit-animation-name: fade;
|
||||
-webkit-animation-duration: 1.5s;
|
||||
animation-name: fade;
|
||||
animation-duration: 1.5s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fade {
|
||||
from {opacity: .4}
|
||||
to {opacity: 1}
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
from {opacity: .4}
|
||||
to {opacity: 1}
|
||||
}
|
||||
|
||||
/* On smaller screens, decrease text size */
|
||||
@media only screen and (max-width: 300px) {
|
||||
.prev, .next,.text {font-size: 11px}
|
||||
}
|
||||
1
css/steevcss.min.css
vendored
1
css/steevcss.min.css
vendored
@ -1 +0,0 @@
|
||||
*{font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:12pt}body{margin:0;padding:0}.container{margin-right:auto;margin-left:auto}@media (min-width:770px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.row{width:100%}.col-1{width:100%;float:left}.col-2{width:50%;float:left}.col-3{width:33.33%;float:left}.col-4{width:25%;float:left}.col-5{width:20%;float:left}.col-6{width:16.66%;float:left}.col-7{width:14.28%;float:left}.col-8{width:12.5%;float:left}.col-9{width:11.11%;float:left}.col-10{width:10%;float:left}.col-11{width:9.09%;float:left}.col-12{width:8.33%;float:left}.nav{position:relative;background-color:#f0f8ff;top:0;left:0;right:0}ul.nav-list{display:flex;margin:0;padding:5px;min-height:60px;line-height:60px}li.nav-item{float:left;list-style:none;color:#000;font-size:10pt;margin-left:10px}li.nav-item:hover{font-size:12pt}a.brand{position:inherit;display:flex}.dropdown{position:relative;display:inline-block}.dropdown-content{display:none;position:absolute;background-color:#f9f9f9;min-width:160px;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);padding:12px 16px;z-index:1}.dropdown:hover .dropdown-content{display:block}*{box-sizing:border-box}body{font-family:Verdana,sans-serif;margin:0}.mySlides{display:none}img{vertical-align:middle}.slideshow-container{max-width:1000px;position:relative;margin:auto}.next,.prev{cursor:pointer;position:absolute;top:50%;width:auto;padding:16px;margin-top:-22px;color:#fff;font-weight:700;font-size:18px;transition:.6s ease;border-radius:0 3px 3px 0;user-select:none}.next{right:0;border-radius:3px 0 0 3px}.next:hover,.prev:hover{background-color:rgba(0,0,0,.8)}.text{color:#f2f2f2;font-size:15px;padding:8px 12px;position:absolute;bottom:8px;width:100%;text-align:center}.numbertext{color:#f2f2f2;font-size:12px;padding:8px 12px;position:absolute;top:0}.dot{cursor:pointer;height:15px;width:15px;margin:0 2px;background-color:#bbb;border-radius:50%;display:inline-block;transition:background-color .6s ease}.active,.dot:hover{background-color:#717171}.fade{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s}@-webkit-keyframes fade{from{opacity:.4}to{opacity:1}}@keyframes fade{from{opacity:.4}to{opacity:1}}@media only screen and (max-width:300px){.next,.prev,.text{font-size:11px}}
|
||||
96
dist/c5c675bb9c74ae17ec48e80f0197f4bf.css
vendored
Normal file
96
dist/c5c675bb9c74ae17ec48e80f0197f4bf.css
vendored
Normal file
@ -0,0 +1,96 @@
|
||||
* {
|
||||
box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: whitesmoke;
|
||||
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; }
|
||||
|
||||
.col-1 {
|
||||
flex: 0 0 8.33333%; }
|
||||
|
||||
.col-offset-1 {
|
||||
margin-left: 8.33333%; }
|
||||
|
||||
.col-2 {
|
||||
flex: 0 0 16.66667%; }
|
||||
|
||||
.col-offset-2 {
|
||||
margin-left: 16.66667%; }
|
||||
|
||||
.col-3 {
|
||||
flex: 0 0 25%; }
|
||||
|
||||
.col-offset-3 {
|
||||
margin-left: 25%; }
|
||||
|
||||
.col-4 {
|
||||
flex: 0 0 33.33333%; }
|
||||
|
||||
.col-offset-4 {
|
||||
margin-left: 33.33333%; }
|
||||
|
||||
.col-5 {
|
||||
flex: 0 0 41.66667%; }
|
||||
|
||||
.col-offset-5 {
|
||||
margin-left: 41.66667%; }
|
||||
|
||||
.col-6 {
|
||||
flex: 0 0 50%; }
|
||||
|
||||
.col-offset-6 {
|
||||
margin-left: 50%; }
|
||||
|
||||
.col-7 {
|
||||
flex: 0 0 58.33333%; }
|
||||
|
||||
.col-offset-7 {
|
||||
margin-left: 58.33333%; }
|
||||
|
||||
.col-8 {
|
||||
flex: 0 0 66.66667%; }
|
||||
|
||||
.col-offset-8 {
|
||||
margin-left: 66.66667%; }
|
||||
|
||||
.col-9 {
|
||||
flex: 0 0 75%; }
|
||||
|
||||
.col-offset-9 {
|
||||
margin-left: 75%; }
|
||||
|
||||
.col-10 {
|
||||
flex: 0 0 83.33333%; }
|
||||
|
||||
.col-offset-10 {
|
||||
margin-left: 83.33333%; }
|
||||
|
||||
.col-11 {
|
||||
flex: 0 0 91.66667%; }
|
||||
|
||||
.col-offset-11 {
|
||||
margin-left: 91.66667%; }
|
||||
|
||||
.col-12 {
|
||||
flex: 0 0 100%; }
|
||||
|
||||
.col-offset-12 {
|
||||
margin-left: 100%; }
|
||||
253
dist/c5c675bb9c74ae17ec48e80f0197f4bf.js
vendored
Normal file
253
dist/c5c675bb9c74ae17ec48e80f0197f4bf.js
vendored
Normal file
@ -0,0 +1,253 @@
|
||||
// modules are defined as an array
|
||||
// [ module function, map of requires ]
|
||||
//
|
||||
// map of requires is short require name -> numeric require
|
||||
//
|
||||
// anything defined in a previous bundle is accessed via the
|
||||
// orig method which is the require for previous bundles
|
||||
|
||||
require = (function (modules, cache, entry) {
|
||||
// Save the require from previous bundle to this closure if any
|
||||
var previousRequire = typeof require === "function" && require;
|
||||
|
||||
function newRequire(name, jumped) {
|
||||
if (!cache[name]) {
|
||||
if (!modules[name]) {
|
||||
// if we cannot find the module within our internal map or
|
||||
// cache jump to the current global require ie. the last bundle
|
||||
// that was added to the page.
|
||||
var currentRequire = typeof require === "function" && require;
|
||||
if (!jumped && currentRequire) {
|
||||
return currentRequire(name, true);
|
||||
}
|
||||
|
||||
// If there are other bundles on this page the require from the
|
||||
// previous one is saved to 'previousRequire'. Repeat this as
|
||||
// many times as there are bundles until the module is found or
|
||||
// we exhaust the require chain.
|
||||
if (previousRequire) {
|
||||
return previousRequire(name, true);
|
||||
}
|
||||
|
||||
var err = new Error('Cannot find module \'' + name + '\'');
|
||||
err.code = 'MODULE_NOT_FOUND';
|
||||
throw err;
|
||||
}
|
||||
|
||||
localRequire.resolve = resolve;
|
||||
|
||||
var module = cache[name] = new newRequire.Module;
|
||||
|
||||
modules[name][0].call(module.exports, localRequire, module, module.exports);
|
||||
}
|
||||
|
||||
return cache[name].exports;
|
||||
|
||||
function localRequire(x){
|
||||
return newRequire(localRequire.resolve(x));
|
||||
}
|
||||
|
||||
function resolve(x){
|
||||
return modules[name][1][x] || x;
|
||||
}
|
||||
}
|
||||
|
||||
function Module() {
|
||||
this.bundle = newRequire;
|
||||
this.exports = {};
|
||||
}
|
||||
|
||||
newRequire.Module = Module;
|
||||
newRequire.modules = modules;
|
||||
newRequire.cache = cache;
|
||||
newRequire.parent = previousRequire;
|
||||
|
||||
for (var i = 0; i < entry.length; i++) {
|
||||
newRequire(entry[i]);
|
||||
}
|
||||
|
||||
// Override the current require with this new one
|
||||
return newRequire;
|
||||
})({4:[function(require,module,exports) {
|
||||
var bundleURL = null;
|
||||
function getBundleURLCached() {
|
||||
if (!bundleURL) {
|
||||
bundleURL = getBundleURL();
|
||||
}
|
||||
|
||||
return bundleURL;
|
||||
}
|
||||
|
||||
function getBundleURL() {
|
||||
// Attempt to find the URL of the current script and use that as the base URL
|
||||
try {
|
||||
throw new Error;
|
||||
} catch (err) {
|
||||
var matches = ('' + err.stack).match(/(https?|file|ftp):\/\/[^)\n]+/g);
|
||||
if (matches) {
|
||||
return getBaseURL(matches[0]);
|
||||
}
|
||||
}
|
||||
|
||||
return '/';
|
||||
}
|
||||
|
||||
function getBaseURL(url) {
|
||||
return ('' + url).replace(/^((?:https?|file|ftp):\/\/.+)\/[^/]+$/, '$1') + '/';
|
||||
}
|
||||
|
||||
exports.getBundleURL = getBundleURLCached;
|
||||
exports.getBaseURL = getBaseURL;
|
||||
|
||||
},{}],3:[function(require,module,exports) {
|
||||
var bundle = require('./bundle-url');
|
||||
|
||||
function updateLink(link) {
|
||||
var newLink = link.cloneNode();
|
||||
newLink.onload = function () {
|
||||
link.remove();
|
||||
};
|
||||
newLink.href = link.href.split('?')[0] + '?' + Date.now();
|
||||
link.parentNode.insertBefore(newLink, link.nextSibling);
|
||||
}
|
||||
|
||||
var cssTimeout = null;
|
||||
function reloadCSS() {
|
||||
if (cssTimeout) {
|
||||
return;
|
||||
}
|
||||
|
||||
cssTimeout = setTimeout(function () {
|
||||
var links = document.querySelectorAll('link[rel="stylesheet"]');
|
||||
for (var i = 0; i < links.length; i++) {
|
||||
if (bundle.getBaseURL(links[i].href) === bundle.getBundleURL()) {
|
||||
updateLink(links[i]);
|
||||
}
|
||||
}
|
||||
|
||||
cssTimeout = null;
|
||||
}, 50);
|
||||
}
|
||||
|
||||
module.exports = reloadCSS;
|
||||
|
||||
},{"./bundle-url":4}],0:[function(require,module,exports) {
|
||||
var global = (1, eval)('this');
|
||||
var OldModule = module.bundle.Module;
|
||||
function Module() {
|
||||
OldModule.call(this);
|
||||
this.hot = {
|
||||
accept: function (fn) {
|
||||
this._acceptCallback = fn || function () {};
|
||||
},
|
||||
dispose: function (fn) {
|
||||
this._disposeCallback = fn;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
module.bundle.Module = Module;
|
||||
|
||||
if (!module.bundle.parent && typeof WebSocket !== 'undefined') {
|
||||
var ws = new WebSocket('ws://localhost:58723/');
|
||||
ws.onmessage = function(event) {
|
||||
var data = JSON.parse(event.data);
|
||||
|
||||
if (data.type === 'update') {
|
||||
data.assets.forEach(function (asset) {
|
||||
hmrApply(global.require, asset);
|
||||
});
|
||||
|
||||
data.assets.forEach(function (asset) {
|
||||
if (!asset.isNew) {
|
||||
hmrAccept(global.require, asset.id);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (data.type === 'reload') {
|
||||
ws.close();
|
||||
ws.onclose = function () {
|
||||
window.location.reload();
|
||||
}
|
||||
}
|
||||
|
||||
if (data.type === 'error-resolved') {
|
||||
console.log('[parcel] ✨ Error resolved');
|
||||
}
|
||||
|
||||
if (data.type === 'error') {
|
||||
console.error('[parcel] 🚨 ' + data.error.message + '\n' + 'data.error.stack');
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function getParents(bundle, id) {
|
||||
var modules = bundle.modules;
|
||||
if (!modules) {
|
||||
return [];
|
||||
}
|
||||
|
||||
var parents = [];
|
||||
var k, d, dep;
|
||||
|
||||
for (k in modules) {
|
||||
for (d in modules[k][1]) {
|
||||
dep = modules[k][1][d];
|
||||
if (dep === id || (Array.isArray(dep) && dep[dep.length - 1] === id)) {
|
||||
parents.push(+k);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (bundle.parent) {
|
||||
parents = parents.concat(getParents(bundle.parent, id));
|
||||
}
|
||||
|
||||
return parents;
|
||||
}
|
||||
|
||||
function hmrApply(bundle, asset) {
|
||||
var modules = bundle.modules;
|
||||
if (!modules) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (modules[asset.id] || !bundle.parent) {
|
||||
var fn = new Function('require', 'module', 'exports', asset.generated.js);
|
||||
asset.isNew = !modules[asset.id];
|
||||
modules[asset.id] = [fn, asset.deps];
|
||||
} else if (bundle.parent) {
|
||||
hmrApply(bundle.parent, asset);
|
||||
}
|
||||
}
|
||||
|
||||
function hmrAccept(bundle, id) {
|
||||
var modules = bundle.modules;
|
||||
if (!modules) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!modules[id] && bundle.parent) {
|
||||
return hmrAccept(bundle.parent, id);
|
||||
}
|
||||
|
||||
var cached = bundle.cache[id];
|
||||
if (cached && cached.hot._disposeCallback) {
|
||||
cached.hot._disposeCallback();
|
||||
}
|
||||
|
||||
delete bundle.cache[id];
|
||||
bundle(id);
|
||||
|
||||
cached = bundle.cache[id];
|
||||
if (cached && cached.hot && cached.hot._acceptCallback) {
|
||||
cached.hot._acceptCallback();
|
||||
return true;
|
||||
}
|
||||
|
||||
return getParents(global.require, id).some(function (id) {
|
||||
return hmrAccept(global.require, id)
|
||||
});
|
||||
}
|
||||
},{}]},{},[0])
|
||||
39
dist/index.html
vendored
Normal file
39
dist/index.html
vendored
Normal 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="/dist/c5c675bb9c74ae17ec48e80f0197f4bf.css">
|
||||
<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>
|
||||
@ -1,129 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>steev CSS</title>
|
||||
<link rel="stylesheet" type="text/css" href="../steevcss.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<br>
|
||||
<h1 style="text-align: center;">Grids</h1>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-1" style="border: 1px solid black;"> col-1 </div>
|
||||
</div>
|
||||
<br><br>
|
||||
<div class="row">
|
||||
<div class="col-2" style="border: 1px solid black;"> col-2 </div>
|
||||
<div class="col-2" style="border: 1px solid black;"> col-2 </div>
|
||||
</div>
|
||||
<br><br>
|
||||
<div class="row">
|
||||
<div class="col-3" style="border: 1px solid black;"> col-3 </div>
|
||||
<div class="col-3" style="border: 1px solid black;"> col-3 </div>
|
||||
<div class="col-3" style="border: 1px solid black;"> col-3 </div>
|
||||
</div>
|
||||
<br><br>
|
||||
<div class="row">
|
||||
<div class="col-4" style="border: 1px solid black;"> col-4 </div>
|
||||
<div class="col-4" style="border: 1px solid black;"> col-4 </div>
|
||||
<div class="col-4" style="border: 1px solid black;"> col-4 </div>
|
||||
<div class="col-4" style="border: 1px solid black;"> col-4 </div>
|
||||
</div>
|
||||
<br><br>
|
||||
<div class="row">
|
||||
<div class="col-5" style="border: 1px solid black;"> col-5 </div>
|
||||
<div class="col-5" style="border: 1px solid black;"> col-5 </div>
|
||||
<div class="col-5" style="border: 1px solid black;"> col-5 </div>
|
||||
<div class="col-5" style="border: 1px solid black;"> col-5 </div>
|
||||
<div class="col-5" style="border: 1px solid black;"> col-5 </div>
|
||||
</div>
|
||||
<br><br>
|
||||
<div class="row">
|
||||
<div class="col-6" style="border: 1px solid black;"> col-6 </div>
|
||||
<div class="col-6" style="border: 1px solid black;"> col-6 </div>
|
||||
<div class="col-6" style="border: 1px solid black;"> col-6 </div>
|
||||
<div class="col-6" style="border: 1px solid black;"> col-6 </div>
|
||||
<div class="col-6" style="border: 1px solid black;"> col-6 </div>
|
||||
<div class="col-6" style="border: 1px solid black;"> col-6 </div>
|
||||
</div>
|
||||
<br><br>
|
||||
<div class="row">
|
||||
<div class="col-7" style="border: 1px solid black;"> col-7 </div>
|
||||
<div class="col-7" style="border: 1px solid black;"> col-7 </div>
|
||||
<div class="col-7" style="border: 1px solid black;"> col-7 </div>
|
||||
<div class="col-7" style="border: 1px solid black;"> col-7 </div>
|
||||
<div class="col-7" style="border: 1px solid black;"> col-7 </div>
|
||||
<div class="col-7" style="border: 1px solid black;"> col-7 </div>
|
||||
<div class="col-7" style="border: 1px solid black;"> col-7 </div>
|
||||
</div>
|
||||
<br><br>
|
||||
<div class="row">
|
||||
<div class="col-8" style="border: 1px solid black;"> col-8 </div>
|
||||
<div class="col-8" style="border: 1px solid black;"> col-8 </div>
|
||||
<div class="col-8" style="border: 1px solid black;"> col-8 </div>
|
||||
<div class="col-8" style="border: 1px solid black;"> col-8 </div>
|
||||
<div class="col-8" style="border: 1px solid black;"> col-8 </div>
|
||||
<div class="col-8" style="border: 1px solid black;"> col-8 </div>
|
||||
<div class="col-8" style="border: 1px solid black;"> col-8 </div>
|
||||
<div class="col-8" style="border: 1px solid black;"> col-8 </div>
|
||||
</div>
|
||||
<br><br>
|
||||
<div class="row">
|
||||
<div class="col-9" style="border: 1px solid black;"> col-9 </div>
|
||||
<div class="col-9" style="border: 1px solid black;"> col-9 </div>
|
||||
<div class="col-9" style="border: 1px solid black;"> col-9 </div>
|
||||
<div class="col-9" style="border: 1px solid black;"> col-9 </div>
|
||||
<div class="col-9" style="border: 1px solid black;"> col-9 </div>
|
||||
<div class="col-9" style="border: 1px solid black;"> col-9 </div>
|
||||
<div class="col-9" style="border: 1px solid black;"> col-9 </div>
|
||||
<div class="col-9" style="border: 1px solid black;"> col-9 </div>
|
||||
<div class="col-9" style="border: 1px solid black;"> col-9 </div>
|
||||
</div>
|
||||
<br><br>
|
||||
<div class="row">
|
||||
<div class="col-10" style="border: 1px solid black;"> col-10 </div>
|
||||
<div class="col-10" style="border: 1px solid black;"> col-10 </div>
|
||||
<div class="col-10" style="border: 1px solid black;"> col-10 </div>
|
||||
<div class="col-10" style="border: 1px solid black;"> col-10 </div>
|
||||
<div class="col-10" style="border: 1px solid black;"> col-10 </div>
|
||||
<div class="col-10" style="border: 1px solid black;"> col-10 </div>
|
||||
<div class="col-10" style="border: 1px solid black;"> col-10 </div>
|
||||
<div class="col-10" style="border: 1px solid black;"> col-10 </div>
|
||||
<div class="col-10" style="border: 1px solid black;"> col-10 </div>
|
||||
<div class="col-10" style="border: 1px solid black;"> col-10 </div>
|
||||
</div>
|
||||
<br><br>
|
||||
<div class="row">
|
||||
<div class="col-11" style="border: 1px solid black;"> col-11 </div>
|
||||
<div class="col-11" style="border: 1px solid black;"> col-11 </div>
|
||||
<div class="col-11" style="border: 1px solid black;"> col-11 </div>
|
||||
<div class="col-11" style="border: 1px solid black;"> col-11 </div>
|
||||
<div class="col-11" style="border: 1px solid black;"> col-11 </div>
|
||||
<div class="col-11" style="border: 1px solid black;"> col-11 </div>
|
||||
<div class="col-11" style="border: 1px solid black;"> col-11 </div>
|
||||
<div class="col-11" style="border: 1px solid black;"> col-11 </div>
|
||||
<div class="col-11" style="border: 1px solid black;"> col-11 </div>
|
||||
<div class="col-11" style="border: 1px solid black;"> col-11 </div>
|
||||
<div class="col-11" style="border: 1px solid black;"> col-11 </div>
|
||||
</div>
|
||||
<br><br>
|
||||
<div class="row">
|
||||
<div class="col-12" style="border: 1px solid black;"> col-12 </div>
|
||||
<div class="col-12" style="border: 1px solid black;"> col-12 </div>
|
||||
<div class="col-12" style="border: 1px solid black;"> col-12 </div>
|
||||
<div class="col-12" style="border: 1px solid black;"> col-12 </div>
|
||||
<div class="col-12" style="border: 1px solid black;"> col-12 </div>
|
||||
<div class="col-12" style="border: 1px solid black;"> col-12 </div>
|
||||
<div class="col-12" style="border: 1px solid black;"> col-12 </div>
|
||||
<div class="col-12" style="border: 1px solid black;"> col-12 </div>
|
||||
<div class="col-12" style="border: 1px solid black;"> col-12 </div>
|
||||
<div class="col-12" style="border: 1px solid black;"> col-12 </div>
|
||||
<div class="col-12" style="border: 1px solid black;"> col-12 </div>
|
||||
<div class="col-12" style="border: 1px solid black;"> col-12 </div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../steevcss.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,19 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>steev CSS</title>
|
||||
<link rel="stylesheet" type="text/css" href="../steev.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="nav">
|
||||
<ul class="nav-list">
|
||||
<a href="/" class="list-item brand"><img height="60" src="https://testcreative.co.uk/wp-content/uploads/2018/08/logo.png" alt="dev-icon"></a>
|
||||
<li class="nav-item">Hello World</li>
|
||||
<li class="nav-item">Hello World</li>
|
||||
</ul>
|
||||
</div>
|
||||
<script src="../steevcss.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,51 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>steev CSS</title>
|
||||
<link rel="stylesheet" type="text/css" href="../steev.css">
|
||||
</head>
|
||||
<body>
|
||||
<br>
|
||||
<h1 style="text-align: center;">Grids</h1>
|
||||
<div class="container">
|
||||
<!-- Slideshow Container-->
|
||||
<div class="slideshow-container">
|
||||
|
||||
<!-- a slide -->
|
||||
<div class="mySlides fade">
|
||||
<div class="numbertext">1 / 3</div>
|
||||
<img src="https://www.exclusive-networks.com/de/wp-content/uploads/sites/10/2019/06/test-image.jpg" style="width:100%">
|
||||
<div class="text">Caption Text</div>
|
||||
</div>
|
||||
<!-- slide end -->
|
||||
|
||||
<div class="mySlides fade">
|
||||
<div class="numbertext">2 / 3</div>
|
||||
<img src="https://wow.olympus.eu/webfile/img/1632/oly_testwow_stage.jpg?x=1024" style="width:100%">
|
||||
<div class="text">Caption Two</div>
|
||||
</div>
|
||||
|
||||
<div class="mySlides fade">
|
||||
<div class="numbertext">3 / 3</div>
|
||||
<img src="https://knowpathology.com.au/app/uploads/2018/07/Happy-Test-Screen-01.png" style="width:100%">
|
||||
<div class="text">Caption Three</div>
|
||||
</div>
|
||||
|
||||
<a class="prev" onclick="plusSlides(-1)">❮</a>
|
||||
<a class="next" onclick="plusSlides(1)">❯</a>
|
||||
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div style="text-align:center">
|
||||
<span class="dot" onclick="currentSlide(1)"></span>
|
||||
<span class="dot" onclick="currentSlide(2)"></span>
|
||||
<span class="dot" onclick="currentSlide(3)"></span>
|
||||
</div>
|
||||
</div>
|
||||
<p style="text-align: center;">This yet only works once per html site</p>
|
||||
<script src="../steevcss.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
54
index.html
54
index.html
@ -1,54 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>steev CSS</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/steev.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="nav">
|
||||
<ul class="nav-list">
|
||||
<a href="/" class="list-item brand"><img height="60" src="https://testcreative.co.uk/wp-content/uploads/2018/08/logo.png" alt="dev-icon"></a>
|
||||
<li class="nav-item">Hello World</li>
|
||||
<li class="nav-item">Hello World</li>
|
||||
</ul>
|
||||
</div>
|
||||
<br>
|
||||
<!-- Slideshow Container-->
|
||||
<div class="slideshow-container">
|
||||
|
||||
<!-- a slide -->
|
||||
<div class="mySlides fade">
|
||||
<div class="numbertext">1 / 3</div>
|
||||
<img src="https://www.exclusive-networks.com/de/wp-content/uploads/sites/10/2019/06/test-image.jpg" style="width:100%">
|
||||
<div class="text">Caption Text</div>
|
||||
</div>
|
||||
<!-- slide end -->
|
||||
|
||||
<div class="mySlides fade">
|
||||
<div class="numbertext">2 / 3</div>
|
||||
<img src="https://wow.olympus.eu/webfile/img/1632/oly_testwow_stage.jpg?x=1024" style="width:100%">
|
||||
<div class="text">Caption Two</div>
|
||||
</div>
|
||||
|
||||
<div class="mySlides fade">
|
||||
<div class="numbertext">3 / 3</div>
|
||||
<img src="https://knowpathology.com.au/app/uploads/2018/07/Happy-Test-Screen-01.png" style="width:100%">
|
||||
<div class="text">Caption Three</div>
|
||||
</div>
|
||||
|
||||
<a class="prev" onclick="plusSlides(-1)">❮</a>
|
||||
<a class="next" onclick="plusSlides(1)">❯</a>
|
||||
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div style="text-align:center">
|
||||
<span class="dot" onclick="currentSlide(1)"></span>
|
||||
<span class="dot" onclick="currentSlide(2)"></span>
|
||||
<span class="dot" onclick="currentSlide(3)"></span>
|
||||
</div>
|
||||
<script src="js/steevcss.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,26 +0,0 @@
|
||||
var slideIndex = 1;
|
||||
showSlides(slideIndex);
|
||||
|
||||
function plusSlides(n) {
|
||||
showSlides(slideIndex += n);
|
||||
}
|
||||
|
||||
function currentSlide(n) {
|
||||
showSlides(slideIndex = n);
|
||||
}
|
||||
|
||||
function showSlides(n) {
|
||||
var i;
|
||||
var slides = document.getElementsByClassName("mySlides");
|
||||
var dots = document.getElementsByClassName("dot");
|
||||
if (n > slides.length) {slideIndex = 1}
|
||||
if (n < 1) {slideIndex = slides.length}
|
||||
for (i = 0; i < slides.length; i++) {
|
||||
slides[i].style.display = "none";
|
||||
}
|
||||
for (i = 0; i < dots.length; i++) {
|
||||
dots[i].className = dots[i].className.replace(" active", "");
|
||||
}
|
||||
slides[slideIndex-1].style.display = "block";
|
||||
dots[slideIndex-1].className += " active";
|
||||
}
|
||||
1
js/steevcss.min.js
vendored
1
js/steevcss.min.js
vendored
@ -1 +0,0 @@
|
||||
var slideIndex=1;function plusSlides(e){showSlides(slideIndex+=e)}function currentSlide(e){showSlides(slideIndex=e)}function showSlides(e){var s,l=document.getElementsByClassName("mySlides"),d=document.getElementsByClassName("dot");for(e>l.length&&(slideIndex=1),e<1&&(slideIndex=l.length),s=0;s<l.length;s++)l[s].style.display="none";for(s=0;s<d.length;s++)d[s].className=d[s].className.replace(" active","");l[slideIndex-1].style.display="block",d[slideIndex-1].className+=" active"}showSlides(slideIndex);
|
||||
17115
package-lock.json
generated
Normal file
17115
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
17
package.json
Normal file
17
package.json
Normal file
@ -0,0 +1,17 @@
|
||||
{
|
||||
"name": "steevcss",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"dev": "parcel src/index.html",
|
||||
"build": "parcel build src/index.html"
|
||||
},
|
||||
"author": "steev",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"node-sass": "^5.0.0",
|
||||
"parcel-bundler": "^1.3.1",
|
||||
"sass": "^1.32.5"
|
||||
}
|
||||
}
|
||||
39
src/index.html
Normal file
39
src/index.html
Normal 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
26
src/scss/main.sass
Normal 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
|
||||
Loading…
x
Reference in New Issue
Block a user