Components

Component Notes

Compenets are the pieces you can use on your site to create fetures that fit for you.

Buttons

The button suite should be consistent across anchors, inputs and button elements.There are 4 style options and 2 size options.

The standard .button without other classes is the default action. There is no inheritance logic to change styling simply add .primary or .flat to modify.

The .primary buttons are for the most important call ot action on the page limit to 1-2 primary buttons to maintain the importanace and visual hirachy of the buttons on the page.

Buttons with .flat look like simple links but behave as buttons and maintain the large hit state - they should stack nicely next to other more important actions. The .secondary buttons is an alternative to .primary buttons rather than a companion. Use it for other non-core actions on a page like sidebar or footer interactions.

Buttons with .flat-border create a primary coloured bordered alternative button for use as a call to action for other non-core actions.

Use .large for a big button.

Use .extra-large for a bigger button.

The .danger button is for submitting destructive commands, e.g. clearing a form.

This has been reworked and now includes an icon on the buttons. To remove the icon add .no-icon

<a href="#" class="button">Default</a>
  <a href="#" class="button primary">Primary</a>
  <a href="#" class="button flat">Flat - button-like spacing</a>
  <a href="#" class="button flat-border">Flat Button with border</a>
  
  <br>
  <br>
  
  <a href="#" class="button large">Default large</a>
  
  <br>
  <br>
  
  <a href="#" class="button extra-large">Default extra large</a>
  
  <br>
  <br>
  
  <a href="#" class="button danger">Danger</a>
  <br>
  <br>
  <a href="#" class="button no-icon">Default - no-icon</a>

Lists

The default list dosent work unless you've wrapped the it in .formatting - something you could put on you page template to give you all the typography formatting you need.

More on this .formatting class later

Other lists have the .list class wrapper - you can add a heading followed by the .links on th ul element - god knows why its call .links.

<!-- Basic un-ordered list -->
  <div class="formatting">
  	<!--Note the class .formatting - you could wrap entire templates in this -->
  	<ul>
  		<li>Nice list bro</li>
  		<li>Got a link bro? <a href="">Yeah</a></li>
  		<ul>
  			<li>Sweet as</li>
  			<li>Ripper</li>
  		</ul>
  		<li><a href="">Choice list ay bro</a></li>
  		<li>Yeah nice list bro</li>
  	</ul>
  
  
  
  
  
  
  	<!-- Standard list with links -->
  
  	<div class="list">
  		<h2>Link list</h2>
  		<ul class="links">
  			<li>
  				<a href="#" title="First days at Victoria" class="link-external">First day at Victoria</a>
  			</li>
  
  			<li>
  				<a href="#" title="How to sign up">How to sign up</a>
  			</li>
  
  			<li>
  				<a href="#" title="VicNews">VicNews</a>
  			</li>
  
  			<li>
  				What about no links?
  			</li>
  			<li>Cool</li>
  		</ul>
  	</div>
  
  
  	<br>
  	<br>
  
  	<!-- Complex list with files -->
  	<div class="list">
  		<h2>Download list</h2>
  		<ul class="links">
  			<li>
  				<a href="#" title="Download 'Guide to Undergraduate Study' in PDF"><span class="label file-pdf">
  						<i>pdf</i>
  						<span>71.2KB</span>
  					</span>Guide to Undergraduate Study
  				</a>
  			</li>
  
  			<li>
  				<a href="#" title="Download 'Programme and timetable planner' in DOC"><span class="label file-word">
  						<i>doc</i>
  						<span>571.2KB</span>
  					</span>Programme and timetable plannery
  				</a>
  			</li>
  
  			<li>
  				<a href="#" title="Download 'Guide to Postgraduate Study' in PDF"><span class="label file-excel">
  						<i>exc</i>
  						<span>115.2B</span>
  					</span>Guide to Postgraduate Study
  				</a>
  			</li>
  
  			<li>
  				<a href="#" title="Download 'Victoria's presentation' in PowerPoint"><span class="label file-ppt">
  						<i>ppt</i>
  						<span>1021.2B</span>
  					</span>Victoria's presentation
  				</a>
  			</li>
  
  			<li>
  				<a href="#" title="Download 'Spoken introduction' in MP3"><span class="label file-mp3">
  						<i>mp3</i>
  						<span>151MB</span>
  					</span>Spoken introduction
  				</a>
  			</li>
  
  			<li>
  				<a href="#" title="Download 'Spoken introduction' in MP3"><span class="label file">
  		        <i>file</i>
  		        <span>12.31KB</span>
  		      </span>An unknown file full of unknown stuff
  		    </a>
  			</li>
  		</ul>
  	</div>
  
  
  </div>

Forms

Basic styles for forms. Note the .error class on inputs, you should also include error text - its helpful.

