362 css/main.css
View file

Large diffs are not rendered by default.

362 css/theme.css
View file
2 css/theme.css.map
View file
93 elements.html
View file
@@ -54,6 +54,99 @@ <h3>Outline Buttons</h3>
<a href="#" class="btn btn--large btn--outline">
Large Button
</a>


</section>



<section>
<h2>Forms</h2>
<h3>Short Forms</h3>
<div class="Field Field--short-form">
<label for="field-1">First Name</label>
<input class="Field__element" type="text" placeholder="Placeholder" id="field-1">
</div>

<div class="Field Field--short-form Field--select">
<label for="field-3">This is a Label</label>
<select class="Field__element" id="field-3">
<option>Select Box</option>
<option>Select Box</option>
<option>Select Box</option>
<option>Select Box</option>
</select>
</div>

<div class="Field Field--short-form Field--select">
<label for="field-3">This is a Label</label>
<select class="Field__element" id="field-3">
<option>Select Box</option>
<option>Select Box</option>
<option>Select Box</option>
<option>Select Box</option>
</select>
</div>

<h3>Short Forms Icons</h3>
<div class="Field Field--short-form Field--icon">
<i class="fa fa-user"></i>
<label for="field-1">First Name</label>
<input class="Field__element Field__element--1-2" type="text" placeholder="First Name" id="fn">
<input class="Field__element Field__element--1-2" type="text" placeholder="Last Name" id="ln">
</div>

<div class="Field Field--short-form Field--icon">
<i class="fa fa-envelope"></i>
<label for="field-1">Email</label>
<input class="Field__element" type="text" placeholder="Email" id="fn">
</div>

<div class="Field Field--short-form Field--icon Field--select">
<i class="fa fa-usd"></i>
<label for="field-3">Amount</label>
<select class="Field__element" id="field-3">
<option>Select Box</option>
<option>Select Box</option>
<option>Select Box</option>
<option>Select Box</option>
</select>
</div>

<div class="Field Field--short-form Field--icon Field--select">
<i class="fa fa-user"></i>
<label for="field-3">This is a Label</label>
<select class="Field__element" id="field-3">
<option>Select Box</option>
<option>Select Box</option>
<option>Select Box</option>
<option>Select Box</option>
</select>
</div>

<h3>Long Forms</h3>
<div class="row">
<div class="Field Field--long-form col col--1-3">
<label for="field-1">This is a Label</label>
<input class="Field__element" type="text" placeholder="Placeholder" id="field-1">
</div>

<div class="Field Field--long-form col--1-3">
<label for="field-2">This is a Label</label>
<textarea class="Field__element" placeholder="Textarea" id="field-2"></textarea>
</div>

<div class="Field Field--long-form Field--select col--1-3">
<label for="field-3">This is a Label</label>
<select class="Field__element" id="field-3">
<option>Select Box</option>
<option>Select Box</option>
<option>Select Box</option>
<option>Select Box</option>
</select>
</div>
</div>

</section>
<section id="grid">
<h2>Grid</h2>
186 how.html
View file
@@ -0,0 +1,186 @@
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/theme.css">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/custom.js"></script>

</head>

<body>

<header class="Primary-header">
<div class="logo">
<img class="logo__image" src="images/logo.svg">
</div>
<nav>
<ul class="Primary-header__navigation">
<li><a href="index.html">Home</a></li>
<li ><a href="about.html">About</a></li>
<li class="is-active"><a href="#">How it Works</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>


<section class="Leader-section">
<div class="contain">

<h1>How It Works</h1>

<p class="caption">Our fast and easy loan request process has been stripped down and simplified to help you request a loan faster than ever and get a lender match to help you with your financial needs. If we are successful in finding you a match you have the funds you need transferred straight to your bank account in as little as one business day. Most personal loans are repaid from 6 to 72 months, depending on your lender.</p>

<div class="row">
<div class="col col--1-3">
<div class="blurb">
<div class="blurb__icon">
<i class="fa fa-pencil-square-o"></i>
</div>
<h4 class="blurb__title">Fill Out the Form</h4>
</div>
</div>

<div class="col col--1-3">
<div class="blurb">
<div class="blurb__icon">
<i class="fa fa-check"></i>
</div>
<h4 class="blurb__title">Agree to Terms</h4>
</div>
</div>

<div class="col col--1-3">
<div class="blurb">
<div class="blurb__icon">
<i class="fa fa-university"></i>
</div>
<h4 class="blurb__title">Money is Direct Deposited</h4>
</div>
</div>

</div>

</div>

</section>

