Coder Social home page Coder Social logo

base's Introduction

Base is a semantic, lightweight and extensible framework to power the next generation of responsive websites.

It's created and maintained by the team at @agencysc. Head over to base.gs to try it out and follow @BaseGS for framework updates.

Note: this is Base v2 (SASS), for Base v1 (LESS) check v1 Branch

Get Started

Getting started building websites with Base is easy. You can:

What's Inside

When you download Base you'll see a boilerplate index.html file and a folder structure like this:

   js
    │   ├── modules
    │   │   └── theme.js
    │   ├── plugins
    │   └── site.js
    └── scss
        ├── _fonts.scss
        ├── _global.scss
        ├── _reset.scss
        ├── _type.scss
        ├── _variables.scss
        ├── base.scss
        ├── components
        │   ├── _buttons.scss
        │   ├── _forms.scss
        │   ├── _menus.scss
        │   └── _tooltips.scss
        ├── mixins
        │   ├── _grid.scss
        │   └── _helpers.scss
        └── partials
            ├── _footer.scss
            └── _grid.scss

Installation

git clone https://github.com/agency/base
cd base
npm install 
gulp dev

Update your development workflow, view, and make changes to gulp tasks in gulpfile.js

Using Base

Base is easiest to learn by playing with the code. The default index.html file contains a quick reference for the reset and grid mixins and grid.html contains grid examples. For more detail view the instructions below.

Grid

Base grid system allows you to build responsive layouts without having to overwrite column styles for every breakpoint. Based on your grid settings Base will automatically generate column styles and grid widths for all of your breakpoints, responding to different grid configurations (ie. 12 columns on desktop and 1 on mobile).

Grid settings can be found and updated in _variables.scss. You can add as many breakpoints as you like!

// Breakpoints
// -------------------

$breakpoints: (
	'mobile': (max-width: 736px),
	'tablet': (max-width: 1024px),
	'desktop': (min-width: 1200px),
);

// Include gutter on outside 
$gutterOnOutside: true;

// Breakpoints Grid Settings
// -------------------

$grid-settings: (
	base: (
		container-columns: 12,
		gutter: 1%,
		max-width: 1100px,
	),
	desktop: (
		container-columns: 12,
		gutter: 1%,
		max-width: 1200px,
	),
	tablet: (
		container-columns: 12,
		gutter: 5%,
	),
	mobile: (
		container-columns: 1,
		gutter: 5%,
	)
);

There are two grid systems that you can use - one with outer gutters and one without. Update $gutterOnOutside: true; in _variables.scss value to change grid setttings.

Use @include container(); to create centered container with an optional max width set in the breakpoint.

Base and other breakpoints (mobile, tablet, etc) styles are automatically generated based on your grid settings.

.container {
  @include container();
}
/* Compiled CSS */
container {                   /* Base */
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.container:after {
  content: "";
  display: table;
  clear: both;
}
@media (max-width: 1024px) {  /* Tablet  */
  .container {
    max-width: 100%;
  }
}
@media (max-width: 736px) {   /* Mobile */
  .container {
    max-width: 100%;
  }
}

Use @include columns($columns) to specify the number of columns your element should take.

Base and other breakpoints (mobile, tablet, etc) styles are automatically generated based on your grid settings.

.element {
	@include columns(5);
}
/* Compiled CSS */
.element {                     /* Base */
  display: block;
  float: left;
  width: 39.6666666667%;
  margin-left: 1%;
  margin-right: 1%;
}
@media (max-width: 1024px) {   /* Tablet */
  .element {
    display: block;
    float: left;
    width: 31.6666666667%;
    margin-left: 5%;
    margin-right: 5%;
  }
}
@media (max-width: 736px) {    /* Mobile */
  .element {
    display: block;
    float: left;
    width: 94%; /* Creates full width element because mobile $container-columns equals 1 */
    margin-left: 3%;
    margin-right: 3%;
  }
}

Use @include columns($columns, $offset, $gutter) to modify offset and default gutter values

.second-element {
	@include columns(5, 3, 4%);
}

Use @include responsive-columns('breakpoint', $columns, $offset, $gutter); to modify default breakpoint settings

For example, to create two 50% columns on mobile view with $container-columns: 1 use:

.sibling-element {
	@include responsive-columns('mobile', 0.5);
}
/* Compiled CSS */
@media (max-width: 736px) { /* Mobile */
  .sibling-element {
    display: block;
    float: left;
    width: 44%;
    margin-left: 3%;
    margin-right: 3%;
  }
}

For more grid examples check grid.html

Bugs & Feature Requests

If you find bugs or have any feature requests please open a new issue. It helps if you’re clear about how to reproduce the issue, and what might be causing it.

Contributing

Pull requests are very welcome. Please follow the same coding style already set within the Base files and keep commits as clean as possible with a detailed explanation of what your pull request is doing.

Base is maintained through the master branch, bundled into releases as required. Experimental or major features will split out into separate branches.

Authors & Key Contributors

Copyright

Copyright 2016 Agency Strategic Creative under the Apache 2.0 license.

base's People

Contributors

katiaeirin avatar murraybunton avatar ryenbeatty avatar scottsanders avatar tommaitland avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.