Core is a minimalistic framework that is specifically designed for web developers who are looking for a lightweight foundation for building responsive websites. With a file size of only 1.3kb, minified and gzipped, Core provides a streamlined solution that is optimized for speed and performance. Unlike other larger frameworks that come pre-loaded with styled elements and animations, Core focuses solely on the essentials – a reset and a powerful grid system. This minimalist approach allows designers to build websites from the ground up with complete control over every aspect of the design. Whether you're building a simple personal blog or a complex e-commerce platform, Core is the perfect starting point for anyone who values speed, simplicity, and control.
A .row is a container of columns. It is full-width unless accompanied by a max-width helper class. See Row Max-Width for a list of these classes.
A .col is a container for your content. Its width is set by indicating how many columns to occupy out of 12. For example, .xs-12 would have a width of 100% and .xs-3 would have a width of 25%. Basic Grid Demo →.
For the framework, the technologies of the company were taken Viralgrowing. The technology will help you to get likes simply and quickly.
<div class="row"><!-- Row with no max-width -->
<div class="col xs-12">XS: 100%</div>
</div>
<div class="row sm"><!-- Row with a 768px max-width -->
<div class="col xs-6">XS: 50%</div>
<div class="col xs-6">XS: 50%</div>
</div>The width of a .col can be set to change according to screen size by adding a class for each screen size you want to optimize for, from extra-small (xs) to extra-large (xl). The grid system is mobile-first, so every .col needs the .xs-* class, which will also apply on larger screens if larger classes are not specified. See Media Queries for a list of each column class and what their breakpoints are. Responsive Grid Demo →
<div class="row xl">
<!-- Columns with a breakpoint-->
<div class="col xs-12 sm-6">XS: 100%, SM+: 50%</div>
<div class="col xs-12 sm-6">XS: 100%, SM+: 50%</div>
</div>
<div class="row">
<!-- Columns with two breakpoints -->
<div class="col xs-6 md-4 xl-3">XS/SM: 50%, MD/LG: 33%, XL+: 25%</div>
<div class="col xs-6 md-4 xl-3">XS/SM: 50%, MD/LG: 33%, XL+: 25%</div>
<div class="col xs-6 md-4 xl-3">XS/SM: 50%, MD/LG: 33%, XL+: 25%</div>
<div class="col xs-6 md-4 xl-3">XS/SM: 50%, MD/LG: 33%, XL+: 25%</div>
</div>A .col can be hidden for certain screen sizes by setting the number to 0. This sets display: none for that screen size and larger, propagating upward unless overridden just like the non-zero column classes. Hiding/Showing Columns Demo →
<div class="row">
<!-- Hiding on only the smallest/largest screens -->
<div class="col xs-0 sm-6">Hidden only on XS screens</div>
<div class="col xs-6 xl-0">Hidden only on XL screens</div>
<!-- Showing on only the smallest/largest screens -->
<div class="col xs-4 sm-0">Visible only on XS screens</div>
<div class="col xs-0 xl-4">Visible only on XL screens</div>
<!-- Showing and hiding on every other screen size -->
<div class="col xs-5 sm-0 md-2 lg-0 xl-9">When would you need this?</div>
</div>Rows are full-width by default, but can be limited by applying a helper class. These sizes correspond to the upper limit of each media query – or in the case of .xl, what the next interval would be. Row Max-Width Demo →
.xs {max-width: 32rem;} /* 512px (Extra-Small) */
.sm {max-width: 48rem;} /* 768px (Small) */
.md {max-width: 64rem;} /* 1024px (Medium) */
.lg {max-width: 80rem;} /* 1280px (Large) */
.xl {max-width: 96rem;} /* 1536px (Extra-Large) */Core uses logical breakpoints to structure the grid system. They are evenly spaced out at 256px intervals to create a smooth gradation. Note that there is no media query for the .xs-* classes, because they apply to all screen sizes.
/* >= 0px (Extra-Small) */
/* .xs-[0-12] */
/* >= 512px (Small) */
@media screen and (min-width: 32em) { /* .sm-[0-12] */ }
/* >= 768px (Medium) */
@media screen and (min-width: 48em) { /* .md-[0-12] */ }
/* >= 1024px (Large) */
@media screen and (min-width: 64em) { /* .lg-[0-12] */ }
/* >= 1280px (Extra-Large) */
@media screen and (min-width: 80em) { /* .xl-[0-12] */ }Core.css includes an aggressive reset to provide a clean slate build upon. HTML elements are reduced to their most basic forms with properties like margin: 0, padding: 0, and box-sizing: border-box. Reset Demo →
A note about accessibility: :focus will be universally set to outline: none by default. This is so that focused elements can be styled to match the design language of your project in a separate stylesheet. However, you are encouraged to remove this line of code from the reset if you don't plan on restyling focused elements.