<section class="Info-section">
<div class="contain">
<div class="row">
<div class="col col--2-3">
<h2>Just follow these easy steps</h2>
<h3 class="sub-title">&amp; get the personal loan you need fast and easy:</h3>

<h4>Fill out the short Form</h4>
<p>Fill out the short loan request form on our website, including your credit type, how much you’d like to borrow, and your loan reason. The form will also ask for some basic personal, banking, and income information which will be used to help us determine what type of loan products you could be eligible for.</p>

<h4>Agree to the Terms</h4>
<p>Once we receive your loan request we’ll reach out to our lender network and each lender will decide whether to approve your loan request or not based on the information you’ve provided. If you’re approved you’ll be sent to the lender’s loan agreement where the lender will show you’re the terms and conditions for your loan including the amount you’re approved for and the repayment terms and the interest rate. Make sure you read these terms thoroughly and if you have any questions reach out to the lender and they’ll be happy to explain the terms to you.</p>

<h4>Your Funds are Direct Deposited into Your Account</h4>
<p>After you’ve selected a lender, reviewed the terms of your personal loan, and accepted the loan your lender will transfer the funds directly to your bank account. The amount of time it takes for the funds to reach your account depends on the time of your loan approval, the lender you work with, and your bank but for most consumers you will receive your money between one to five business days after you accept the loan.</p>

</div>

<div class="col col--1-3">
<form class="Cta-form Cta-form--card">
<h3 class="title title--lines"><span>Start Here</span></h3>
<div class="Field Field--short-form Field--icon">
<i class="fa fa-envelope"></i>
<label for="field-1">Email</label>
<input class="Field__element" type="text" placeholder="Email" id="fn">
</div>

<div class="Field Field--short-form Field--icon Field--select">
<i class="fa fa-usd"></i>
<label for="field-3">Amount</label>
<select class="Field__element" id="field-3">
<option>Amount</option>
<option>Select Box</option>
<option>Select Box</option>
<option>Select Box</option>
</select>
</div>

<div class="Field Field--short-form Field--icon Field--select">
<i class="fa fa-user"></i>
<label for="field-3">Credit Score</label>
<select class="Field__element" id="field-3">
<option>Credit Score</option>
<option>Select Box</option>
<option>Select Box</option>
<option>Select Box</option>
</select>
</div>
<input type="submit" value="Submit" class="btn">

</form>
</div>
</div>
</div>
</section>

<section class="Cta-section">
<div class="contain">
<h2>Ready to Start?</h2>
<p class="caption">Our fast and easy loan request process has been stripped down and simplified to help you request a loan faster than ever and get a lender match to help you with your financial needs.</p>
<a class="btn btn--large btn--color-alt" href="index.html">Start Now</a>
</div>
</section>

<section class="Requirements-section">
<div class="contain">
<h3>Personal Loan Requirements</h3>
<p>At [website] we pride ourselves on our ability to match consumers of all credit types with a lender who can help them obtain a personal loan. While we accept requests for loans from consumers with any credit score, there are a few basic requirements you must meet to qualify for a loan from one of our partners. Before you request a personal loan make sure you meet the following criteria:</p>

<div class="row">
<div class="col col--1-2"><p><strong>Age/ID/Residency</strong> - In order to obtain a personal loan you must be 18 years old or older, with a valid Social Security Number, and a legal U.S. citizen or permanent resident.</p>
</div>
<div class="col col--1-2">
<p><strong>Income</strong> - To ensure your ability to repay a loan you must be either full-time employed or self-employed, receive regular disability, or Social Security benefit to qualify for a loan. Some lenders may require a pay stub or another form of income verification.</p>
</div>
<div class="col col--1-2">
<p><strong>Bank Account</strong> - Most lenders in our network require a valid checking account that the funds from your loan can be transferred into. </p>
</div>
<div class="col col--1-2">
<p><strong>Credit Type</strong> - While you do not need perfect, or even good credit to qualify for a personal loan most lenders require that customers have demonstrated a pattern of responsibility. To be eligible for a personal loan a typical consumer must not have any accounts more than 60 days late; must not have active or recent bankruptcies; must not exhibit a history of late payments; must not have any debt that cannot be covered by current income; and must not have any recently charged-off accounts.</p>
</div>
</div>

<p>While we cannot guarantee you will be approved for a personal loan through a lender we match you with, meeting the requirements above will greatly improve your chances of obtaining a personal loan. </p>
</div>
</section>



