Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Comparing changes

Choose two branches to see what's changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
base fork: mdo/preboot
base: master
...
head fork: johanbrook/Bootstrap.less
compare: master
Checking mergeability… Don't worry, you can still create the pull request.
  • 5 commits
  • 2 files changed
  • 5 commit comments
  • 1 contributor
Showing with 72 additions and 0 deletions.
  1. +68 −0 bootstrap.less
  2. +4 −0 index.html
View
68 bootstrap.less
@@ -26,6 +26,63 @@
/*--------------------------------------------------
Mixins
-------------------------------------------------- */
+
+ // Clearfix for use in Less files
+
+ .clearfix{
+ &:after{
+ visibility: hidden;
+ display: block;
+ font-size: 0;
+ content: " ";
+ clear: both;
+ height: 0;
+ }
+ & {display: inline-block;}
+ * html & {height: 1%;}
+ & {display: block;}
+ }
+
+
+ // CSS3 columns.
+
+ .columns(@count, @gap: 1.5em){
+ -webkit-column-count: @count;
+ -webkit-column-gap: @gap;
+ -moz-column-count: @count;
+ -moz-column-gap: @gap;
+ column-count: @count;
+ column-gap: @gap;
+
+ & > * {
+ position: static; // Boy, it took me long time to figure this out.
+ }
+ }
+
+
+ // Button style
+ // Usage: include the mixin and define base color. I highly recommend you to customize these styles.
+
+ .button(@basecolor: #eee){
+ .rounded(3px);
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ .gradient(@basecolor, darken(@basecolor, 10%));
+ .sans-serif(bold);
+ text-align: center;
+ text-decoration: none;
+ padding: 0.3em 0.5em;
+
+ &:hover{
+
+ }
+
+ &:active{
+ .transition(none);
+ top: auto; outline: none !important;
+ }
+ }
+
// Border Radius
.rounded(@radius: 5px) {
@@ -89,9 +146,20 @@
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor));
background-image: -moz-linear-gradient(@startColor, @endColor);
}
+
.three-color-gradient(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) {
background-color: @endColor;
background-repeat: no-repeat;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
background-image: -moz-linear-gradient(@startColor, color-stop(@midColor, @colorStop), @endColor);
}
+
+
+
+ // For links or buttons with background-image applied, and you want it to change on hover:
+
+ .hover(@dir: bottom){
+ &:hover{
+ background-position-y: @dir;
+ }
+ }
View
4 index.html
@@ -24,8 +24,12 @@
<header>
<p><a href="http://twitter.com/share" class="twitter-share-button" data-url="http://www.markdotto.com/2011/03/21/introducing-bootstrap/" data-count="horizontal" data-via="mdo">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></p>
+
+ <hgroup>
<h1>Bootstrap.less</h1>
<h2>Bootstrap is a super awesome pack of mixins and variables to be used in conjunction with <a href="http://lesscss.org" target="_blank">LESS</a>, a CSS preprocessor for faster and easier web development.</h2>
+ </hgroup>
+
</header>
<section>

Showing you all comments on commits in this comparison.

@mdo
Owner

What's with the position: static; here?

@mdo
Owner

This looks a bit overcomplicated from the standard clearfix I've been using. I'll add that version here instead to reduce the amount of code needed unless you can explain what each of those lines does here.

@mdo
Owner

Is this SASS syntax here ("@mixin columns" vs ".columns")? Good mixin to have otherwise.

@johanbrook

Yeah, sorry about that, clumsy mistake. I grabbed the mixins from my Sass files, and must've missed one.

@johanbrook

CSS3 Columns won't work on elements with position: relative set. Since some people (me, amongst others) have relative positioning set on paragraphs and links, it's quite clever to reset them to position: static with the mixin.

Something went wrong with that request. Please try again.