Delivered at WordCamp Boston 2012
K. Adam White • @kadamwhite
A Baseline for Front-End Developers
- Blog post by Rebecca Murphey
HTML, CSS • jQuery • JavaScript • CSS preprocessors (SASS, LESS) • Client-side templating (Mustache) • Source Control (Github) • Modularity, dependency management, and production builds • In-Browser Developer Tools • The command line • Testing • Process automation • Code quality • Documentation
were created to help manage stylesheets
$blue: #3bbfce
.content-navigation
border-color: $blue
color: darken($blue, 9%)
@blue: #3bbfce;
.content-navigation {
border-color: @blue;
color: darken(@blue, 9%);
}
$blue: #3bbfce;
.content-navigation {
border-color: $blue;
color: darken($blue, 9%);
}
blue = #3bbfce
.content-navigation
border-color blue
color darken(blue, 30%)
.widget {
span {
color: #14ff23;
font-style: italic;
}
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
“&
” lets you reference the current selector:
The &:hover
above means .widget a:hover
Inline arithmetic within definitions
@text-size: 16px;
h1 {
font-size: @text-size * 2;
}
Rendered CSS:
h1 {
font-size: 32px;
}
This...
.rounded-corners (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
...compiles to this:
#header {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#footer {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
Lets you intelligently specify rule inheritance, with less code than mixins
.widget {
background-color: #444;
color: #00ff00;
font-family: monospace;
}
.error-widget {
@extend .widget
color: #ff0000;
}
.widget,
.error-widget {
background-color: #444;
color: #00ff00;
font-family: monospace;
}
.error-widget {
color: #ff0000;
}
(Note: If you want this in LESS—and I for one do—add a +1 to the feature pull request on github)
SCSS: Compass framework • Bourbon mixin library
LESS:
Twitter Bootstrap toolkit
lessphp PHP port of LESS—introduces ways to integrate with WordPress
wp-less by Thomas Parisot (@CyneticMonkey)
Integrating LESSphp into WordPress (in French) by Baptiste Caquot (@baptwit)
dotless .NET port of LESS, used in SquishIt (by @JustinEtheredge)
WordPress uses SVN, but on the front-end
Github has won. Resistence is futile.
Learn the ropes with Try Git on CodeSchool
Github has released Mac and Windows clients; other non-Github-specific GUIs exist
Even non-Git-based projects frequently have Github mirrors—Mark Jacquith established the official WordPress Github mirror
Github article on how they use Pull Requests for internal development
Public Bug Tracker
Wiki
Gists (for short code/one-off demos)
README.md
Slides: bit.ly/kadam-wcbos12
adam@kadamwhite.com
Slides created with Reveal.js
Typefaces by The League of Movable Type
Continue right for Unit Testing and Style Guide resources →
…the more readable our source code is, the easier it is to maintain.
- Addy Osmani, JavaScript Style Guides and Beautifiers