<footer class="Primary-footer">
<section class="Disclaimer-section">
<div class="contain">
<p><strong>We Are Not Lenders or Brokers.</strong>The owner and operator of this website is not a lender, broker, agent, or representative of any lender and we do not provide any loans or make any credit decisions. The advertising contained on this website does not constitute an offer or solicitation to extend credit or lend money to you. This website provides a service wherein we collect information you voluntarily provide to us and we submit it to our independent network of companies, which includes lenders, who may be able to secure a loan for you. All financial terms and conditions of a loan will be presented to you by the lender. Any questions, concerns, or requests for more details on your loan should be directed to the lender and not to the owner and operator of this website. Typically lenders will not perform a credit check using the three major credit reporting bureaus: Experian, Equifax, or Trans Union, but they may obtain consumer credit reports from alternative providers.</p>

<p><strong>Limitations.</strong> Not all lenders will offer up to $10,000 on your first installment loan. This may depend on the laws and regulations of the State in which you reside along with the information you provide to us for the lender’s review or on other factors that the lender may obtain through a consumer credit report. Providing your information to this website will not guarantee you may be approved for an installment loan. Refinancing may be available and is typically not automatic. Refinancing your loan will extend the term of the loan and may result in additional interest charges. Failing to make any scheduled loan payment may result in additional interest charges and fees and may damage your credit. You should endeavor to repay your loan on time and in full to avoid any extra charges, damage to your credit, or being subject to debt collections. The services of this website are not available in all sates and the states serviced by this website may change from time to time and without notice. This service does not constitute an offer or solicitation for an installment loan where prohibited by law.</p>

<p><strong>No Endorsement.</strong> The operator of this website is a marketer who is compensated for their services as described in our marketing disclosure and does not endorse or recommend any service or product advertised on or through this site.</p>

<p><strong>Marketing Disclosure</strong><br/>This website is a market place. The owner has a material financial connection to the provider of the goods and services referred to on the site. The owner receives payment for each qualified sale or payment for each potential customer referral. The owner is advertising on behalf of a third party advertiser with whom the provider of the products or services also has a material financial connection in that both advertisers receive payment for each qualified sale or payment for each potential customer referral. All information regarding the products and services on this website is provided by the third party advertiser. Upon completion of your registration, You will be redirected to the third party advertiser's site or You will be contacted by the Third Party Advertiser and you should review their terms and conditions and privacy policy as they may differ significantly from our own. The owner is not affiliate with the third party advertiser other than stated above. The owner does not recommend or endorse any product or service on this website.</p>
</div>

</section>
<nav>
<ul class="Primary-footer__navigation">
<li class="is-active"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="how.html">How it Works</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="privacy.html">Privcay</a></li>
<li><a href="terms">Terms &amp; Services</a></li>
</ul>
</nav>
</footer>

</body>

</html>
BIN +157 KB images/content-image-1.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +329 KB images/content-image-1.jpg.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +148 KB images/content-image-2.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +255 KB images/hero-bg.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
50 images/logo.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
180 index.html
View file
@@ -4,24 +4,192 @@
<title>Title of the document</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/theme.css">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/custom.js"></script>

</head>

<body>

<header class="Primary-header">
<div class="logo">
<img class="logo__image" src="images/logo.svg">
</div>
<nav>
<ul class="Primary-header__navigation">
<li class="is-active"><a href="index.html">Home</a></li>
<li ><a href="about.html">About</a></li>
<li> <a href="how.html">How it Works</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>



<section class="Hero-header">

<div class="contain">

<div class="col col--1-2">
<h1>Personal Loans up to $35,000</h1>
<p class="caption">Submit your online request for any loan reason regardless of credit type.</p>
<div class="row">
<div class="col col--1-2">
<h1 class="">Personal Loans up to <span class="highlight">$35,000</span></h1>
<p class="caption">Submit your online request for any loan reason regardless of credit type.</p>
</div>

<div class="col col--1-2">
<form class="Cta-form js-highlight-form">
<h3 class="title title--lines"><span>Start Here</span></h3>
<div class="Field Field--short-form Field--icon">
<i class="fa fa-envelope"></i>
<label for="field-1">Email</label>
<input class="Field__element" type="text" placeholder="Email" id="fn">
</div>

<div class="Field Field--short-form Field--icon Field--select">
<i class="fa fa-usd"></i>
<label for="field-3">Amount</label>
<select class="Field__element" id="field-3">
<option>Amount</option>
<option>Select Box</option>
<option>Select Box</option>
<option>Select Box</option>
</select>
</div>

<div class="Field Field--short-form Field--icon Field--select">
<i class="fa fa-user"></i>
<label for="field-3">Credit Score</label>
<select class="Field__element" id="field-3">
<option>Credit Score</option>
<option>Select Box</option>
<option>Select Box</option>
<option>Select Box</option>
</select>
</div>
<input type="submit" value="Submit" class="btn btn--large">

