PrimalCSS

Minimal CSS framework designed to survive responsive web development

Download v1.1

What is PrimalCSS?

PrimalCSS is a minimal and slim CSS framework

I started PrimalCSS as a codebase for my front-end projects because deploying responsive sites shouldn't be hard, right! PrimalCSS is built to start responsive and awesome sites with a small css footprint that aims simplicity and performance. PrimalCSS does not have all the bells and whistles or blob :-) other robust frameworks offer. PrimalCSS provides the basics typography, grids, layouts, buttons, utilities, and css resets that would get you up and running fast.

Specifications

Versionv1.1
Web technologyCSS
PreprosessorSass
ArchitectureSMACSS
Size ~5kb*
Size with vendors~8kb**
Performance ~92ms (time to load with file size 3.3kb)
VCSGIT
HostedGitHub
LicenseMIT

* Only PrimalCSS minify
** Minify version includes normalize.css and reset.css

Documentation

Getting Started

First, just download the zip version that fits your project. Ready, Go!

Get the compiled CSS. No source files are included.

Download CSS

If you are into SASS/SCSS I got you! get the source code and make something new!

Download Source code

You’re all set! Enjoy and don't forget to keep reading the rest of the documentation. Cheers!

Typography

Add rhythm to your typography

Modular scale and vertical rhythm built-in. Check out the sass settings for more type scales. If no font is set it will load whatever system font is available.

Small body text

Body text

H4 Heading

H3 Heading

H2 Heading

H1 Heading

<p> <small>Small body text</small></p>
<p>Body text </p>
<h4>H4 Heading</h4>
<h3>H3 Heading</h3>
<h2>H2 Heading</h2>
<h1>H1 Heading</h1>

Grid

Four Column Grid, Really!

Grid is fluid and mobile-first, four columns is all you need to get started, don't over think the grid. Less is more!

HTML class :grid-1
HTML class :grid-1
HTML class :grid-1
HTML class :grid-1
HTML class :grid-2
HTML class :grid-2
HTML class :grid-1
HTML class :grid-3
HTML class :grid-4
<!-- Must use .group to wrap grid elements -->
<div class="group"> 
  <div class="grid-1">
    <!-- Content here... -->
  </div>
  <div class="grid-3">
    <!-- Content here... -->
  </div>
</div>

Grid Mobile Helpers

Constraints content split in half on mobile media and breaks content into full-width on tablet breakpoint

HTML class :grid-2 grid-mobile-half
HTML class :grid-2 grid-mobile-half
<div class="group"> 
  <div class="grid-2 grid-mobile-half">
    <!-- Content here -->
  </div>
  <div class="grid-2 grid-mobile-half">
    <!-- Content here -->
  </div>
</div>
HTML class :grid-2 grid-mobile-full
HTML class :grid-2 grid-mobile-full
<div class="group"> 
  <div class="grid-2 grid-mobile-full">
    <!-- Content here -->
  </div>
  <div class="grid-2 grid-mobile-full">
    <!-- Content here -->
  </div>
</div>

Layouts

Semantic layouts for content, sidebars, features and more...

Getting a contet layout is fast and easy to implement, and easy to develop. More layouts can be created like navigation, header, footer and others

HTML class :l-feature
HTML class :l-feature
HTML class :l-feature
HTML class :l-content
<!-- Must use .layout to wrap layouts -->
<div class="layout">
<div class="l-content">
<!-- Main content here -->
</div>
<div class="l-sidebar">
<!-- Sidebar content here -->
</div>
</div>
<!-- Same-O wrap features with .layout -->
<div class="layout"> 
<div class="l-feature">
<!-- Feature content here -->
</div>
<div class="l-feature">
<!-- Feature content here -->
</div>
<div class="l-feature">
<!-- Feature content here -->
</div>
</div>

For single content page layout just add the content layout to the target element like so

HTML class :l-content l-centered
 <!-- METHOD 1: Using single content layout centered -->
<div class="layout">
  <div class="l-content l-centered">
    <!-- Main content here -->
  </div>
</div>
<!-- METHOD 2: content can be wrap by .container ONLY IF USING SINGLE LAYOUT! -->
<div class="container">
  <div class="l-content l-centered">
    <!-- Main content here  -->
  </div>
</div>  

Buttons

Every CSS framework should have buttons, right!

Primary buttons

Secondary buttons

 <button class="button-primary">Primary Buttons</button>
<button class="button-secondary">Secondary button</button>
<button class="button-primary button-round">Rounded button</button>
<button class="button-secondary font-small">Small button</button>

Want more buttons, I got it!

Just inherit the styles from Primary and Secondary buttons and change styles accordingly color, border, background, and hover state.

<button class="button-primary button-success">Success Button</button>
 .button-success{
  background-color: #5cb85c;
}
.button-success:hover{
  background-color: #449d44;
}