Port of the blueprint rtl plugin to compass with example. Also a small re-org of some of the files in the blueprint_plugin example.
This commit is contained in:
Chris Eppstein
parent
ae4daa2572
commit
dc5f5672a4
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
@ -27,28 +27,35 @@
|
||||
<th class="span-10">Description</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="parts/fancy_type.html">Fancy Type</a></td>
|
||||
<td><a href="plugins/fancy_type.html">Fancy Type</a></td>
|
||||
<td>
|
||||
<a href="../../frameworks/blueprint/stylesheets/blueprint/modules/_grid.sass">grid.sass</a>,
|
||||
<a href="../../frameworks/blueprint/stylesheets/blueprint/modules/_typography.sass">typography.sass</a>,
|
||||
<a href="../../frameworks/blueprint/stylesheets/blueprint/modules/_fancy_type.sass">fancy_type.sass</a>
|
||||
<a href="http://github.com/chriseppstein/compass/blob/master/frameworks/blueprint/stylesheets/blueprint/modules/_grid.sass">grid.sass</a>,
|
||||
<a href="http://github.com/chriseppstein/compass/blob/master/frameworks/blueprint/stylesheets/blueprint/modules/_typography.sass">typography.sass</a>,
|
||||
<a href="http://github.com/chriseppstein/compass/blob/master/frameworks/blueprint/stylesheets/blueprint/modules/_fancy_type.sass">fancy_type.sass</a>
|
||||
</td>
|
||||
<td>A simple sample page, with common elements and fancy type.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="parts/buttons.html">Buttons</a></td>
|
||||
<td><a href="plugins/buttons.html">Buttons</a></td>
|
||||
<td>
|
||||
<a href="../../frameworks/blueprint/stylesheets/blueprint/modules/_buttons.sass">grid.sass</a>,
|
||||
<a href="http://github.com/chriseppstein/compass/blob/master/frameworks/blueprint/stylesheets/blueprint/modules/_buttons.sass">buttons.sass</a>
|
||||
</td>
|
||||
<td>A simple page, showing links and buttons styled using the button plugin.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="parts/link_icons.html">Link Icons</a></td>
|
||||
<td><a href="plugins/link_icons.html">Link Icons</a></td>
|
||||
<td>
|
||||
<a href="../../frameworks/blueprint/stylesheets/blueprint/modules/_link_icons.sass">grid.sass</a>,
|
||||
<a href="http://github.com/chriseppstein/compass/blob/master/frameworks/blueprint/stylesheets/blueprint/modules/_link_icons.sass">link_icons.sass</a>
|
||||
</td>
|
||||
<td>A simple page, showing links icons.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="plugins/rtl.html">RTL</a></td>
|
||||
<td>
|
||||
<a href="http://github.com/chriseppstein/compass/blob/master/frameworks/blueprint/stylesheets/blueprint/modules/_rtl.sass">rtl.sass</a>
|
||||
</td>
|
||||
<td>A simple page, showing a right-to-left grid layout.</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p><em><strong>Note about the css files:</strong></em>
|
||||
@ -60,14 +67,13 @@
|
||||
<div class="box">
|
||||
<p>For more information and help, try these resources:</p>
|
||||
<ul class="bottom">
|
||||
<li><a href="http://code.google.com/p/blueprintcss">The Blueprint home page.</a></li>
|
||||
<li><a href="http://www.blueprintcss.org/">The Blueprint home page.</a></li>
|
||||
<li><a href="http://groups.google.com/group/blueprintcss">Our anything-goes mailing list.</a></li>
|
||||
<li><a href="http://bjorkoy.com">The blog where news about Blueprint gets posted.</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p><a href="http://validator.w3.org/check?uri=referer">
|
||||
<img src="parts/valid.png" alt="Valid HTML 4.01 Strict" height="31" width="88" class="top"></a></p>
|
||||
<img src="images/valid.png" alt="Valid HTML 4.01 Strict" height="31" width="88" class="top"></a></p>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@ -38,7 +38,7 @@
|
||||
<hr class="space">
|
||||
|
||||
<div class="span-15 prepend-1 colborder">
|
||||
<p><img src="test.jpg" class="top pull-1" alt="test">Lorem ipsum dolor sit amet, <em>consectetuer adipiscing elit</em>. Nunc congue ipsum vestibulum libero. Aenean vitae justo. Nam eget tellus. Etiam convallis, est eu lobortis mattis, lectus tellus tempus felis, a ultricies erat ipsum at metus.</p>
|
||||
<p><img src="../images/test.jpg" class="top pull-1" alt="test">Lorem ipsum dolor sit amet, <em>consectetuer adipiscing elit</em>. Nunc congue ipsum vestibulum libero. Aenean vitae justo. Nam eget tellus. Etiam convallis, est eu lobortis mattis, lectus tellus tempus felis, a ultricies erat ipsum at metus.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Morbi et risus</a>. Aliquam nisl. Nulla facilisi. Cras accumsan vestibulum ante. Vestibulum sed tortor. Praesent <span class="caps">SMALL CAPS</span> tempus fringilla elit. Ut elit diam, sagittis in, nonummy in, gravida non, nunc. Ut orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam egestas, orci eu imperdiet malesuada, nisl purus fringilla odio, quis commodo est orci vitae justo. Aliquam placerat odio tincidunt nulla. Cras in libero. Aenean rutrum, magna non tristique posuere, erat odio eleifend nisl, non convallis est tortor blandit ligula. Nulla id augue.</p>
|
||||
<p>Nullam mattis, odio ut tempus facilisis, metus nisl facilisis metus, auctor consectetuer felis ligula nec mauris. Vestibulum odio erat, fermentum at, commodo vitae, ultrices et, urna. Mauris vulputate, mi pulvinar sagittis condimentum, sem nulla aliquam velit, sed imperdiet mi purus eu magna. Nulla varius metus ut eros. Aenean aliquet magna eget orci. Class aptent taciti sociosqu ad litora.</p>
|
||||
<p>Vivamus euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse vel nibh ut turpis dictum sagittis. Aliquam vel velit a elit auctor sollicitudin. Nam vel dui vel neque lacinia pretium. Quisque nunc erat, venenatis id, volutpat ut, scelerisque sed, diam. Mauris ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec mattis. Morbi dignissim sollicitudin libero. Nulla lorem.</p>
|
||||
84
examples/blueprint_plugins/plugins/rtl.html
Normal file
84
examples/blueprint_plugins/plugins/rtl.html
Normal file
@ -0,0 +1,84 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||
"http://www.w3.org/TR/html4/strict.dtd">
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Blueprint Sample Page</title>
|
||||
|
||||
<!-- Framework CSS -->
|
||||
<link rel="stylesheet" href="../stylesheets/rtl_screen.css" type="text/css" media="screen, projection">
|
||||
<link rel="stylesheet" href="../stylesheets/print.css" type="text/css" media="print">
|
||||
<!--[if IE]><link rel="stylesheet" href="../stylesheets/ie.css" type="text/css" media="screen, projection"><![endif]-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<h1>A simple sample page</h1>
|
||||
<hr>
|
||||
<h2 class="alt">This sample page demonstrates a tiny fraction of what you get with Blueprint.</h2>
|
||||
<hr>
|
||||
|
||||
<div class="span-7 colborder">
|
||||
<h6>Here's a box</h6>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
|
||||
</div>
|
||||
|
||||
<div class="span-8 colborder">
|
||||
<h6>And another box</h6>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat laboris nisi ut aliquip.</p>
|
||||
</div>
|
||||
|
||||
<div class="span-7 last">
|
||||
<h6>This box is aligned with the sidebar</h6>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<hr class="space">
|
||||
|
||||
<div class="span-15 prepend-1 colborder">
|
||||
<p><img src="../images/test.jpg" class="top pull-1" alt="test">Lorem ipsum dolor sit amet, <em>consectetuer adipiscing elit</em>. Nunc congue ipsum vestibulum libero. Aenean vitae justo. Nam eget tellus. Etiam convallis, est eu lobortis mattis, lectus tellus tempus felis, a ultricies erat ipsum at metus.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Morbi et risus</a>. Aliquam nisl. Nulla facilisi. Cras accumsan vestibulum ante. Vestibulum sed tortor. Praesent <span class="caps">SMALL CAPS</span> tempus fringilla elit. Ut elit diam, sagittis in, nonummy in, gravida non, nunc. Ut orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam egestas, orci eu imperdiet malesuada, nisl purus fringilla odio, quis commodo est orci vitae justo. Aliquam placerat odio tincidunt nulla. Cras in libero. Aenean rutrum, magna non tristique posuere, erat odio eleifend nisl, non convallis est tortor blandit ligula. Nulla id augue.</p>
|
||||
<p>Nullam mattis, odio ut tempus facilisis, metus nisl facilisis metus, auctor consectetuer felis ligula nec mauris. Vestibulum odio erat, fermentum at, commodo vitae, ultrices et, urna. Mauris vulputate, mi pulvinar sagittis condimentum, sem nulla aliquam velit, sed imperdiet mi purus eu magna. Nulla varius metus ut eros. Aenean aliquet magna eget orci. Class aptent taciti sociosqu ad litora.</p>
|
||||
<p>Vivamus euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse vel nibh ut turpis dictum sagittis. Aliquam vel velit a elit auctor sollicitudin. Nam vel dui vel neque lacinia pretium. Quisque nunc erat, venenatis id, volutpat ut, scelerisque sed, diam. Mauris ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec mattis. Morbi dignissim sollicitudin libero. Nulla lorem.</p>
|
||||
<blockquote>
|
||||
<p>Integer cursus ornare mauris. Praesent nisl arcu, imperdiet eu, ornare id, scelerisque ut, nunc. Praesent sagittis erat sed velit tempus imperdiet. Ut tristique, ante in interdum hendrerit, erat enim faucibus felis, quis rutrum mauris lorem quis sem. Vestibulum ligula nisi, mattis nec, posuere et, blandit eu, ligula. Nam suscipit placerat odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque tortor libero, venenatis vitae, rhoncus eu, placerat ut, mi. Nulla nulla.</p>
|
||||
</blockquote>
|
||||
<p>Maecenas vel metus quis magna pharetra fermentum. <em>Integer sit amet tortor</em>. Maecenas porttitor, pede sed gravida auctor, nulla augue aliquet elit, at pretium urna orci ut metus. Aliquam in dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, tellus id ornare posuere, quam nunc accumsan turpis, at convallis tellus orci et nisl. Phasellus congue neque a lorem.</p>
|
||||
|
||||
<hr>
|
||||
<div class="span-7 colborder">
|
||||
<h6>This is a nested column</h6>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
|
||||
</div>
|
||||
<div class="span-7 last">
|
||||
<h6>This is another nested column</h6>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="span-7 last">
|
||||
|
||||
<h3>A <span class="alt">Simple</span> Sidebar</h3>
|
||||
|
||||
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue.</p>
|
||||
<p>Mauris a lectus. Aliquam erat volutpat. Phasellus ultrices mi a sapien. Nunc rutrum egestas lorem. Duis ac sem sagittis elit tincidunt gravida. Mauris a lectus. Aliquam erat volutpat. Phasellus ultrices mi a sapien. Nunc rutrum egestas lorem. Duis ac sem sagittis elit tincidunt gravida.</p>
|
||||
<p class="quiet">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue.</p>
|
||||
|
||||
<h5>Incremental leading</h5>
|
||||
<p class="incr">Vestibulum ante ipsum primis in faucibus orci luctus vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. sed aliquet vehicula, lectus tellus.</p>
|
||||
<p class="incr">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<h2 class="alt">You may pick and choose amongst these and many more features, so be bold.</h2>
|
||||
<hr>
|
||||
|
||||
<p><a href="http://validator.w3.org/check?uri=referer">
|
||||
<img src="valid.png" alt="Valid HTML 4.01 Strict" height="31" width="88" class="top"></a></p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
13
examples/blueprint_plugins/src/rtl_screen.sass
Normal file
13
examples/blueprint_plugins/src/rtl_screen.sass
Normal file
@ -0,0 +1,13 @@
|
||||
@import blueprint.sass
|
||||
@import blueprint/modules/fancy_type.sass
|
||||
@import blueprint/modules/scaffolding.sass
|
||||
@import blueprint/modules/rtl.sass
|
||||
@import compass/reset.sass
|
||||
|
||||
|
||||
+blueprint
|
||||
+rtl-typography
|
||||
+fancy-type
|
||||
// Remove the scaffolding when you're ready to start doing visual design.
|
||||
// Or leave it in if you're happy with how blueprint looks out-of-the-box
|
||||
+blueprint-scaffolding
|
||||
134
frameworks/blueprint/stylesheets/blueprint/modules/_rtl.sass
Normal file
134
frameworks/blueprint/stylesheets/blueprint/modules/_rtl.sass
Normal file
@ -0,0 +1,134 @@
|
||||
@import grid.sass
|
||||
@import compass/utilities/general/float.sass
|
||||
|
||||
// Main layout grid, override these constants to build your grid and container sizes.
|
||||
!blueprint_grid_columns ||= 24
|
||||
!blueprint_grid_width ||= 30px
|
||||
!blueprint_grid_margin ||= 10px
|
||||
|
||||
!blueprint_grid_outer_width = !blueprint_grid_width + !blueprint_grid_margin
|
||||
!blueprint_container_size = !blueprint_grid_outer_width * !blueprint_grid_columns - !blueprint_grid_margin
|
||||
|
||||
=blueprint-grid
|
||||
// A container should group all your columns
|
||||
.container
|
||||
+container
|
||||
// Use these classes (or mixins) to set the width of a column.
|
||||
@for !n from 1 to !blueprint_grid_columns + 1
|
||||
.span-#{!n}
|
||||
+span(!n)
|
||||
div
|
||||
&.span-#{!n}
|
||||
+column(!n, !n == !blueprint_grid_columns)
|
||||
// The last column in a row needs this class (or mixin) or it will end up on the next row.
|
||||
div.last
|
||||
+last
|
||||
// Add these to a column to append empty cols.
|
||||
@for !n from 1 to !blueprint_grid_columns
|
||||
.append-#{!n}
|
||||
+append(!n)
|
||||
// Add these to a column to prepend empty cols.
|
||||
@for !n from 1 to !blueprint_grid_columns
|
||||
.prepend-#{!n}
|
||||
+prepend(!n)
|
||||
// Use these classes on an element to push it into the
|
||||
// next column, or to pull it into the previous column.
|
||||
@for !n from 1 to !blueprint_grid_columns + 1
|
||||
.pull-#{!n}
|
||||
+pull(!n)
|
||||
@for !n from 1 to !blueprint_grid_columns + 1
|
||||
.push-#{!n}
|
||||
+push(!n)
|
||||
|
||||
// Columns
|
||||
// Note: If you use this mixin without the class and want to support ie6
|
||||
// you must set text-align left on your container element in an IE stylesheet.
|
||||
=container
|
||||
:width = !blueprint_container_size
|
||||
:margin 0 auto
|
||||
:direction rtl
|
||||
+clearfix
|
||||
|
||||
// The last column in a row needs this mixin or it will end up on the next row.
|
||||
// TODO add this to span mixin when we have optional arguments
|
||||
=last
|
||||
:margin-left 0
|
||||
|
||||
=span(!n)
|
||||
:width = !blueprint_grid_width * !n + (!blueprint_grid_margin * (!n - 1))
|
||||
|
||||
// Use this mixins to set the width of n columns.
|
||||
=column(!n, !last = false)
|
||||
+float-right
|
||||
+span(!n)
|
||||
@if !last
|
||||
+last
|
||||
@else
|
||||
:margin-left = !blueprint_grid_margin
|
||||
* html &
|
||||
:overflow-x hidden
|
||||
|
||||
// Mixin to a column to append n empty cols.
|
||||
=append(!n)
|
||||
:padding-left = (!blueprint_grid_outer_width) * !n
|
||||
|
||||
// Mixin to a column to prepend n empty cols.
|
||||
=prepend(!n)
|
||||
:padding-right = (!blueprint_grid_outer_width) * !n
|
||||
|
||||
// mixin to a column to move it n columns to the left
|
||||
=pull(!n, !last = false)
|
||||
:position relative
|
||||
@if !last
|
||||
:margin-right = (-!blueprint_grid_outer_width * !n) + !blueprint_grid_margin
|
||||
@else
|
||||
:margin-right = -!blueprint_grid_outer_width * !n
|
||||
|
||||
// mixin to a column to push it n columns to the right
|
||||
=push(!n)
|
||||
+float-right
|
||||
:position relative
|
||||
:margin
|
||||
:top 0
|
||||
:left = -!blueprint_grid_outer_width * !n
|
||||
:bottom 1.5em
|
||||
:right = !blueprint_grid_outer_width * !n
|
||||
|
||||
// Border on left hand side of a column.
|
||||
=border
|
||||
:padding-left = !blueprint_grid_margin / 2 - 1
|
||||
:margin-left = !blueprint_grid_margin / 2
|
||||
:border-left 1px solid #eee
|
||||
|
||||
// Border with more whitespace, spans one column.
|
||||
=colborder
|
||||
:padding-left= !blueprint_grid_width - 0.5 * !blueprint_grid_margin - 1
|
||||
:margin-left= !blueprint_grid_width - 0.5 * !blueprint_grid_margin
|
||||
:border-left 1px solid #eee
|
||||
|
||||
=rtl-typography(!body_selector = "body")
|
||||
html #{!body_selector}
|
||||
:font-family Arial, sans-serif
|
||||
@if !body_selector != "body"
|
||||
+rtl-typography-defaults
|
||||
@if !body_selector == "body"
|
||||
body
|
||||
+rtl-typography-defaults
|
||||
|
||||
=rtl-typography-defaults
|
||||
h1, h2, h3, h4, h5, h6
|
||||
:font-family Arial, sans-serif
|
||||
|
||||
pre, code, tt
|
||||
:font-family monospace
|
||||
|
||||
p img
|
||||
:float right
|
||||
:margin 1.5em 0 1.5em 1.5em
|
||||
|
||||
dd, ul, ol
|
||||
:margin-left 0
|
||||
:margin-right 1.5em
|
||||
|
||||
td, th
|
||||
:text-align right
|
||||
Loading…
Reference in New Issue
Block a user