Optimized for all devices

Includes a responsive grid system

A responsive Sass/CSS3 framework for desktop and mobile web projects

Download CoreSheet

Compact and extensible

CoreSheet is a solid open source CSS framework for front-end web developers. It is completely customizable and comes with a set of styled HTML components. It provides a percentage-based responsive grid system and gives developers full control over the design settings.

Customizable and responsive Sass Grid

Customizable Grid

The underlying grid system of CoreSheet is fully customizable since it is generated from a single Sass mixin. You can define the number of columns as well as the gutter width. Columns can be pushed and extended to the right via special classes and there is even support for nesting down to one level.

Sass - Syntactically Awesome Style Sheets

Based on Sass

CoreSheet is based on Sass, the reliable CSS preprocessor. The framework is built up using variables and mixins so you're able to quickly adjust the compiled CSS output. The page configuration and design settings are stored in separate Sass files.

Styled common HTML elements

Common UI elements

The core idea of the framework is to provide web developers a set of base styles for common HTML elements. You'll get adjustable settings for headings, forms, tables, buttons and also CSS styled checkboxes and radio buttons. There are atomic classes for brand colors which will help you to organize your corporate design.

Take-off for your project

Take-off for your project

You don't have to start from zero since CoreSheet enables you to quickly set up your CSS environment. Whether you are creating a website or building a hybrid mobile app: the framework can help you to realize dynamic HTML pages for smartphones, tablets and desktop PCs. The code base is as minimal as possible and almost everything can be customized via Sass variables and mixins.

Get started

Custom user interface

CoreSheet comes with minimalistic user interface: there are style definitions for typography, forms, buttons and tables. Additionally, there are various types of navigation menus and a sticky footer is also included. So CoreSheet can be used for websites and mobile pages but also for web applications or hybrid mobile apps. The grid system ensures a responsive behavior.

The whole user interface underlies your control. There is a configuration Sass file for sizes and a theme Sass file where all colors are stored. The whole framework is built to customize so that it can fit a project's design requirments.

View components

Choose or build your theme

Choose or build your theme

The CoreSheet framework ships with a default color theme. It's easily adjustable since all colors are defined in a Sass file. Furthermore you can choose between other themes which simply consist of those color values. By importing another theme into your configuration, the colors get applied to all elements directly. The themes shall give an inspiration of how colors can be set in CoreSheet. The main idea is to provide developers the highest flexibility to create a corporate theme.

View themes

Tested, reduced and packaged

CoreSheet is a modern framework so it works perfectly in modern browsers. It relies on CSS3 so there is a wide range of supported browsers: Internet Explorer 9+, Edge, Firefox, Chrome, Opera and Safari as well as mobile browsers on iOS, Android and Windows Phones. CoreSheet is well tested and has a lightweight footprint of 32 KB (minified). It's also available as package via NPM and Bower.