We are creating horizons, each new skyline is a unique, living outline that changes with the evolving architecture.
We're developing a shared vocabulary, creating common HTML modules with consistent naming conventions.
CSS is written in beautifully organized SCSS partials, grouped by the role each CSS rule and classname play.
Skyline is written to be mobile-first and comes with a flexible and customizable responsive layout system.
Incorporate the CSS of your favorite jQuery/JS plugins organized and extensible within the SCSS framework.
Skyline is a starting point for building custom CSS frameworks. The starter kit provides a solid CSS architecture that acts as a scaffolding to support your unique design system. It promotes object-oriented CSS, written in SCSS using BEM notation.
It’s not something you add to your CSS - this is your CSS. Skyline provides basic structural tools, and provides space for you to customize and create the design.
We wanted to keep the starter files as lean as possible. This isn't a self-contained app, it has demo images, example HTML, and the Skyline SCSS files in the CSS folder. You'll likely copy the SCSS files into your own app, and use the example HTML files as guides to mark up your own pages.
Base contains global settings, variables, resets, and mixins. These make up the foundation of your CSS.
Elements contains all the global styling for basic stand-alone elements; such as links, quotes, tables, and text.
Layout contains structural helper classes like .container, which restricts content to a consistent max-width, and a responsive grid system as well.
Modules are custom-made components that are used throughout your site. These include global modules like the site header and footer, and other reusable modules like alerts and heroes.
You can view the example pages in a browser, make sure you're compiling the SCSS if you want to see any changes you've made to the Skyline files reflected in the examples.
This is just the beginning. We're looking forward to building on Skyline, releasing new mixins, modules and layout systems - in addition to JavaScript plugins and a style guide generator based on the commenting syntax used in Skyline. Most importantly, we're looking forward to seeing where you can take it, how your contributions can help evolve CSS architecture.