Responsive Sass/CSS3 framework for desktop and mobile web projects
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. The framework can help you to realize dynamic HTML pages for smartphones, tablets and desktop PCs.
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.
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.
You can view the various HTML/CSS components and the grid system on the website. The components HTML template is also included in this package so you can start from a boilerplate.
To install CoreSheet you can download this respository or use NPM or Bower. If you choose NPM, just open the command prompt and install the package via this command.
$ npm install coresheet
For Bower use:
$ bower install coresheet
If you want to quickly start developing you can just pick the compiled coresheet.css or coresheet.min.css inside the dist directory. They include the CoreSheet default theme and a 12 column grid. In order to customize the framework or use another theme, you'll need to compile the Sass files. See below how to accomplish this.
The underlying layout of CoreSheet represents a horizontally centered container where the grid system is placed in. One component of the framework is the sticky footer which will always remain at the bottom or be pushed down by the last element if a scrollbar exists. The following code shows the basic HTML structure which is needed for the primary CoreSheet components.
<body> <div class="page"> <div class="middle"> <div class="row"> <div class="col12"> ... </div> </div> </div> <div class="footer-dock"></div> <div class="footer"> ... </div> </div> </body>
The container with the class middle is a block element and can be used for full width backgrounds. You can use as many of this elements as you want.
The final output of CoreSheet is pure CSS code which applies various styles to the HTML document. These can be divided into native and custom styles. Native styles are applied to common HTML elements like input, table, image, h1 and so on. There are only a few declarations for normalization. Most of the native stylings are connected to Sass variables in order to optimize their appearance.
The custom styles are represented by own CSS classes like page, middle, footer or col12. Those create a special user interface element. There are also some atomic classes for brand colors and text transformation. They get generated by Sass mixins and configuration variables so you can fully control the final CSS output.
To get an overview of the available CSS classes you can simply check out the components template. You will also find the respective HTML/CSS code snippets on that page.
The heart of CoreSheet is a collection of Sass variables and mixins which generate the final output. It consists of three SCSS files: the framework itself (coresheet.scss), the configuration (coresheet-config.scss) and a theme (coresheet-theme.scss). The usual workflow for CoreSheet is to choose or modify a theme and adjust the configuration. Modifications on the framework core are easy to do but not necessary. You will find a commented version of the coresheet-config.scss on the website
If you want to simply compile CoreSheet into a CSS file, you can install node-sass and use it via command line. The ideal solution to compile all Sass files of the framework is possible via Gulp. There is a ready-made gulpfile.js in the CoreSheet package which will do all the work. It can compile the Sass files directly or through a watcher. Head over to your CoreSheet directory and use the following commands.
$ npm install $ gulp
To start a file watcher for the Sass files, use this.
$ gulp watch
The gulp commands will both compile coresheet.scss, coresheet-config.scss and the referenced coresheet-theme.scss files into coresheet.css and coresheet.min.css in the dist directory.
CoreSheet supports color themes which are defined through Sass variables. You can apply a theme by importing the Sass file in your CoreSheet configuration. You'll find previews of all current themes here. You can create your own theme or a public one and submit it via pull request.
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 released under the MIT license.