The Spooky "framework" contains just the basic for your project. You should be Spooked if you want a starting point or some of the features presented here to start your project. With Spooky you can suit the basics needs of modern web for a simple project or use as a starting point to bootstrap your on UI framework.
I'm a short paragraph, followed by some really long lorem ipsum. Duis id sollicitudin leo. Curabitur dolor tellus, tristique nec sapien vitae, mollis fringilla dui. Ut venenatis non urna a viverra. Donec nec aliquam felis, a rhoncus ex. Vivamus eget vulputate nisl, in rhoncus nibh. Duis tortor metus, cursus ac est vitae, congue commodo lacus.
Mauris iaculis orci sit amet nunc pharetra, nec ultrices nunc ornare. Sed dapibus nunc est. Nulla vel tortor a velit dapibus consectetur. Cras at lacus in tortor ornare ullamcorper. Proin feugiat tempor sapien sed mollis. Vivamus non lorem ante. Suspendisse sed posuere eros. Phasellus eget pellentesque ipsum. Mauris pulvinar ipsum dui. Pellentesque ultrices id nisl et lobortis. Proin sed turpis vitae ex finibus ultricies vel sollicitudin turpis. Sed diam odio, dictum sed nulla vitae, suscipit tincidunt dui. Sed vitae ante a enim accumsan vulputate sed in lectus. Cras vel semper velit.
Uppercase Modifier, Lowercase Modifier, Italic Modifier, Bold Modifier, Underline Modifier ...
<!-- Standard Headings -->
<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<!-- Base type size -->
<p>The base type is 15px over 1.6 line height (24px)</p>
<!-- Other styled text tags -->
<strong>Bolded</strong>
<em>Italicized</em>
<a>Colored</a>
<u>Underlined</u>
<!-- Classes -->
.uppercase .lowercase .italic .bold-heade .underline
The grid is a 12-column fluid grid with a max width of 960px, that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS and all columns will resize accordingly. Additionally, you can use the built in .container-sm for a max-width of 750px, or .container-lg for a max-width pf 1170px. The syntax is simple and it makes coding responsive much easier. Go ahead, resize the browser.
<!-- .container is main centered wrapper -->
<div class="container full-width">
<!-- columns should be the immediate child of a .row -->
<div class="row">
<div class="col-1">One</div>
<div class="col-11">Eleven</div>
</div>
<!-- just use a col- and class the column number -->
<div class="row">
<div class="col-2">Two</div>
<div class="col-10">Ten</div>
</div>
</div>
<!-- Note: columns can be nested, but it's not recommended since Spooky's
grid has %-based gutters, meaning a nested grid results in variable with gutters (which can end up being *really*
small on certain browser/device sizes) -->
Spooky provide some handy classes to help you with flex-box alignment within your itens. You can turn an iten "flexible" by adding the .flex class, and then complementing it's flex-align with classes like .flex-start, .flex-center and .flex-end. More to come soon on the flex-box subject.
<!-- Applying flex classes -->
<div class="container flex flex-center">
<div class="row">
<div class="col-1">.col-1</div>
<div class="col-11">.col-11</div>
</div>
</div>
Forms are a huge pain, but hopefully these styles make it a bit easier. All inputs, select, and buttons are normalized for a common height cross-browser so inputs can be stacked or placed alongside each other. The're some utilities classes to be applied on forms to, like the .clear, that keeps only the bottom bar of the element, and .lg and .sm that changes the size of the element.
<!-- The above form looks like this -->
<form>
<div class="row">
<div class="col-12 pd-5 pd-cl-v">
<input class="full-width lg clear center-text" type="text" placeholder="Project Name" id="exampleProjectNameInput">
</div>
</div>
<div class="row">
<div class="col-6 pd-5 pd-cl-v">
<label for="exampleEmailInput">First name</label>
<input class="full-width clear" type="text" placeholder="John" id="exampleNameFirstInput">
</div>
<div class="col-6 pd-5 pd-cl-v">
<label for="exampleEmailInput">Last name</label>
<input class="full-width clear" type="text" placeholder="Snow" id="exampleNameLastInput">
</div>
</div>
<div class="row">
<div class="col-6">
<label for="exampleEmailInput">Your email</label>
<input class="u-full-width" type="email" placeholder="test@mailbox.com" id="exampleEmailInput">
</div>
<div class="col-6">
<label for="exampleRecipientInput">Reason for contacting</label>
<select class="u-full-width" id="exampleRecipientInput">
<option value="Option 1">Questions</option>
<option value="Option 2">Admiration</option>
<option value="Option 3">Can I get your number?</option>
</select>
</div>
</div>
<div class="row col-12">
<label for="exampleMessage">Message</label>
<textarea class="u-full-width" placeholder="Hi Dave …" id="exampleMessage"></textarea>
<label class="example-send-yourself-copy">
<input type="checkbox">
<span class="label-body">Send a copy to yourself</span>
</label>
<input class="button-primary" type="submit" value="Submit">
</div>
</form>
<!-- Always wrap checkbox and radio inputs in a label and use a <span class="label-body"> inside of it -->
Spooky uses media queries to serve its scalable grid, but also has a list of queries for convenience of styling your site across devices. The queries are mobile-first, meaning they target min-width. Mobile-first queries are how Spooky's grid is built and is the preferrable method of organizing CSS. It means all styles outside of a query apply to all devices, then larger devices are targeted for enhancement. This prevents small devices from having to parse tons of unused CSS. The sizes for the queries are:
/* Mobile first queries */
/* Larger than mobile */
@media (min-width: 400px) {}
/* Larger than phablet */
@media (min-width: 850px) {}
/* Larger than desktop */
@media (min-width: 1000px) {}
/* Larger than Desktop HD */
@media (min-width: 1200px) {}
Within Spooky come some spacing features to use as default, with this spacings you can better position elements with ease. You'll have margin and padding with some default px units and also some clears. You can go all the way from .ma-0 for a 0 margin to .ma-80 for a 80px margin. There're some clears that may vary from .ma-cl-v to clear vertical margins to .ma-cl-t to clear only the top margin. All this apply to padding to, just change the ma to pd, just like .ma-80 --> .pd-80 or also .ma-cl-v --> .pd-cl-v. You get it.
<!-- Spacing Classes -->
<!-- Give a left margin of 80px -->
<div class="ma-80 ma-cl-v"> </div>
<!-- Give a top padding of 60px -->
<div class="pd-60 pd-cl-h pd-cl-b"> </div>