TODO: Add select options and radio buttons

This error message will show above the field . That way on mobile it's not covered by the keyboard.

<!-- Standard, simple form -->
  <form class="form" method="GET">
  
  	<div class="group required">
  		<label for="email">Your email</label>
  		<input type="email" name="email" id="email" placeholder="your@email.com">
  	</div>
  
  	<div class="group">
  		<label for="name">Your name</label>
  		<input type="name" name="name" id="name">
  	</div>
  
  	<div class="group">
  		<p class="error-text">This error message will show above the field . That way on mobile it's not covered by the keyboard.</p>
  		<label for="department">School / Faculty / CSU <em>(required)</em></label>
  		<input type="text" name="department" id="department" class="error">
  
  
  	</div>
  
  	<div class="group">
  		<label for="feedback">Feedback message</label>
  		<textarea placeholder="Your feedback ..." id="feedback" name="feedback"></textarea>
  	</div>
  
  	<input type="submit" class="button primary" value="Send feedback">
  </form>

Messages

Too many elements in the sidebar

Currently there are 4. The Maximum is 3. Please remove sidebar class from elements you do not want to appear in the sidebar.

The following sidebar elements were not added:

  • first_block_of_highlighted_text

Be careful, Squiz update is in progress

Any changes you will make will not be saved. Update will be finished on 23rd of October 2016.

Did you know?

If you have three quarters, four dimes, and four pennies you have $1.19. you also have the largest possible amount of money in coins without being able to make change for a dollar.

Signed in as administrator

When you finish editing this page, please log out

<section class="flash-message error">
  	<h2>Too many elements in the sidebar</h2>
  	<p>Currently there are 4. The Maximum is 3. Please remove sidebar class from elements you do not want to appear in the sidebar.</p>
  
  	<p>The following sidebar elements were not added: </p>
  	<ul>
  		<li>first_block_of_highlighted_text</li>
  	</ul>
  </section>
  
  
  
  
  <section class="flash-message warning">
  	<h2>Be careful, Squiz update is in progress</h2>
  	<p>Any changes you will make will <strong>not</strong> be saved. Update will be finished on 23rd of October 2016.</p>
  </section>
  
  
  
  <section class="flash-message info">
  	<h2>Did you know?</h2>
  	<p>If you have three quarters, four dimes, and four pennies you have $1.19. you also have the largest possible amount of money in coins without being able to make change for a dollar.</p>
  
  </section>
  
  
  
  <section class="flash-message success">
  	<h2>Signed in as administrator</h2>
  	<p>When you finish editing this page, please <a href="#" title="Log out from Squiz">log out</a></p>
  </section>

Promo Panels

Promo

<article class="promo primary">
  	<a href="http://www.victoria.ac.nz/about/global-engagement">
  		<h2>Global and national engagement</h2>
  		<p>We seek to bring the world to Victoria and Victoria to the world. <b>Find out more…</b></p>
  	</a>
  </article>

Promo Blue

<div class="promo secondary">
  	<a href="http://www.victoria.ac.nz/about/global-engagement">
  		<h2>Global and national engagement</h2>
  		<p>We seek to bring the world to Victoria and Victoria to the world. <b>Find out more…</b></p>
  	</a>
  </div>

Text Promo Panel

Research matters

In the Faculty of Humanities and Social Sciences, we explore the fundamental questions that define human experience.

<div class="text-promo-panel ">
  	<div class="block formatting centraliser">
  		<div class="text-wrap">
  			<h2>Research matters</h2>
  			<p>In the Faculty of Humanities and Social Sciences, we explore the fundamental questions that define human experience.</p>
  		</div>
  		<div class="button-wrap">
  			<a href="http://www.victoria.ac.nz/fhss/research " title="Check out our student services" class="button primary large">Find out more</a>
  		</div>
  	</div>
  </div>

Tiles

Tile Strips

Mark down

<div class="tiles-panel">
  	<div class="centraliser block">
  		<div class="tile-strip-grid">
  			<div class="tiles-wrap">
  				<ul>
  					<li class="tile">
  						<a href="">
  							<h2>Bachelor of Engineering with Honours</h2>
  							<h4>BE(Hons)</h4>
  							<h4>3 years</h4>
  							<i class="icon-arrow-right"></i>
  						</a>
  					</li>
  					<li class="tile">
  						<a href="">
  							<h2>Bachelor of Engineering with Honours</h2>
  							<h4>BE(Hons)</h4>
  							<h4>3 years</h4>
  							<i class="icon-arrow-right"></i>
  						</a>
  					</li>
  					<li class="tile">
  						<a href="">
  							<h2>Bachelor of Engineering with Honours</h2>
  							<h4>BE(Hons)</h4>
  							<h4>FOH</h4>
  							<i class="icon-arrow-right"></i>
  						</a>
  					</li>
  					<li class="tile">
  						<a href="">
  							<h2>Bachelor of Engineering with Honours</h2>
  							<h4>BE(Hons)</h4>
  							<h4>FHSS</h4>
  							<i class="icon-arrow-right"></i>
  						</a>
  					</li>
  					<li class="tile">
  						<a href="">
  							<h2>Bachelor of Engineering with Honours</h2>
  							<h4>BE(Hons)</h4>
  							<h4>Law</h4>
  							<i class="icon-arrow-right"></i>
  						</a>
  					</li>
  				</ul>
  			</div>
  		</div>
  	</div>
  </div>

