View from hotel room of Downtown Charlotte.
Blog
Media queries for every project
Here are the media queries I drop into every project I begin. They pretty much cover every screen size.
// Large Screens
@media only screen and (min-width: 1200px) {}
// Desktop
@media only screen and (min-width: 960px) and (max-width: 1199px) {}
// < Desktop
@media only screen and (max-width: 1199px) {}
// Tablet
@media (min-width: 768px) and (max-width: 959px) {}
// < Full Tablet
@media (max-width: 767px) {}
// Small Tablets, not phones
@media only screen and (min-width: 481px) and (max-width: 767px) {}
// Phones - large
@media only screen and (max-width: 480px) {}
// Phones - small
@media only screen and (max-width: 330px) {}
Minimalist Color Picker For Web Designers
Seeking color(s) for inspiration, designers prefer large responsive color swatches compared to tiny panel blocks or color wheels.
Three tools listed below serve this purpose.
Color, by Hailpixel
How to Use Color:
Move mouse Back & Forth for Hue, Up & Down for Lightness, Scroll for Saturation.
ColorCo.de
Possibly my favorite picker of the three listed. ColorCode has several features for downloading, sharing and editing. Including “Download as .less scheme” and free build, monochrome, monochrome & dark gray, monochrome & light gray, analogic, analogic & complement, complement, triad quad palette options.
Piknik
Very minimal, beautiful interface. Integrates a neat use of the scroll wheel to change the luminosity of the current color.
Visit Alexander, NC Project
New project I have been working on with @gherman222
We are very excited to release this project soon.
Check out the screenshot of the homepage.
Bootstrap Viewport Sized Typography
See the Pen Bootstrap viewport sized typography by Chad Ritchie (@chadritchie) on CodePen
Scale the Bootstrap Hero title using CSS3 viewport sized typography
Handling Color Variables with SASS
Set descriptive and functional variables
Looking around the Internet at various SASS use techniques, I came across an article by Sacha Greif titled “SASS & Color Variables” The article discusses using some variables to store descriptive color names, and some other to assign those colors to their functions:
// first we set descriptive variables:
$darkgrey: #333333;
$blue: #001eff;
// then we set functional variables:
$text_color: $darkgrey;
$link_color: $lightblue;
$border_color: $lightblue;
.myClass{
color: $text_color;
border-color: $border_color;
}
a{
color: $link_color;
}
I like the way this technique separates colors from function.
Read more about this technique at sachagreif.com