Oregon Oregon State Washington Washington State Cal South Cal UCLA
Jeff Croft jcroft
jcroft
/ layout.sass
Created
March 2, 2012 20:35
Example of how to use this media query mixin: https://github.com/jcroft/jeffcroft-css-framework-v2/blob/master/framework/css/core/_media_queries.sass
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| div#content-wrapper | |
| +container | |
| #left-sidebar | |
| +column(100%) | |
| +respond-to(tablet-large) | |
| width: 25% | |
| #main-content | |
| +column(100%) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| div#content-wrapper | |
| +container | |
| #left-sidebar | |
| +column(100%) | |
| @media only screen and (min-width : 768px) | |
| width: 25% | |
| #main-content | |
| +column(100%) |
jcroft
/ layout.sass
Created
March 2, 2012 20:15
Example layout using this grid system: https://github.com/jcroft/jeffcroft-css-framework-v2/blob/master/framework/css/contrib/_grid_relative.sass
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| div#content-wrapper | |
| +container | |
| #left-sidebar | |
| +column(25%) | |
| #main-content | |
| +column(50%) | |
| #right-sidebar |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #content-wrapper | |
| +container | |
| #about | |
| // Default (smallest screens) | |
| +column(100%) | |
| background-color: #ccc | |
| // Respond to other screen widths |
jcroft
/ input.sass
Created
February 6, 2012 21:51
What I really want in Sass: a syntax for doing media queries inside a selector or mixin...
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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% | |
jcroft
/ example_page.html
Created
February 1, 2012 09:55
First stab at a simple responsive/fluid grid system with fixed gutters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Grid test</title> | |
| <link rel="stylesheet" href="css/example.css"> | |
| </head> | |
| <body> | |
| <div id="wrapper"> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| COMMENTS_SECRET = 'any_old_string_you_like' |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| Print "Hello, World!"; | |
| ?> |
jcroft
/ grid.sass
Created
March 21, 2011 18:09
The grid component from my personal front-end framework. Brief demo here: http://jeffcroft.com/static/misc/grid_frameworks.mov
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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% |
NewerOlder