</form>
</div>
</div>

<div class="col col--1-2">
<form class="sign-up">
</form>
</div>

</section>

<section class="Leader-section">
<div class="contain">

<h2>Take Advantage of What Personal Loans Can Offer You</h2>

<p class="caption">During these uncertain economic times, many people are finding themselves faced with a situation where they could use some financial assistance.</p>

<div class="row blurb-row">
<div class="col col--1-4">
<div class="blurb">
<div class="blurb__icon">
<i class="fa fa-life-ring"></i>
</div>
<h4 class="blurb__title">Emergencies</h4>
</div>
</div>

<div class="col col--1-4">
<div class="blurb">
<div class="blurb__icon">
<i class="fa fa-home"></i>
</div>
<h4 class="blurb__title">Home Imrovement</h4>
</div>
</div>

<div class="col col--1-4">
<div class="blurb">
<div class="blurb__icon">
<i class="fa fa-credit-card"></i>
</div>
<h4 class="blurb__title">Debt Consolidation</h4>
</div>
</div>

<div class="col col--1-4">
<div class="blurb">
<div class="blurb__icon">
<i class="fa fa-suitcase"></i>
</div>
<h4 class="blurb__title">Vacations</h4>
</div>
</div>

</div>

</div>

</section>

<section class="Image-text-section-1">
<div class="contain">

<div class="row">
<div class="col col--1-2 Image-text__text">
<h3>Fast, Safe &amp; Reliable</h3>
<p>Whether it be for an emergency, home improvement, consolidating debt or even a family vacation - a low interest personal loan is a safe and reliable way to meet your financial needs. At PrimaLoans.com, we specialize in quickly and efficiently matching people to the personal loan that's right for them.</p>
</div>
<div class="col col--1-2 Image-text__image">
<img class="responsive" src="images/content-image-1.jpg">
</div>

</div>
</div>
</section>
<section class="Image-text-section-2">
<div class="contain">
<div class="row">

<div class="col col--1-2 Image-text__image">
<img class="responsive" src="images/content-image-2.jpg">
</div>
<div class="col col--1-2 Image-text__text">
<h3>Flexible for Your Needs</h3>
<p>Compared to other loan options, personal loans offer greater flexibility with how much a person can borrow. Utilizing our comprehensive network of lenders we can offer wide ranges of funding, and give you the opportunity to be qualified for as much as $35,000.</p>
</div>
</div>
</div>
</section>

<section class="How-section">
<div class="contain">
<h2>How Does it Work?</h2>
<p class="caption">Our fast and easy loan request process has been stripped down and simplified to help you request a loan faster than ever and get a lender match to help you with your financial needs.</p>
<a class="btn btn--large btn--color-alt" href="#">Start Now</a> <a class="btn btn--large btn--outline" href="#">Learn More</a>
</div>
</section>

<footer class="Primary-footer">
<section class="Disclaimer-section">
<div class="contain">
<p><strong>We Are Not Lenders or Brokers.</strong>The owner and operator of this website is not a lender, broker, agent, or representative of any lender and we do not provide any loans or make any credit decisions. The advertising contained on this website does not constitute an offer or solicitation to extend credit or lend money to you. This website provides a service wherein we collect information you voluntarily provide to us and we submit it to our independent network of companies, which includes lenders, who may be able to secure a loan for you. All financial terms and conditions of a loan will be presented to you by the lender. Any questions, concerns, or requests for more details on your loan should be directed to the lender and not to the owner and operator of this website. Typically lenders will not perform a credit check using the three major credit reporting bureaus: Experian, Equifax, or Trans Union, but they may obtain consumer credit reports from alternative providers.</p>

<p><strong>Limitations.</strong> Not all lenders will offer up to $10,000 on your first installment loan. This may depend on the laws and regulations of the State in which you reside along with the information you provide to us for the lender’s review or on other factors that the lender may obtain through a consumer credit report. Providing your information to this website will not guarantee you may be approved for an installment loan. Refinancing may be available and is typically not automatic. Refinancing your loan will extend the term of the loan and may result in additional interest charges. Failing to make any scheduled loan payment may result in additional interest charges and fees and may damage your credit. You should endeavor to repay your loan on time and in full to avoid any extra charges, damage to your credit, or being subject to debt collections. The services of this website are not available in all sates and the states serviced by this website may change from time to time and without notice. This service does not constitute an offer or solicitation for an installment loan where prohibited by law.</p>

