

Show HN: my boilerplate CSS code for new designs, written in Less. - mgeraci
http://mgeraci.github.com/Less-Boilerplate/

======
chegra84
<Not Related>

Last weekend I finished reading "The Non-Designer's Design Book":
[http://www.amazon.co.uk/Non-Designers-Design-Book-Robin-
Will...](http://www.amazon.co.uk/Non-Designers-Design-Book-Robin-
Williams/dp/0321193857).

So, I decided to test my newly formed designer skills and modify the look of
the site here: <http://i.imgur.com/k6y0g.png>

The central point of the book is that we can tell when something is off with a
design, but rarely we know how to fix it. So, yea this is what I thought need
fixing on the site:

1\. There is conflict between "What" and "Less Boilerplate" Header. Firstly,
the fonts are the same size, so they are competing for who gets viewed first.
Second, the orange on "What" is a warm color so it will stand our more, hence
overpowering the header. So, I shrunk the "What" and increase "Less
Boilerplate."

2\. Too control the eyeflow from top to bottom, I increase the size of the
navigation bar.

3\. I increased repetition by changing the color of the header to white,the
text to white and the separator in the navigation bar to white.

4.To highlight the "What" more I indent the text under it. And also set the
text under it to be the same font size. There is no conflict here, since the
header "What" is already highlighted alot.

5\. To show what items that are important under "What", I bold the text that
is not in the list.

</Not Related>

~~~
mgeraci
1) I agree. I made the H1 the same color as the examples (close to white, with
some cream) and reduced the size of the H2s.

2) I agree that the navigation and H2s should have a similar visual weight, so
the nav. got bigger.

3) I'm not a fan of dropout text for large quantities, so it's staying dark,
but I did brighten the background to increase readability.

4) A rule of thumb for me is that you only need one layer of emphasis for a
differentiation of text. Both of our solutions are currently breaking that
rule, and I happen to like larger text.

Thanks for the feedback and mockup!

------
defroost
I've been using sass and going kind of mixin crazy in my latest project. Once
you discover all the various CSS3 generators online, creating good-looking
mixins is absolutely trivial and a lot of fun.

A couple of comments:

1\. Aside from my dislike of CamelCase on a few classes, it might be simpler
to call the .borderRadius helper "round"? .borderRadius(@radius) is not the
best naming, IMHO. 2\. As mentioned below, click-stops on gradients really
make for nice looking gradients. 3\. For the button, I suppose you could make
it into a helper method where it can take @buttonColor as a parameter. I'm not
loving the almost brown color for the active state. What I did was the reverse
the gradient for the active state - so light to dark becomes dark to light
when clicked on.

Lastly, what I'm finding is that all these gradients, mixins, shadows, etc. do
add up, but I supposed if we compress our assets it will in most cases be less
than using images. Anyway, nice work.

~~~
mgeraci
I just updated the script with 3- and 4-color gradients, and with the call to
action button as a helper method with color as a parameter. Thanks for the
suggestions!

------
ihumanable
Anything like this for SASS that isn't Compass?

~~~
nathos
I'd highly recommend Compass, but I did a quick & dirty conversion of this to
Sass: <https://github.com/nathos/Sass-Boilerplate>

Please log issues if I goofed anything :) I haven't fully tested all of the
mixins. (Sass color math & functions work a bit differently than Less)

------
rgbrgb
This might also be of interest to anyone looking for less boilerplate code...
<http://markdotto.com/bootstrap/>

------
kaylarose
I really like the .transition, and the attention to browser support in
.gradientH and .gradientV. Very nice touch!

Tiny nitpick: IMO the call to action styles doesn't belong (seems a bit to
specific for a generic boilerplate). Other than that, nice job.

Edit: I also like that this is more lightweight than Bootstrap - which I
hadn't seen before.

~~~
mgeraci
Most of the CSS3 browser compatibility came from Paul Irish's awesome
CSS3please tool (<http://css3please.com/>). You should definitely check it out
if you're coding css without a framework.

------
bitsm
Nice work. A few things you might consider adding:

1\. color stops on gradients are very useful, especially if you use them to
denote button states, for example

2\. drop shadows can be inset

~~~
mgeraci
Yes, and yes. These are both now on my list. Thanks!

~~~
mgeraci
I just updated the script with both of these features. Enjoy!

------
awad
This looks pretty awesome, I like the idea a lot, will give it a try. Thanks!
And thanks Michael for turning me onto Less in the first place while we worked
together last year.

------
tsigo
Think there might be a typo in your first example.

"#element{.boxRadius(radius);}" and the box below it references
".borderRadius(radius)"; is it both?

~~~
mgeraci
Thank you! Fixed. (it was supposed to be borderRadius)

------
Hipchan
For all the cool kids on node.js: <https://github.com/visionmedia/nib>

------
mgkimsal
Very slick looking - thanks for sharing!

