Get Started
MeDes Blogger Style Framework
Media Desain Blogger CSS Framework is the first library CSS for google blogger. Make layouting post, statistic page, widget, responsive, more simple and include elegan web assests (button, collumns, icon, embed responsive, etc).
You can download or embed MeDes CDN and apply to your template free. And we make some premium sample template & includ support (paid inlucde). And than we're ready to developing your dream weblog from your mockup design. Lets upgrade your own blog more profesional.
Lasted Version
The lasted version MeDes Blogger CSS Framework now is version 1.2.0
Others Plugin CDN have to Add:
<link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.5.0/css/all.css' integrity='sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU' rel='stylesheet'/>
<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js'/>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.js'/>
CSS:
/*
Mediadesain CSS Framework
=========================================
mediadesain.com
Google Blogger Styler & Premium Themes
Mediadesain Structure Collumns v1.2 (181225)
Medes Theme (Blogger CSS Framework)
*/
*,:before,:after{box-sizing:inherit}body{font-family:Open Sans,sans-serif;color:$(thumb.txtcolor);background:$(body.bgcolor);height:100%;box-sizing:border-box}img{max-width:100%}h1,h2,h3,h4{font-weight:400}ol,ul,.widget ul{-webkit-padding-start:2em}small{opacity:.7}input{-webkit-appearance:none;-moz-appearance:none;appearance:none}:focus{outline:unset}.blog-feeds,.post-feeds{display:none}.Blog,.section{margin:0 1em}#MeDes-QuickAccess{background-color:#fff}.material-icons,.icon-text{vertical-align:middle}.navbar-admin{overflow:hidden}.navbar-admin a{float:left;font-size:16px;color:#888!important;text-align:center;padding:14px 16px}.dropdown{float:left;overflow:hidden}.dropdown .dropbtn{font-size:16px;border:none;outline:none;color:#666;padding:14px 16px;margin:0}.navbar a:hover,.dropdown:hover .dropbtn{background-color:#f9f9f9}.dropdown-content{display:none;position:absolute;background-color:#f9f9f9;box-shadow:0 8px 16px 0 rgba(0,0,0,0.2);z-index:1;top:45px}.dropdown-content a{float:none;padding:12px 16px;text-decoration:none;display:block;text-align:left}.dropdown-content a:hover{background-color:#ddd}.dropdown-content a.builder-link{background:#9acd32;color:#FFF!important;margin:5px}.dropdown:hover .dropdown-content{display:block}.widget-item-control{z-index:3}.separator a{padding:0;margin:0!important}a.quickedit:hover{opacity:1;transition:.3s ease;transform:scale(1.2)}a.quickedit{position:absolute;right:10px;top:-10px;opacity:.3}a.quickedit:before{content:'\f044';font-family:Font Awesome 5 Free;font-size:15px;color:#fff;background:rgba(154,205,50,0.95);border:1px solid #7ba527;padding:5px;border-radius:25%;z-index:10}a.quickedit img{display:none}.status-msg-body {z-index: 1;}.status-msg-border{opacity:0;padding:1em}.error-container{position:fixed;width:100%;height:100%;background:$(404.bg.color);z-index:5}.error-page{width:80%;position:absolute;margin:0 10%;top:20%;text-align:center}.error-page a,.error-page i{color:$(404.link.color)!important}.searchBox{display:inline;margin:20px auto;background:$(404search.bg.color);color:$(404search.txt.color);border:0;padding:10px}.searchButton{background:$(404submit.bg.color);color:$(404submit.txt.color);border:none;padding:10px;cursor:pointer}.loading{-webkit-animation:loading 3s 1;animation:loading 3s 1}@-webkit-keyframes loading{0%{opacity:0}25%{opacity:0}75%{opacity:0}100%{opacity:1}}@keyframes loading{0%{opacity:0}25%{opacity:0}75%{opacity:0}100%{opacity:1}}header#header-wrapper{position:relative;overflow:hidden;background:$(header.bgcolor);color:$(header.txtcolor);text-align:center}#header .widget,#main-post.section{margin:0}.author-profile{padding:2em 1em 1em;background-color:$(sidabar.bgcolor);color:$(sidabar.txtcolor);margin:1em 0}.author-profile img{border:none;float:none;margin:0;width:100%;max-width:100px;border-radius:100%}#blog-pager{height:auto;text-align:center}#blog-pager button{background:$(element.color)}footer#footer-wrapper{font:$(footer.font.style);color:$(footer.txtcolor);background:$(footer.bgcolor);border-top:2px solid $(footer.bdrcolor);font-weight:lighter}footer#footer-wrapper .simple-menu-B a,footer .widget-content a{color:$(footer.link.color)}#credit{font:$(credit.font.style);background:$(credit.bgcolor);color:$(credit.txtcolor)}#credit a{color:$(credit.link.color)}#credit .columns{margin:0;padding:1em 0}#script{display:none}.first-img{overflow:hidden;position:relative;height:400px;margin-bottom:1em;display:none}.first-img img{width:100%!important;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#header-inner img{max-width:350px;height:auto;width:100%;margin:0 auto}h1.title{font:$(headerTitle.font.style)}.description span{font:$(headerSubTitle.font.style)}.MeDes-header{height:100%;width:100%;top:0;position:absolute}.MeDes-parallax{height:150%;width:100%;top:0;position:absolute}.header-small{padding:93.5px 0 35px}.header-medium{padding:128.5px 0 70px}.header-large{padding:158.5px 0 100px}.widget h2{font-size:larger;margin:10px 0}.Profile .widget-content{text-align:center}.Profile img{max-height:50%;float:unset;margin:0 auto;border-radius:100%}.Profile a.profile-link:after{font-family:Fontawesome;content:' \f105'}.label-size{background:$(element.color);display:block;float:left;margin:0 3px 3px 0;color:#fff;font-size:14px;overflow:hidden}.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;filter:alpha(100);opacity:10}.cloud-label-widget-content{text-align:left;margin-top:1em}.label-size a,.label-size span{display:inline-block;color:#fff!important;padding:6px 8px}.label-size:hover{opacity:.8}.label-count{white-space:nowrap;margin-left:-3px;background:rgba(0,0,0,0.07);font-size:12px;padding:10px!important;opacity:.8}.label-size{line-height:1.2}h2.date-header{font-size:small;font-weight:unset;color:#ddd;margin:0}h3.post-title.entry-title{padding:10px 0 0;font-size:x-large}.post-header{line-height:1.6;font-size:80%;color:#aaa}.post-header a{color:#ccc!important}.post-author,.post-timestamp,.comment-total{margin-right:1em;margin-left:0}.MeDes-share-button{position:relative;width:100%;padding:5px 0;display:inline-block;margin:0 auto;border-bottom:1px solid rgba(0,0,0,.08);overflow:hidden}.MeDes-share-button .share-wrap{display:block;overflow:hidden;max-width:700px;margin:0 auto}.MeDes-share-button .share-wrap .icon-wrapper{display:inline-block;width:31px;float:left;text-align:center;color:#FFF;background:rgba(0,0,0,0.08)}.MeDes-share-button .share-wrap .text-wrapper{text-align:center;margin:0 auto;display:inline-block;min-width:41px;color:#FFF}.MeDes-share-button .share-wrap ul{margin:0;padding:0!important}.MeDes-share-button .share-wrap ul li{list-style:none;list-style-type:none;padding:0;margin:2px;float:left;width:16%;max-width:115px;display:inline-block;font-size:13px;overflow:hidden;text-align:left;height:32px;line-height:32px;color:#fff;border-radius:3px;transition:all .4s}.MeDes-share-button .share-wrap ul li a,.MeDes-share-button .share-wrap ul li a:hover{color:#fff;cursor:pointer;line-height:32px;height:100%;display:block;text-decoration:none}.MeDes-share-button .share-wrap ul li .fa{color:#fff;font-size:16px;font-weight:400;font-family:FontAwesome;display:inline-block;text-align:center;padding:0;height:32px;line-height:inherit;width:30px;background-color:rgba(0,0,0,.1)}.MeDes-share-button .share-wrap .btn_fb .share-btn,.MeDes-share-button .share-wrap .btn_twet .share-btn,.MeDes-share-button .share-wrap .btn_gplus .share-btn,.MeDes-share-button .share-wrap .btn_pinterst .share-btn,.MeDes-share-button .share-wrap .btn_linkdin .share-btn,.MeDes-share-button .share-wrap .btn_whatsapp .share-btn{position:relative;color:#fff;display:inline-block;text-align:center;font-weight:700;font-size:11px;float:right;min-width:12px;padding:0 8px 0 0}.MeDes-share-button .share-wrap .btn_fb{background:#3a579a}.MeDes-share-button .share-wrap .btn_fb:hover{background:#314a83}.MeDes-share-button .share-wrap .btn_twet{background:#00abf0}.MeDes-share-button .share-wrap .btn_twet:hover{background:#0092cc}.MeDes-share-button .share-wrap .btn_gplus{background:#df4a32}.MeDes-share-button .share-wrap .btn_gplus:hover{background:#be3f2b}.MeDes-share-button .share-wrap .btn_pinterst{background:#cd1c1f}.MeDes-share-button .share-wrap .btn_pinterst:hover{background:#ae181a}.MeDes-share-button .share-wrap .btn_linkdin{background:#2554BF}.MeDes-share-button .share-wrap .btn_linkdin:hover{background:#224EB4}.MeDes-share-button .share-wrap .btn_whatsapp{background:#25D366}.MeDes-share-button .share-wrap .btn_whatsapp:hover{background:#22bf5d}@media only screen and (max-width: 980px){.MeDes-share-button .share-wrap .btn_pinterst,.MeDes-share-button .share-wrap .btn_linkdin,.MeDes-share-button .share-wrap .btn_whatsapp,{width:34px}.MeDes-share-button .share-wrap .btn_fb .share-btn,.MeDes-share-button .share-wrap .btn_twet .share-btn,.MeDes-share-button .share-wrap .btn_gplus .share-btn,.MeDes-share-button .share-wrap .btn_pinterst .share-btn,.MeDes-share-button .share-wrap .btn_linkdin .share-btn,.MeDes-share-button .share-wrap .btn_whatsapp .share-btn{display:none}}@media only screen and (max-width:900px){.MeDes-share-button .share-wrap ul li a,.MeDes-share-button .share-wrap ul li a:hover{color:#fff;cursor:pointer;line-height:32px;font-size:11px;height:100%;display:block}.MeDes-share-button .share-wrap .text-wrapper{min-width:34px}.MeDes-share-button .share-wrap .btn_linkdin,.MeDes-share-button .share-wrap .btn_whatsapp,.MeDes-share-button .share-wrap .btn_pinterst{width:32px}.MeDes-share-button .share-wrap ul li{margin:1px 3px}}@media only screen and (max-width:479px){.MeDes-share-button .share-wrap .share{border:0;margin:0 5px 0 1px;overflow:visible;width:80px}.MeDes-share-button .share-wrap ul li{width:32px;margin:2px}.MeDes-share-button .share-wrap .text-wrapper{display:none}.MeDes-share-button .share-wrap ul li .fa{width:32px}}nav{position:absolute;z-index:3;width:100%}.fixed,.fixed-autohide,.fixed-autohide-res{position:fixed;z-index:4;width:100%}nav.transparent .simple-menu-A,nav.fixed-transparent .simple-menu-A{background:transparent;transition:.5s ease}nav.fixed-transparent{position:fixed;z-index:4;width:100%}nav.transparent.nav-transparent .simple-menu-A,nav.fixed-transparent.nav-transparent .simple-menu-A{background:$(topnav.background)}.nav-down{top:0;transition:.3s ease}.nav-up{top:-65px;transition:.3s ease}.simple-menu-A{background-color:$(topnav.background);font:normal normal 14px Lato;z-index:3;padding:7px 0;opacity:.95}.simple-menu-A .logonav img,.simple-menu-A .logonav-center,.simple-menu-A .logonav-center-res{height:32px;margin:5px 10px 0}.simple-menu-A .logonav-center{position:absolute;left:45%;transform:translateX(-45%)}.simple-menu-A ul{margin:0;padding:0;list-style:none;overflow:hidden}.simple-menu-A li a{display:block;padding:15px 20px;text-decoration:none;color:$(topnav.content.color);font-size:smaller}.simple-menu-A li a:hover,.simple-menu-A .menu-btn:hover{opacity:1}.simple-menu-A .menu{clear:both;max-height:0;transition:max-height .5s ease-out}.simple-menu-A ul.menu{font:$(topnav.font.style);padding:0!important}.simple-menu-A ul.menu-center{position:sticky;float:left;left:50%;transform:translateX(-50%)}.simple-menu-A .sociallink{padding:12px 10px 10px;font:$(topnav.font.style)}.simple-menu-A .sociallink a{color:#FFF}.simple-menu-A .sociallink span{padding:10px 5px;border-right:1px solid $(topnav.element.color)}.simple-menu-A .sociallink span i,.simple-menu-A .sociallink span a{color:$(topnav.content.color)}.simple-menu-A .sociallink a:last-child{padding-right:5px}.simple-menu-A .widget-item-control{margin-right:-10px}.simple-menu-A .menu-icon-v,.simple-menu-A .menu-icon{cursor:pointer;padding:18px;position:relative;user-select:none;background:$(topnav.element.color)}.simple-menu-A .menu-icon-v .navicon,.simple-menu-A .menu-icon .navicon{display:block;height:2px;position:relative;transition:background .2s ease-out;width:18px}.simple-menu-A .menu-icon-v .navicon:before,.simple-menu-A .menu-icon-v .navicon:after,.simple-menu-A .menu-icon .navicon:before,.simple-menu-A .menu-icon .navicon:after{background:$(topnav.content.color);content:'';display:block;height:100%;position:absolute;transition:all .2s ease-out}.simple-menu-A .menu-icon-v .navicon:before,.simple-menu-A .menu-icon-v .navicon:after{width:100%}.simple-menu-A .menu-icon .navicon:before,.simple-menu-A .menu-icon .navicon:after{width:120%}.simple-menu-A .menu-icon-v .navicon:before{top:0;right:5.5px;transform:rotate(45deg)}.simple-menu-A .menu-icon .navicon:before{top:10px}.simple-menu-A .menu-icon-v .navicon:after{top:0;left:5.5px;transform:rotate(-45deg)}.simple-menu-A .menu-icon .navicon:after{top:0}.simple-menu-A .menu-btn{display:none}.simple-menu-A .menu-btn:checked ~ .menu{max-height:850px}.simple-menu-A .menu-btn:checked ~ .menu-icon-v .navicon,.simple-menu-A .menu-btn:checked ~ .menu-icon .navicon{background:transparent}.simple-menu-A .menu-btn:checked ~ .menu-icon-v .navicon:before,.simple-menu-A .menu-btn:checked ~ .menu-icon .navicon:before{transform:rotate(-45deg)}.simple-menu-A .menu-btn:checked ~ .menu-icon-v .navicon:after,.simple-menu-A .menu-btn:checked ~ .menu-icon .navicon:after{transform:rotate(45deg)}.simple-menu-A .menu-btn:checked ~ .menu-icon-v:not(.steps) .navicon:before,.simple-menu-A .menu-btn:checked ~ .menu-icon-v:not(.steps) .navicon:after,.simple-menu-A .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,.simple-menu-A .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after{top:0}#MeDes-dropdown1 input{display:none}#MeDes-dropdown1 input:checked ~ ul.submenu{max-height:300px;position:fixed}#MeDes-dropdown1 .headmenu{display:block;padding:10px 20px;font:$(topnav.font.style);font-size:smaller;color:$(topnav.content.color)}#MeDes-dropdown1 .headmenu:hover{cursor:pointer}#MeDes-dropdown1 ul.submenu{max-height:0;margin-top:11px;padding:0;overflow:hidden;list-style-type:none;background:$(topnav.background);opacity:.95;position:absolute;display:inline-grid}#submenu{width:25%;margin:0}#submenu .widget{margin:0}.search-box{background:$(topnav.background);float:right;width:270px;padding:10px}.search-box .search-form{padding:10px;width:175px;border:none}.search-box .search-submit{width:65px;padding:11px;border:none;background:none;background:rgba(0,0,0,0.1);color:$(topnav.content.color)}.show-search{display:none}#nav-bottom .simple-menu-B{padding:0}#nav-bottom .simple-menu-B li{list-style-type:none;padding:10px 0}#nav-bottom .simple-menu-B li a{margin-left:10px}.container,nav .container{max-width:1200px;padding:0;margin:0 auto;overflow:hidden}.container-small,nav .container-small{max-width:950px;padding:0;margin:0 auto;overflow:hidden}.container-large,nav .container-large{max-width:1400px;padding:0;margin:0 auto;overflow:hidden}.container-fluid{max-width:100%}.container,.container-small,.container-large{padding:40px 0}.row{display:flex;flex-wrap:wrap}.row-top{align-items:flex-start}.row-center{align-items:center}.row-bottom{align-items:flex-end}.MeDes-row{margin:0 -1em;display:flex;flex-wrap:wrap}.column,.columns{float:left;position:relative;min-height:1px}.content{margin:0 1em}.hide-all,.show-res,.hide-res{display:none}.one,.one-res,.one-half-res{width:8.333%}.two,.two-res,.two-half-res{width:16.666%}.three,.three-res,.three-half-res{width:25%}.four,.four-res,.four-half-res{width:33.333%}.five,.five-res,.five-half-res{width:41.666%}.six,.six-res,.six-half-res{width:50%}.seven,.seven-res,.seven-half-res{width:58.334%}.eight,.eight-res,.eight-half-res{width:66.667%}.nine,.nine-res,.nine-half-res{width:75%}.ten,.ten-res,.ten-half-res{width:83.334%}.eleven,.eleven-res,.eleven-half-res{width:91.667%}.twelve,.twelve-res,.twelve-half-res{width:100%}.one-fifth,.one-fifth-res,.one-fifth-half-res{width:20%}.two-fifth,.two-fifth-res,.two-fifth-half-res{width:40%}.three-fifth,.three-fifth-res,.three-fifth-half-res{width:60%}.four-fifth,.four-fifth-res,.four-fifth-half-res{width:80%}.one,.two,.three,.four,.five,.six,.seven,.eight,.nine,.ten,.twelve,.one-res,.two-res,.three-res,.four-res,.five-res,.six-res,.seven-res,.eight-res,.nine-res,.ten-res,.eleven-res,.twelve-res,.one-fifth,.two-fifth,.one-half-res,.two-half-res,.three-half-res,.four-half-res,.five-half-res,.six-half-res,.seven-half-res,.eight-half-res,.nine-half-res,.ten-half-res,.eleven-half-res,.twelve-half-res,.three-fifth,.four-fifth{margin:0 0 1em}.thumbnail-box .thumb-wrapper a{color:$(thumb.link.color)!important}.thumbnail-box .thumb-wrapper{background-color:$(thumb.bgcolor)!important;border-color:$(element.color)!important;color:$(thumb.txtcolor)!important}.thumbnail-box .item-title,#sidebar-wrapper .widget h2{font:$(thumb.font.style)}.thumbnail-box .thumb-wrapper,#sidebar-wrapper .widget{font:$(thumbcontent.font.style)}#sidebar-wrapper .widget a{color:$(sidabar.link.color)}#sidebar-wrapper .widget{background-color:$(sidabar.bgcolor);color:$(sidabar.txtcolor);border-color:$(element.color)!important}.pull-left{float:left}.pull-right{float:right}.pull-none{float:none}.box-dark .content{background:$(bg.dark.color);color:$(txt.dark.color)}.box-light .content{background:$(bg.light.color);color:$(txt.light.color)}.box-rounded-small{border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;overflow:hidden}.box-rounded,.box-rounded-normal{border-radius:7px;-webkit-border-radius:7px;-moz-border-radius:7px;overflow:hidden}.box-rounded-large{border-radius:9px;-webkit-border-radius:9px;-moz-border-radius:9px;overflow:hidden}.box-rounded-x-large{border-radius:40px;-webkit-border-radius:40px;-moz-border-radius:40px;overflow:hidden}.box-shadow{box-shadow:rgba(0,0,0,0.15) 0 0 20px 0}.box-shadow-soft{box-shadow:0 0 20px 1px rgba(0,0,0,0.08)}.img-border{margin:-5px;padding:5px;box-shadow:rgba(0,0,0,0.1) 1px 1px 20px 1px}.reveal{opacity:0;-webkit-transform:translate3d(0,100px,0);transform:translate3d(0,100px,0);-webkit-transition:opacity 0.8s,-webkit-transform .8s;transition:opacity 0.8s,-webkit-transform .8s;transition:opacity 0.8s,transform .8s;transition:opacity 0.8s,transform 0.8s,-webkit-transform .8s}.reveal_visible{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.hover-scale,.hover-jump{transition:.3s ease}.hover-scale:hover{transform:scale(1.03)}.hover-jump:hover{transform:translate3d(0,-5px,1px)}a:link{text-decoration:none;color:$(thumb.link.color);transition:.3s ease-out}a:visited{text-decoration:none;color:$(thumb.link.color)}a:hover{text-decoration:none;opacity:.7;transition:.3s ease-out}header#header-wrapper a{color:$(header.txtcolor)}.post-wrapper h1{font-size:xx-large}.post-wrapper h2{margin:0;font-size:x-large}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-unset{text-transform:unset}.text-uppercase{text-transform:uppercase}.text-lowercase{text-transform:lowercase}.text-capitalize{text-transform:capitalize}.post-wrapper ol,.post-wrapper ul{padding:0 0 0 1.5em !important}ul.no-style,ol.no-style{list-style:none;margin:1em 0!important;padding:0 .5em!important}.post-wrapper ul li{text-align:left}hr{border-style:solid;border-width:0 0 1px;margin:1em 0;opacity:.5}hr.MeDes-bold{border-width:0 0 2px}hr.MeDes-dashed{border-style:dashed}hr.MeDes-dashed-bold{border-style:dashed;border-width:0 0 2px}hr.MeDes-dotted{border-style:dotted}hr.MeDes-dotted-bold{border-style:dotted;border-width:0 0 2px}blockquote{display:block;padding:20px;background:#f7f7f7;color:#adadad;margin:10px 0;position:relative;border:1.5px solid #f0f0f0;overflow:hidden;font-style:normal;box-shadow:0 7px 10px rgba(206,206,206,0.15)}blockquote small{opacity:1}blockquote:before{position:absolute;content:"\f10e";font-family:Font Awesome 5 Free;font-weight:800;font-size:4rem;opacity:.1;right:10px;top:-10px}.MeDes-success{background-color:#4ce883!important;border:1.5px solid #43da78;color:#fff}.MeDes-success:before{position:absolute;content:"\f00c";font-family:Font Awesome 5 Free;font-weight:800;font-size:4rem;opacity:.4;right:10px;top:-10px}.MeDes-alert{background-color:#8ac5ff!important;border:1.5px solid #79baf9;color:#fff}.MeDes-alert:before{position:absolute;content:"\f05a";font-family:Font Awesome 5 Free;font-weight:800;font-size:4rem;opacity:.4;right:10px;top:-10px}.MeDes-warning{background-color:#fbb91a!important;border:1.5px solid #f3b00f;color:#fff}.MeDes-warning:before{position:absolute;content:"\f071";font-family:Font Awesome 5 Free;font-weight:800;font-size:3.5rem;opacity:.4;right:10px;top:-10px}.MeDes-error{background-color:#ff4835!important;border:1.5px solid #f53a27;color:#fff}.MeDes-error:before{position:absolute;content:"\f06a";font-family:Font Awesome 5 Free;font-weight:800;font-size:4rem;opacity:.4;right:10px;top:-10px}.post-wrapper img{margin:.5em 0}.Medes-Responsive-Video{position:relative;padding-bottom:56.25%;height:0;margin:1em 0 1.5em}.Medes-Responsive-Video iframe{position:absolute;top:0;left:0;width:100%;height:100%}#MeDes-accordion .accordion{background-color:$(accordion.bgcolor);color:$(accordion.txtcolor);cursor:pointer;padding:18px;width:100%;margin-bottom:10px;border:none;text-align:left;outline:none;font-size:15px;transition:.4s}#MeDes-accordion .active,.accordion:hover{background-color:$(accordion.bgcolor.active)}#MeDes-accordion .accordion:after{content:'\002B';color:$(accordion.txtcolor);font-weight:700;float:right;margin-left:5px}#MeDes-accordion .active:after{content:"\2212"}#MeDes-accordion .content{max-height:0;overflow:hidden;transition:max-height .2s ease-out}.MeDes-btn{background-color:$(thumb.link.color);border:none;color:#fff!important;padding:15px 32px;display:inline-table;font-size:16px;margin:4px 2px;cursor:pointer;transition:.3s ease-in-out!important;vertical-align:middle}.MeDes-btn:hover{opacity:.8;box-shadow:0 3px 10px 0 rgba(0,0,0,0.3)}.MeDes-btn-o{background:transparent!important;border:1px solid $(thumb.link.color);color:$(thumb.link.color);padding:15px 32px;display:inline-table;font-size:16px;margin:4px 2px;cursor:pointer;transition:.3s ease-in-out}.MeDes-btn-o:hover{background:$(thumb.link.color)!important;color:$(btn.txt.hover)}.btn-a{background-color:$(btn.a)}.btn-b{background-color:$(btn.b)}.btn-c{background-color:$(btn.c)}.btn-d{background-color:$(btn.d)}.MeDes-btn-o.btn-a{color:$(btn.a);border-color:$(btn.a)}.MeDes-btn-o.btn-a:hover{background-color:$(btn.a)!important;color:$(btn.txt.hover)}.MeDes-btn-o.btn-b{color:$(btn.b);border-color:$(btn.b)}.MeDes-btn-o.btn-b:hover{background-color:$(btn.b)!important;color:$(btn.txt.hover)}.MeDes-btn-o.btn-c{color:$(btn.c);border-color:$(btn.c)}.MeDes-btn-o.btn-c:hover{background-color:$(btn.c)!important;color:$(btn.txt.hover)}.MeDes-btn-o.btn-d{color:$(btn.d);border-color:$(btn.d)}.MeDes-btn-o.btn-d:hover{background-color:$(btn.d)!important;color:$(btn.txt.hover)}.btn-block{width:100%;display:block}#MeDes-pager{padding:10px;background-color:$(sidabar.bgcolor);color:$(sidabar.txtcolor);margin:1em 0}#MeDes-pager .MeDes-pages-right{width:50%;float:left;margin:0;text-align:left;transition:all .3s ease-out}#MeDes-pager .MeDes-pages-left{width:50%;float:right;margin:0;text-align:right;transition:all .3s ease-out}#MeDes-pager .current-pageleft{padding:0 0 0 15px}#MeDes-pager .current-pageright{padding:0 15px 0 0}#MeDes-pager .pager-title-left{font-size:22px;font-weight:700;text-transform:uppercase;transition:all .3s ease-out}#blog-pager-newer-link{float:left;padding:0 0 0 15px}#blog-pager-older-link{float:right;padding:0 15px 0 0}#MeDes-pages h1,#MeDes-pages h3.post-title.entry-title{font:$(headerTitle.font.style);padding-bottom:10px}#MeDes-pages h2{font:$(headerSubTitle.font.style);padding-bottom:10px;opacity:.9}#MeDes-pages p,#MeDes-pages ol,#MeDes-pages ul{opacity:.85}#MeDes-pages .column{margin-top:10px}.MeDes-labpost{margin:0}.labpost-button{padding:0 10px}.labpost-button span{padding:15px 20px;cursor:pointer;position:relative;display:inline-block}.labpost-button span.active{border-bottom:4px solid $(element.color);font-weight:700}.labpost-content{padding-top:1em}.loader{position:absolute;left:50%;top:50%;margin-left:-27.5px;margin-top:-27.5px;transition:all .3s linear}.hide-load .loader{opacity:0}.squarin{background:#374140;width:15px;height:15px;float:left;top:-10px;margin-right:5px;margin-top:5px;position:relative;opacity:0;-webkit-animation:enter 6s infinite;animation:enter 6s infinite}.enter{top:0;opacity:1}.squarin:nth-child(1){-webkit-animation-delay:1.8s;-moz-animation-delay:1.8s;animation-delay:1.8s}.squarin:nth-child(2){-webkit-animation-delay:2.1s;-moz-animation-delay:2.1s;animation-delay:2.1s}.squarin:nth-child(3){-webkit-animation-delay:2.4s;-moz-animation-delay:2.4s;animation-delay:2.4s;background:#09c}.squarin:nth-child(4){-webkit-animation-delay:.9s;-moz-animation-delay:.9s;animation-delay:.9s}.squarin:nth-child(5){-webkit-animation-delay:1.2s;-moz-animation-delay:1.2s;animation-delay:1.2s}.squarin:nth-child(6){-webkit-animation-delay:1.5s;-moz-animation-delay:1.5s;animation-delay:1.5s}.squarin:nth-child(8){-webkit-animation-delay:.3s;-moz-animation-delay:.3s;animation-delay:.3s}.squarin:nth-child(9){-webkit-animation-delay:.6s;-moz-animation-delay:.6s;animation-delay:.6s}.MeDes-Banner-a .bnr-bg{position:absolute;bottom:0;width:100%;padding:80px 15px 20px;background:linear-gradient(rgba(000,000,000,0),#151514);color:#fff}.MeDes-Banner-a h3{font-size:25px}.MeDes-Banner-a .bnr-bg p{padding:0;margin:0;color:$(banner.overlay)}.MeDes-Banner-a .bnr-bg a{color:#fff}.MeDes-Banner-a .bnr-thumb{display:block;width:100%;height:auto}.MeDes-Banner-a .bnr-overlay{position:absolute;top:0;bottom:0;left:0;right:0;height:100%;width:100%;opacity:0;transform:scale(0);transition:.5s ease;background-color:$(banner.overlay)}.MeDes-Banner-a .content:hover .bnr-overlay{opacity:.95;transform:scale(1)}.MeDes-Banner-a .bnr-item{color:$(banner.overlay.txtclr);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(100% - 2em);max-width:250px}.table-team.style-a .content{padding:65px 20px 20px}.table-team .person-avatar{width:110px;height:110px;background-size:cover!important;border:5px solid $(teamavatar.border.color);border-radius:100%;margin:0 auto -55px;position:relative;z-index:2}.table-team h4{color:$(teamname.txt.color)}.table-team p{margin-top:5px}.pricing-A ul,.pricing-B ul{list-style-type:none;text-align:center;padding:0!important;margin:0}.pricing-A .price-package{color:#FFF;padding:.5em!important;margin:0;font-size:25px}.pricing-A h2{background:rgba(255,255,255,.2);border-radius:25px;font-size:15px!important;padding:10px}.pricing-B .price-package{color:#FFF;font-size:25px}.pricing-B .price-package h3{padding:.5em 1em}.pricing-B .price-package h2{background:rgba(255,255,255,.2);border-radius:0;font-size:15px!important;padding:10px}.box-dark .pricing-include li{text-align:center!important;padding:.7em;border-bottom:1px solid rgba(238,238,238,0.05)}.box-light .pricing-include li{text-align:center!important;padding:.7em;border-bottom:1px solid rgba(255,255,255,0.5)}.columns:nth-child(1) .price-package,.columns:nth-child(1) .select-price .MeDes-btn{background:$(tab.price.1)}.columns:nth-child(2) .price-package,.columns:nth-child(2) .select-price .MeDes-btn{background:$(tab.price.2)}.columns:nth-child(3) .price-package,.columns:nth-child(3) .select-price .MeDes-btn{background:$(tab.price.3)}.columns:nth-child(4) .price-package,.columns:nth-child(4) .select-price .MeDes-btn{background:$(tab.price.4)}.columns:nth-child(1) .MeDes-btn-o.btn-prc{color:$(tab.price.1);border-color:$(tab.price.1)}.columns:nth-child(1) .MeDes-btn-o.btn-prc:hover{background-color:$(tab.price.1)!important;color:$(btn.txt.hover)}.columns:nth-child(2) .MeDes-btn-o.btn-prc{color:$(tab.price.2);border-color:$(tab.price.2)}.columns:nth-child(2) .MeDes-btn-o.btn-prc:hover{background-color:$(tab.price.2)!important;color:$(btn.txt.hover)}.columns:nth-child(3) .MeDes-btn-o.btn-prc{color:$(tab.price.3);border-color:$(tab.price.3)}.columns:nth-child(3) .MeDes-btn-o.btn-prc:hover{background-color:$(tab.price.3)!important;color:$(btn.txt.hover)}.columns:nth-child(4) .MeDes-btn-o.btn-prc{color:$(tab.price.4);border-color:$(tab.price.4)}.columns:nth-child(4) .MeDes-btn-o.btn-prc:hover{background-color:$(tab.price.4)!important;color:$(btn.txt.hover)}.select-price{padding:5px}.MeDes-timeline{position:relative}.MeDes-timeline.box-light::after{content:'';position:absolute;width:3px;background-color:$(bg.light.color);top:0;bottom:0;left:50%}.MeDes-timeline.box-dark::after{content:'';position:absolute;width:3px;background-color:$(bg.dark.color);top:0;bottom:0;left:50%}.timeline-box{padding:10px 40px;position:relative;background-color:inherit;width:50%}.timeline-box h3{color:$(timline.element.color)}.timeline-box::after{content:'';position:absolute;width:15px;height:15px;right:-9px;background-color:$(timline.element.color);top:25px;border-radius:50%;z-index:1}.timeline-box .content{padding:20px 30px;margin:0;position:relative}.left{left:0}.right{left:50%}.box-light .left::before{content:" ";height:0;position:absolute;top:22px;width:0;z-index:1;right:30px;border:medium solid;border-width:10px 0 10px 10px;border-color:transparent transparent transparent $(bg.light.color)}.box-light .right::before{content:" ";height:0;position:absolute;top:22px;width:0;z-index:1;left:30px;border:medium solid;border-width:10px 10px 10px 0;border-color:transparent $(bg.light.color) transparent transparent}.box-dark .left::before{content:" ";height:0;position:absolute;top:22px;width:0;z-index:1;right:30px;border:medium solid;border-width:10px 0 10px 10px;border-color:transparent transparent transparent $(bg.dark.color)}.box-dark .right::before{content:" ";height:0;position:absolute;top:22px;width:0;z-index:1;left:30px;border:medium solid;border-width:10px 10px 10px 0;border-color:transparent $(bg.dark.color) transparent transparent}.right::after{left:-5px}.contact-form-name,.contact-form-email,.contact-form-email-message{max-width:100%;padding:15px 10px;background:$(ct.form.bgcolor);border:1px solid $(ct.form.bdrcolor);color:$(ct.form.plcholdercolor)}.contact-form-email:hover,.contact-form-name:hover,.contact-form-email-message:hover{border:1px solid $(ct.form.bdrcolor);box-shadow:none}.contact-form-email:focus,.contact-form-name:focus,.contact-form-email-message:focus{border:1px solid $(ct.form.bdrcolor);box-shadow:none}.contact-form-button-submit{width:100%;height:40px;border:1px solid $(ct.submit.color);background:$(ct.submit.color);color:$(ct.submit.txtcolor)}.contact-form-button-submit:hover{background:$(ct.submit.color);border:1px solid $(ct.submit.color);opacity:.8}.contact-form-button-submit.disabled,.contact-form-button-submit.disabled:hover,.contact-form-button-submit.disabled:active{background:$(ct.submit.color)!important;border:1px solid $(ct.submit.color)!important;opacity:.8}@media (min-width: 480px){.hide-res{display:block!important}.simple-menu-A li{float:left}.simple-menu-A li a{display:block;padding:10px 20px}.simple-menu-A .menu{clear:none;max-height:none}.simple-menu-A .menu-icon,.simple-menu-A .menu-icon-v{display:none}.simple-menu-B li{display:inline}}@media (max-width: 480px){.show-res{display:block!important}.nav-down-res{top:0;transition:.3s ease}.nav-up-res{top:-60px;transition:.3s ease}.simple-menu-A ul.menu{width:100%;background-color:$(topnav.background)}.simple-menu-A .logonav-center-res{position:absolute;left:45%;transform:translateX(-45%)}.search-box{margin:0 auto;float:unset}.show-hide-search{display:none}#nav-bottom .simple-menu-B li a{margin:0}#MeDes-dropdown1 input:checked ~ ul.submenu{position:relative;padding-left:15px}.one-res,.two-res,.three-res,.four-res,.five-res,.six-res,.seven-res,.eight-res,.nine-res,.ten-res,.eleven-res,.twelve-res,.one-fifth-res,.two-fifth-res,.three-fifth-res,.four-fifth-res{width:100%}.one-half-res,.two-half-res,.three-half-res,.four-half-res,.five-half-res,.six-half-res,.seven-half-res,.eight-half-res,.nine-half-res,.ten-half-res,.eleven-half-res,.twelve-half-res,.one-fifth-half-res,.two-fifth-half-res,.three-fifth-half-res,.four-fifth-half-res{width:50%}.first-img{height:180px}ul.menu.pull-right{float:left}.MeDes-parallax{top:0!important;height:100%!important}.pull-none-res{float:none}#thumbnail-posts-view .content{margin:0 0 1em}.text-left-res{text-align:left}.text-right-res{text-align:right}.text-center-res{text-align:center}.text-justify-res{text-align:justify}.text-unset-res{text-transform:unset}.text-uppercase-res{text-transform:uppercase}.text-lowercase-res{text-transform:lowercase}.text-capitalize-res{text-transform:capitalize}#MeDes-pages h1{font-size:30px}#MeDes-pages h2{font-size:25px}.MeDes-timeline::after{left:31px!important}.timeline-box{width:100%;padding-left:70px;padding-right:25px}.box-light .timeline-box::before{left:60px;border:medium solid $(bg.light.color);border-width:10px 10px 10px 0;border-color:transparent $(bg.light.color) transparent transparent}.box-dark .timeline-box::before{left:60px;border:medium solid $(bg.dark.color);border-width:10px 10px 10px 0;border-color:transparent $(bg.dark.color) transparent transparent}.left::after,.right::after{left:25px}.right{left:0}}
Copy to your template for update Newest Version
How to Install
Follow the step bellow to instal theme:
- Login to your Blogger account.
- Select Blog.
- Go to Blogger > format_paint Theme > Backup/Restore
- Choose Theme (.xml)
- Klik Upload
- Don't Forget disable Mobile Theme. Go to Blogger > format_paint Theme > > No. Show desktop theme ...
- After upload template you can setting nav style, social link, default header style, maximal width container of main content in MeDes Template Configuration, get code and paste on MeDes Config Script Widget. MeDes Template Configuration include your purchase in Documentation folder.
- Done, Enjoy it.
We recomended remove and clean all of widget before install this template. Or backup before install.
Element & Assets Design
Sample Text Format & Heading
Sample Text Format:
This is a Heading h1
This is a Heading h2
This is a Heading h3
This is a Heading h4
This is text Bold style
This is text Italic style
This is text Strike style
This is sample Link text
1st Winner
1st Winner
<h1>This is a Heading h1</h1>
<h2>This is a Heading h2</h2>
<h3>This is a Heading h3</h3>
<h4>This is a Heading h4</h4>
This is text <b>Bold</b> style
This is text <i>Italic</i> style
This is text <strike>Strike</strike> style
This is sample <a href="#">Link</a> text
1<sup>st</sup> Winner
1<sub>st</sub> Winner
Paragraph
Sample Paragraph:
Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit. Habeo libris definitionem vis eu, audire mediocritatem ei cum. Cum omnesque legendos cu, impetus laboramus ei vix. Dolorum percipit dignissim nam ea, no omnis albucius invidunt vis. Tibique suscipiantur no eam, dolore delicatissimi eos ei. Affert aliquip patrioque id nec, per et aliquam theophrastus.
<p>Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit. Habeo libris definitionem vis eu, audire mediocritatem ei cum. Cum omnesque legendos cu, impetus laboramus ei vix. Dolorum percipit dignissim nam ea, no omnis albucius invidunt vis. Tibique suscipiantur no eam, dolore delicatissimi eos ei. Affert aliquip patrioque id nec, per et aliquam theophrastus.</p>
Add Values with Paragraph Modifier Class:
Value | Description |
---|---|
text-left | Set text align left |
text-center | Set text align center |
text-right | Set text align right |
text-uppercase | Set text transform Uppercase |
text-lowercase | Set text transform Lowercase |
text-capitalize | Set text transform Capitalize |
text-unset | Set text transform unset |
text-left-res | Set text align left (When small screens view). |
text-center-res | Set text align center (When small screens view). |
text-right-res | Set text align right (When small screens view). |
text-uppercase-res | Set text transform Uppercase (When small screens view). |
text-lowercase-res | Set text transform Lowercase (When small screens view). |
text-capitalize-res | Set text transform Capitalize (When small screens view). |
text-unset-res | Set text transform unset (When small screens view). |
<p class="[Values]">[Your Content]</p>
Add class value to modify text format. Possible to fill more than one value modifier, if want to set different style between big or small screens. Try it with builder:
More sample click here
Utility Class
MeDes Utility class design for corner box styling, box sahding, visibility element on big or small screen, hover animation style, scrolling animation style, floating style etc.
Utility Class Value | Description |
---|---|
box-rounded-small | Make corner style small rounded |
box-rounded / box-rounded-normal | Make corner style rounded |
box-rounded-large | Make corner style large rounded |
box-rounded-x-large | Make corner style extra large rounded |
box-shadow | Add shadow around box rounded |
box-shadow-soft | Add soft shadow around box rounded |
hover-scale | Make animation scaling when hovering |
hover-jump | Make animation jumping when hovering |
show-all (no input) | Without input automaticly showing all size screen |
hide-all/hide | Hide all size screen |
show-res | Only showing item on small screen |
hide-res | Only hidding item on small screen |
Read next part to know how to use utility class.
Image
Sample image:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4wiY153aYzF83c1R6aUZfQxSgQ6sjsOrVRSFBNGFMzuclMJkrBUZdXUlcadGA3d9kDH1A788-qzCi3lzAzFBlqhXuCVRDsahQP2i1cxtRsTf-ZXigFUYrOYJqsbuvjGc5eYI5O79rg8w/s400/why-blogger.jpg" class="box-rounded-large">
Just standard img html but you can modify with Add MeDes Utility class.
Structure:
<img src="[IMG URL]" class="[Utility Value]">
Button
Sample Button:
Button (X) Button A Button B Button C Button D
Hover Solid Button X or A to test Utility Class
<a href="[URL]" class="MeDes-btn box-rounded-x-large hover-jump">Button (X)</a>
<a href="[URL]" class="MeDes-btn btn-a box-rounded-large hover-scale">Button A</a>
<a href="[URL]" class="MeDes-btn btn-b box-rounded">Button B</a>
<a href="[URL]" class="MeDes-btn btn-c box-rounded-small">Button C</a>
<a href="[URL]" class="MeDes-btn btn-d">Button D</a>
<a href="[URL]" class="MeDes-btn-o">Button (X)</a>
<a href="[URL]" class="MeDes-btn-o btn-a box-rounded-small">Button A</a>
<a href="[URL]" class="MeDes-btn-o btn-b box-rounded">Button B</a>
<a href="[URL]" class="MeDes-btn-o btn-c box-rounded-large">Button C</a>
<a href="[URL]" class="MeDes-btn-o btn-d box-rounded-x-large">Button D</a>
Replace [URL] with target button link
Function Values of Button Modifier Class:
Main Value | Description | Color Value |
---|---|---|
MeDes-btn | Solid Botton | btn-a |
btn-b | ||
MeDes-btn-o | Outline Botton | btn-c |
btn-d |
<a class="[Main Value] [Color Value] [Utility Value]">[Button Text]</a>
Try it with builder:
By Default MeDes Button Assets have 5 colors (green, orange, red, blue, gray). You can change color swatch button in Blogger Template Designer. Go to Blogger > format_paint Theme > Customize
Blockquotes & Box Model
Sample Button:
This is blockquote Paragraph
Alert message : This alert needs your attention.
Alert message : This alert needs your attention.
Warning message : Warning! Best check yo self.
Error message : Oh snap! Change a few things up.Hover error message to test Utility Class
<blockquote>This is blockquote Paragraph</blockquote>
<blockquote class="MeDes-success box-rounded-small">Alert message : This alert needs your attention.</blockquote>
<blockquote class="MeDes-alert box-rounded">Alert message : This alert needs your attention.</blockquote>
<blockquote class="MeDes-warning box-rounded-x-large">Warning message : Warning! Best check yo self.</blockquote>
<blockquote class="MeDes-error hover-scale">Error message : Oh snap! Change a few things up.</blockquote>
Function Values of Button Modifier Class:
Main Value | Description |
---|---|
(no input) | Standard Blockquote |
MeDes-success | Success notification box |
MeDes-alert | Alert notification box |
MeDes-warning | Warning notification box |
MeDes-error | Error notification box |
Diver (Spacing)
Sample diver:
Content
Content
Content
Content
Content
Content
<hr>
Content
<hr class="MeDes-dashed">
Content
<hr class="MeDes-dotted">
Content
<hr class="MeDes-bold">
Content
<hr class="MeDes-dashed-bold">
Content
<hr class="MeDes-dotted-bold">
Content
Function Values of Diver Modifier Class:
Main Value | Description |
---|---|
MeDes-bold | Bold Line |
MeDes-dashed | Dashed Line |
MeDes-dashed-bold | Dashed Bold Line |
MeDes-dotted | Dotted Line |
MeDes-dotted-bold | Dotted Bold Line |
Accordion
Sample Accordion:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<div id="MeDes-accordion">
<button class="accordion">Section 1</button>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion box-rounded hover-jump">Section 2</button>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion box-rounded-x-large hover-scale">Section 3</button>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
Follow the structure to make your own accordion.
<div id="MeDes-accordion">
<!--Start Looping-->
<button class="accordion [Utility Value]">[Button Togle Title]</button>
<div class="content">
<p>[Content Accordion]</p>
</div><!--End Looping-->
</div>
Edit item with [-] symbol with your content and loop to make next item accordion. Posible to utility class like style corner, shadow, animation hover etc.
You can change button color swatch accordion in Blogger Template Designer. Go to Blogger > Theme > Customize
MeDes Style Structure
Container Wrapper
Set container wrapper class to set maximal width.
Value | Description |
---|---|
container-small | Set maximal width small. |
container | Set maximal width medium. |
container-large | Set maximal width very wide. |
(No Input) | Set maximal width following your screen. |
Columns Grid System
Media Design grid system make simple to make grid layout. Structure code grid system are row and collumns. Start with row structure.
Sample Row Structure:
Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit.
Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit. Habeo libris definitionem vis eu, audire mediocritatem ei cum. Cum omnesque legendos cu, impetus laboramus ei vix.
Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit. Habeo libris definitionem vis eu, audire mediocritatem ei cum.
Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit. Habeo libris definitionem vis eu, audire mediocritatem ei cum. Cum omnesque legendos cu, impetus laboramus ei vix.
Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit. Habeo libris definitionem vis eu, audire mediocritatem ei cum.
Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit.
<div class="MeDes-row">
[Columns Code Structure]
</div>
Function Values of Row Modifier Class:
Main Value | Value | Description |
---|---|---|
MeDes-row | row-top / (no input) | Set vertical item align top. |
row-center | Set vertical item align center. | |
row-bottom | Set vertical item align bottom. |
<div class="[Main Value] [Value]">
[Columns Code Structure]
</div>
Put the main value and select one value to set vertical align.
Sample Row Structure + Row Modifier Class:
Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit. Habeo libris definitionem vis eu, audire mediocritatem ei cum.
Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit. Habeo libris definitionem vis eu, audire mediocritatem ei cum. Cum omnesque legendos cu, impetus laboramus ei vix.
Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit.
Code:
<div class="MeDes-row row-center">
[Columns Code Structure]
</div>
After know how to make row structure now going to how to make columns. View this sample columns sructure
Sample Columns Structure:
Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit.
Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit.
Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit.
<div class="MeDes-row">
<div class="columns four">
<div class="content">
<p>Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit.</p>
</div>
</div>
<div class="columns four">
<div class="content">
<p>Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit.</p>
</div>
</div>
<div class="columns four">
<div class="content">
<p>Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit.</p>
</div>
</div>
</div>
View this square columns before going to making a grid:
For make columns just makesure total columns are tweleve. For example:
- Make 2 column that's mean 6+6=12 or 8+4=12 first column bigger than second column
- Make 3 column that's mean 4+4+4=12 or 5+5+2=12 first, second columns bigger and third column small
- Just custom your own size.
And if add modifier x-res that's mean in small screen will appearing 1 column and x-half-res that's mean in small screen will appearing 2 columns.
Function Values of Columns Modifier Class:
Main Value | Value Alt1 | Value Alt2 | Value Alt3 |
---|---|---|---|
columns/column | one | one-res | one-half-res |
two-res | two-res | two-half-res | |
three | three-res | three-half-res | |
four | four-res | four-half-res | |
five | five-res | four-half-res | |
six | six-res | six-half-res | |
seven | seven-res | seven-half-res | |
eight | eight-res | eight-half-res | |
nine | nine-res | nine-half-res | |
ten | ten-res | ten-half-res | |
eleven | eleven-res | eleven-half-res | |
twelve | twelve-res | twelve-half-res | |
Description | Big or Small Screens columns Still fixed. | Every columns in small screens will appearing one collumns | Every columns in small screens wil appearing two collumns |
[Row Structure]
<div class="[Main Value] [Value]">
<div class="content [Paragraph Modifier Value]">
[Content]
</div>
</div><!--Loop & Make sure total count twelve-->
[Row Structure END]
Put the main value and the alternative value. Loop items and don't forget warp them with row structure code. Make sure total column on inline if calculate is twelve and next inline automaticly repaeat.
<div class="MeDes-row row-center">
<div class="columns six-res">
<div class="content text-center">
<p>Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit. Habeo libris definitionem vis eu, audire mediocritatem ei cum.</p>
</div>
</div>
<div class="columns six-res">
<div class="content text-center">
<p>Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit. Habeo libris definitionem vis eu, audire mediocritatem ei cum. Cum omnesque legendos cu, impetus laboramus ei vix.</p>
</div>
</div>
</div>
Results:
Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit. Habeo libris definitionem vis eu, audire mediocritatem ei cum.
Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit. Habeo libris definitionem vis eu, audire mediocritatem ei cum. Cum omnesque legendos cu, impetus laboramus ei vix.
The sample use column 2 times six-res that's mean total 12. -res mean on small screen will change to one column.
And much more, possible to custom your own collumns. Just make sure total twelve.More sample click here
Header
[Content]
Value | Description |
---|---|
header-small | Set Header padding height short. |
header-medium | Set Header padding height medium. |
header-large | Set Header padding height tall. |
[Content]
Value | Description |
---|---|
MeDes-header | Set Header background flat. |
MeDes-paralax | Set Header background with parallax effect when scrolling. |
No comments:
Post a Comment