<p><strong>No Endorsement.</strong> The operator of this website is a marketer who is compensated for their services as described in our marketing disclosure and does not endorse or recommend any service or product advertised on or through this site.</p>

<p><strong>Marketing Disclosure</strong><br/>This website is a market place. The owner has a material financial connection to the provider of the goods and services referred to on the site. The owner receives payment for each qualified sale or payment for each potential customer referral. The owner is advertising on behalf of a third party advertiser with whom the provider of the products or services also has a material financial connection in that both advertisers receive payment for each qualified sale or payment for each potential customer referral. All information regarding the products and services on this website is provided by the third party advertiser. Upon completion of your registration, You will be redirected to the third party advertiser's site or You will be contacted by the Third Party Advertiser and you should review their terms and conditions and privacy policy as they may differ significantly from our own. The owner is not affiliate with the third party advertiser other than stated above. The owner does not recommend or endorse any product or service on this website.</p>
</div>

</section>
<nav>
<ul class="Primary-footer__navigation">
<li class="is-active"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="how.html">How it Works</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="privacy.html">Privcay</a></li>
<li><a href="terms">Terms &amp; Services</a></li>
</ul>
</nav>
</footer>

</body>

</html>
40 js/custom.js
View file
@@ -0,0 +1,40 @@
$(document).ready(function(){
var mainFormActive = false, overlay = $('<div class="overlay"></div>');

function activateOverlay(){
$('body').append(overlay);
$('.overlay').fadeIn('fast');

}

function removeOverlay(){
$('.overlay').fadeOut('fast', function(){
$(this).remove();
});
}

$('body').click(function(){
$('.js-highlight-form').removeClass('is-active');
mainFormActive = false;
removeOverlay();
});

$('.js-highlight-form').click(function(){
event.stopPropagation();
if(mainFormActive === false) {
activateOverlay();
$(this).addClass('is-active');
mainFormActive = true;
}
});

$('.Field__element').focus(function(){
$(this).parent('.Field').addClass('is-active');
});

$('.Field__element').blur(function(){
$(this).parent('.Field').removeClass('is-active');
});


});
4 js/jquery-2.1.4.min.js
View file

Large diffs are not rendered by default.

1 js/min/custom-min.js
View file
1 js/min/plugins-min.js
View file
113 js/plugins.js
View file
@@ -0,0 +1,113 @@
/*
* jQuery appear plugin
*
* Copyright (c) 2012 Andrey Sidorov
* licensed under MIT license.
*
* https://github.com/morr/jquery.appear/
*
* Version: 0.3.6
*/
(function($) {
var selectors = [];

var check_binded = false;
var check_lock = false;
var defaults = {
interval: 250,
force_process: false
};
var $window = $(window);

var $prior_appeared = [];

function process() {
check_lock = false;
for (var index = 0, selectorsLength = selectors.length; index < selectorsLength; index++) {
var $appeared = $(selectors[index]).filter(function() {
return $(this).is(':appeared');
});

$appeared.trigger('appear', [$appeared]);

if ($prior_appeared[index]) {
var $disappeared = $prior_appeared[index].not($appeared);
$disappeared.trigger('disappear', [$disappeared]);
}
$prior_appeared[index] = $appeared;
}
};

function add_selector(selector) {
selectors.push(selector);
$prior_appeared.push();
}

// "appeared" custom filter
$.expr[':']['appeared'] = function(element) {
var $element = $(element);
if (!$element.is(':visible')) {
return false;
}

var window_left = $window.scrollLeft();
var window_top = $window.scrollTop();
var offset = $element.offset();
var left = offset.left;
var top = offset.top;

if (top + $element.height() >= window_top &&
top - ($element.data('appear-top-offset') || 0) <= window_top + $window.height() &&
left + $element.width() >= window_left &&
left - ($element.data('appear-left-offset') || 0) <= window_left + $window.width()) {
return true;
} else {
return false;
}
};

$.fn.extend({
// watching for element's appearance in browser viewport
appear: function(options) {
var opts = $.extend({}, defaults, options || {});
var selector = this.selector || this;
if (!check_binded) {
var on_check = function() {
if (check_lock) {
return;
}
check_lock = true;

setTimeout(process, opts.interval);
};

$(window).scroll(on_check).resize(on_check);
check_binded = true;
}

if (opts.force_process) {
setTimeout(process, opts.interval);
}
add_selector(selector);
return $(selector);
}
});

$.extend({
// force elements's appearance check
force_appear: function() {
if (check_binded) {
process();
return true;
}
return false;
}
});
})(function() {
if (typeof module !== 'undefined') {
// Node
return require('jquery');
} else {
return jQuery;
}
}());
25 sass/components/__baseline.scss
View file
@@ -14,9 +14,30 @@ $ratio-major-tenth: 8/3;
$ratio-major-twelfth: 3;
$ratio-double-octave: 4;

