Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
407 lines (387 sloc) 23.1 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Dosis|Raleway:400,700|Roboto:300,400,900," rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.css">
<link rel="stylesheet" href="../base/reset.css">
<link rel="stylesheet" href="../base/mobileui.css">
<link rel="stylesheet" href="../base/colors.css">
<link rel="stylesheet" href="../base/icons.css">
<link rel="stylesheet" href="../button/style.css">
<link rel="stylesheet" href="../list/style.css">
<link rel="stylesheet" href="../header/style.css">
<link rel="stylesheet" href="../grid/style.css">
<link rel="stylesheet" href="../assets/css/master.css">
<style>
.content-land { margin-left:50px}
</style>
</head>
<body class="content-land">
<!-- BEGIN -->
<h2 class="title-doc" id="_DOC_GENERATE_SPACE_">Colors</h2>
<p>MobileUI uses the suggestions material design colors because material takes cues from contemporary architecture, road signs, pavement marking tape, and athletic courts. Color should be unexpected and vibrant.</p>
<p>This color palette comprises primary and accent colors that can be used for illustration or to develop your brand colors. They’ve been designed to work harmoniously with each other. The color palette starts with primary colors and fills in the spectrum to create a complete and usable palette for Android, Web, and iOS.</p>
<p>Themes enable consistent app styling through surface shades, shadow depth, and ink opacity.</p>
<p>
The theme's colors are in base MobileUI, to use it install base through the command:
</p>
<pre>mobileui install base</pre>
<p>And just add the class in your component to use the color, example: </p>
<textarea class="bind-code" mode="text/html" header-absolute="true" replace="body,div|grey-100,grey-100 body" height-preview="430px">
<body class="grey-100">
<div class="header indigo">
<button class="left icon ion-navicon"></button>
<button class="right icon ion-plus-circled"></button>
</div>
<div class="content has-header">
<div class="row padding indigo">
<div class="col-25 padding">
<img class="avatar circle" src="../assets/img/33.jpg" />
</div>
<div class="col padding">
<h1 class="text-big text-light">Jeanette Fletcher</h1>
<p class="text-blue-200">jeanette.fletcher15@example.com</p>
</div>
</div>
<div class="row align-center">
<div class="col padding light-blue">
<h1 class="text-huge text-strong">12</h1>
<p>remaning tasks</p>
</div>
<div class="col padding pink-400">
<h1 class="text-huge text-strong">32</h1>
<p>completed tasks</p>
</div>
</div>
<div class="list no-border">
<div class="item border-bottom text-grey-300">
<h1 class="text-grey-600 text-light">Finish landing page concept</h1>
<span class="purple radius padding text-small">design</span>
<span class="blue radius padding text-small">freelance</span>
<span class="red radius padding text-small">web</span>
<i class="right icon ion-ios-arrow-right text-grey-700 text-huge"></i>
</div>
<div class="item border-bottom text-grey-300">
<h1 class="text-grey-600 text-light">Design app illustrations</h1>
<span class="purple radius padding text-small">design</span>
<span class="blue radius padding text-small">freelance</span>
<span class="green radius padding text-small">mobile</span>
<i class="right icon ion-ios-arrow-right text-grey-700 text-huge"></i>
</div>
</div>
</div>
</body></textarea>
<h3 class="sub-title-doc">Colors MobileUI:</h3>
<div class="color-palettes">
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #f44336;">red</li>
<li class="color dark" style="background-color: #ffebee;">red-50</li>
<li class="color dark" style="background-color: #ffcdd2;">red-100</li>
<li class="color dark" style="background-color: #ef9a9a">red-200</li>
<li class="color dark" style="background-color: #e57373;">red-300</li>
<li class="color" style="background-color: #ef5350;">red-400</li>
<li class="color" style="background-color: #f44336;">red-500</li>
<li class="color" style="background-color: #e53935;">red-600</li>
<li class="color" style="background-color: #d32f2f;">red-700</li>
<li class="color" style="background-color: #c62828;">red-800</li>
<li class="color" style="background-color: #b71c1c;">red-900</li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #E91E63;">pink</li>
<li class="color dark" style="background-color: #fce4ec;">pink-50</li>
<li class="color dark" style="background-color: #f8bbd0;">pink-100</li>
<li class="color dark" style="background-color: #f48fb1;">pink-200</li>
<li class="color light-strong" style="background-color: #f06292;">Pink-300</li>
<li class="color " style="background-color: #ec407a;">pink-400</li>
<li class="color" style="background-color: #e91e63;">pink-500</li>
<li class="color" style="background-color: #d81b60;">pink-600</li>
<li class="color" style="background-color: #c2185b;">pink-700</li>
<li class="color" style="background-color: #ad1457;">pink-800</li>
<li class="color" style="background-color: #880e4f;">pink-900</li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #9c27b0;">purple</li>
<li class="color dark" style="background-color: #f3e5f5;">purple-50</li>
<li class="color dark" style="background-color: #e1bee7;">purple-100</li>
<li class="color dark" style="background-color: #ce93d8;">purple-200</li>
<li class="color light-strong" style="background-color: #ba68c8;">purple-300</li>
<li class="color light-strong" style="background-color: #ab47bc;">purple-400</li>
<li class="color" style="background-color: #9c27b0;">purple-500</li>
<li class="color" style="background-color: #8e24aa;">purple-600</li>
<li class="color" style="background-color: #7b1fa2;">purple-700</li>
<li class="color" style="background-color: #6a1b9a;">purple-800</li>
<li class="color" style="background-color: #4a148c;">purple-900</li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #673ab7;">deep-purple</li>
<li class="color dark" style="background-color: #ede7f6;">deep-purple-50</li>
<li class="color dark" style="background-color: #d1c4e9;">deep-purple-100</li>
<li class="color dark" style="background-color: #b39ddb;">deep-purple-200</li>
<li class="color" style="background-color: #9575cd;">deep-purple-300</li>
<li class="color" style="background-color: #7e57c2;">deep-purple-400</li>
<li class="color" style="background-color: #673ab7;">deep-purple-500</li>
<li class="color" style="background-color: #5e35b1;">deep-purple-600</li>
<li class="color" style="background-color: #512da8;">deep-purple-700</li>
<li class="color" style="background-color: #4527a0;">deep-purple-800</li>
<li class="color" style="background-color: #311b92;">deep-purple-900</li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #3f51b5;">indigo</li>
<li class="color dark" style="background-color: #e8eaf6;">indigo-50</li>
<li class="color dark" style="background-color: #c5cae9;">indigo-100</li>
<li class="color dark" style="background-color: #9fa8da;">indigo-200</li>
<li class="color" style="background-color: #7986cb;">indigo-300</li>
<li class="color" style="background-color: #5c6bc0;">indigo-400</li>
<li class="color" style="background-color: #3f51b5;">indigo-500</li>
<li class="color" style="background-color: #3949ab;">indigo-600</li>
<li class="color" style="background-color: #303f9f;">indigo-700</li>
<li class="color" style="background-color: #283593;">indigo-800</li>
<li class="color" style="background-color: #1a237e;">indigo-900</li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #2196F3;">blue</li>
<li class="color dark" style="background-color: #e3f2fd;">blue-50</li>
<li class="color dark" style="background-color: #bbdefb;">blue-100</li>
<li class="color dark" style="background-color: #90caf9;">blue-200</li>
<li class="color dark" style="background-color: #64b5f6;">blue-300</li>
<li class="color dark" style="background-color: #42a5f5;">blue-400</li>
<li class="color light-strong" style="background-color: #2196f3;">blue-500</li>
<li class="color" style="background-color: #1e88e5;">blue-600</li>
<li class="color" style="background-color: #1976d2;">blue-700</li>
<li class="color" style="background-color: #1565c0;">blue-800</li>
<li class="color" style="background-color: #0d47a1;">blue-900</li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #03a9f4;">light-blue</li>
<li class="color dark" style="background-color: #e1f5fe;">light-blue-50</li>
<li class="color dark" style="background-color: #b3e5fc;">light-blue-100</li>
<li class="color dark" style="background-color: #81d4fa;">light-blue-200</li>
<li class="color dark" style="background-color: #4fc3f7;">light-blue-300</li>
<li class="color dark" style="background-color: #29b6f6;">light-blue-400</li>
<li class="color dark" style="background-color: #03a9f4;">light-blue-500</li>
<li class="color light-strong" style="background-color: #039be5;">light-blue-600</li>
<li class="color" style="background-color: #0288d1;">light-blue-700</li>
<li class="color" style="background-color: #0277bd;">light-blue-800</li>
<li class="color" style="background-color: #01579b;">light-blue-900</li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #00bcd4;">cyan</li>
<li class="color dark" style="background-color: #e0f7fa;">cyan-50</li>
<li class="color dark" style="background-color: #b2ebf2;">cyan-100</li>
<li class="color dark" style="background-color: #80deea;">cyan-200</li>
<li class="color dark" style="background-color: #4dd0e1;">cyan-300</li>
<li class="color dark" style="background-color: #26c6da;">cyan-400</li>
<li class="color dark" style="background-color: #00bcd4;">cyan-500</li>
<li class="color dark" style="background-color: #00acc1;">cyan-600</li>
<li class="color" style="background-color: #0097a7;">cyan-700</li>
<li class="color" style="background-color: #00838f;">cyan-800</li>
<li class="color" style="background-color: #006064;">cyan-900</li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #009688;">teal</li>
<li class="color dark" style="background-color: #e0f2f1;">teal-50</li>
<li class="color dark" style="background-color: #b2dfdb;">teal-100</li>
<li class="color dark" style="background-color: #80cbc4;">teal-200</li>
<li class="color dark" style="background-color: #4db6ac;">teal-300</li>
<li class="color dark" style="background-color: #26a69a;">teal-400</li>
<li class="color light-strong" style="background-color: #009688;">teal-500</li>
<li class="color light-strong" style="background-color: #00897b;">teal-600</li>
<li class="color light-strong" style="background-color: #00796b;">teal-700</li>
<li class="color" style="background-color: #00695c;">teal-800</li>
<li class="color" style="background-color: #004d40;">teal-900</li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #4caf50;">green</li>
<li class="color dark" style="background-color: #e8f5e9;">green-50</li>
<li class="color dark" style="background-color: #c8e6c9;">green-100</li>
<li class="color dark" style="background-color: #a5d6a7;">green-200</li>
<li class="color dark" style="background-color: #81c784;">green-300</li>
<li class="color dark" style="background-color: #66bb6a;">green-400</li>
<li class="color dark" style="background-color: #4caf50;">green-500</li>
<li class="color light-strong" style="background-color: #43a047;">green-600</li>
<li class="color" style="background-color: #388e3c;">green-700</li>
<li class="color" style="background-color: #2e7d32;">green-800</li>
<li class="color" style="background-color: #1b5e20;">green-900</li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #8bc34a;">light-green</li>
<li class="color dark" style="background-color: #f1f8e9;">light-green-50</li>
<li class="color dark" style="background-color: #dcedc8;">light-green-100</li>
<li class="color dark" style="background-color: #c5e1a5;">light-green-200</li>
<li class="color dark" style="background-color: #aed581;">light-green-300</li>
<li class="color dark" style="background-color: #9ccc65;">light-green-400</li>
<li class="color dark" style="background-color: #8bc34a;">light-green-500</li>
<li class="color dark" style="background-color: #7cb342;">light-green-600</li>
<li class="color light-strong" style="background-color: #689f38;">light-green-700</li>
<li class="color" style="background-color: #558b2f;">light-green-800</li>
<li class="color" style="background-color: #33691e;">light-green-900</li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #cddc39;">lime</li>
<li class="color dark" style="background-color: #f9fbe7;">lime-50</li>
<li class="color dark" style="background-color: #f0f4c3;">lime-100</li>
<li class="color dark" style="background-color: #e6ee9c;">lime-200</li>
<li class="color dark" style="background-color: #dce775;">lime-300</li>
<li class="color dark" style="background-color: #d4e157;">lime-400</li>
<li class="color dark" style="background-color: #cddc39;">lime-500</li>
<li class="color dark" style="background-color: #c0ca33;">lime-600</li>
<li class="color dark" style="background-color: #afb42b;">lime-700</li>
<li class="color dark" style="background-color: #9e9d24;">lime-800</li>
<li class="color" style="background-color: #827717;">lime-900</li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #ffeb3b;">yellow</li>
<li class="color dark" style="background-color: #fffde7;">yellow-50</li>
<li class="color dark" style="background-color: #fff9c4;">yellow-100</li>
<li class="color dark" style="background-color: #fff59d;">yellow-200</li>
<li class="color dark" style="background-color: #fff176;">yellow-300</li>
<li class="color dark" style="background-color: #ffee58;">yellow-400</li>
<li class="color dark" style="background-color: #ffeb3b;">yellow-500</li>
<li class="color dark" style="background-color: #fdd835;">yellow-600</li>
<li class="color dark" style="background-color: #fbc02d;">yellow-700</li>
<li class="color dark" style="background-color: #f9a825;">yellow-800</li>
<li class="color dark" style="background-color: #f57f17;">yellow-900</li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #ffc107;">amber</li>
<li class="color dark" style="background-color: #fff8e1;">amber-50</li>
<li class="color dark" style="background-color: #ffecb3;">amber-100</li>
<li class="color dark" style="background-color: #ffe082;">amber-200</li>
<li class="color dark" style="background-color: #ffd54f;">amber-300</li>
<li class="color dark" style="background-color: #ffca28;">amber-400</li>
<li class="color dark" style="background-color: #ffc107;">amber-500</li>
<li class="color dark" style="background-color: #ffb300;">amber-600</li>
<li class="color dark" style="background-color: #ffa000;">amber-700</li>
<li class="color dark" style="background-color: #ff8f00;">amber-800</li>
<li class="color dark" style="background-color: #ff6f00;">amber-900</li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #ff9800;">orange</li>
<li class="color dark" style="background-color: #fff3e0;">orange-50</li>
<li class="color dark" style="background-color: #ffe0b2;">orange-100</li>
<li class="color dark" style="background-color: #ffcc80;">orange-200</li>
<li class="color dark" style="background-color: #ffb74d;">orange-300</li>
<li class="color dark" style="background-color: #ffa726;">orange-400</li>
<li class="color dark" style="background-color: #ff9800;">orange-500</li>
<li class="color dark" style="background-color: #fb8c00;">orange-600</li>
<li class="color dark" style="background-color: #f57c00;">orange-700</li>
<li class="color light-strong" style="background-color: #ef6c00;">orange-800</li>
<li class="color" style="background-color: #e65100;">orange-900</li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #ff5722;">deep-orange</li>
<li class="color dark" style="background-color: #fbe9e7;">deep-orange-50</li>
<li class="color dark" style="background-color: #ffccbc;">deep-orange-100</li>
<li class="color dark" style="background-color: #ffab91;">deep-orange-200</li>
<li class="color dark" style="background-color: #ff8a65;">deep-orange-300</li>
<li class="color dark" style="background-color: #ff7043;">deep-orange-400</li>
<li class="color light-strong" style="background-color: #ff5722;">deep-orange-500</li>
<li class="color" style="background-color: #f4511e;">deep-orange-600</li>
<li class="color" style="background-color: #e64a19;">deep-orange-700</li>
<li class="color" style="background-color: #d84315;">deep-orange-800</li>
<li class="color" style="background-color: #bf360c;">deep-orange-900</li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #795548;">brown</li>
<li class="color dark" style="background-color: #efebe9;">brown-50</li>
<li class="color dark" style="background-color: #d7ccc8;">brown-100</li>
<li class="color dark" style="background-color: #bcaaa4;">brown-200</li>
<li class="color light-strong" style="background-color: #a1887f;">brown-300</li>
<li class="color" style="background-color: #8d6e63;">brown-400</li>
<li class="color" style="background-color: #795548;">brown-500</li>
<li class="color" style="background-color: #6d4c41;">brown-600</li>
<li class="color" style="background-color: #5d4037;">brown-700</li>
<li class="color" style="background-color: #4e342e;">brown-800</li>
<li class="color" style="background-color: #3e2723;">brown-900</li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #9e9e9e;">grey</li>
<li class="color dark" style="background-color: #fafafa;">grey-50</li>
<li class="color dark" style="background-color: #f5f5f5;">grey-100</li>
<li class="color dark" style="background-color: #eeeeee;">grey-200</li>
<li class="color dark" style="background-color: #e0e0e0;">grey-300</li>
<li class="color dark" style="background-color: #bdbdbd;">grey-400</li>
<li class="color dark" style="background-color: #9e9e9e;">grey-500</li>
<li class="color" style="background-color: #757575;">grey-600</li>
<li class="color" style="background-color: #616161;">grey-700</li>
<li class="color" style="background-color: #424242;">grey-800</li>
<li class="color" style="background-color: #212121;">grey-900</li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #607d8b;">blue-grey</li>
<li class="color dark" style="background-color: #eceff1;">blue-grey-50</li>
<li class="color dark" style="background-color: #cfd8dc;">blue-grey-100</li>
<li class="color dark" style="background-color: #b0bec5;">blue-grey-200</li>
<li class="color dark" style="background-color: #90a4ae;">blue-grey-300</li>
<li class="color light-strong" style="background-color: #78909c;">blue-grey-400</li>
<li class="color" style="background-color: #607d8b;">blue-grey-500</li>
<li class="color" style="background-color: #546e7a;">blue-grey-600</li>
<li class="color" style="background-color: #455a64;">blue-grey-700</li>
<li class="color" style="background-color: #37474f;">blue-grey-800</li>
<li class="color" style="background-color: #263238;">blue-grey-900</li>
</ul>
</section>
<section class="color-group" style="background-image:url(../assets/img/roller.jpg);background-size:cover">
<ul>
<li class="color" style="background-color: #000000;">black</li>
<li class="color dark" style="background-color: #ffffff;">white</li>
<li class="color" style="background-color: rgba(0,0,0,0.9);">black-opacity-90</li>
<li class="color dark" style="background-color: rgba(255,255,255,0.9);">white-opacity-90</li>
<li class="color" style="background-color: rgba(0,0,0,0.8);">black-opacity-70</li>
<li class="color dark" style="background-color: rgba(255,255,255,0.7);">white-opacity-70</li>
<li class="color" style="background-color: rgba(0,0,0,0.7);">black-opacity-50</li>
<li class="color dark" style="background-color: rgba(255,255,255,0.5);">white-opacity-50</li>
<li class="color" style="background-color: rgba(0,0,0,0.6);">black-opacity-30</li>
<li class="color dark" style="background-color: rgba(255,255,255,0.3);">white-opacity-30</li>
<li class="color" style="background-color: rgba(0,0,0,0.5);">black-opacity-10</li>
<li class="color dark" style="background-color: rgba(255,255,255,0.1);">white-opacity-10</li>
</ul>
</section>
</div>
<!-- DONE -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/xml/xml.min.js"></script>
<script type="text/javascript" src="../assets/js/main.js"></script>
</body>
</html>