Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/cbrauckmuller/helium

A responsive frontend framework that won't weigh you down.
https://github.com/cbrauckmuller/helium

Last synced: 14 days ago
JSON representation

A responsive frontend framework that won't weigh you down.

Awesome Lists containing this project

README 

        
See a demo - check out Helium in action over at https://fundrise.com



#Welcome to Helium



Helium is a frontend responsive web framework for rapid prototyping and production-ready development using HTML5 and CSS3. In many ways it is similar to both Twitter Bootstrap and ZURB Foundation - in fact, it uses bits of their code. Unlike either of these two frameworks, however, Helium is designed to be much more lightweight and easier to tinker with. Think of it as a classic car where you can pop open the hood and easily work on the engine. The compiled default CSS file weighs in at a comparatively tiny 30k, versus approximately 100k for Bootstrap and almost 200k for Foundation.



## Built with Sass + Compass



Helium is built using Sass and Compass. I chose this preprocessor and mixin library, respectively, because they make working with CSS3 a lot easier than any other combination I have encountered to date.



## Install Helium



All you need to do is clone this repository to your machine and then point CodeKit to it. The `config.rb` file in the root will tell CodeKit what to do. If you're not using a Mac or you don't have CodeKit there are other ways to compile SASS and Compass that I won't get into here.



# The Grid



Helium uses a nestable grid based on fluid-width columns, based largely off the one found in ZURB Foundation. Each column's width is expressed as a percentage rather than a fixed number of pixels, so as the width of the viewport grows or shrinks, the grid does too.



## Selectively Responsive



By default, Helium uses a fixed-width layout. However, making it responsive is as simple as adding a class of `responsive` to the `` element of your page. Responsive design is by its nature rather resource-intensive, so I built Helium to allow you to toggle responsive behavior on a per page basis so you can build out responsive pages as time and budgets permit. You can also use the `responsive` class as a hook to target only responsive pages with your SCSS. 



	



## Sass Variables



There are three Sass variables that will determine the makeup of your grid. As with nearly every other variable in Helium, these are stored in `scss/config.scss`



### $page-width



(pixels) This is the width of your content if you are using a fixed-width design, or the maximum width of your content if you are using a responsive design.



### $column-count



(positive integer) The number of columns you would like in your grid. Some designs call for 12, others for 16, or for a simple site you might just want 3 or 6.



### $column-gutter



(pixels) The amount of space between your columns.



If you are clever with your math, you can ensure that the column widths are round multiples of 10 pixels. This can be helpful on a fixed-width design. For example, a $page-width of 940px, $column-count of 12 and $column-gutter of 20px will give you 60px wide columns. These are the same values used by the popular 960 grid system.



## Grid Markup



The markup for building a grid in Helium is very lightweight and should look familiar to you if you've ever used ZURB Foundation, 960gs or Bootstrap. Keep in mind that the sum total of the `spanX` elements in a row must not exceed the value set for the `$column-count` variable in `config.scss`. The markup below would be appropriate for a 12 column grid.



	


		


			


			


			

			


			


			

			


			


		


	



## The Breakpoint



### $responsive-breakpoint



(pixels) At a certain point, you are going to want your multi-column grid to collapse into a single column as the individual columns will start to become too narrow. By default, this is set to 767px, so anything smaller than an iPad in portrait mode with get a single-column layout. Feel free to adjust this value as your design requires.



# Buttons



Buttons are a big component of any UI. Helium tries to include many common button patterns without making too many assumptions about how you will use them.



## Basic button style



A clean, uniform button style for all kinds of UI tasks. Keep in mind that you can use the `button` class on both `` and `` elements.



	Here's a button

	

	Here's another

	

## Large buttons



Often times, you want your primary call to action button to be larger than other UI buttons. Just append an additional class of `button-large`.



	I’m a call to action!

	

## Small buttons



Sometimes you need to fit buttons in a smaller space or de-emphasize them. Just append a class of `button-small`.



	I'm a small button

	

## Pill buttons



Perfect for centered buttons or buttons that hang out by themselves. Just append a class of `button-pill`.



	Take the red pill



## Button groups



These work great for toolbars, sub-navigation, toggling view options, etc.



	


		One if by land

		Two if by sea

		Three if by teleporter

	



## Buttons with icons



It’s easy to add an icon of your choice to your buttons.



In this case, the icon is the only thing in the button.

	

	

	

You can also prepend icons to button text. Icons will center themselves vertically.



	I have an icon

	

## Button icons with dividers



Sometimes, you want a divider between icon and button text



	I have a divided icon

	

## Buttons with dropdowns



Adding a nicely-styled dropdown menu to a button is dead easy. The markup for the dropdown itself is identical to that used on the navbar.



	


		I am another 

		

	


	

## Custom buttons



Perhaps the most powerful component of the buttons module in Helium is the ability for you to create custom-styled buttons by just four arguments to a SASS mixin.



	&.button-facebook {

		@include button-custom(

			$theme: $button-theme, 

			$background-color: $facebook-blue, 

			$text-color: #fff, 

			$reversed: true	

		);

	}



You can see in the example above that we call the `button-custom` mixin and pass four arguments.



### $theme



This argument can take one of two values, `glossy` or `flat`. Of course, you can also pass in `$button-theme` so it inherits whatever you have the global default set to, which is what I have done here.



### $background-color



This can take a hex value or a solid CSS color like `blue`. If `$button-theme` is set to `glossy`, the mixin will automatically build nice gradients and highlights for you.



### $text-color



The color of the button text. Pretty self-explanatory.



### $reversed



Boolean. If set to `true` it means that the button's background color is dark whilst the text is light (often white). If set to `false` it means the opposite is the case. Setting this variable helps the mixin add subtle shadows that enhance the contrast of the button.



# Forms



Forms in Helium are build to be responsive-ready from the start. Two common design patterns are available out of the box - labels above fields and labels to the left of fields. Both of these are useful in different scenarios. At the `$responsive-breakpoint`, however, the labels left of fields style collapses to labels above fields to ensure the design doesn't break on mobile devices.



## Basic form markup



Forms in Helium are split into `field-group` elements which consist of a `field-label` and its accompanying `fields`, plus any help or error text that may appear based on validation (more on that later).



	

		


			Email address

			

			


				

			


		


	

	

## Labels left of fields



Putting labels to the left of fields is as simple as adding the `labels-left` class to your `` and then incorporating the Helium grid markup. In the example below, I've wrapped the `field-labels` with a `span3` and the `fields` with a `span9` but you can adjust those to compensate for longer or shorter label text.



	



		


			


			

				


					First name

				


				

				
								

					


						

					


				


			


		


	

	

	

In the same manner as the rest of the fluid grid, the "labels left of fields" form style will collapse into a traditional "labels on top of fields" design when the viewport width drops below the `$responsive-breakpoint` (767px by default).



## Additional form styles



Helium comes with a suite of additional form styles to make your life easier.



### Instructional/help text under the field



This is useful for additional, clarifying instructions that won't fit in the label.



	


		

		

		


			This is a small 3 digit number on the back of your card.

		


	



### Radio/checkbox lists



For lists containing multiple radio or checkbox options.



	


		
    

    			
  • 

    				Product inquiry

    			
    • 

    			
  • 

    				Product inquiry

    			
    • 

    			
  • 

    				Here’s a really, really long item that goes onto two lines

    			
    • 

    		


	



### Error messages



As you can see below, we've appended a class of `error` to the `field-group` and added a new object with a class of `error-message` directly after the input.



	


		Last name

		


			

			
You’ve got some problems, man.