$default-font-size: 17;
$default-font-size: 16;
$default-line-height: $ratio-golden;

$base-font-size: $default-font-size/16;
$base-line-height: $base-font-size * $default-line-height;
$font-ratio: $ratio-prefect-fifth;
$font-ratio: $ratio-prefect-fifth;


/* Max a number out by
* @param : Must be an rem number
* @param : must be a PX number
*/

@function max-number($checknum, $max){
$checknum : $checknum * 16;
@if $checknum > $max {
@return $max * 1px;

}@else {

@return ($checknum/16) * 1rem;

}
}


$sitewidth : max-number($base-line-height * 46, 980);
22 sass/components/__colors.scss
View file
@@ -1,12 +1,20 @@
$color-main: red;
$color-alt: green;
$color-1: red; // Most used main brand color
$color-1-alt: red; // Active, or hovered state color

$color-nuetral-1: #666;
$color-2: green; // Complimentary brand color
$color-2-alt: green; // Active, or hovered state color

$color-3: green; // Should rarely need to be used, but if you need something colorful, enjoy :D
$color-3-alt: green; // Active, or hovered state color

$color-nuetral-1: #666; // Lightest
$color-nuetral-2: #999;
$color-nuetral-3: #ddd;
$color-nuetral-3: #ddd; // Darkest

$color-white-1: #efefef;
$color-white-1: #efefef; // Lighest
$color-white-2: #f9f9f9;
$color-white-3: #fefefe;
$color-white-3: #fefefe; // Darkest

$corner-radius: #{$base-line-height}rem;
$color-black-1: #444; // Lighest
$color-black-2: #222;
$color-black-3: #111; // Darkest
20 sass/components/__functions.scss
View file
@@ -40,6 +40,22 @@
*
*/

@function baseline($multiplier, $baseline : $base-line-height){
@function baseline($multiplier : 1, $baseline : $base-line-height){
@return ($multiplier * $baseline) * 1rem;
}
}

/* Easily calculate the various font sizes based on $base-font-size and $font-ratio.
*
* @param : Multiplyer
* @param : Base font size
* @param : Ratio to scale by
*
*/

@function fontsize($multiplier : 0, $fontsize : $base-font-size, $ratio : $font-ratio){
@return ($fontsize * pow($ratio, $multiplier)) * 1rem;
}

@function roundToDivisible($base, $divisible) {
@return round($base / $divisible) * $divisible;
}
38 sass/components/__mixins.scss
View file
@@ -0,0 +1,38 @@
$tablet-width: 768px;
$desktop-width: 1024px;

@mixin tablet {
@media (max-width: #{$tablet-width} -1px) {
@content;
}
}

@mixin tablet {
@media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
@content;
}
}

@mixin desktop {
@media (min-width: #{$desktop-width}) {
@content;
}
}

@mixin gradient-top-left($color1, $color2, $deg : '-45deg'){
background: $color1;
background: -moz-linear-gradient(-45deg, $color1 0%, $color2 100%);
background: -webkit-linear-gradient(-45deg, $color1 0%, $color2 100%);
background: linear-gradient(135deg, $color1 0%,$color2 100%);
}

@mixin gradient-bottom-left($color1, $color2, $deg : '45deg'){
background: $color1;
background: -moz-linear-gradient(45deg, $color1 0%, $color2 100%);
background: -webkit-linear-gradient(45deg, $color1 0%, $color2 100%);
background: linear-gradient(45deg, $color1 0%,$color2 100%);
}

@mixin corner-radius {
border-radius: baseline(1/4);
}
4 sass/main.scss
View file
@@ -3,8 +3,10 @@
@import "compass/reset";
@import 'vendor/fa/font-awesome.scss';
@import 'components/__baseline.scss';
@import 'components/__mixins.scss';
@import 'components/__functions.scss';
@import 'components/__colors.scss';
@import 'partials/__grid.scss';
@import 'partials/__typography.scss';
@import 'partials/__gui.scss';
@import 'partials/__gui.scss';
@import 'partials/__modules.scss';
138 sass/partials/__grid.scss
View file
@@ -2,76 +2,112 @@
box-sizing: border-box;
}

.clearfix {
&:after {
content: "";
display: table;
clear: both;
}
}

.contain{
width: 100%;
max-width: #{$base-line-height * 46}rem;
max-width: $sitewidth;
margin: 0 auto;
padding: 0 baseline(1);
}


