Permalink
Browse files

Responsify breakpoints example

  • Loading branch information...
Amy Stephen Amy Stephen
Amy Stephen authored and Amy Stephen committed May 16, 2012
1 parent bbfefb5 commit 436e2a7e344a8609157ac2978236683df5bed40a
@@ -0,0 +1,6 @@
+/*
+@package Molajo
+@subpackage Theme
+@copyright Copyright (C) 2012 Individual Molajo Contributors. All rights reserved.
+@license GNU General Public License Version 2, or later http://www.gnu.org/licenses/gpl.html
+*/
@@ -0,0 +1,317 @@
+/* CSS file generated by Responsify (Beta) */
+/* Columns: 16, Gutter Width: 1.5, Breakpoints: 320,480,768,960,1280 */
+
+html, body, div, span, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+abbr, address, cite, code,
+del, dfn, em, img, ins, kbd, q, samp,
+small, strong, sub, sup, var,
+b, i,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ outline: 0;
+ font-size: 100%;
+ vertical-align: baseline;
+ background: transparent;
+}
+
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display: block;
+}
+
+nav ul, nav li {
+ margin: 0;
+}
+
+nav ul, ul {
+ list-style: none;
+}
+
+.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11,
+.span12, .span13, .span14, .span15, .span16 {
+ float: left;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+.col {
+ margin-left: 1.5%;
+}
+
+.col:first-child {
+ margin-left: 0;
+}
+
+.span1 {
+ width: 4.84375%;
+
+}
+
+.span2 {
+ width: 11.1875%;
+
+}
+
+.span3 {
+ width: 17.53125%;
+
+}
+
+.span4 {
+ width: 23.875%;
+
+}
+
+.span5 {
+ width: 30.21875%;
+
+}
+
+.span6 {
+ width: 36.5625%;
+
+}
+
+.span7 {
+ width: 42.90625%;
+
+}
+
+.span8 {
+ width: 49.25%;
+
+}
+
+.span9 {
+ width: 55.59375%;
+
+}
+
+.span10 {
+ width: 61.9375%;
+
+}
+
+.span11 {
+ width: 68.28125%;
+
+}
+
+.span12 {
+ width: 74.625%;
+
+}
+
+.span13 {
+ width: 80.96875%;
+
+}
+
+.span14 {
+ width: 87.3125%;
+
+}
+
+.span15 {
+ width: 93.65625%;
+
+}
+
+.span16 {
+ width: 100%;
+ margin-left: 0;
+}
+
+body {
+ font-size: 87.5%;
+ color: #252e35;
+ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ line-height: 1.5em;
+ background: #f6f6f6;
+}
+
+h1 {
+ font-size: 1.714285714em; /* 24 / 14 */
+ line-height: 1.5em; /* 21 / 14 */
+}
+
+h2 {
+ font-size: 1.5em; /* 21 / 14 */
+ line-height: 1.5em; /* 21 / 14 */
+}
+
+p {
+ font-size: 1em; /* 14 / 14 */
+ line-height: 1.5em; /* 21 / 14 */
+ margin-bottom: 1.5em; /* 21 / 14 */
+}
+
+#container, .inner {
+ margin: 0 auto;
+}
+
+header {
+ background: #262F37;
+}
+
+header h1 {
+ margin: 7px 0 0 0;
+}
+
+#container {
+ clear: both;
+ padding-top: 20px;
+}
+
+.alt {
+ color: #fff;
+ color: rgba(255, 255, 255, 0.9);
+ letter-spacing: 0.05em;
+}
+
+/* NAVIGATION */
+
+nav {
+ margin: 7px 0 7px 0;
+}
+
+nav ul {
+ text-align: right;
+ overflow: auto;
+ width: 100%;
+}
+
+nav ul li {
+ margin: 0 0 0 0;
+ text-align: center;
+ overflow: auto;
+ float: left;
+ width: 33%;
+}
+
+nav a {
+ text-decoration: none;
+ margin: 0;
+ display: block;
+ padding: 7px 0 7px 5%;
+ margin: 0 0 0 4%;
+ background-color: rgba(255, 255, 255, 0.1);
+}
+
+/* MEDIA QUERIES */
+
+/* Responsify Defaults */
+
+@media screen and (max-width: 768px) {
+ nav .span5 {
+ width: 100%;
+ }
+
+ .span11, article {
+ width: 100%;
+ }
+
+ .span5, aside {
+ width: 100%;
+ margin-left: 0;
+ }
+
+ #container, .inner {
+ width: 90%;
+ padding: 0 5% 0 5%;
+ }
+}
+
+@media screen and (max-width: 480px) {
+ nav ul li {
+ width: 100%;
+ margin: 0 0 5px 0;
+ }
+
+ nav a {
+ margin: 0;
+ padding: 14px 0 14px 0;
+ }
+}
+
+/* Custom Breakpoints */
+
+@media screen and (max-width: 320px) {
+ /* Add your styles for devices with a maximum width of 320 */
+}
+
+@media screen and (max-width: 480px) {
+ /* Add your styles for devices with a maximum width of 480 */
+}
+
+@media screen and (max-width: 768px) {
+ /* Add your styles for devices with a maximum width of 768 */
+}
+
+@media screen and (max-width: 960px) {
+ /* Add your styles for devices with a maximum width of 960 */
+}
+
+@media screen and (max-width: 1280px) {
+ /* Add your styles for devices with a maximum width of 1280 */
+}
+
+/* Latest Clearfix */
+
+/*
+ * Clearfix method (contemporary browsers)
+ * IE 6+, Firefox 3.5+, Safari 4+, Opera 9+, Chrome
+ * (needs old mobile browser testing)
+*/
+
+.cf {
+ /* for IE 6/7 */
+ *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
+ /* non-JS fallback */
+ *zoom: 1;
+}
+
+.cf:before,
+.cf:after {
+ content: "";
+ display: table;
+}
+
+.cf:after {
+ clear: both;
+}
+
+/*
+ * Clearfix method (increased legacy browser support)
+ * IE 6+, Firefox 2+, Safari 4+, Opera 9+, Chrome
+*/
+
+.cf {
+ /* for IE 6/7 */
+ *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
+ /* non-JS fallback */
+ *zoom: 1;
+}
+
+.cf:before,
+.cf:after {
+ content: ".";
+ display: block;
+ height: 0;
+ overflow: hidden;
+ visibility: hidden;
+}
+
+.cf:after {
+ clear: both;
+}
+
@@ -0,0 +1,6 @@
+/*
+@package Molajo
+@subpackage Theme
+@copyright Copyright (C) 2012 Individual Molajo Contributors. All rights reserved.
+@license GNU General Public License Version 2, or later http://www.gnu.org/licenses/gpl.html
+*/
Binary file not shown.
@@ -0,0 +1,6 @@
+/*
+ @package Molajo
+ @subpackage Theme
+ @copyright Copyright (C) 2012 Individual Molajo Contributors. All rights reserved.
+ @license GNU General Public License Version 2, or later http://www.gnu.org/licenses/gpl.html
+ */
@@ -0,0 +1,6 @@
+/*
+ @package Molajo
+ @subpackage Theme
+ @copyright Copyright (C) 2012 Individual Molajo Contributors. All rights reserved.
+ @license GNU General Public License Version 2, or later http://www.gnu.org/licenses/gpl.html
+ */
@@ -0,0 +1,8 @@
+; Molajo Project
+; Copyright (C) 2012 Amy Stephen. All rights reserved.
+; License GNU General Public License version 2 or later http://www.gnu.org/licenses/gpl.html
+; Note : All ini files need to be saved as UTF-8
+; Double quotes in the values have to be formatted as "_QQ_"
+
+THEME_RESPONSIFY_NAME="Responsify Theme"
+THEME_RESPONSIFY_DESCRIPTION="Example Theme using http://app.responsify.it/ Grid and breakpoints."
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<extension type="theme" version="1.0">
+ <name>THEME_RESPONSIFY_NAME</name>
+ <author>Amy Stephen</author>
+ <create_date>June 2012</create_date>
+ <copyright>Copyright 2012 Amy Stephen. All rights reserved.</copyright>
+ <license>GNU General Public License version 2 or later; see LICENSE.txt</license>
+ <author_email>collaborate@molajo.org</author_email>
+ <author_url>http://molajo.org/</author_url>
+ <version>1.0</version>
+ <description>THEME_RESPONSIFY_DESCRIPTION</description>
+ <config>
+ <field name="customfields" registry="ThemeCustomfields">
+ <element name="customfields" filter="char" null="0" default="This is the default" values=""/>
+ </field>
+ <field name="parameters" registry="ThemeParameters">
+ <element name="display_view_on_no_results" filter="binary" null="1" default="1" values="0,1"/>
+ <element name="catalog_type_id" filter="integer" null="1" default="10000" values="10000" hidden="1"/>
+ <element name="default_theme_id" filter="integer" null="1" default="" values=""/>
+ <element name="default_page_view_id" filter="integer" null="1" default="" values=""/>
+ <element name="list_template_view_id" filter="integer" null="1" default="" values=""/>
+ <element name="list_wrap_view_id" filter="integer" null="1" default="" values=""/>
+ <element name="template_view_id" filter="integer" null="1" default="" values=""/>
+ <element name="wrap_view_id" filter="integer" null="1" default="" values=""/>
+ <element name="form_template_view_id" filter="integer" null="1" default="" values=""/>
+ <element name="form_wrap_view_id" filter="integer" null="1" default="" values=""/>
+ <element name="caching" filter="binary" null="1" default="1" values="0,1"/>
+ <element name="cache_time" filter="integer" null="1" default="15" values=""/>
+ <element name="cache_handler" filter="char" null="1" default="" values=""/>
+ </field>
+ </config>
+</extension>
@@ -0,0 +1,8 @@
+; Molajo Project
+; Copyright (C) 2012 Amy Stephen. All rights reserved.
+; License GNU General Public License version 2 or later http://www.gnu.org/licenses/gpl.html
+; Note : All ini files need to be saved as UTF-8
+; Double quotes in the values have to be formatted as "_QQ_"
+
+PAGE_TEMPLATE_DEFAULT_NAME="Default Page Templete"
+PAGE_TEMPLATE_DEFAULT_DESCRIPTION="Default Page Template from the Amazium 2.0 Starter Theme set for Molajo."
Oops, something went wrong.

1 comment on commit 436e2a7

sweet!

Please sign in to comment.