Center fields by default (it's still possible to center elements manu…

…ally by using .centered)
symphonycms · Dec 17, 2012 · 91834fe · 91834fe
1 parent 0714ff6
commit 91834fe
Show file tree

Hide file tree

Showing 9 changed files with 46 additions and 38 deletions.
diff --git a/css/factory.css b/css/factory.css
@@ -106,28 +106,23 @@ ul li > ul {
 	The centered layout is the default one and should be used by all
 	text focussed sites. The fluid version is conceived for special 
 	user interfaces like xPathr that need the full window width.
+	
+	All fields (see below) default to the centered layout.
 -----------------------------------------------------------------------------*/
 
-/* Wide */
-
-.wide {
-	-moz-box-sizing: border-box;
-	box-sizing: border-box;
-	padding: 0 50px;
-	width: 100%;
-}
-
 /* Centered */
 
-.centered {
+.centered,
+.field {
 	margin: 0 auto;
 	width: 100%;
 	position: relative;
 }
 
 @media all and (max-width: 647px) {
 
-	body:not([data-exclude-state~=fluid]) .centered {
+	body:not([data-exclude-state~=fluid]) .centered,
+	body:not([data-exclude-state~=fluid]) .field {
 		-moz-box-sizing: border-box;
 		box-sizing: border-box;
 		padding: 0;
@@ -139,7 +134,8 @@ ul li > ul {
 
 @media all and (min-width: 648px) {
 
-	body:not([data-exclude-state~=small]) .centered {
+	body:not([data-exclude-state~=small]) .centered,
+	body:not([data-exclude-state~=small]) .field {
 		width: 648px;
 	}
 
@@ -149,7 +145,8 @@ ul li > ul {
 
 @media all and (min-width: 854px) {
 
-	body:not([data-exclude-state~=medium]) .centered {
+	body:not([data-exclude-state~=medium]) .centered,
+	body:not([data-exclude-state~=medium]) .field {
 		width: 854px;
 	}
 
@@ -159,12 +156,23 @@ ul li > ul {
 
 @media all and (min-width: 1060px) {
 
-	body:not([data-exclude-state~=large]) .centered {
+	body:not([data-exclude-state~=large]) .centered,
+	body:not([data-exclude-state~=large]) .field {
 		width: 1060px;
 	}
 
 }
 
+/* Wide */
+
+.wide {
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+	padding: 0 50px;
+	margin: 0;
+	width: 100%;
+}
+
 /*-----------------------------------------------------------------------------
 	Grid, fields and columns:
 	

diff --git a/docs/about.xml b/docs/about.xml
@@ -5,7 +5,7 @@
 	<content>
 
 		<!-- Description -->
-		<div class="field centered">
+		<div class="field">
 			<div class="column sidebar">
 				<ul>
 					<li>
@@ -31,7 +31,7 @@
 		</div>
 
 		<!-- Features -->
-<!--		<aside class="field tiles">
+<!--		<aside class="field wide tiles">
 			<div class="centered">-->
 
 				<!-- Layouts -->

diff --git a/docs/examples/community-post.xml b/docs/examples/community-post.xml
@@ -5,7 +5,7 @@
 	<content>
 
 		<!-- Field with sidebar -->
-		<div class="field centered">
+		<div class="field">
 			<header class="page-header">
 				<h2>Symphony Factory</h2>
 				<p>72 Replies <em class="header-tag-go">Open</em></p>

diff --git a/docs/examples/community.xml b/docs/examples/community.xml
@@ -5,7 +5,7 @@
 	<content>
 
 		<!-- Field with sidebar -->
-		<div class="field centered">
+		<div class="field">
 			<div class="column sidebar">
 				<h3>Search</h3>
 				<form>

diff --git a/docs/examples/extensions.xml b/docs/examples/extensions.xml
@@ -3,7 +3,7 @@
 <data>
 	<title id="Examples" mode="push">Extensions</title>
 	<content>
-		<section class="field centered">
+		<section class="field">
 			<header class="page-header">
 				<h2>Date and Time</h2>
 				<p>3.0.6 <em class="header-tag-go">Released</em><a class="header-tag" href="/extensions/?type=field-types">Field Types</a><a class="header-tag" href="/extensions/?type=interface">Interface</a></p>
@@ -88,7 +88,7 @@
 		</section>
 
 		<!-- About the extension -->
-		<section class="field centered language-markup">
+		<section class="field language-markup">
 
 			<!-- About the extension -->
 			<div class="column sidebar infobox">
@@ -367,7 +367,7 @@
 		</section>
 
 		<!-- Footer -->
-<!--		<aside class="field tiles">
+<!--		<aside class="field wide tiles">
 			<div class="centered">
 				<div class="tile two">
 					<h3>Date Modified Field</h3>

diff --git a/docs/examples/ninjas.xml b/docs/examples/ninjas.xml
@@ -5,7 +5,7 @@
 	<content>
 
 		<!-- Field with sidebar -->
-		<div class="field centered">
+		<div class="field">
 			<header class="page-header">
 				<h2 class="with-separator">John Porter</h2>
 				<p>United Kingdom</p>

diff --git a/docs/layouts.xml b/docs/layouts.xml
@@ -5,7 +5,7 @@
 	<content>
 
 		<!-- Introduction -->
-		<section class="field centered">
+		<section class="field">
 			<div class="column content">
 				<h2>Introduction to Layouts</h2>
 				<p class="content-introduction">Symphony Factory offers a flexible layout system to build network sites that adapt to the visitor&#8217;s window or screen size. Starting with a fluid version, the design expands in three steps to a five column layout that can be individually filled with content blocks.</p>
@@ -33,7 +33,7 @@
 
 				<!-- Fields -->
 				<h4>Fields</h4>
-				<p>A site should always be structured by fields that group the content columns. This could either be <code>div</code>, <code>section</code>, <code>article</code> or other appropriate block elements with the class <code>.field</code>. Fields can either be centered using the class <code>.centered</code> or use the full window width by using the class <code>.wide</code>. Fields can be nested and justified where the latter enlarges their width by <code>10px</code> on each side to allow horizontal lines, images or code blocks to better align optically.</p>
+				<p>A site should always be structured by fields that group the content columns. This could either be <code>div</code>, <code>section</code>, <code>article</code> or other appropriate block elements with the class <code>.field</code>. Fields are centered by default but can be expanded to full width by adding the class <code>.wide</code>. Fields can be nested and justified where the latter enlarges their width by <code>10px</code> on each side to allow horizontal lines, images or code blocks to better align optically.</p>
 
 				<!-- Columns -->
 				<h4>Columns</h4>
@@ -46,7 +46,7 @@
 				<p>All columns are initialised by the key class <code>.column</code>.</p>
 
 				<p>Functional columns represent a basic sidebar plus main content layout:</p>
-				<pre><code><![CDATA[<div class="field centered">
+				<pre><code><![CDATA[<div class="field">
 	<div class="column sidebar">
 		<p>Sidebar</p>
 	</div>
@@ -58,7 +58,7 @@
 				<p>The sidebar has the fixed size of one column and is optional. The content area resizes based on the overall layout width.</p>
 
 				<p>Fixed sized columns are defined by the base columns they span, so you can either apply <code>.one</code>, <code>.two</code>, <code>.three</code>, <code>.four</code> or <code>.five</code> to the column element. In order to make fixed width column layouts work across the different layouts, it&#8217;s possible to adjust the sizing context based: the class <code>.medium-one</code> will override all other width definitions when displaying the medium layout. This is helpful to adjust content display responsively. The fluid layout linearises all columns.</p>
-				<pre><code><![CDATA[<div class="field centered">
+				<pre><code><![CDATA[<div class="field">
 	<div class="column two">
 		Sized two base columns.
 	</div>
@@ -78,7 +78,7 @@
 		</section>
 
 		<!-- Column examples -->
-		<div id="docs-column-example" class="field centered">
+		<div id="docs-column-example" class="field">
 			<div class="column one">column sized <code>.one</code></div>
 			<div class="column two">column sized <code>.two</code></div>
 			<div class="column one">column sized <code>.one</code></div>
@@ -91,7 +91,7 @@
 		</div>
 
 		<!-- HTML -->
-		<section class="field centered language-markup">
+		<section class="field language-markup">
 			<div class="column content">
 				<h2>Basic Markup</h2>
 				<p>Symphony Factory uses HTML5 features and is compatible with all modern browsers. Internet Explorer support starts with version 9. If a site needs to be compatible with older browser versions, it's up to the developer to take care of this. Based on the user statistics of the existing network sites, this should only rarely be needed.</p>
@@ -166,8 +166,8 @@
 				<pre class="content-pushaside"><code><![CDATA[<aside id="network">
 
 	<!-- Network toolbar with the most important links -->
-	<header class="network-toolbar field collapsed">
-		<div class="centered">
+	<header class="network-toolbar collapsed">
+		<div class="field">
 			<h1 class="network-logo column one">
 				<a href="http://symphony/factory/docs/about.xml">Symphony Network</a>
 			</h1>
@@ -193,7 +193,7 @@
 	
 	<!-- Network profile of the current user or a registration form -->
 	<div class="field network-profile action-profile-hide">
-		<form class="centered">
+		<form>
 			<div class="network-gravatar column one">
 				<img src="http://symphony/factory/img/user.png" width="174" height="174" alt="Allen Chang">
 				<p>Change your avatar at <a href="http://gravatar.com">Gravatar</a>.</p>
@@ -222,7 +222,7 @@
 	</div>
 	
 	<!-- Network drawer with additional information and links -->
-	<div class="field centered network-drawer">
+	<div class="field network-drawer">
 		<div class="column three medium-two">
 			<h2>About Symphony</h2>
 			<p>Symphony is an open source content management system for your websites and webapps. It makes complex things simple.</p>
@@ -307,7 +307,7 @@
 
 				<h4>HTML Result</h4>
 				<pre class="content-pushaside"><code><![CDATA[<footer id="footer">
-	<div class="field centered">
+	<div class="field">
 		<p class="footer-community">
 			<strong>© 2010–2012 The Symphony Community</strong>
 			<a href="http://getsymphony.com">International Site</a> · <a href="http://twitter.com/symphonycms">Twitter</a>

diff --git a/xsl/footer.xsl b/xsl/footer.xsl
@@ -3,7 +3,7 @@
 
 <xsl:template name="footer">
 	<footer id="footer">
-		<div class="field centered">
+		<div class="field">
 
 			<!-- Community -->
 			<p class="footer-community">

diff --git a/xsl/network.xsl b/xsl/network.xsl
@@ -5,8 +5,8 @@
 	<aside id="network">
 
 		<!-- Main navigation -->
-		<header class="network-toolbar field collapsed">
-			<div class="centered">
+		<header class="network-toolbar collapsed">
+			<div class="field">
 				<h1 class="network-logo column one">
 					<a href="{$config/root}/docs/about.xml">Symphony Network</a>
 				</h1>
@@ -32,7 +32,7 @@
 
 		<!-- User profile -->
 		<div class="field network-profile">
-			<form class="centered">
+			<form>
 
 				<!-- Gravatar -->
 				<div class="network-gravatar column one">
@@ -65,7 +65,7 @@
 		</div>
 
 		<!-- Site switcher -->
-		<div class="field centered network-drawer">
+		<div class="field network-drawer">
 
 			<!-- Symphony ressources -->
 			<div class="column three medium-two">