Tiles

<div class="tiles-panel">
  	<div class="centraliser block">
  		<div class="updated-tile-grid">
  			<div class="tiles-wrap">
  				<ul>
  					<li class="tile">
  						<a href="">
  							<h2>Master of Museum and Heritage Practice</h2>
  							<div class="sub-text">
  								<h4>MMHP</h4>
  
  							</div>
  							<i class="icon-arrow-right"></i>
  						</a>
  					</li>
  					<li class="tile">
  						<a href="">
  							<h2>Master of Museum and Heritage Practice</h2>
  							<div class="sub-text">
  								<h4>MMHP</h4>
  
  							</div>
  							<i class="icon-arrow-right"></i>
  						</a>
  					</li>
  					<li class="tile">
  						<a href="">
  							<h2>Master of Museum and Heritage Practice</h2>
  							<div class="sub-text">
  								<h4>MMHP</h4>
  
  							</div>
  							<i class="icon-arrow-right"></i>
  						</a>
  					</li>
  					<li class="tile">
  						<a href="">
  							<h2>Master of Museum and Heritage Practice</h2>
  							<div class="sub-text">
  								<h4>MMHP</h4>
  
  							</div>
  							<i class="icon-arrow-right"></i>
  						</a>
  					</li>
  					<li class="tile">
  						<a href="">
  							<h2>Master of Museum and Heritage Practice</h2>
  							<div class="sub-text">
  								<h4>MMHP</h4>
  
  							</div>
  							<i class="icon-arrow-right"></i>
  						</a>
  					</li>
  					<li class="tile">
  						<a href="">
  							<h2>Master of Museum and Heritage Practice</h2>
  							<div class="sub-text">
  								<h4>MMHP</h4>
  
  							</div>
  							<i class="icon-arrow-right"></i>
  						</a>
  					</li>
  					<li class="tile">
  						<a href="">
  							<h2>Master of Museum and Heritage Practice</h2>
  							<div class="sub-text">
  								<h4>MMHP</h4>
  
  							</div>
  							<i class="icon-arrow-right"></i>
  						</a>
  					</li>
  				</ul>
  			</div>
  		</div>
  	</div>
  </div>

Tiles Option

<div class="tiles-panel">
  	<div class="centraliser block">
  		<div class="updated-tile-grid fixed-height-tiles">
  			<div class="tiles-wrap">
  				<ul>
  					<li class="tile">
  						<a href="">
  							<h2>Anthropology</h2>
  							<div class="sub-text">
  								<h4 class="icon-book">Subjects</h4>
  								<p>Cultural Anthropology</p>
  							</div>
  							<i class="icon-arrow-right"></i>
  						</a>
  					</li>
  					<li class="tile">
  						<a href="">
  							<h2>Anthropology</h2>
  							<div class="sub-text">
  								<h4 class="icon-book">Subjects</h4>
  								<p>Cultural Anthropology</p>
  							</div>
  							<i class="icon-arrow-right"></i>
  						</a>
  					</li>
  					<li class="tile">
  						<a href="">
  							<h2>Anthropology</h2>
  							<div class="sub-text">
  								<h4 class="icon-book">Subjects</h4>
  								<p>Cultural Anthropology</p>
  							</div>
  							<i class="icon-arrow-right"></i>
  						</a>
  					</li>
  					<li class="tile">
  						<a href="">
  							<h2>Anthropology</h2>
  							<div class="sub-text">
  								<h4 class="icon-book">Subjects</h4>
  								<p>Cultural Anthropology</p>
  							</div>
  							<i class="icon-arrow-right"></i>
  						</a>
  					</li>
  					<li class="tile">
  						<a href="">
  							<h2>Anthropology</h2>
  							<div class="sub-text">
  								<h4 class="icon-book">Subjects</h4>
  								<p>Cultural Anthropology</p>
  							</div>
  							<i class="icon-arrow-right"></i>
  						</a>
  					</li>
  				</ul>
  			</div>
  		</div>
  	</div>
  </div>