Browse Source

adding styles

master
nirgendswo 7 years ago
parent
commit
d7d7aac320
2 changed files with 35 additions and 17 deletions
  1. +17
    -9
      README.md
  2. +18
    -8
      scss/example.scss

+ 17
- 9
README.md View File

@ -1,10 +1,14 @@
# cripsy-boilerplate
A simple mini-framework for basic styling and few Functions to simplify handling with values.
Flat Sass Boilerplate to give you a amount of Basic Settings, Mixins and Functions.
```
npm install crispy-boilerplate --save
```
## Components
There a few Components that also provide a Closure to adding additional Styles.
There a few Components, some are also provide a Closure to adding additional Styles.
### body
@ -12,15 +16,15 @@ Styles for Body, including Format for Fonts and Colors.
### button
Styles for Button.
Styles for Buttons.
### icon
Basic Styles for SVG-Icons.
Styles to use SVG as Icons.
### list
Additional Styles for lists, also Modificators for horzizonal lists.
Additional Styles for Lists and modificators.
### heading
@ -28,7 +32,11 @@ Styling h1-h6 and create also CSS-Classes with same name.
### normalize
Basic Normalizing for a few Elements. Also adding to some elements a basic margin.
Normalizing for a few Elements.
### text-colors
Creates text-colors modificators from a
## Functions
@ -40,8 +48,8 @@ Function to convert from px to em or rem.
### clearfix
Styling for Clearfix with pseudo-classes.
Styles for clearfix.
### fontSite
### font-size
Using pxToRem for font-size, also include a fallback to px.
Add font-size with fallback.

+ 18
- 8
scss/example.scss View File

@ -1,19 +1,29 @@
@import
'CrispyBoilerplate';
@include crispy-boilerplate-normalize();
@include crispy-boilerplate-align();
@include crispy-boilerplate-body();
@include crispy-boilerplate-button();
@include crispy-boilerplate-list();
@include crispy-boilerplate-text-colors();
@include crispy-boilerplate-normalize() {
// adding styles
};
@include crispy-boilerplate-body() {
// adding styles
};
@include crispy-boilerplate-button() {
// adding styles
};
@include crispy-boilerplate-heading() {
text-decoration: underline;
// adding styles
};
@include crispy-boilerplate-icon();
@include crispy-boilerplate-list();
@include crispy-boilerplate-text-colors();
@include crispy-boilerplate-icon() {
// adding styles
};
.clearfix {
@include crispy-boilerplate-clearfix();


Loading…
Cancel
Save