To have a gulp workflow that with a single process,
- watches for any sass changes, then compiles sass source into css
- watches for any changes in the public directory, triggers live-reload
- serves your static content in
public/
@mixin wp-admin-bumper { | |
min-height: 46px; // height of mobile wp-admin bar in WP 4.0 | |
@media screen and (min-width: 782px;) { | |
min-height: 32px; // standard height of wp-admin bar in WP 4.0 | |
} | |
} |
<div class="box"> | |
<span class="vertically-centered"> | |
<h3>Nulla a libero metus intege reget tempor gravida</h3> | |
</span> | |
</div> |
.visible-android { | |
display:none; | |
} | |
.visible-ios { | |
display:none; | |
} | |
.on-device .visible-android, .on-device .visible-android { | |
display:inherit; | |
} | |
.device-ios .visible-android { |
⇐ back to the gist-blog at jrw.fi
Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.
I've been using SCSS/SASS for most of my styling work since 2009, and I'm a huge fan of Compass (by the great @chriseppstein). It really helped many of us through the darkest cross-browser crap. Even though browsers are increasingly playing nice with CSS, another problem has become very topical: managing the complexity in stylesheets as our in-browser apps get larger and larger. SCSS is an indispensable tool for dealing with this.
This isn't an introduction to the language by a long shot; many things probably won't make sense unless you have some SCSS under your belt already. That said, if you're not yet comfy with the basics, check out the aweso
/* ===================================== | |
Accordion | |
======================================== */ | |
var accItem = document.getElementsByClassName('accordionItem'); | |
var accHD = document.getElementsByClassName('accordionItemHeading'); | |
for (i = 0; i < accHD.length; i++) { | |
accHD[i].addEventListener('click', toggleItem, false); | |
} | |
function toggleItem() { | |
var itemClass = this.parentNode.className; |
1) To untrack a single file that has already been added to your repo (to stop tracking the file but not delete it from your system, use: | |
git rm --cached <filename> | |
2) To untrack every file that is now in your .gitignore - commit changes, then: | |
git rm -r --cached . |
// Prevent Screen Jump | |
@media screen and (min-width: 1200px) { // Less noticable on larger screens | |
html { | |
margin-left: calc(100vw - 100%); | |
margin-right: 0; | |
} | |
} |
<div class="twitter-feed"> | |
<div class="container"> | |
<div class="row"> | |
<div class="col-md-12"> | |
<!-- Twitter Embed Code --> | |
<a class="twitter-timeline" href="https://twitter.com/UPMCPhysicianEd" | |
data-chrome="noheader nofooter noborders transparent noscrollbar" | |
data-tweet-limit="1" dnt="true">Tweets by UPMC Physician Education</a> | |
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> | |
<!-- / Twitter Embed Code --> |