Jeff Croft jcroft

## gist:2732742

      
              1 file
            
          
              2 forks
            
          
              0 comments
            
          
              0 stars
            
          
                jcroft
                / gist:2732742
            
            
              Created
              May 19, 2012 23:19
            
              
                Superconference predictions
              
          
    Super conference predictions

Pac-12

Oregon
Oregon State
Washington
Washington State
Cal
South Cal
UCLA

  
## layout.sass
div#content-wrapper
  +container

  #left-sidebar
    +column(100%)
    +respond-to(tablet-large)
      width: 25%

  #main-content
    +column(100%)

## layout.sass
div#content-wrapper
  +container

  #left-sidebar
    +column(100%)
    @media only screen and (min-width : 768px)
      width: 25%

  #main-content
    +column(100%)

## layout.sass
div#content-wrapper
  +container

  #left-sidebar
    +column(25%)

  #main-content
    +column(50%)

  #right-sidebar

## layout.sass
#content-wrapper
  +container

  #about

    // Default (smallest screens)
    +column(100%)
    background-color: #ccc

    // Respond to other screen widths

## input.sass
// Typical grid column mixin..
=column($percent)
  width: $percent
  float: left

  // Fancy new pseudo-selector syntax for media queries which would let my
  // column from above switch to 100% when the window got narrower than 600px...
  &@media only screen and (min-width: 600px)
    width: 100%


## example_page.html
<!doctype html>
<head>
  <meta charset="utf-8">
  <title>Grid test</title>
  <link rel="stylesheet" href="css/example.css">
</head>

<body>

<div id="wrapper">

## django_settings.py
COMMENTS_SECRET = 'any_old_string_you_like'

## PHP
<?php
 Print "Hello, World!";
?>

## grid.sass
// REQUIRED VARS. Defaults to a 950px wide, 24-column grid that has 30px wide units and 10px wide
// gutters. If you do the fluid grid, then this 950/24/30/10px size will become the maximum size.
$grid_type: fixed !default
$grid_columns: 24 !default
$grid_column_width: 30 !default
$grid_gutter_width: 10 !default

// GENERATED VARS. You can ignore these.
$grid_full_width: $grid_columns * $grid_column_width + $grid_columns * $grid_gutter_width - $grid_gutter_width
$grid_column_width_percent: ($grid_column_width / $grid_full_width * 100) * 1%
	div#content-wrapper
	+container

	#left-sidebar
	+column(100%)
	+respond-to(tablet-large)
	width: 25%

	#main-content
	+column(100%)
	#content-wrapper
	+container

	#about

	// Default (smallest screens)
	+column(100%)
	background-color: #ccc

	// Respond to other screen widths
	// Typical grid column mixin..
	=column($percent)
	width: $percent
	float: left

	// Fancy new pseudo-selector syntax for media queries which would let my
	// column from above switch to 100% when the window got narrower than 600px...
	&@media only screen and (min-width: 600px)
	width: 100%
	<!doctype html>
	<head>
	<meta charset="utf-8">
	<title>Grid test</title>
	<link rel="stylesheet" href="css/example.css">
	</head>

	<body>

	<div id="wrapper">
	// REQUIRED VARS. Defaults to a 950px wide, 24-column grid that has 30px wide units and 10px wide
	// gutters. If you do the fluid grid, then this 950/24/30/10px size will become the maximum size.
	$grid_type: fixed !default
	$grid_columns: 24 !default
	$grid_column_width: 30 !default
	$grid_gutter_width: 10 !default

	// GENERATED VARS. You can ignore these.
	$grid_full_width: $grid_columns * $grid_column_width + $grid_columns * $grid_gutter_width - $grid_gutter_width
	$grid_column_width_percent: ($grid_column_width / $grid_full_width * 100) * 1%