From 4d2bd29d2f51680a5cf5d77163a0bae72afb0f81 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 1 Jul 2015 20:59:07 -0700 Subject: [PATCH 1/2] Change out fonts, simplify global type on body/html --- _layouts/default.html | 4 ++-- less/docs.less | 19 ++++++++++--------- 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/_layouts/default.html b/_layouts/default.html index deeaa9d..c6091da 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -7,7 +7,7 @@ - + Preboot @@ -31,4 +31,4 @@ })(); - \ No newline at end of file + diff --git a/less/docs.less b/less/docs.less index c09bf37..818523b 100644 --- a/less/docs.less +++ b/less/docs.less @@ -18,23 +18,24 @@ // -html, -body { - background-color: #fff; +html { + font-size: 16px; } + body { padding: 0; - font-family: "Maven Pro", "Helvetica Neue", Helvetica, sans-serif; - font-size: 16px; - font-weight: 400; - line-height: 1.4; + font-family: Roboto, "Helvetica Neue", Helvetica, sans-serif; + font-size: 1rem; + font-weight: 300; + line-height: 1.5; color: #555; + background-color: #fff; } -// Bangin' links a { color: @link-color; text-decoration: none; + &:hover { color: @link-color-hover; text-decoration: underline; @@ -43,7 +44,7 @@ a { // Typography h1, h2, h3, h4, h5, h6 { - margin: 30px 0 10px; + margin: 2rem 0 .5rem; font-weight: bold; line-height: 1.2; color: #333; From 67ab15da8d76a7b749cdcf87462ecf6baf074650 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 1 Jul 2015 23:52:32 -0700 Subject: [PATCH 2/2] v3 - Switch from Less to Sass - Rewrite docs in Markdown - Redesign docs site - Update Normalize to latest release - Drop almost all vendor prefix mixins (use Autoprefixer instead) - Add new container mixin - Update readme to show latest information - Remove Makefile and use Jekyll's built-in Sass compiler --- Makefile | 24 - README.md | 12 +- _config.yml | 19 +- _layouts/default.html | 24 +- _sass/_docs.scss | 287 +++++++++++ _sass/_normalize.scss | 427 +++++++++++++++++ _sass/_preboot.scss | 226 +++++++++ less/pygments.less => _sass/_syntax.scss | 1 - index.html | 579 ----------------------- index.md | 446 +++++++++++++++++ less/docs.less | 359 -------------- less/normalize.less | 396 ---------------- less/preboot.less | 406 ---------------- package.json | 9 +- preboot.scss | 9 + 15 files changed, 1443 insertions(+), 1781 deletions(-) delete mode 100644 Makefile create mode 100644 _sass/_docs.scss create mode 100644 _sass/_normalize.scss create mode 100644 _sass/_preboot.scss rename less/pygments.less => _sass/_syntax.scss (99%) delete mode 100644 index.html create mode 100644 index.md delete mode 100644 less/docs.less delete mode 100644 less/normalize.less delete mode 100644 less/preboot.less create mode 100644 preboot.scss diff --git a/Makefile b/Makefile deleted file mode 100644 index d11c28d..0000000 --- a/Makefile +++ /dev/null @@ -1,24 +0,0 @@ -DOCS = ./less/docs.less -DOCS_COMPILED = ./css/docs-compiled.css -DATE=$(shell date +%I:%M%p) -CHECK=\033[32m✔ Done\033[39m -HR=\033[37m--------------------------------------------------\033[39m -PATH := ./node_modules/.bin:$(PATH) - -# -# COMPILE CSS -# - -build: - @echo "\n" - @printf "${DATE} · \033[35mCompiling Preboot...\033[39m" - @recess --compile ${DOCS} > ${DOCS_COMPILED} - @echo "\033[32m Success!\033[39m" - -# -# WATCH LESS FILES -# - -watch: - echo "Watching less files..."; \ - watchr -e "watch('less/.*\.less') { system 'make' }" diff --git a/README.md b/README.md index 4c7d3ed..888a6dd 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,15 @@ -# [Preboot 2](http://getpreboot.com) +# [Preboot 3](http://getpreboot.com) -Preboot is a collection of LESS mixins and variables for quickly writing CSS. As the precursor to [Bootstrap](http://getbootstrap.com), it serves as a lightweight and interface agnostic approach to jumpstarting your next web project. Use it how you see fit. +Preboot is a collection of Sass mixins and variables for quickly writing CSS. As the original precursor to [Bootstrap](http://getbootstrap.com), it serves as a lightweight and interface agnostic approach to jumpstarting your next web project. Use it how you see fit. ## Getting started -Preboot requires [LESS](http://lesscss.org). Head over to their documentation and familiarize yourself with the project. Once you're up and running, including and using Preboot is a breeze. +Preboot requires [Sass](http://sass-lang.com). Head over to their documentation and familiarize yourself with the project. Once you're up and running, including and using Preboot is a breeze. -1. Create a new LESS file (e.g., application.less) -2. Include Preboot via `@import "preboot.less";` -3. Start writing your own LESS-flavored CSS +1. Create a new Sass file (e.g., `application.scss`) +2. Copy or import the Preboot partial, [`_preboot.scss`](https://github.com/mdo/preboot/blob/gh-pages/_sass/_preboot.scss). +3. Start writing your own Sass. We highly recommend using Preboot in conjunction with [Normalize](http://necolas.github.com/normalize.css), a powerful tool for more consistent rendering of web components across various browsers and devices. diff --git a/_config.yml b/_config.yml index 1c4a2f4..728cbe9 100644 --- a/_config.yml +++ b/_config.yml @@ -1,2 +1,17 @@ -pygments: true -exclude: ["Makefile", "README.md", "less", "node_modules", "package.json"] \ No newline at end of file +markdown: kramdown +highlighter: rouge + +kramdown: + auto_ids: true + +permalink: pretty +baseurl: "" + +version: 3.0.0 + +sass: + # sass_dir: + style: compressed + +github: + repo: https://github.com/mdo/preboot diff --git a/_layouts/default.html b/_layouts/default.html index c6091da..00582c9 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -8,14 +8,34 @@ - + Preboot - {{ content }} +
+
+

Preboot

+

A collection of Sass mixins and variables from @mdo.

+ Download Preboot + View project on GitHub + +
+
+ +
+ {{ content }} + +
+ <3 +
+
-

- - - - - -
- -
-

Introducing Preboot

-

Preboot is a comprehensive and flexible collection of LESS utilities. Its original variables and mixins became the precursor to Bootstrap. Since then, it's all come full circle.

-

After a two-year hiatus, Preboot has been reborn with many of the LESS variable and mixin improvements from Bootstrap, along with some new enhancements, too. It's one of the lightest and most powerful tools for CSS development without any prebuilt components.

-

Need something more powerful? Use Bootstrap.

-

- Download Preboot 2 - GitHub project -

-
- - - -
-

What's included

-

Here's the rundown of what you can find in Preboot. Jump to a section for some lightweight documentation and code snippets.

-
-
-

Variables

- -

Grid system

- -
-
-

Vendor mixins

- -
-
-

Utility mixins

- -
-
-
- - - -
-

Variables

-

Variables still don't exist in CSS, but they do in LESS and other CSS preprocessors. Preboot includes a several groups of meaningful and useful variables for any project.

