Righty

A very, very light-weight grid and toolbox.

3kb without modules/ 17kb with modules.(before gzipping)

Add Righty to your project:

  1. Download the folder from here or github
  2. insert it in your scss folder
  3. @import "righty";
  4. Your done! If, you want to incorporate some of the bundled modules, you'll need to comment them back in, in the _righty file.

Why Righty?

All tools are built to solve a problem. Righty is a light-weight, easy to use yet efficient, OOCSS grid, with a few additional modules and scripts.


Who is Righty for?

We love huge frameworks, that cover all the bases. For a largeand complex project, that will utilize a lot of the pull-this & push-that, and all the offsets and different computed styles for several breakpoints, we like Foundation alot.


But for many small & medium sized projects, we just dont need all the overhead. Righty comes equiped with a common, 12 column grid (can be changed through sass variables), several helper classes, some extra modules if you'd like as well as a couple scripts that may come in handy.

The grid

Syntax is an easy .columns-1 through .columns-12. Mix & match, the class col-x is also acceptable.

12

8

4

6

6

4

4

4

2

2

2

2

2 .mobile-fifty

2 .mobile-fifty

4

1

1

1

1

4

2

6 .end

Why not semantic css? Well, thats great and all, but we like to keep our layout and presentational styles separate. So adding a class of .columns-4 and a class of .main-aside for a hook to style from is A OK. Plus, it's nice to have some control in the templates to move elements around. This is a great post from Nicolas Gallagher that sums it up nicely.

Variables

The _var file has a dozen or so variables you can change for your project. These include colors, fonts, breakpoints, transition speeds etc...

Primary
Action
Accent
Light
Dark
Muted
see github for full list

Helpers:

The _helpers file contains several common helper classes found in many projects. For example, the .switch class as shown below. As we've mentioned earlier, Righty isn't intended to have styles for every possible configuration. Instead, the simple class will work for you most of the time. By just reversing the float direction, you can display your content in reverse order on larger screens. If you need something more complex for a particular situation, just sprinkle in some flexbox.

This section is first in the mark-up.
This section is second in the mark-up.

There is also a minimal _reset.scss, _print.scss that can be included.

see github for full list

Modules

Included are a few modules you can use if you like. There are html examples in the scss files, and are pretty straight forward.

This is an ul.righty-grid-3.

The grid is ready to accept between 2 and 6 as a suffix, and the width of it's children li's will change accordingly.

Righty Tabs

Righty-Tabs uses the ol' radio button trick, so ie10+ is the target for this lightweight css only method.

Using a class of .righty-tabs-2 will apply a 50% width to the label. .righty-tabs-3 will apply a 33% width etc. You can omit the "-x" to just recieve a default width.

Tab Content 1

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tab Content 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

Righty Modals and Buttons

Buttons

A _buttons.scss is provided that contains styles for these 3 buttons. A class of button is needed as well as the light or dark modifier. Yup, inspired by Materialize CSS for sure. The effect is scaled back just a bit though.

Modals

You may need a simple modal, here are a couple to choose from. A data-modal is needed on the trigger with the attribute being the ID in which your targeting. Then the modal itself will need a class of righty-modal, with the addition of footer-modal for that option. The modals have 2 triggers to close them, the    in the modal window, or by pressing the button again.

Centered Fixed Modal
a href="#" class="button" data-modal="#modal-1"
Full-Width Footer Modal
a href="#" class="button light" data-modal="#modal-2"
Dark Button
a href="#" class="button dark"

Righty Cards

Righty Cards

Can really be used for anything

Righty Cards

Can really be used for anything

Something

Righty Cards

Can really be used for anything

Righty Cards

Can really be used for anything

Righty Cards

Can really be used for anything

Righty Cards

Can really be used for anything

Link

Righty Cards

Can really be used for anything

Righty Cards

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Righty-Share

Sharing is caring! Sharing links can be embedded inside any html page, and be an extremely lightweight and effective sharing module. The html snippet provided (commented out inside the scss file) can be add any where in the body, as long as its not placed inside another container, it will act accordingly. Just change the url's and twitter handle, or your own server-side code.

                            
                                
<!-- Google Plus -->
<a rel="nofollow" href="https://plus.google.com/share?url=http://www.markszymanski.com/righty/" target="_blank" class="share-btn google-plus">
    <i class="icon-google-plus"></i>
</a>

                            
                        

Scripts

There are a few scripts packaged up in righty. You'll see the folder in the root of therighty folder. While you could link to it here you should probably move it to your js folder.


Scripts include:

  1. Smooth Scrolling: used on this page.
  2. Nav On Scroll: used on this page.
  3. Mobile Vav: The simple default mobile nav
  4. Modals: same code snippet for both styles
  5. EM Breakpoint finder: Look at the lower right corner of the screen! A great tool for development.