Codefabrik::Styleguide

Default styles for Codefabrik Rails applications.

Installation

Install the gem and add to the application's Gemfile by executing:

$ bundle add codefabrik-styleguide

If bundler is not being used to manage dependencies, install the gem by executing:

$ gem install codefabrik-styleguide

Usage

Add the Codefabrik styles to your application.css.scss file:

@use 'codefabrik/styleguide' with (
    $primary_color: blue,
    $text_on_primary_color: white
);

You can override default values by adding them to the with block as shown above.

The possible overrides are the following:

$media_breakpoint: 75rem !default;
$primary_color: #A0E7E5 !default;
$text_on_primary_color: black !default;
$border_color: #8f8f9d !default;
$default_distance: 1rem !default;
$background_color: #FDFDFD !default;
$background_color_dark: #212121 !default;
$font: 'sans-serif' !default;
$font_color: #333 !default;
$font_color_dark: #EFEFEF !default;

Architecture

The styleguide is meant for mobile first development. Start with the mobile styles, and add the desktop styles later.

Grid

To create a layout where the mobile view shows a single column and the desktop view shows four columns side by side, use the following rules:

<div class="grid grid-d-4"></div> <!-- single column on mobile, 4 on desktop -->

You can also implement different column counts on mobile and desktop:

<div class="grid grid-2 grid-d-4"></div> <!-- 2 columns on mobile, 4 on desktop -->

Columns of varying width can be defined by their weight:

<div class="grid grid-1-3"></div> <!-- column width of 25% and 75% on mobile and desktop -->

Flexbox

Flexbox rules are defined with english words. Use the horizontal position first, then the vertical position, such as center, left, right, top and bottom.

<div class="flex center-top">...</div>

Development

Run ruby app.rb and open http://localhost:4567 for a live preview of the styles in your browser.

After checking out the repo, run bin/setup to install dependencies. Then, run rake spec to run the tests. You can also run bin/console for an interactive prompt that will allow you to experiment.

To install this gem onto your local machine, run bundle exec rake install. To release a new version, update the version number in version.rb, and then run bundle exec rake release, which will create a git tag for the version, push git commits and the created tag, and push the .gem file to rubygems.org.

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/code-fabrik/styleguide.

License

The gem is available as open source under the terms of the MIT License.