- -

Colors

-

Easily make use of two color schemes included in Preboot: grayscale and semantic. Grayscale colors provide quick access to shades of black (in increments of 10%) while semantic includes various colors assigned to meaningful values.

-
-
-
-
-
-
-
-
-
-
-
-{% highlight css linenos %} -@black-10: darken(#fff, 10%); -@black-20: darken(#fff, 20%); -@black-30: darken(#fff, 30%); -@black-40: darken(#fff, 40%); -@black-50: darken(#fff, 50%); -@black-60: darken(#fff, 60%); -@black-70: darken(#fff, 70%); -@black-80: darken(#fff, 80%); -@black-90: darken(#fff, 90%); -{% endhighlight %} - -
-
-
-
-
-
-
-{% highlight css linenos %} -@brand-primary: #428bca; -@brand-success: #5cb85c; -@brand-warning: #f0ad4e; -@brand-danger: #d9534f; -@brand-info: #5bc0de; -{% endhighlight %} - -

Use any of these color variables as they are or reassign them to more meaningful variables for your project.

-{% highlight css linenos %} -// Use as-is -.masthead { - ... - background-color: @brand-primary; - ... -} - -// Reassigned variables in LESS -@alert-message-background: @brand-info; -.alert { - background-color: @alert-message-background; -} -{% endhighlight %} - -

Scaffolding

-

A handful of variables for quickly customizing key elements of your site's skeleton.

-{% highlight css linenos %} -// Scaffolding -@body-background: #fff; -@text-color: @black-50; -{% endhighlight %} - - -

Easily style your links with the right color with only one value.

-{% highlight css linenos %} -// Variables -@link-color: @brand-primary; -@link-color-hover: darken(@link-color, 15%); - -// Usage -a { - color: @link-color; - text-decoration: none; - - &:hover { - color: @link-color-hover; - text-decoration: underline; - } -} -{% endhighlight %} -

Note that the @link-color-hover uses a function, another awesome tool from LESS, to automagically create the right hover color. You can use darken, lighten, saturate, and desaturate.

- -

Typography

-

Easily set your type face, text size, leading, and more with a few quick variables. Preboot makes use of these as well to provide easy typographic mixins as well.

-{% highlight css linenos %} -// Typography - -// Font stacks for easy inclusion and customization -@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; -@font-family-serif: Georgia, "Times New Roman", Times, serif; -@font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace; -@font-family-base: @font-family-sans-serif; - -// Generate a straightforward type scale -@font-size-base: 14px; -@font-size-large: @font-size-base * 1.25; // ~18px -@font-size-small: @font-size-base * 0.85; // ~12px -@font-size-mini: @font-size-base * 0.75; // ~11px - -// Baseline for the line-height of the body -// To be used in conjunction with @font-size-base -@line-height-base: 20px; - -// Enable the option to customize headings -@headings-font-family: inherit; // From @font-family-base -@headings-font-weight: 500; -{% endhighlight %} -
- - - -
-

Grid system

-

Generate semantic, mobile-first grid layouts with a few variables and mixins, all without superfluous markup.

- -

Grid variables

-

There are three grid variables that Preboot uses to power the grid mixins.

-{% highlight css linenos %} -// Specify the number of available columns -@grid-columns: 12; -// Inner padding on each side of a column to create gutters -@grid-column-padding: 15px; -// Point at which the floats kick in and horizontally align columns -@grid-float-breakpoint: 768px; -{% endhighlight %} -

Customizing these variables should automatically work with any of the grid mixins, so tweak away.

- -

Grid mixins

-

There are three available mixins for each part of a standard grid system:

-
    -
  • .make-row() provides a wrapper for the columns to align their content via negative margin and clear the floats.
    • -
  • .make-column(n) is used to generate n number columns as a percentage of the available grid columns (set via variable to 12 by default).
    • -
  • .make-column-offset(n) pushes a column right by n columns via margin.
    • -
-

Heads up! These grid columns are mobile first, meaning by default they stack vertically. Floating only kicks in with viewports of 768px or higher.

-{% highlight css linenos %} -.make-row() { - // Negative margin the row out to align the content of columns - margin-left: -@grid-column-padding; - margin-right: -@grid-column-padding; - // Then clear the floated columns - .clearfix(); -} - -.make-column(@columns) { - @media (min-width: @grid-float-breakpoint) { - float: left; - // Calculate width based on number of columns available - width: percentage(@columns / @grid-columns); - } - // Prevent columns from collapsing when empty - min-height: 1px; - // Set inner padding as gutters instead of margin - padding-left: @grid-column-padding; - padding-right: @grid-column-padding; - // Proper box-model (padding doesn't add to width) - .box-sizing(border-box); -} - -.make-column-offset(@columns) { - @media (min-width: @grid-float-breakpoint) { - margin-left: percentage(@columns / @grid-columns); - } -} -{% endhighlight %} - -

Example usage

-

Using these mixins to generate columns is easy. Here's the HTML and CSS of an example implementation.

-{% highlight html linenos %} -
-
- ... -
-
- ... -
-
-{% endhighlight %} -{% highlight css linenos %} -.wrapper { - .make-row(); -} -.content-main { - .make-column(8); -} -.content-sidebar { - .make-column(3); - .make-column-offset(1); -} -{% endhighlight %} -

Need another example? Our table of contents at the top of the page uses a custom grid as well. In the source docs.less file you'll find its super lightweight implementation:

-{% highlight css linenos %} -.row { .make-row(); } -.grid-4 { .make-column(4); } -{% endhighlight %} -

That's it. No need for additional classes as we just don't need them in this simple of a site.

-
- - - -
-

Vendor mixins

-

Write more efficient CSS by writing single-line mixins instead of multiple lines of prefixed properties.

- -

Box-sizing

-

Reset your components' box model with a single mixin. For context, see this helpful article from Mozilla.

-{% highlight css linenos %} -.box-sizing(@box-model) { - -webkit-box-sizing: @box-model; // Safari <= 5 - -moz-box-sizing: @box-model; // Firefox <= 19 - box-sizing: @box-model; -} -{% endhighlight %} - -

Rounded corners

-

Today all modern browsers support the non-prefixed border-radius property. As such, there is no .border-radius() mixin, but Preboot does include shortcuts for quickly rounding two corners on a particular side of an object.

-{% highlight css linenos %} -.border-top-radius(@radius) { - border-top-right-radius: @radius; - border-top-left-radius: @radius; -} -.border-right-radius(@radius) { - border-bottom-right-radius: @radius; - border-top-right-radius: @radius; -} -.border-bottom-radius(@radius) { - border-bottom-right-radius: @radius; - border-bottom-left-radius: @radius; -} -.border-left-radius(@radius) { - border-bottom-left-radius: @radius; - border-top-left-radius: @radius; -} -{% endhighlight %} - -

Box (Drop) shadows

-

If your target audience is using the latest and greatest browsers and devices, be sure to just use the box-shadow property on its own. If you need support for older Android (pre-v4) and iOS devices (pre-iOS 5), use the mixin to pick up the required -webkit prefix.

-

Be sure to use RGBA colors in your box shadows so they blend as seamlessly as possible with backgrounds.

-{% highlight css linenos %} -.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) { - -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1 - box-shadow: @shadow; -} -{% endhighlight %} - -

Transitions

-

Three mixins for flexibility. Set all transition information with one, or specify a separate delay and duration as needed.

-{% highlight css linenos %} -.transition(@transition) { - -webkit-transition: @transition; - -moz-transition: @transition; - -o-transition: @transition; - transition: @transition; -} -.transition-delay(@transition-delay) { - -webkit-transition-delay: @transition-delay; - -moz-transition-delay: @transition-delay; - -o-transition-delay: @transition-delay; - transition-delay: @transition-delay; -} -.transition-duration(@transition-duration) { - -webkit-transition-duration: @transition-duration; - -moz-transition-duration: @transition-duration; - -o-transition-duration: @transition-duration; - transition-duration: @transition-duration; -} -{% endhighlight %} - -

Transformations

-

Rotate, scale, translate (move), or skew any object.

-{% highlight css linenos %} -.rotate(@degrees) { - -webkit-transform: rotate(@degrees); - -moz-transform: rotate(@degrees); - -ms-transform: rotate(@degrees); - -o-transform: rotate(@degrees); - transform: rotate(@degrees); -} -.scale(@ratio) { - -webkit-transform: scale(@ratio); - -moz-transform: scale(@ratio); - -ms-transform: scale(@ratio); - -o-transform: scale(@ratio); - transform: scale(@ratio); -} -.translate(@x, @y) { - -webkit-transform: translate(@x, @y); - -moz-transform: translate(@x, @y); - -ms-transform: translate(@x, @y); - -o-transform: translate(@x, @y); - transform: translate(@x, @y); -} -.skew(@x, @y) { - -webkit-transform: skew(@x, @y); - -moz-transform: skew(@x, @y); - -ms-transform: skewX(@x) skewY(@y); - -o-transform: skew(@x, @y); - transform: skew(@x, @y); - -webkit-backface-visibility: hidden; -} -.translate3d(@x, @y, @z) { - -webkit-transform: translate3d(@x, @y, @z); - -moz-transform: translate3d(@x, @y, @z); - -o-transform: translate3d(@x, @y, @z); - transform: translate3d(@x, @y, @z); -} -{% endhighlight %} - -

Opacity

-

Set the opacity for all browsers and provide a filter fallback for IE8.

-{% highlight css linenos %} -.opacity(@opacity) { - opacity: @opacity; - @opacity-ie: @opacity * 100; - filter: ~"alpha(opacity=@{opacity-ie})"; // IE8 -} -{% endhighlight %} - -

Placeholder text

-

Provide context for form controls within each field.

-{% highlight css linenos %} -.placeholder(@color: @input-color-placeholder) { - &:-moz-placeholder { color: @color; } // Firefox 4-18 - &::-moz-placeholder { color: @color; } // Firefox 19+ - &:-ms-input-placeholder { color: @color; } // Internet Explorer 10+ - &::-webkit-input-placeholder { color: @color; } // Safari and Chrome -} -{% endhighlight %} - -

Columns

-

Generate columns via CSS within a single element.

-{% highlight css linenos %} -.content-columns(@width, @count, @gap) { - -webkit-column-width: @width; - -moz-column-width: @width; - column-width: @width; - -webkit-column-count: @count; - -moz-column-count: @count; - column-count: @count; - -webkit-column-gap: @gap; - -moz-column-gap: @gap; - column-gap: @gap; -} -{% endhighlight %} - -

Gradients

-

Easily turn any two colors into a background gradient. Get more advanced and set a direction, use three colors, or use a radial gradient. With a single mixin you get all the prefixed syntaxes you'll need.

-{% highlight css linenos %} -#gradient > .vertical(#333, #000); -#gradient > .horizontal(#333, #000); -#gradient > .radial(#333, #000); -{% endhighlight %} -

You can also specify the angle of a standard two-color, linear gradient:

-{% highlight css linenos %} -#gradient > .directional(#333, #000, 45deg); -{% endhighlight %} -

If you need a barber-stripe style gradient, that's easy, too. Just specify a single color and we'll overlay a translucent white stripe.

-{% highlight css linenos %} -#gradient > .striped(#333, #000, 45deg); -{% endhighlight %} -

Up the ante and use three colors instead. Set the first color, the second color, the second color's color stop (a decimal value like 0.25), and the third color with these mixins:

-{% highlight css linenos %} -#gradient > .vertical-three-colors(#777, #333, .25, #000); -#gradient > .horizontal-three-colors(#777, #333, .25, #000); -{% endhighlight %} -

Heads up! Should you ever need to remove a gradient, be sure to remove any IE-specific filter you may have added. You can do that by using .reset-filter() mixin alongside background-image: none;.

-
- - - -
-

Utility mixins

-

Similar to vendor mixins, utility mixins provide useful and often repeated snippets of CSS in single lines.

- -

Clearfix

-

Forget adding class="clearfix" to any element and instead add the .clearfix() mixin where appropriate. Uses the micro clearfix from Nicolas Gallager.

-{% highlight css linenos %} -// Mixin -.clearfix() { - &:before, - &:after { - content: " "; - display: table; - } - &:after { - clear: both; - } -} - -// Usage -.container { - .clearfix(); -} -{% endhighlight %} - -

Horizontal centering

-

Quickly center any element within its parent. Requires width or max-width to be set.

-{% highlight css linenos %} -// Mixin -.center-block() { - display: block; - margin-left: auto; - margin-right: auto; -} - -// Usage -.container { - width: 940px; - .center-block(); -} -{% endhighlight %} - -

Sizing helpers

-

Specify the dimensions of an object more easily.

-{% highlight css linenos %} -// Mixins -.size(@width, @height) { - width: @width; - height: @height; -} -.square(@size) { - .size(@size, @size); -} - -// Usage -.image { .size(400px, 300px); } -.avatar { .square(48px); } -{% endhighlight %} - -

Resizable textareas

-

Easily configure the resize options for any textarea, or any other element. Defaults to normal browser behavior (both).

-{% highlight css linenos %} -.resizable(@direction: both) { - // Options: horizontal, vertical, both - resize: @direction; - // Safari fix - overflow: auto; -} -{% endhighlight %} - -

Truncating text

-

Easily truncate text with an ellipsis with a single mixin. Requires element to be block or inline-block level.

-{% highlight css linenos %} -// Mixin -.text-truncate() { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -// Usage -.branch-name { - display: inline-block; - max-width: 200px; - .text-truncate(); -} -{% endhighlight %} - -

Retina images

-

Specify two image paths and the @1x image dimensions, and Preboot will provide an @2x media query. If you have many images to serve, consider writing your retina image CSS manually in a single media query.

-{% highlight css linenos %} -// Mixin -.retina-image(@file-1x, @file-2x, @width-1x, @height-1x) { - background-image: url("@{file-1x}"); - - @media - only screen and (-webkit-min-device-pixel-ratio: 2), - only screen and ( min--moz-device-pixel-ratio: 2), - only screen and ( -o-min-device-pixel-ratio: 2/1), - only screen and ( min-device-pixel-ratio: 2), - only screen and ( min-resolution: 192dpi), - only screen and ( min-resolution: 2dppx) { - background-image: url("@{file-2x}"); - background-size: @width-1x @height-1x; - } -} - -// Usage -.jumbotron { - .retina-image("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px); -} -{% endhighlight %} -
- -
diff --git a/index.md b/index.md new file mode 100644 index 0000000..255394e --- /dev/null +++ b/index.md @@ -0,0 +1,446 @@ +--- +layout: default +--- + +## Introducing Preboot + +[Preboot](http://github.com/mdo/preboot) is a comprehensive and flexible collection of [Sass](http://sass-lang.com) utilities. Its original variables and mixins became the precursor to [Bootstrap](http://getbootstrap.com). Since then, it's all come full circle. + +After a two-year hiatus, Preboot was reborn with many of the variable and mixin improvements from Bootstrap 3, along with some new enhancements, too. It's one of the lightest and most powerful tools for CSS development without any prebuilt components. + +Then, another two years later, Preboot 3 was made. Major changes included switching from Less to Sass, dropping most vendor prefix mixins, and overhauled documentation. + +Need something more powerful? Use [Bootstrap](http://getbootstrap.com"). + +Download Preboot 3 +GitHub project + +*Previous releases of Preboot are [available on GitHub](https://github.com/mdo/preboot/releases/).* + +## What's included + +Here's the rundown of what you can find in Preboot. Jump to a section for some lightweight documentation and code snippets. + +* Will be replaced with the ToC, excluding the first two headers +{:toc} + +## Variables + +Variables still don't exist in CSS, but they do in LESS and other CSS preprocessors. Preboot includes a several groups of meaningful and useful variables for any project. + +### Colors + +Easily make use of two color schemes included in Preboot: grayscale and semantic. Grayscale colors provide quick access to shades of black (in increments of 10%) while semantic includes various colors assigned to meaningful values. + +
+
+
+
+
+
+
+
+
+
+
+ +{% highlight css linenos %} +$black-10: darken(#fff, 10%); +$black-20: darken(#fff, 20%); +$black-30: darken(#fff, 30%); +$black-40: darken(#fff, 40%); +$black-50: darken(#fff, 50%); +$black-60: darken(#fff, 60%); +$black-70: darken(#fff, 70%); +$black-80: darken(#fff, 80%); +$black-90: darken(#fff, 90%); +{% endhighlight %} + +
+
+
+
+
+
+
+ +{% highlight css linenos %} +$brand-primary: #428bca; +$brand-success: #5cb85c; +$brand-warning: #f0ad4e; +$brand-danger: #d9534f; +$brand-info: #5bc0de; +{% endhighlight %} + +Use any of these color variables as they are or reassign them to more meaningful variables for your project. + +{% highlight scss linenos %} +// Use as-is +.masthead { + ... + background-color: $brand-primary; + ... +} + +// Reassigned variables +$alert-message-background: $brand-info; +.alert { + background-color: $alert-message-background; +} +{% endhighlight %} + +### Scaffolding + +A handful of variables for quickly customizing key elements of your site's skeleton. + +{% highlight scss linenos %} +// Scaffolding +$body-background: #fff; +$text-color: $black-50; +{% endhighlight %} + +### Links + +Easily style your links with the right color with only one value. + +{% highlight scss linenos %} +// Variables +$link-color: $brand-primary; +$link-color-hover: darken($link-color, 15%); + +// Usage +a { + color: $link-color; + text-decoration: none; + + &:hover { + color: $link-color-hover; + text-decoration: underline; + } +} +{% endhighlight %} + +Note that the `$link-color-hover` uses a function, another awesome tool from Sass, to automagically create the right hover color. You can use `darken`, `lighten`, `saturate`, and `desaturate`. + +### Typography + +Easily set your type face, text size, leading, and more with a few quick variables. Preboot makes use of these as well to provide easy typographic mixins as well. + +{% highlight scss linenos %} +// Typography + +// Font stacks for easy inclusion and customization +$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; +$font-family-serif: Georgia, "Times New Roman", Times, serif; +$font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace; +$font-family-base: $font-family-sans-serif; + +// Generate a straightforward type scale +$font-size-base: 14px; +$font-size-large: $font-size-base * 1.25; // ~18px +$font-size-small: $font-size-base * 0.85; // ~12px +$font-size-mini: $font-size-base * 0.75; // ~11px + +// Baseline for the line-height of the body +// To be used in conjunction with $font-size-base +$line-height-base: 20px; + +// Enable the option to customize headings +$headings-font-family: inherit; // From $font-family-base +$headings-font-weight: 500; +{% endhighlight %} + +## Grid system + +Generate semantic, mobile-first grid layouts with a few variables and mixins, all without superfluous markup. + +### Grid variables + +There are three grid variables that Preboot uses to power the grid mixins. + +{% highlight scss linenos %} +// Specify the number of available columns +$grid-columns: 12; +// Inner padding on each side of a column to create gutters +$grid-column-padding: 15px; +// Point at which the floats kick in and horizontally align columns +$grid-float-breakpoint: 768px; +{% endhighlight %} + +Customizing these variables should automatically work with any of the grid mixins, so tweak away. + +### Grid mixins + +There are three available mixins for each part of a standard grid system: + +- `make-row` provides a wrapper for the columns to align their content via negative margin and clear the floats. +- `make-column(*n*)` is used to generate *n* number columns as a percentage of the available grid columns (set via variable to 12 by default). +- `make-column-offset(*n*)` pushes a column right by *n* columns via `margin`. + +**Heads up!** These grid columns are mobile first, meaning by default they stack vertically. Floating only kicks in with viewports of 768px or higher. + +{% highlight scss linenos %} +@mixin make-row { + // Negative margin the row out to align the content of columns + margin-left: -$grid-column-padding; + margin-right: -$grid-column-padding; + // Then clear the floated columns + @include clearfix; +} + +@mixin make-column($columns) { + @media (min-width: $grid-float-breakpoint) { + float: left; + // Calculate width based on number of columns available + width: percentage($columns / $grid-columns); + } + // Prevent columns from collapsing when empty + min-height: 1px; + // Set inner padding as gutters instead of margin + padding-left: $grid-column-padding; + padding-right: $grid-column-padding; + @include border-box; +} + +@mixin make-column-offset($columns) { + @media (min-width: $grid-float-breakpoint) { + margin-left: percentage($columns / $grid-columns); + } +} +{% endhighlight %} + +### Example usage + +Using these mixins to generate columns is easy. **Here's the HTML and CSS of an example implementation.** + +{% highlight html linenos %} +
+
+ ... +
+
+ ... +
+
+{% endhighlight %} + +{% highlight scss linenos %} +.wrapper { + @include make-row; +} +.content-main { + @include make-column(8); +} +.content-sidebar { + @include make-column(3); + @include make-column-offset(1); +} +{% endhighlight %} + +**Need another example?** Our table of contents at the top of the page uses a custom grid as well. In the source docs.less file you'll find its super lightweight implementation: + +{% highlight scss linenos %} +.row { + @include make-row; +} +.grid-4 { + @include make-column(4); +} +{% endhighlight %} + +**That's it.** No need for additional classes as we just don't need them in this simple of a site. + +## Vendor mixins + +Write more efficient CSS by writing single-line mixins instead of multiple lines of prefixed properties. + +### Box sizing + +Reset your components' box model with a single mixin. For context, see this [helpful article from Mozilla](https://developer.mozilla.org/en-US/docs/CSS/box-sizing). + +{% highlight scss linenos %} +@mixin border-box { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +{% endhighlight %} + +### Rounded corners + +Today all modern browsers support the non-prefixed `border-radius` property. As such, there is no `@mixin border-radius` mixin, but Preboot does include shortcuts for quickly rounding two corners on a particular side of an object. + +{% highlight css linenos %} +@mixin border-top-radius($radius) { + border-top-right-radius: $radius; + border-top-left-radius: $radius; +} +@mixin border-right-radius($radius) { + border-bottom-right-radius: $radius; + border-top-right-radius: $radius; +} +@mixin border-bottom-radius($radius) { + border-bottom-right-radius: $radius; + border-bottom-left-radius: $radius; +} +@mixin border-left-radius($radius) { + border-bottom-left-radius: $radius; + border-top-left-radius: $radius; +} +{% endhighlight %} + +### Placeholder text + +Provide context for form controls within each field. + +{% highlight scss linenos %} +@mixin placeholder($color: $input-color-placeholder) { + &:-moz-placeholder { color: $color; } // Firefox 4-18 + &::-moz-placeholder { color: $color; } // Firefox 19+ + &:-ms-input-placeholder { color: $color; } // Internet Explorer 10+ + &::-webkit-input-placeholder { color: $color; } // Safari and Chrome +} +{% endhighlight %} + +### Columns + +Generate columns via CSS within a single element. + +{% highlight scss linenos %} +@mixin content-columns($width, $count, $gap) { + -webkit-column-width: $width; + -moz-column-width: $width; + column-width: $width; + -webkit-column-count: $count; + -moz-column-count: $count; + column-count: $count; + -webkit-column-gap: $gap; + -moz-column-gap: $gap; + column-gap: $gap; +} +{% endhighlight %} + +## Utility mixins + +Similar to vendor mixins, utility mixins provide useful and often repeated snippets of CSS in single lines. + +### Clearfix + +Forget adding `class="clearfix"` to any element and instead use `@include clearfix` where appropriate. Uses the [micro clearfix](http://nicolasgallagher.com/micro-clearfix-hack/) from [Nicolas Gallager](http://twitter.com/necolas). + +{% highlight scss linenos %} +// Mixin +@mixin clearfix { + &:before { + display: table; + content: ""; + } + + &:after { + display: table; + clear: both; + content: ""; + } +} + +// Usage +.container { + @include clearfix; +} +{% endhighlight %} + +### Horizontal centering + +Quickly center any element within its parent. **Requires `width` or `max-width` to be set.** + +{% highlight scss linenos %} +// Mixin +@mixin center-block { + display: block; + margin-left: auto; + margin-right: auto; +} + +// Usage +.container { + width: 940px; + @include center-block; +} +{% endhighlight %} + +### Sizing helpers + +Specify the dimensions of an object more easily. + +{% highlight scss linenos %} +// Mixins +@mixin size($width, $height) { + width: $width; + height: $height; +} +@mixin square($size) { + @include size($size, $size); +} + +// Usage +.image { @include size(400px, 300px); } +.avatar { @include square(48px); } +{% endhighlight %} + +

Resizable textareas

+

Easily configure the resize options for any textarea, or any other element. Defaults to normal browser behavior (both).

+{% highlight css linenos %} +.resizable(@direction: both) { + // Options: horizontal, vertical, both + resize: @direction; + // Safari fix + overflow: auto; +} +{% endhighlight %} + +### Truncating text + +Easily truncate text with an ellipsis with a single mixin. **Requires element to be `block` or `inline-block` level and a `width` or `max-width`.** + +{% highlight scss linenos %} +// Mixin +@mixin text-truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +// Usage +.branch-name { + display: inline-block; + max-width: 200px; + @include text-truncate; +} +{% endhighlight %} + +### Retina images + +Specify two image paths and the `@1x` image dimensions, and Preboot will provide an `@2x` media query. **If you have many images to serve, consider writing your retina image CSS manually in a single media query.** + +{% highlight scss linenos %} +// Mixin +@mixin retina-image($file-1x, $file-2x, $width-1x, $height-1x) { + background-image: url("${file-1x}"); + + @media + only screen and (-webkit-min-device-pixel-ratio: 2), + only screen and ( min--moz-device-pixel-ratio: 2), + only screen and ( -o-min-device-pixel-ratio: 2/1), + only screen and ( min-device-pixel-ratio: 2), + only screen and ( min-resolution: 192dpi), + only screen and ( min-resolution: 2dppx) { + background-image: url("${file-2x}"); + background-size: $width-1x $height-1x; + } +} + +// Usage +.jumbotron { + @include retina-image("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px); +} +{% endhighlight %} diff --git a/less/docs.less b/less/docs.less deleted file mode 100644 index 818523b..0000000 --- a/less/docs.less +++ /dev/null @@ -1,359 +0,0 @@ -/*! - * Preboot v2 Docs - * Styles for presenting Preboot features and benefits. - */ - - -// -// Dependencies -// - -@import "normalize.less"; -@import "preboot.less"; -@import "pygments.less"; - - -// -// Docs -// - - -html { - font-size: 16px; -} - -body { - padding: 0; - font-family: Roboto, "Helvetica Neue", Helvetica, sans-serif; - font-size: 1rem; - font-weight: 300; - line-height: 1.5; - color: #555; - background-color: #fff; -} - -a { - color: @link-color; - text-decoration: none; - - &:hover { - color: @link-color-hover; - text-decoration: underline; - } -} - -// Typography -h1, h2, h3, h4, h5, h6 { - margin: 2rem 0 .5rem; - font-weight: bold; - line-height: 1.2; - color: #333; -} -h1 { - font-size: 48px; -} -h2 { - font-size: 36px; -} -h3 { - font-size: 24px; - a, a:hover { - color: inherit; - } -} -h4 { - font-size: 18px; - margin-bottom: 0; -} - -p { - margin: 0 0 15px; -} -.lead { - font-size: 18px; - line-height: 1.25; - color: @black-40; -} - -ol, -ul { - margin: 0 0 15px 25px; - padding: 0; -} -.list-unstyled { - margin-left: 0; - li { - display: block; - } -} - -// Inline and block code styles -code, -pre { - padding: 0 3px 2px; - color: #333; - border-radius: 4px; -} - -// Inline code -code { - padding: 2px 4px; - font-size: 90%; - color: #c7254e; - background-color: #f9f2f4; - white-space: nowrap; -} - -// Blocks of code -pre { - display: block; - padding: 15px; - margin: 0 0 20px; - line-height: 1.4; - word-break: break-all; - word-wrap: break-word; - white-space: pre; - white-space: pre-wrap; - background-color: #f5f5f5; - border: 1px solid rgba(0,0,0,.15); - border-radius: 4px; - - // Account for some code outputs that place code tags in pre tags - code { - padding: 0; - color: inherit; - white-space: pre; - white-space: pre-wrap; - background-color: transparent; - border: 0; - } -} - -// Pygments -.highlight { - padding: 14px; - margin-bottom: 20px; - line-height: 20px; // Pygments hates unitless line-height for some reason - background-color: #f7f7f9; - border: 1px solid #e1e1e8; - border-radius: 4px; - // For some reason, line numbers aren't rendering when pushed to gh-pages - // box-shadow: inset 45px 0 0 #fbfbfc, inset 46px 0 0 #ececf0; -} -.highlight pre { - padding: 0; - margin-bottom: 0; - font-size: 16px; - background-color: transparent; - border: 0; -} -.highlight pre .lineno { - display: inline-block; - width: 20px; - padding-right: 5px; - margin-right: 10px; - text-align: right; - color: #bebec5; -} - -// Super simple grid -.row { .make-row(); } -.grid-4 { .make-column(4); } - - -// Neato divider between headers and content -.header-divider { - margin-top: 60px; -} -.header-divider:after { - display: block; - content: ""; - width: 25%; - height: 4px; - margin: 20px 0 26px; - background-color: #555; - border: 0; - opacity: .5; -} - -// Shift content over for the side panel -.container { - padding-left: 20px; - padding-right: 20px; - max-width: 760px; -} - -// Side panel -.masthead { - color: #fff; - text-shadow: 0 1px 1px rgba(0,0,0,.3); - #gradient > .vertical(darken(saturate(#7a43b6, 10%), 15%), darken(#08b5fb, 5%)); -} -.masthead-inner { - padding: 30px; -} -.masthead h1 { - margin-top: 0; - color: #fff; - letter-spacing: -1px; -} -.masthead .header-divider:after { - width: 50%; - background-color: #fff; - box-shadow: 0 1px 1px rgba(0,0,0,.3); - opacity: 1; -} -.masthead .list-unstyled { - font-size: 85%; - margin-top: 0; - margin-bottom: 20px; -} -.masthead .social-buttons { - margin-bottom: 0; -} -.masthead a { - font-weight: bold; - color: #fff; - &:hover { - text-decoration: none; - text-shadow: 0 0 8px rgba(255,255,255,.5); - } -} - -// Table of contents -.toc { - margin-left: 0; -} -.toc li { - display: block; -} -.toc a { - display: block; - margin-left: -10px; - padding: 4px 10px; - &:hover { - text-decoration: none; - background-color: #f5f5f5; - border-radius: 3px; - } -} - -// Colors -.color-swatches { - margin: 0 -5px 20px; - .clearfix(); -} -.color-swatch { - float: left; - width: 80px; - height: 80px; - margin: 5px 2px; - - &.black-10 { background-color: @black-10; } - &.black-20 { background-color: @black-20; } - &.black-30 { background-color: @black-30; } - &.black-40 { background-color: @black-40; } - &.black-50 { background-color: @black-50; } - &.black-60 { background-color: @black-60; } - &.black-70 { background-color: @black-70; } - &.black-80 { background-color: @black-80; } - &.black-90 { background-color: @black-90; } - - &.brand-primary { background-color: @brand-primary;} - &.brand-success { background-color: @brand-success;} - &.brand-warning { background-color: @brand-warning;} - &.brand-danger { background-color: @brand-danger;} - &.brand-info { background-color: @brand-info;} -} - -// Buttons -.btn { - display: block; - margin-bottom: 5px; - padding: 15px 20px; - font-weight: bold; - line-height: 1; - color: #7a43b6; - text-align: center; - letter-spacing: -1px; - background-color: #fff; - border: 1px solid #ccc; - border-radius: 5px; - - &:hover, - &:active { - color: #fff; - text-decoration: none; - background-color: #7a43b6; - border-color: #7a43b6; - } - - &:active { - box-shadow: inset 0 3px 6px rgba(0,0,0,.3); - border-color: darken(#7a43b6, 10%); - } -} - - -// Responsive -@media screen and (min-width: 820px) { - body { - font-size: 18px; - } - .highlight { - line-height: 25px; - } - .lead { - font-size: 24px; - } - - .btn { - display: inline-block; - margin-bottom: 0; - } - - // Push over the container contents to make room - .container { - margin-left: 30%; - margin-right: 10%; - padding-left: 0; - padding-right: 0; - } - // The fixins - .masthead { - position: fixed; - top: 0; - bottom: 0; - left: 0; - z-index: 5; - width: 25%; - background-attachment: fixed; - } - // Generate a super slick shadow for depth - .masthead:after { - position: absolute; - top: -20px; - right: 0; - bottom: -20px; - left: -10px; - z-index: 10; - display: block; - content: " "; - box-shadow: inset -5px 0 25px rgba(0,0,0,.3); - } - // Doc the text to the bottom - .masthead-inner { - position: absolute; - right: 0; - bottom: 0; - left: 0; - z-index: 15; - } -} - -// Larger responsive -@media screen and (min-width: 1100px) { - .masthead h1 { - font-size: 60px; - } -} diff --git a/less/normalize.less b/less/normalize.less deleted file mode 100644 index 559de6a..0000000 --- a/less/normalize.less +++ /dev/null @@ -1,396 +0,0 @@ -/*! normalize.css v2.1.0 | MIT License | git.io/normalize */ - -/* ========================================================================== - HTML5 display definitions - ========================================================================== */ - -/** - * Correct `block` display not defined in IE 8/9. - */ - -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -main, -nav, -section, -summary { - display: block; -} - -/** - * Correct `inline-block` display not defined in IE 8/9. - */ - -audio, -canvas, -video { - display: inline-block; -} - -/** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. - */ - -audio:not([controls]) { - display: none; - height: 0; -} - -/** - * Address styling not present in IE 8/9. - */ - -[hidden] { - display: none; -} - -/* ========================================================================== - Base - ========================================================================== */ - -/** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS text size adjust after orientation change, without disabling - * user zoom. - */ - -html { - font-family: sans-serif; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ - -ms-text-size-adjust: 100%; /* 2 */ -} - -/** - * Remove default margin. - */ - -body { - margin: 0; -} - -/* ========================================================================== - Links - ========================================================================== */ - -/** - * Address `outline` inconsistency between Chrome and other browsers. - */ - -a:focus { - outline: thin dotted; -} - -/** - * Improve readability when focused and also mouse hovered in all browsers. - */ - -a:active, -a:hover { - outline: 0; -} - -/* ========================================================================== - Typography - ========================================================================== */ - -/** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari 5, and Chrome. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/** - * Address styling not present in IE 8/9, Safari 5, and Chrome. - */ - -abbr[title] { - border-bottom: 1px dotted; -} - -/** - * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. - */ - -b, -strong { - font-weight: bold; -} - -/** - * Address styling not present in Safari 5 and Chrome. - */ - -dfn { - font-style: italic; -} - -/** - * Address differences between Firefox and other browsers. - */ - -hr { - -moz-box-sizing: content-box; - box-sizing: content-box; - height: 0; -} - -/** - * Address styling not present in IE 8/9. - */ - -mark { - background: #ff0; - color: #000; -} - -/** - * Correct font family set oddly in Safari 5 and Chrome. - */ - -code, -kbd, -pre, -samp { - font-family: monospace, serif; - font-size: 1em; -} - -/** - * Improve readability of pre-formatted text in all browsers. - */ - -pre { - white-space: pre-wrap; -} - -/** - * Set consistent quote types. - */ - -q { - quotes: "\201C" "\201D" "\2018" "\2019"; -} - -/** - * Address inconsistent and variable font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sup { - top: -0.5em; -} - -sub { - bottom: -0.25em; -} - -/* ========================================================================== - Embedded content - ========================================================================== */ - -/** - * Remove border when inside `a` element in IE 8/9. - */ - -img { - border: 0; -} - -/** - * Correct overflow displayed oddly in IE 9. - */ - -svg:not(:root) { - overflow: hidden; -} - -/* ========================================================================== - Figures - ========================================================================== */ - -/** - * Address margin not present in IE 8/9 and Safari 5. - */ - -figure { - margin: 0; -} - -/* ========================================================================== - Forms - ========================================================================== */ - -/** - * Define consistent border, margin, and padding. - */ - -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} - -/** - * 1. Correct `color` not being inherited in IE 8/9. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - */ - -legend { - border: 0; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * 1. Correct font family not being inherited in all browsers. - * 2. Correct font size not being inherited in all browsers. - * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. - */ - -button, -input, -select, -textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 2 */ - margin: 0; /* 3 */ -} - -/** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. - */ - -button, -input { - line-height: normal; -} - -/** - * Address inconsistent `text-transform` inheritance for `button` and `select`. - * All other form control elements do not inherit `text-transform` values. - * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. - * Correct `select` style inheritance in Firefox 4+ and Opera. - */ - -button, -select { - text-transform: none; -} - -/** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - */ - -button, -html input[type="button"], /* 1 */ -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ -} - -/** - * Re-set default cursor for disabled elements. - */ - -button[disabled], -html input[disabled] { - cursor: default; -} - -/** - * 1. Address box sizing set to `content-box` in IE 8/9. - * 2. Remove excess padding in IE 8/9. - */ - -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome - * (include `-moz` to future-proof). - */ - -input[type="search"] { - -webkit-appearance: textfield; /* 1 */ - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; /* 2 */ - box-sizing: content-box; -} - -/** - * Remove inner padding and search cancel button in Safari 5 and Chrome - * on OS X. - */ - -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * Remove inner padding and border in Firefox 4+. - */ - -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; -} - -/** - * 1. Remove default vertical scrollbar in IE 8/9. - * 2. Improve readability and alignment in all browsers. - */ - -textarea { - overflow: auto; /* 1 */ - vertical-align: top; /* 2 */ -} - -/* ========================================================================== - Tables - ========================================================================== */ - -/** - * Remove most spacing between table cells. - */ - -table { - border-collapse: collapse; - border-spacing: 0; -} \ No newline at end of file diff --git a/less/preboot.less b/less/preboot.less deleted file mode 100644 index c4f6daf..0000000 --- a/less/preboot.less +++ /dev/null @@ -1,406 +0,0 @@ -/*! - * Preboot v2 - * - * Open sourced under MIT license by @mdo. - * Some variables and mixins from Bootstrap (Apache 2 license). - */ - - -// -// Variables -// -------------------------------------------------- - -// Grayscale -@black-10: darken(#fff, 10%); -@black-20: darken(#fff, 20%); -@black-30: darken(#fff, 30%); -@black-40: darken(#fff, 40%); -@black-50: darken(#fff, 50%); -@black-60: darken(#fff, 60%); -@black-70: darken(#fff, 70%); -@black-80: darken(#fff, 80%); -@black-90: darken(#fff, 90%); - -// Brand colors -@brand-primary: #428bca; -@brand-success: #5cb85c; -@brand-warning: #f0ad4e; -@brand-danger: #d9534f; -@brand-info: #5bc0de; - -// Scaffolding -@body-background: #fff; -@text-color: @black-50; - -// Links -@link-color: @brand-primary; -@link-color-hover: darken(@link-color, 15%); - -// Typography -@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; -@font-family-serif: Georgia, "Times New Roman", Times, serif; -@font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace; -@font-family-base: @font-family-sans-serif; - -@font-size-base: 14px; -@font-size-large: @font-size-base * 1.25; // ~18px -@font-size-small: @font-size-base * 0.85; // ~12px -@font-size-mini: @font-size-base * 0.75; // ~11px - -@line-height-base: 1.4; - -@headings-font-family: inherit; // empty to use BS default, @font-family-base -@headings-font-weight: 500; - -// Forms -@input-color-placeholder: lighten(@text-color, 25%); - -// Grid -// Used with the grid mixins below -@grid-columns: 12; -@grid-column-padding: 15px; // Left and right inner padding -@grid-float-breakpoint: 768px; - - - -// -// Grid system -// -------------------------------------------------- - -// Grid -.make-row() { - // Negative margin the row out to align the content of columns - margin-left: -@grid-column-padding; - margin-right: -@grid-column-padding; - // Then clear the floated columns - .clearfix(); -} -.make-column(@columns) { - @media (min-width: @grid-float-breakpoint) { - float: left; - // Calculate width based on number of columns available - width: percentage(@columns / @grid-columns); - } - // Prevent columns from collapsing when empty - min-height: 1px; - // Set inner padding as gutters instead of margin - padding-left: @grid-column-padding; - padding-right: @grid-column-padding; - // Proper box-model (padding doesn't add to width) - .box-sizing(border-box); -} -.make-column-offset(@columns) { - @media (min-width: @grid-float-breakpoint) { - margin-left: percentage(@columns / @grid-columns); - } -} - - - -// -// Mixins: vendor prefixes -// -------------------------------------------------- - -// Box sizing -.box-sizing(@box-model) { - -webkit-box-sizing: @box-model; // Safari <= 5 - -moz-box-sizing: @box-model; // Firefox <= 19 - box-sizing: @box-model; -} - -// Single side border-radius -.border-top-radius(@radius) { - border-top-right-radius: @radius; - border-top-left-radius: @radius; -} -.border-right-radius(@radius) { - border-bottom-right-radius: @radius; - border-top-right-radius: @radius; -} -.border-bottom-radius(@radius) { - border-bottom-right-radius: @radius; - border-bottom-left-radius: @radius; -} -.border-left-radius(@radius) { - border-bottom-left-radius: @radius; - border-top-left-radius: @radius; -} - -// Drop shadows -.box-shadow(@shadow) { - -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1 - box-shadow: @shadow; -} - -// Transitions -.transition(@transition) { - -webkit-transition: @transition; - -moz-transition: @transition; - -o-transition: @transition; - transition: @transition; -} -.transition-delay(@transition-delay) { - -webkit-transition-delay: @transition-delay; - -moz-transition-delay: @transition-delay; - -o-transition-delay: @transition-delay; - transition-delay: @transition-delay; -} -.transition-duration(@transition-duration) { - -webkit-transition-duration: @transition-duration; - -moz-transition-duration: @transition-duration; - -o-transition-duration: @transition-duration; - transition-duration: @transition-duration; -} - -// Transformations -.rotate(@degrees) { - -webkit-transform: rotate(@degrees); - -moz-transform: rotate(@degrees); - -ms-transform: rotate(@degrees); - -o-transform: rotate(@degrees); - transform: rotate(@degrees); -} -.scale(@ratio) { - -webkit-transform: scale(@ratio); - -moz-transform: scale(@ratio); - -ms-transform: scale(@ratio); - -o-transform: scale(@ratio); - transform: scale(@ratio); -} -.translate(@x, @y) { - -webkit-transform: translate(@x, @y); - -moz-transform: translate(@x, @y); - -ms-transform: translate(@x, @y); - -o-transform: translate(@x, @y); - transform: translate(@x, @y); -} -.skew(@x, @y) { - -webkit-transform: skew(@x, @y); - -moz-transform: skew(@x, @y); - -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twitter/bootstrap/issues/4885 - -o-transform: skew(@x, @y); - transform: skew(@x, @y); - -webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319 -} -.translate3d(@x, @y, @z) { - -webkit-transform: translate3d(@x, @y, @z); - -moz-transform: translate3d(@x, @y, @z); - -o-transform: translate3d(@x, @y, @z); - transform: translate3d(@x, @y, @z); -} - -// Backface visibility -// -// Prevent browsers from flickering when using CSS 3D transforms. -// Default value is `visible`, but can be changed to `hidden -// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples -.backface-visibility(@visibility){ - -webkit-backface-visibility: @visibility; - -moz-backface-visibility: @visibility; - backface-visibility: @visibility; -} - -// User select -// -// For selecting text on the page -.user-select(@select) { - -webkit-user-select: @select; - -moz-user-select: @select; - -ms-user-select: @select; - -o-user-select: @select; - user-select: @select; -} - -// Opacity -.opacity(@opacity) { - opacity: @opacity; - @opacity-ie: @opacity * 100; - filter: ~"alpha(opacity=@{opacity-ie})"; // IE8 -} - -// Placeholder text -.placeholder(@color: @input-color-placeholder) { - &:-moz-placeholder { color: @color; } // Firefox 4-18 - &::-moz-placeholder { color: @color; } // Firefox 19+ - &:-ms-input-placeholder { color: @color; } // Internet Explorer 10+ - &::-webkit-input-placeholder { color: @color; } // Safari and Chrome -} - -// Resize anything -.resizable(@direction) { - resize: @direction; // Options: horizontal, vertical, both - overflow: auto; // Safari fix -} - -// CSS3 Content Columns -.content-columns(@width, @count, @gap) { - -webkit-column-width: @width; - -moz-column-width: @width; - column-width: @width; - -webkit-column-count: @count; - -moz-column-count: @count; - column-count: @count; - -webkit-column-gap: @gap; - -moz-column-gap: @gap; - column-gap: @gap; -} - -// Optional hyphenation -.hyphens(@mode: auto) { - word-wrap: break-word; - -webkit-hyphens: @mode; - -moz-hyphens: @mode; - -ms-hyphens: @mode; - -o-hyphens: @mode; - hyphens: @mode; -} - -// Gradients -#gradient { - .horizontal(@startColor: #555, @endColor: #333) { - background-color: @endColor; - background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+ - background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ - background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+ - background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10 - background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10 - background-repeat: repeat-x; - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down - } - .vertical(@startColor: #555, @endColor: #333) { - background-color: @endColor; - background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+ - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ - background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+ - background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 - background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10 - background-repeat: repeat-x; - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down - } - .directional(@startColor: #555, @endColor: #333, @deg: 45deg) { - background-color: @endColor; - background-repeat: repeat-x; - background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+ - background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+ - background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10 - background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10 - } - .horizontal-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { - background-color: mix(@midColor, @endColor, 80%); - background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor)); - background-image: -webkit-linear-gradient(left, @startColor, @midColor @colorStop, @endColor); - background-image: -moz-linear-gradient(left, @startColor, @midColor @colorStop, @endColor); - background-image: -o-linear-gradient(left, @startColor, @midColor @colorStop, @endColor); - background-image: linear-gradient(to right, @startColor, @midColor @colorStop, @endColor); - background-repeat: no-repeat; - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback - } - .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { - background-color: mix(@midColor, @endColor, 80%); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor)); - background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor); - background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor); - background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor); - background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor); - background-repeat: no-repeat; - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback - } - .radial(@innerColor: #555, @outerColor: #333) { - background-color: @outerColor; - background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor)); - background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor); - background-image: -moz-radial-gradient(circle, @innerColor, @outerColor); - background-image: -o-radial-gradient(circle, @innerColor, @outerColor); - background-repeat: no-repeat; - } - .striped(@color: #555, @angle: 45deg) { - background-color: @color; - background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent)); - background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); - background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); - background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); - } -} - -// Reset filters for IE -// -// Useful for when you want to remove a gradient from an element. -.reset-filter() { - filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)")); -} - - - -// -// Mixins: utilities -// -------------------------------------------------- - -// Clearfix -// -// Source: http://nicolasgallagher.com/micro-clearfix-hack/ -// -// For modern browsers -// 1. The space content is one way to avoid an Opera bug when the -// contenteditable attribute is included anywhere else in the document. -// Otherwise it causes space to appear at the top and bottom of elements -// that are clearfixed. -// 2. The use of `table` rather than `block` is only necessary if using -// `:before` to contain the top-margins of child elements. -.clearfix() { - *zoom: 1; - &:before, - &:after { - content: " "; // 1 - display: table; // 2 - // Fixes Opera/contenteditable bug: - // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 - line-height: 0; - } - &:after { - clear: both; - } -} - -// Center-align a block level element -.center-block() { - display: block; - margin-left: auto; - margin-right: auto; -} - -// Sizing shortcuts -.size(@width, @height) { - width: @width; - height: @height; -} -.square(@size) { - .size(@size, @size); -} - -// Text overflow -// -// Requires inline-block or block for proper styling -.text-truncate() { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -// Retina images -// -// Retina background-image support with non-retina fall back -.retina-image(@file-1x, @file-2x, @width-1x, @height-1x) { - background-image: url("@{file-1x}"); - - @media - only screen and (-webkit-min-device-pixel-ratio: 2), - only screen and ( min--moz-device-pixel-ratio: 2), - only screen and ( -o-min-device-pixel-ratio: 2/1), - only screen and ( min-device-pixel-ratio: 2), - only screen and ( min-resolution: 192dpi), - only screen and ( min-resolution: 2dppx) { - background-image: url("@{file-2x}"); - background-size: @width-1x @height-1x; - } -} diff --git a/package.json b/package.json index b39f422..023dcd3 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,8 @@ { "name": "preboot" - , "description": "A collection of LESS mixins and variables for writing better CSS." - , "version": "2.0.0" - , "keywords": ["preboot", "css", "less"] + , "description": "A collection of Sass mixins and variables." + , "version": "3.0.0" + , "keywords": ["preboot", "css", "sass"] , "homepage": "http://getpreboot.com/" , "author": "Mark Otto" , "repository": { @@ -10,7 +10,4 @@ , "url": "https://github.com/mdo/preboot.git" } , "license": "MIT" - , "devDependencies": { - "recess": "1.1.6" - } } diff --git a/preboot.scss b/preboot.scss new file mode 100644 index 0000000..beb2b05 --- /dev/null +++ b/preboot.scss @@ -0,0 +1,9 @@ +--- +# Use a comment to ensure Jekyll reads the file to be transformed into CSS later +# only main files contain this front matter, not partials. +--- + +@import "preboot"; +@import "normalize"; +@import "syntax"; +@import "docs";