(╯°□°)╯︵ ┻━┻
(▀̿Ĺ̯▀̿ ̿)
(That wasn't a very good argument)
But it does have some redeeming qualities...
... which is all it should ever be used for.
... because you love jQuery.
...you're going to use, like, 7
Yes, you do.
DESIGNERS HATE HIM
He constantly complains that "you can't do that design in Bootstrap." He also codes in the toilet, where his code belongs.
DESIGNERS LOVE HER
She codes modular components from a pattern library, follows best practices, and is showing this guy what's wrong with his code.
I remember when W3Schools was cool, too.
Dear God yes
Not necessarily.
You deserve Bootstrap.
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-1"> </div>
<div class="col-md-10">
<div class="row">
<h1>Profile Page for </h1>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">User Profile/Bio Information</h3>
</div>
<div class="panel-body"></div>
</div>
</div>
<div class="row" id="contrib-row">
<h3>Articles Authored By </h3>
<ul class="list-group">
<li class="list-group-item"><a href="/posts/">"title" Published #</a></li>
</ul>
</div>
</div>
<div class="col-md-1"> </div>
</div>
</div>
</div>
</div>
<hr />
main.scss
@import 'button';
@import 'alert';
@import 'card';
@import 'calendar';
@import 'label';
// ... etc.
.my-button {
display: block;
appearance: none;
background-color: #BADA55;
// ... etc.
}
@import 'utils/index';
@import 'vendors/index';
@import 'base/index';
@import 'components/index';
@import 'layout/index';
@import 'pages/index';
@import 'themes/index';
components/_button.scss
components/_index.scss
main.scss
Click
This makes it easy for our components to be more specific
Use it to scope your specific styles to prevent leaking styles.
.goatstrap
.btn.btn-primary {
// Bootstrap's silly styles
}
Specificity: 0 2 0
.goatstrap {
.gs-button.primary {
// Our sexy styles
}
}
Specificity: 0 3 0
<div class="my-dog">
<div class="my-dog poor-eyesight">
<div class="my-dog smush-face-in">
<div class="my-dog pug">
<div class="my-dog buttpug">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
</div>
<div class="col-md-4"></div>
</div>
<div class="row">
<div class="col-md-12"></div>
</div>
</div>
<main class="goatstrap layout-main">
<div class="layout-content">
<div class="block"></div>
<div class="block"></div>
</div>
<aside class="layout-aside"></aside>
<footer class="layout-footer"></footer>
</main>
layout-main
layout-aside
layout-footer
block
block
What about grid layouts?
.layout-main {
@include clearfix;
> .layout-content, > .layout-aside {
float: left;
}
}
.layout-content {
@include clearfix;
width: percentage(8/12);
}
.layout-aside {
width: percentage(4/12);
}
I wrote a section in here!
You should care!
Use code DAVID for 15% off!