.col--flex,
.row{
display: flex;
flex-wrap: wrap;
width: calc(100% + #{baseline(2)});
margin-left: baseline(1) * -1;
}
.col{
padding-left: #{$base-line-height}rem;

padding-right: #{$base-line-height}rem;
}


.col--1-2{
width: 50%;
}

.col--1-3{
width: 33.33%;
}

.col--2-3{
width: 66.66%;
}

.col--1-4{
width: 25%;
}

.col--3-4{
width: 75%;
}

.col--1-6{
width: 16.66%;
}

.col--1-12{
width: 8.33%;
}

.col--5-12{
width: percentage(5/12);
}

.col--7-12{
width: percentage(7/12);
padding-left: baseline();
padding-right: baseline();
width: 100%;
}

.col--10-12{
width: percentage(10/12);
@include tablet {
.col--1-2{
width: 50%;
}

.col--1-3{
width: 33.33%;
}

.col--2-3{
width: 66.66%;
}

.col--1-4{
width: 25%;
}
}

.col--11-12{
width: percentage(11/12);
}
@include desktop {

.col--1-2{
width: 50%;
}

.col--1-3{
width: 33.33%;
}

.col--2-3{
width: 66.66%;
}

.col--1-4{
width: 25%;
}

.col--3-4{
width: 75%;
}

.col--1-6{
width: 16.66%;
}

.col--1-12{
width: 8.33%;
}

.col--5-12{
width: percentage(5/12);
}

.col--7-12{
width: percentage(7/12);
}

.col--10-12{
width: percentage(10/12);
}

.col--11-12{
width: percentage(11/12);
}


.col__1-2{
width: 50%;
}

.col__1-3{
width: 33.33%;
}

.col__1-2{
width: 50%;
}

.col__1-3{
width: 33.33%;
.responsive{
display: block;
max-width: 100%;
}

.col--debug{
187 sass/partials/__gui.scss
View file
@@ -1,38 +1,199 @@
a{
color: $color-1;
text-decoration: none;
}

/* Buttons:
*/


.btn{
font-size: $base-line-height * 1* 1rem;
line-height: $base-line-height * 2* 1rem;
font-size: fontsize();
line-height: baseline(2);
display: inline-block;
background: $color-main;
background: $color-1;
color: #fff;
border-radius: $corner-radius;
text-decoration: none;
padding: 0 $base-line-height* 1rem;
padding: 0 baseline(2);
vertical-align: middle;
margin-bottom: $base-line-height* 1rem;
margin-bottom: baseline(1);
height: baseline(2);

@include corner-radius;
}

.btn__icon{

}

.btn--small{
font-size: $base-font-size * 1rem;
line-height: ($base-font-size * 2) * 1rem;
font-size: fontsize();
line-height: baseline(1);
}

.btn--large{
font-size: ($base-line-height * $font-ratio) * 1rem;
line-height: ($base-line-height * 3) * 1rem;
font-size: fontsize(1);
line-height: baseline(3);
height: baseline(3);
}

.btn--color-alt{
background: $color-alt;
background: $color-2;
}

.btn--outline{
background: none;
border:3px solid $color-main;
color: $color-main;
border:3px solid $color-1;
color: $color-1;
}

/* Form Elements: */


label{
font-size: inherit;
}

textarea,
select,
input{
margin: 0;
padding: 0 baseline(0.5);
border: none;
font-size: fontsize();
font-family: inherit;
line-height: baseline(1);
color: inherit;
}

select{
border: none;
background: #fff;
line-height: baseline(1);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-shadow: none !important;
}


/* Form Elements: Short Form */

.Field{
position: relative;
}

.Field--short-form{

height: baseline(2);
margin-bottom: baseline();
border: 1px solid $color-white-1;

@include corner-radius;

label{
display: none;
padding: baseline() baseline() 0 baseline();
}

.Field__element{
background: none;
padding: baseline(1/2);
width: 100%;
}

}

/* Form Elements: Long Form */

.Long-form{
margin: 0;
}

.Field--long-form{
border-left: 1px solid $color-white-1;
border-bottom: 1px solid $color-white-1;
padding: 0;

label{
display: block;
padding: baseline(1/2) baseline();
}

.Field__element{
background: none;
padding: 0 baseline() baseline() baseline();
width: 100%;
}
}

.Field--select{
&:after{
content: '\f107';
@include fa-icon;
height: fontsize(1);
width: fontsize(1);
font-size: fontsize(1);
position: absolute;
right: baseline(1/2);
top: 50%;
transform: translateY(-50%);
border-radius: 100%;
text-align: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.15);
pointer-events: none;
}
}

.Field--icon{
display: flex;

.fa{
width: baseline(2);
height: baseline(2);
line-height: baseline(2);
text-align: center;
}

.Field__element{
width: Calc(100% - #{baseline(2)});
}

.Field__element--1-2{
width: Calc(50% - #{baseline(1)});
}

.Field__element--1-3{
width: Calc(33.3% - #{baseline(2/3)});
}

.Field__element--1-4{
width: Calc(25% - #{baseline(1/2)});
}
}

.Field--multiple{
display: flex;
flex-wrap: wrap;

label{
width: 100%;
}

.Field__element--1-2 {
width: 50%;
}

.Field__element--1-3 {
width: 33.3%;
}

.Field__element--1-4 {
width: 25%;
}

.Field__element:last-child{
border-left: 1px solid $color-white-1;
}
}
52 sass/partials/__modules.scss
View file
@@ -0,0 +1,52 @@
.Primary-header {
.logo {
width: baseline(10);
float: left;
}

@extend .clearfix;
}

.Primary-header__navigation {
li{
display: inline-block;
padding: baseline(1/2);
}
}

.blurb {
text-align: center;
}

.blurb__icon {
display: inline-block;
height: baseline(6);
width: baseline(6);
margin-bottom: baseline();
border: 1px solid $color-1;
color: $color-1;
line-height: baseline(6);
font-size: fontsize(4);
border-radius: 100%;

.fa {
line-height: baseline(6);
display: block;
}
}


.Image-text{
}

.Image-text__image{
padding: 0;
}

.Image-text__text{
padding: baseline(2);

@media (max-width: 768px){
order: 1;
}
}
79 sass/partials/__typography.scss
View file
@@ -1,7 +1,12 @@
/* Base Fonts */

$font-stack: Open Sans, sans-serif;
@mixin font-stack-heading {
font-family: Open Sans, sans-serif;
}

@mixin font-stack-body {
font-family: Open Sans, sans-serif;
}

/* Font Size Varients */

@@ -16,54 +21,110 @@ $h4-font-size: $base-font-size;

html{
font-size: 1em;
font-family: $font-stack;
@include font-stack-body;
}

h1{
font-size: $h1-font-size * 1rem;
line-height: roundUpToAny($h1-font-size) * 1rem;
font-family: $font-stack;
margin-bottom: baseline(1);
@include font-stack-heading;
}

h2{
font-size: $h2-font-size * 1rem;
line-height: roundUpToAny($h2-font-size) * 1rem;
font-family: $font-stack;
margin-bottom: baseline(1);
@include font-stack-heading;
}

h3{
font-size: $h3-font-size * 1rem;
line-height: roundUpToAny($h3-font-size) * 1rem;
font-family: $font-stack;
margin-bottom: baseline(1);
@include font-stack-heading;
}

h4{
font-size: $h4-font-size * 1rem;
line-height: roundUpToAny($h4-font-size) * 1rem;
font-family: $font-stack;
margin-bottom: baseline(1);
@include font-stack-heading;
}

body {

font-size: $base-font-size * 1rem;
line-height: roundUpToAny($base-font-size) * 1rem;

}
h5,
h6,
p{
font-size: $base-font-size * 1rem;
line-height: roundUpToAny($base-font-size) * 1rem;
font-family: $font-stack;
margin-bottom: baseline(1);
}


/* Stylized Type Addons */

.caption{
font-size: $h3-font-size * 1rem;
line-height: $h2-font-size * 1rem;
line-height: $h2-font-size * 1rem;
}

.sub-title{
margin-top: baseline(-1/2);
margin-bottom: baseline(1.5);
}

.mega{
font-size: $mega-font-size * 1rem;
line-height: roundUpToAny($mega-font-size) * 1rem;
font-family: $font-stack;
margin-bottom: baseline(2);
}

.title--lines{
text-align: center;
overflow: hidden;

span{
position: relative;
}

span:before{
content: ' ';
height: 0;
width: 300%;
position: absolute;
border-bottom: 1px solid $color-white-1;
top: 50%;
left: calc(-300% - #{baseline(1/2)});
}

span:after{
content: ' ';
height: 0;
width: 300%;
position: absolute;
border-bottom: 1px solid $color-white-1;
top: 50%;
right: calc(-300% - #{baseline(1/2)});
}
}



@media (max-width: 958px){
html{
font-size: 0.85em;
}
}


@media (max-width: 768px){
html{
font-size: 0.75em;
}
}
520 sass/theme.scss
View file

Large diffs are not rendered by default.