Making Bootstrap the rapid prototyping tool that it should be.
Out of the box file can be found at src/css/strapper.min.css.
Include the file after Bootstrap and before your own custom styles:
<head>
...
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="...strapper.min.css">
<link rel="stylesheet" href="...">
...
</head>The source code can be found at ./src/scss/strapper.scss. This can be edited to your own specifications and desires.
In order to do this, you can clone the repository by running:
$ git clone git@github.com:ccabo1/strapper.git
Once this is completed, make sure your packages are up to date and configured:
$ npm install
To get to work, run:
$ gulp
Keep running this while you edit the scss file. Gulp will automatically compile the scss on save into the minified css file in the css folder. If there are any errors with compilation, they will come up in the terminal window running gulp.
If you have any problems or feature requests, open an issue.
Bootstrap, in large part, does a great job of doing what it sets out to: Bootstrap websites are naturally responsive, mobile-first, structured, accessible, etc. The one place where Bootstrap needs improvement is, ironically enough, bootstrapping--that is, quickly putting together website for proof of concept that can later be personalized.
Strapper aims to fix this problem by adding a small set of classes on top of Bootstrap's existing framework to make positioning, sizing, and basic styling easier. I found myself repeatedly writing the very same classes for every project, so I thought it best to combine them into a reusable, modular CSS framework.
Quickly add the padding you need to an element.
pad-0: no padding at allpad-1: padding of1rempad-2pad-3pad-0-1: no padding on top and bottom,1rempadding on either sidepad-0-2pad-1-0pad-2-0pad-1-2pad-2-1
Add in a full-width spacer between elements.
space-0:0remtall spacer- Good especially with
inlinealigned items to ensure everything stays on the right line.
- Good especially with
space-1:1remtall spacerspace-2space-3space-4
Customize space between elements with ease.
marg-0: no marginmarg-top-0: no top marginmarg-top-1:1remtop marginmarg-top-2marg-bot-0marg-bot-1marg-bot-2marg-right-0marg-right-05:0.5remright marginmarg-right-1marg-left-0marg-left-05marg-left-1
round-1: 0.25rem border-radiusround-2: 0.5rem border-radiusround-3round-4
Better organize your website with delineating borders and lines.
border: standard gray borderlight-border: lighter gray borderline-0: full-width line with no vertical marginsline-1: fill-width line with1remtop and bottom marginsline-2light-line: addition tolineclasses for a lighter color to match thelight-border
Quickly set standard colors and styles for text and elements alike.
black: set the background to blackwhitelight-graygraywhite-bluepurplegreenblueblack-text: set text color to blackblack-text-important: set color to black in all casesblack-text-hover: set color to black on hover
white-textwhite-text-important: set color to black in all caseswhite-text-hover: set color to black on hover
gray-textlight-gray-textblue-gray-textblue-textpurple-textgreen-textno-decoration: remove decoration, especially underlining on link hoverbold: bolden textitalic: italicize textcaps: capitalize text
Add extended depth with shading classes.
shade-1: lightest and shortest shadowshade-2shade-3shade-4: darkest and longest shadowhover: appended to a shade class to shorten and darken the element on hover
Make elements do the job they are supposed to.
cursor: changes the cursor to ahand/pointer--the same as when hovering a link, for example.animate: apply a0.2stransition to an element
Display elements the way you want them to.
absolute: absolute positionfixed: fixed positionrelativeinline: display inlineblock: display blockfull-width:100%widthleft: text align leftfloat-left: float items leftrightfloat-rightcenter: full-width with center alignmentbackground-image: center and properly size a background image- Use a unique ID to add the background image easily with CSS
parallax: give the background image a parallax scrolling effect on larger devices
Additional, reusable modules for displaying information.
ul.horizontal: horizontal, simple left-aligned list. Good for navigation and icons.right: append this class in order to right align the horizontal form- Padding between items is
1remby default