brianjhanson

// ----
// libsass (v3.1.0)
// ----

$spacings: (
  small: rem(12),
  base: rem(24),
  medium: rem(32),
  large: rem(48),
  xlarge: rem(72),

brianjhanson

// ----
// libsass (v3.1.0)
// ----

$spacings: (
  small: rem(12),
  base: rem(24),
  medium: rem(32),
  large: rem(48),
  xlarge: rem(72),

brianjhanson

# CSS at ODC

This is an attempt to start nailing down our CSS methodology at ODC. I feel like we follow it pretty closely, but I wanted to open up a discussion and start tying to document it. 

- Mix of BEM and SMACSS methodology (mostly BEM for naming but with the h, l, to indicate type)

I'm taking a lot of this from [Hugo Giraudel's Sass Guidelines](http://sass-guidelin.es/) but feel it's worth writing out specifically which rules we prefer.

## Basic Syntax & Formatting
- roughly 80 character line lengths

brianjhanson

// <?php the_field('partner_id', 'options'); ?> simply returns 100 which is set in a field in the back end. 

<form class="ibanking-form" name="OAC" action="<?php echo get_field('ibanking_url', 'option'); ?>" method="post" enctype="application/x-www-form-urlencoded">
  <input type="hidden" name="id" value="<?php the_field('vendor_id', 'options'); ?>">
  <input type="hidden" name="ResetDGM" value="true">
  <input type="hidden" name="prodid" value="<?php the_sub_field('apply_product_id'); ?>">
  <?php if( get_field('partner_id', 'options') ) : ?>
    <input type="hidden" name="partid" value="<?php the_field('partner_id', 'options'); ?>">
  <?php endif; ?>
  <a onclick="get_form(this).submit(); return false" class="btn btn--home-apply <?php if(get_sub_field('btn_xlarge')) echo " btn--xlarge "; ?> <?php if(get_sub_field('button_style')) the_sub_field('button_style'); ?> btn--submit <?php if(get_sub_field('no_padding')) echo " btn--submit--no-padding "; ?> ">Apply Now</a>

brianjhanson

<?php
function the_date_range($args) {
  global $post;
  $default = array(
    'start_field' => 'start_date',
    'end_field' => null,
    'base_format' => 'Ymd',
    'post_id' => $post->ID,
    'separator' => '<span class="date-separator">&ndash;</span>',
    'month_format' => 'F',

brianjhanson

<div class="wrapper">
  <h1>Single Element Simple Browser Chrome</h1>
  <figure class="web">
    <img src="http://placekitten.com/1000/600">
  </figure>
</div><!-- end .wrapper -->