Moonshine - Scalable and Maintainable Architecture
Getting Started
Get started with Moonshine, a scalable and maintainable architecture for building responsive, mobile-first web apps or sites.
Moonshine helps you build not only fast but scalable and maintainable web apps or sites. With Moonshine you have a package that is built with the combined knowledge and effort of some great developers, from their methodology, codes, packages, etc...
Ready to kick-start your project using Moonshine? Download Moonshine package.
Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Or you can use our boilerplate.html included in the package.
Content
Discover what’s included in the package. Once downloaded, unzip the compressed folder and you’ll see something similar to this:
moonshine/
├── addon/
│ └── fontawesome/
├── assets/
│ ├── app-icon/
│ ├── fonts/
│ └── images/
├── scripts/
│ ├── jquery-3.4.1.min.js
│ ├── modernizr-3.7.1.min.js
│ ├── object-fit-images-3.2.3.min.js
│ └── script.js
├── styles/
│ ├── source
│ │ ├── base
│ │ │ └── *.scss
│ │ ├── component
│ │ │ └── *.scss
│ │ ├── layout
│ │ │ └── *.scss
│ │ ├── setting
│ │ │ └── *.scss
│ │ ├── utility
│ │ │ └── *.scss
│ │ ├── all.scss
│ │ ├── base.scss
│ │ ├── component.scss
│ │ ├── layout.scss
│ │ ├── setting.scss
│ │ └── utility.scss
│ ├── all.css
│ ├── all.css.map
│ ├── base.css
│ ├── base.css.map
│ ├── component.css
│ ├── component.css.map
│ ├── layout.css
│ ├── layout.css.map
│ ├── setting.css
│ ├── setting.css.map
│ ├── style.css
│ ├── utility.css
│ └── utility.css.map
├── .editorconfig
├── .gitattributes
├── .gitignore
├── .htaccess
├── 404.html
├── boilerplate.html
├── browserconfig.xml
├── index.html
├── manifrest.json
├── robots.txt
└── service-worker.js
NOTE: You can delete source SASS files, SASS map files and other unnecessary files if you intend not to use it.
Theming
Customize Moonshine with CSS variables or SASS variables for global style preferences for easy theming and component changes.
Here are the CSS variables we include (note that the :root is required). For more info, please check settings.css or the scss code base (mixins, variables etc...).
:root {
/* Color */
--primary: #263238;
--secondary: #37474F;
--success: #4CAF50;
--warning: #FF5722;
--danger: #F44336;
--info: #2196F3;
--light: #FAFAFA;
--dark: #212121;
--red: #F44336;
--pink: #E91E63;
--purple: #9C27B0;
--deep-purple: #673AB7;
--indigo: #3F51B5;
--blue: #2196F3;
--light-blue: #03A9F4;
--cyan: #00BCD4;
--teal: #009688;
--green: #4CAF50;
--light-green: #8BC34A;
--lime: #CDDC39;
--yellow: #FFEB3B;
--amber: #FFC107;
--orange: #FF9800;
--deep-orange: #FF5722;
--brown: #795548;
--blue-grey: #607D8B;
--grey-50: #FAFAFA;
--grey-100: #F5F5F5;
--grey-200: #EEEEEE;
--grey-300: #E0E0E0;
--grey-400: #BDBDBD;
--grey-500: #9E9E9E;
--grey-600: #757575;
--grey-700: #616161;
--grey-800: #424242;
--grey-900: #212121;
/* Transition */
--transition: all 300ms ease-in-out 120ms;
/* font-family */
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
NOTE: You can utilize our source Sass files to take advantage of variables, maps, mixins, and more.
Breakpoints
Moonshine use a handful of media queries to create sensible breakpoints for layouts and interfaces.
These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.
// Extra small devices (411px and up)
@media (min-width: 411px) { ... }
// Small devices (576px and up)
@media (min-width: 576px) { ... }
// Medium devices (768px and up)
@media (min-width: 768px) { ... }
// Large devices (992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (1200px and up)
@media (min-width: 1200px) { ... }
Accessibility
Content which should be visually hidden,
but remain accessible to assistive technologies such as screen readers, can be styled using the .sr-only class.
This will ensure that the control becomes visible once focused (for sighted keyboard users).
<p class="text-danger">
<span class="sr-only">Danger: </span>
This action is not reversible
</p>
For visually hidden interactive controls, such as traditional “skip” links,
.sr-only can be combined with the .sr-only--focusable class.
This will ensure that the control becomes visible once focused (for sighted keyboard users).
<a class="sr-only sr-only--focusable" href="#site-content">Skip to main content</a>
NOTE: To extend Moonshine's accessibility please see WAI-ARIA, WCAG 2.0 and similar accessibility standards and requirements.
Methodology
Organize project files that can better deal with CSS specifics like global namespace, cascade and selectors specificity.
Shares the same methodology of some popular methodologies like ITCSS, BEM, SMACSS and OOCSS.
This approach is to ensure everyone who participates in the development of a website works with a single codebase and speaks the same language.
Codebase
Separate CSS codebase to several sections, this helps organized project files that can better deal with CSS specifics like global namespace, cascade and selectors specificity.
setting.css - contains custom properties (css variables), font-face, etc.
base.css - reset and/or normalize styles, box-sizing definition, etc.
layout.css - specific UI layouts.
component.css - specific UI components.
utitity.css - utilities and helper classes with ability to override anything.
// Sassy CSS
moonshine/
└── styles/
├── source
│ ├── base
│ │ └── *.scss
│ ├── component
│ │ └── *.scss
│ ├── layout
│ │ └── *.scss
│ ├── setting
│ │ └── *.scss
│ ├── utility
│ │ └── *.scss
│ ├── all.scss
│ ├── base.scss
│ ├── component.scss
│ ├── layout.scss
│ ├── setting.scss
│ └── utility.scss
├── all.css
├── all.css.map
├── base.css
├── base.css.map
├── component.css
├── component.css.map
├── layout.css
├── layout.css.map
├── setting.css
├── setting.css.map
├── style.css
├── utility.css
└── utility.css.map
// Basic CSS
moonshine/
└── styles/
├── base.css
├── component.css
├── layout.css
├── setting.css
├── utility.css
└── style.css
// Import order
@import "setting.css";
@import "base.css";
@import "layout.css";
@import "component.css";
@import "utility.css";
Naming Convention
Highly useful, powerful, and simple naming convention that makes your front-end code easier to read and understand, easier to work with, easier to scale, more robust and explicit, and a lot more strict.
prefix - (u) utility, (l) layout, (c) component, and (js) javascript related classes.
name - preferred class/object name.
modifier - preferred modifier name.
viewport - (sm) small, (md) medium, (lg) large, (xl) extra large.
int - integer (0, 1, 2, 3, 4, 5, 6, 7, 8, 9).
others - min, max, auto.
.prefix-name { ... }
.prefix-name-int { ... }
.prefix-name-viewport { ... }
.prefix-name-viewport-int { ... }
.prefix-name--modifier { ... }
.prefix-name--modifier-int { ... }
.prefix-name--modifier-viewport { ... }
.prefix-name--modifier-viewport-int { ... }
.prefix-name__child { ... }
.prefix-name__child-int { ... }
.prefix-name__child-viewport { ... }
.prefix-name__child-viewport-int { ... }
.l-flex { ... }
.l-flex--wrp-no { ... }
.l-flex--wrp-no-md { ... }
.l-flex__item { ... }
.l-flex__item-12 { ... }
.l-flex__item-md { ... }
.l-flex__item-md-12 { ... }
.u-mar-top-10 { ... }
.u-mar-top-sm-20 { ... }
.u-mar-top-md-30 u-mar-top-lg-50 { ... }
NOTE: Two dashes (also known as the modifier notation) imply that the class is a modifier and two underscores (also known as the child notation) imply that the class is a child.
Sample
Here are some sample of what to expect on the Moonshine codebase, For more info please check *.css or the SASS code base (mixins, variables etc...).
Container
<div class="l-container">
<!-- Content here -->
</div>
<div class="l-container l-container--fluid">
<!-- Content here -->
</div>
.l-container--fluid {
max-width: 100% !important;
}
@media (min-width: 576px) {
.l-container { max-width: 540px; }
}
@media (min-width: 768px) {
.l-container { max-width: 720px; }
}
@media (min-width: 992px) {
.l-container { max-width: 960px; }
}
@media (min-width: 1200px) {
.l-container { max-width: 1140px; }
}
Flex
<div class="l-flex">
<div class="l-flex__item-12 l-flex__item-md-6"><!-- Content here --></div>
<div class="l-flex__item-12 l-flex__item-md-6"><!-- Content here --></div>
</div>
Column one - Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor.
Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus.
Donec quam felis,
Column two - Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor.
Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus.
Donec quam felis,
.l-flex {
display: flex;
flex-wrap: wrap;
}
.l-flex--row-wrp { flex-flow: row wrap; }
.l-flex--row-wrp-no { flex-flow: row nowrap; }
.l-flex--row-wrp-rev { flex-flow: row wrap-reverse; }
.l-flex--row-rev-wrp { flex-flow: row-reverse wrap; }
.l-flex--row-rev-wrp-no { flex-flow: row-reverse nowrap; }
.l-flex--row-rev-wrp-rev { flex-flow: row-reverse wrap-reverse; }
.l-flex--col-wrp { flex-flow: column wrap; }
.l-flex--col-wrp-no { flex-flow: column nowrap; }
.l-flex--col-wrp-rev { flex-flow: column wrap-reverse; }
.l-flex--col-rev-wrp { flex-flow: column-reverse wrap; }
.l-flex--col-rev-wrp-no { flex-flow: column-reverse nowrap; }
.l-flex--col-rev-wrp-rev { flex-flow: column-reverse wrap-reverse; }
.l-flex--wrp { flex-wrap: wrap; }
.l-flex--wrp-no { flex-wrap: nowrap; }
.l-flex--wrp-rev { flex-wrap: wrap-reverse; }
.l-flex--col { flex-direction: column; }
.l-flex--col-rev { flex-direction: column-reverse; }
.l-flex--row { flex-direction: row; }
.l-flex--row-rev { flex-direction: row-reverse; }
.l-flex--jus-start { justify-content: flex-start; }
.l-flex--jus-end { justify-content: flex-end; }
.l-flex--jus-center { justify-content: center; }
.l-flex--jus-sparound { justify-content: space-around; }
.l-flex--jus-spbetween { justify-content: space-between; }
.l-flex--jus-spevenly { justify-content: space-evenly; }
.l-flex--ali-start { align-content: flex-start; }
.l-flex--ali-end { align-content: flex-end; }
.l-flex--ali-center { align-content: center; }
.l-flex--ali-stretch { align-content: stretch; }
.l-flex--ali-sparound { align-content: space-around; }
.l-flex--ali-spbetween { align-content: space-between; }
.l-flex--alt-start { align-items: flex-start; }
.l-flex--alt-end { align-items: flex-end; }
.l-flex--alt-center { align-items: center; }
.l-flex--alt-stretch { align-items: stretch; }
.l-flex--alt-baseline { align-items: baseline; }
.l-flex__order-1 { order: 1; }
.l-flex__order-2 { order: 2; }
.l-flex__order-3 { order: 3; }
.l-flex__order-4 { order: 4; }
.l-flex__order-5 { order: 5; }
.l-flex__order-6 { order: 6; }
.l-flex__order-7 { order: 7; }
.l-flex__order-8 { order: 8; }
.l-flex__order-9 { order: 9; }
.l-flex__order-10 { order: 10; }
.l-flex__order-11 { order: 11; }
.l-flex__order-12 { order: 12; }
.l-flex__als-start { align-self: flex-start; }
.l-flex__als-end { align-self: flex-end; }
.l-flex__als-center { align-self: center; }
.l-flex__als-stretch { align-self: stretch; }
.l-flex__als-baseline { align-self: baseline; }
.l-flex__item {
flex: 0 0 auto;
width: auto;
max-width: 100%;
}
.l-flex__item-1 {
flex: 0 0 8.333333%;
max-width: 8.333333%;
}
.l-flex__item-2 {
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
.l-flex__item-3 {
flex: 0 0 25%;
max-width: 25%;
}
.l-flex__item-4 {
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.l-flex__item-5 {
flex: 0 0 41.666667%;
max-width: 41.666667%;
}
.l-flex__item-6 {
flex: 0 0 50%;
max-width: 50%;
}
.l-flex__item-7 {
flex: 0 0 58.333333%;
max-width: 58.333333%;
}
.l-flex__item-8 {
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
.l-flex__item-9 {
flex: 0 0 75%;
max-width: 75%;
}
.l-flex__item-10 {
flex: 0 0 83.333333%;
max-width: 83.333333%;
}
.l-flex__item-11 {
flex: 0 0 91.666667%;
max-width: 91.666667%;
}
.l-flex__item-12 {
flex: 0 0 100%;
max-width: 100%;
}
.l-flex__item-a {
flex: 0 0 10%;
max-width: 10%;
}
.l-flex__item-b {
flex: 0 0 20%;
max-width: 20%;
}
.l-flex__item-c {
flex: 0 0 30%;
max-width: 30%;
}
.l-flex__item-d {
flex: 0 0 40%;
max-width: 40%;
}
.l-flex__item-e {
flex: 0 0 60%;
max-width: 60%;
}
.l-flex__item-f {
flex: 0 0 70%;
max-width: 70%;
}
.l-flex__item-g {
flex: 0 0 80%;
max-width: 80%;
}
.l-flex__item-h {
flex: 0 0 90%;
max-width: 90%;
}
Cluster Gap
// You can omit adding class name "l-gap__item" on "l-gap" child item (only if the child item is a "div").
<div class="l-flex l-gap-20">
<div class="l-gap__item"><!-- Content here --></div>
<div class="l-gap__item"><!-- Content here --></div>
</div>
Column one - Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor.
Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus.
Donec quam felis,
Column two - Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor.
Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus.
Donec quam felis,
.l-gap-10 { margin: -5px; }
.l-gap-20 { margin: -10px; }
.l-gap-30 { margin: -15px; }
.l-gap-40 { margin: -20px; }
.l-gap-50 { margin: -25px; }
.l-gap-10 > div, .l-gap-10 > .l-gap__item { padding: 5px; }
.l-gap-20 > div, .l-gap-20 > .l-gap__item { padding: 10px; }
.l-gap-30 > div, .l-gap-30 > .l-gap__item { padding: 15px; }
.l-gap-40 > div, .l-gap-40 > .l-gap__item { padding: 20px; }
.l-gap-50 > div, .l-gap-50 > .l-gap__item { padding: 25px; }
Parallax
<div class="l-parallax">
<img class="u-parallax__image" src="/assets/images/xxx.jpg" alt="Image">
</div>
A Parallax Background Image
A Parallax Background Image
.l-parallax {
position: relative;
overflow: hidden;
z-index: 1;
}
.l-parallax picture,
.l-parallax__image {
position: absolute;
z-index: -1;
pointer-events: none;
}
.l-parallax picture {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.l-parallax__image {
top: 50%;
left: 50%;
width: 100%;
height: 150%;
object-fit: cover;
pointer-events: none;
transform: translate(-50%, -50%);
font-family: 'object-fit: cover;';
}
Tab
<ul class="c-tab-link">
<li class="c-tab-link__item" data-tab="tab-1">Tab 1</li>
<li class="c-tab-link__item" data-tab="tab-2">Tab 2</li>
</ul>
<div id="tab-1" class="c-tab-content js-current">
<!-- Content here -->
</div>
<div id="tab-2" class="c-tab-content">
<!-- Content here -->
</div>
- Tab 1
- Tab 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor.
Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus.
Donec quam felis,
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
.c-tab-link {
margin: 0px;
padding: 0px;
list-style: none;
}
.c-tab-link__item {
display: inline-block;
padding: 10px 15px;
color: #212121;
background: none;
cursor: pointer;
}
.c-tab-link__item.js-current {
background: #F5F5F5;
color: #212121;
}
.c-tab-content {
display: none;
background: #F5F5F5;
padding: 15px;
}
.c-tab-content.js-current {
display: inherit;
}
Button
<a class="c-button" href="#">Button</a>
.c-button {
display: inline-block;
min-width: 50px;
padding: 0 15px;
color: #FFF !important;
font-size: 1.5rem;
line-height: 50px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
border-radius: 25px;
background-color: #263238;
background-color: var(--primary, #263238);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 4px 0 rgba(0, 0, 0, 0.15);
white-space: nowrap;
}
.c-button:hover,
.c-button:visited,
.c-button:active,
.c-button:focus {
text-decoration: none;
}
.c-button:hover {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 4px 4px -4px rgba(0, 0, 0, 0.2);
}
.c-button--large {
min-width: 60px;
line-height: 60px;
border-radius: 30px;
padding: 0 20px;
}
.c-button--light {
color: #212121 !important;
color: var(--dark) !important;
background-color: #FAFAFA;
background-color: var(--light, #FAFAFA);
}
.c-button--dark {
color: #FAFAFA !important;
color: var(--light, #FAFAFA) !important;
background-color: #212121;
background-color: var(--dark, #212121);
}
.c-button--success {
color: #FAFAFA !important;
color: var(--light, #FAFAFA) !important;
background-color: #4CAF50;
background-color: var(--success, #4CAF50);
}
.c-button--warnig {
color: #FAFAFA !important;
color: var(--light, #FAFAFA) !important;
background-color: #FF5722;
background-color: var(--warning, #FF5722);
}
.c-button--danger {
color: #FAFAFA !important;
color: var(--light, #FAFAFA) !important;
background-color: #F44336;
background-color: var(--danger, #F44336);
}
.c-button--info {
color: #FAFAFA !important;
color: var(--light, #FAFAFA) !important;
background-color: #2196F3;
background-color: var(--info, #2196F3);
}
Card
<div class="c-card">
<div class="c-card__content">
<!-- Content here -->
</div>
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor.
Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus.
Donec quam felis,
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor.
Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus.
Donec quam felis,
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor.
Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus.
Donec quam felis,
.c-card {
height: auto;
color: #212121 !important;
color: var(--dark, #212121) !important;
background-color: #FAFAFA;
background-color: var(--light, #FAFAFA);
border-radius: 2px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
}
.c-card--dark {
color: #FAFAFA !important;
color: var(--light, #FAFAFA) !important;
background-color: #212121;
background-color: var(--dark, #212121);
}
.c-card__content { padding: 20px; }
Float
<div class="clearfix">
<div class="u-float-left">
<!-- Floating content here -->
</div>
</div>
<div class="clearfix">
<div class="u-float-left u-float-right-sm u-float-none-md">
<!-- Floating content here (float left on 575px below, float right on 576px and above, no float on 768px and above) -->
</div>
</div>
.u-float-left { float: left; }
.u-float-right { float: right; }
.u-float-none { float: none; }
.u-float-left-sm { float: left; }
.u-float-left-md { float: left; }
.u-float-left-lg { float: left; }
.u-float-left-xl { float: left; }
Width and Height
.u-width-25 { width: 25%; }
.u-width-50 { width: 50%; }
.u-width-75 { width: 75%; }
.u-width-100 { width: 100%; }
.u-max-width-100 { max-width: 100%; }
.u-viewport-width-100 { width: 100vw; }
.u-height-25 { height: 25%; }
.u-height-50 { height: 50%; }
.u-height-75 { height: 75%; }
.u-height-100 { height: 100%; }
.u-max-height-100 { max-height: 100%; }
.u-viewport-height-100 { height: 100vh; }
Padding
<div class="u-pad-bottom-10 u-pad-bottom-sm-20">
<!-- Add padding (10px padding on 575px below, 20px padding on 576 and above) -->
</div>
.u-pad-5 { padding: 5px; }
.u-pad-100 { padding: 100px; }
.u-pad-top-5 { padding-top: 5px; }
.u-pad-top-100 { padding-top: 100px; }
.u-pad-right-5 { padding-right: 5px; }
.u-pad-right-100 { padding-right: 100px; }
.u-pad-bottom-5 { padding-bottom: 5px; }
.u-pad-bottom-100 { padding-bottom: 100px; }
.u-pad-left-5 { padding-left: 5px; }
.u-pad-left-100 { padding-left: 100px; }
.u-pad-ver-5 { padding-top: 5px; padding-bottom: 5px; }
.u-pad-ver-100 { padding-top: 100px; padding-bottom: 100px; }
.u-pad-hor-5 { padding-right: 5px; padding-left: 5px; }
.u-pad-hor-10 { padding-right: 10px; padding-left: 10px; }
.u-pad-sm-0 { padding: 0; }
.u-pad-md-0 { padding: 0; }
.u-pad-lg-0 { padding: 0; }
.u-pad-xl-0 { padding: 0; }
Margin
<div class="u-mar-bottom-10 u-mar-bottom-sm-20">
<!-- Add margin (10px margin on 575px below, 20px margin on 576 and above) -->
</div>
.u-mar { margin: auto; }
.u-mar-5 { margin: 5px; }
.u-mar-100 { margin: 100px; }
.u-mar-top { margin-top: auto; }
.u-mar-top-5 { margin-top: 5px; }
.u-mar-top-100 { margin-top: 100px; }
.u-mar-right { margin-right: auto; }
.u-mar-right-5 { margin-right: 5px; }
.u-mar-right-10 { margin-right: 10px; }
.u-mar-bot { margin-bottom: auto; }
.u-mar-bottom-5 { margin-bottom: 5px; }
.u-mar-bottom-100 { margin-bottom: 100px; }
.u-mar-left { margin-left: auto; }
.u-mar-left-5 { margin-left: 5px; }
.u-mar-left-10 { margin-left: 10px; }
.u-mar-ver-5 { margin-top: 5px; margin-bottom: 5px; }
.u-mar-ver-100 { margin-top: 100px; margin-bottom: 100px; }
.u-mar-hor-5 { margin-right: 5px; margin-left: 5px; }
.u-mar-hor-100 { margin-right: 100px; margin-left: 100px; }
.u-mar-sm-0 { margin: 0; }
.u-mar-md-0 { margin: 0; }
.u-mar-lg-0 { margin: 0; }
.u-mar-xl-0 { margin: 0; }
Typography
<div class="u-text-center u-text-left-md">
<!-- Align text (align center on 575px below, align left on 576 and above) -->
</div>
.u-text-center { text-align: center; }
.u-text-justify { text-align: justify; }
.u-text-right { text-align: right; }
.u-text-left { text-align: left; }
.u-text-overline { text-decoration: overline; }
.u-text-underline { text-decoration: underline; }
.u-text-linethrough { text-decoration: line-through; }
.u-font-normal { font-weight: normal; }
.u-font-bold { font-weight: bold; }
.u-font-bolder { font-weight: bolder; }
.u-font-lighter { font-weight: lighter; }
.u-font-default { font-size: 1.6rem; }
.u-font-small { font-size: 1.2rem; }
.u-font-medium { font-size: 1.4rem; }
.u-font-large { font-size: 2rem; }
.u-font-extra-large { font-size: 2.4rem; }
.u-font-super-large { font-size: 2.8rem; }
.u-font-mega-large { font-size: 3.4rem; }
.u-line-height-small { line-height: 1.2; }
.u-line-height-normal { line-height: 1.5; }
.u-line-height-large { line-height: 2; }
.u-white-space-normal { white-space: normal; }
.u-white-space-nowrap { white-space: nowrap; }
.u-text-center-sm { text-align: center; }
.u-text-center-md { text-align: center; }
.u-text-center-lg { text-align: center; }
.u-text-center-xl { text-align: center; }
Object Fit
<img class="u-object-fit u-object-fit--cover" src="/assets/images/xxx.jpg" alt="Image">
.u-object-fit {
object-fit: inherit;
width: 100%;
height: 100%;
}
.u-object-fit--contain {
object-fit: contain;
object-position: center;
font-family: "object-fit: contain; object-position: center;";
}
.u-object-fit--cover {
object-fit: cover;
object-position: center;
font-family: "object-fit: cover; object-position: center;";
}
.u-object-fit--fill {
object-fit: fill;
object-position: center;
font-family: "object-fit: fill; object-position: center;";
}
.u-object-fit--scale_down {
object-fit: scale-down;
object-position: center;
font-family: "object-fit: scale-down; object-position: center;";
}
Bordered
<div class="u-border u-border--bottom u-border--top-sm">
<!-- Add border (bottom border on 575px below, top border on 576 and above) -->
</div>
.u-border {
position: relative;
border-width: 1px;
border-style: solid;
border-color: #E0E0E0;
}
.u-border--top { border-width: 1px 0 0 0; }
.u-border--right { border-width: 0 1px 0 0; }
.u-border--bottomtom { border-width: 0 0 1px 0; }
.u-border--left { border-width: 0 0 0 1px; }
.u-border--hidden { border-style: hidden; }
.u-border--dashed { border-style: dashed; }
.u-border--dotted { border-style: dotted; }
.u-border--double { border-style: double; }
.u-border--groove { border-style: groove; }
.u-border--outset { border-style: outset; }
.u-border--inset { border-style: inset; }
.u-border--ridge { border-style: ridge; }
.u-border--solid { border-style: solid; }
.u-border--seq:last-of-type { border: none !important; }
List
<ul class="u-list">
<li><!-- List (Without style) --></li>
</ul>
.u-list { list-style-type: none; }
.u-list--column-1 { column-count: 1; }
.u-list--column-2 { column-count: 2; }
.u-list--column-3 { column-count: 3; }
.u-list--column-4 { column-count: 4; }
.u-list--column-5 { column-count: 5; }
.u-list--column-6 { column-count: 6; }
.u-list--column-7 { column-count: 7; }
.u-list--column-8 { column-count: 8; }
.u-list--column-9 { column-count: 9; }
.u-list--column-10 { column-count: 10; }
.u-list--gap-10 { column-gap: 10px; }
.u-list--gap-20 { column-gap: 20px; }
.u-list--gap-30 { column-gap: 30px; }
.u-list--gap-40 { column-gap: 40px; }
.u-list--gap-50 { column-gap: 50px; }
.u-list--gap-60 { column-gap: 60px; }
.u-list--gap-70 { column-gap: 70px; }
.u-list--gap-80 { column-gap: 80px; }
.u-list--gap-90 { column-gap: 90px; }
.u-list--gap-100 { column-gap: 100px; }
.u-list--none-sm { list-style: none; }
.u-list--none-md { list-style: none; }
.u-list--none-lg { list-style: none; }
.u-list--none-xl { list-style: none; }
Color
<div class="u-background-color-dark">
<p class="u-color-light">Text color is light, container color is dark.</p>
</div>
Text color is light, container color is dark.
.u-xxx-primary {
color: #263238;
color: var(--primary, #263238);
}
.u-xxx-secondary {
color: #37474F;
color: var(--secondary, #37474F);
}
.u-xxx-success {
color: #4CAF50;
color: var(--success, #4CAF50);
}
.u-xxx-warning {
color: #FF9800;
color: var(--warning, #FF9800);
}
.u-xxx-danger {
color: #E53935;
color: var(--danger, #E53935);
}
.u-xxx-info {
color: #03A9F4;
color: var(--info, #03A9F4);
}
.u-xxx-light {
color: #FAFAFA;
color: var(--light, #FAFAFA);
}
.u-xxx-dark {
color: #424242;
color: var(--dark, #424242);
}
.u-xxx-grey-50 {
color: #FAFAFA;
color: var(--grey-50, #FAFAFA);
}
.u-xxx-grey-100 {
color: #F5F5F5;
color: var(--grey-100, #F5F5F5);
}
.u-xxx-grey-200 {
color: #EEEEEE;
color: var(--grey-200, #EEEEEE);
}
.u-xxx-grey-300 {
color: #E0E0E0;
color: var(--grey-300, #E0E0E0);
}
.u-xxx-grey-400 {
color: #BDBDBD;
color: var(--grey-400, #BDBDBD);
}
.u-xxx-grey-500 {
color: #9E9E9E;
color: var(--grey-500, #9E9E9E);
}
.u-xxx-grey-600 {
color: #757575;
color: var(--grey-600, #757575);
}
.u-xxx-grey-700 {
color: #616161;
color: var(--grey-700, #616161);
}
.u-xxx-grey-800 {
color: #424242;
color: var(--grey-800, #212121);
}
.u-xxx-grey-900 {
color: #212121;
color: var(--grey-900, #212121);
}
.u-xxx-white { color: #FFF; }
.u-xxx-black { color: #000; }
Image
<img class="u-image-fluid u-block u-mar" src="/assets/images/xxx.jpg" alt="Center Block Fluid Image">
.u-image-fluid { max-width: 100%; }
.u-object-fit {
object-fit: inherit;
width: 100%;
height: 100%;
}
Include
Some great works that are included in Moonshine.
What's new?
Moonshine v1.6.5
- Code improvements.
- Minor changes and fixes.
Moonshine v1.6
- Added extra-small(xs) media query.
- Added alternative grid system (10 columns).
- Made changes to some utility styles.
- Some minor changes and fixe.s
Moonshine v1.5.4
- Updated "utility" styles.
- Updated "normalize" (modified).
- Minor changes and fixes.
Moonshine v1.5.3
- Added condition to enable/disable media queries.
- Added style for forms e.g. label, input, textarea, etc...
- Updated above the fold (ATF) illustration.
- Minor changes and fixes.