SDFFramework

sdfCSS Framework Ver 0.3

A css framework which combines the best of flexbox with a clearfix block grid.

Flexbox Grid

sdf-2
sdf-2
sdf-2
sdf-2
sdf-2
sdf-2
sdf-3
sdf-3
sdf-3
sdf-3
sdf-4
sdf-4
sdf-4
sdf-6
sdf-6
sdf-12
<div class="sdf-grid">
   <div class="sdf-cell sdf-2">sdf-2</div>
   <div class="sdf-cell sdf-3">sdf-3</div>
   <div class="sdf-cell sdf-4">sdf-4</div>
   <div class="sdf-cell sdf-6">sdf-6</div>
   <div class="sdf-cell sdf-12">sdf-12</div>
</div>

Clearfix Block Grid

sdf-2
sdf-2
sdf-2
sdf-2
sdf-2
sdf-2
sdf-3
sdf-3
sdf-3
sdf-3
sdf-4
sdf-4
sdf-4
sdf-6
sdf-6
sdf-12
<div class="sdf-container">
   <div class="sdf-row">
      <div class="sdf-col sdf-2">sdf-2</div>
      <div class="sdf-col sdf-6">sdf-6</div>
      <div class="sdf-col sdf-12">sdf-12</div>
   </div>
</div>

Friendly Nesting

Combine and nest grids and cells

Grid > Cell

Cell inside a grid

Grid > Cell > Grid > Cell

Cell inside Grid inside Cell inside Grid

Grid > Cell-Grid > Cell

Cell inside a Cell-Gridd inside a Grid

<div class="sdf-grid">
   <div class="sdf-cell sdf-12 sdf-sm-4">
      <p>Cell inside a grid</p>
   </div>
   <div class="sdf-cell sdf-12 sdf-sm-4">
      <div class="sdf-grid">
         <div class="sdf-cell sdf-12">
            <p>Cell inside a Grid inside a Cell inside a Gridd</p>
         </div>
      </div>
   </div>
   <div class="sdf-cell sdf-12 sdf-sm-4 sdf-grid">
      <div class="sdf-cell sdf-12">
         <p>Cell inside a Cell-Gridd inside a Grid</p>
      </div>
   </div>
</div>

You don't have to wrap the grid component inside another.
Each cell creates by default a 1rem (16px) horizontal padding. Inside a cell, the grid component creates a negative margin of 1rem (16px).
You can nest grid components inside cell component.
You can also combine grid and cell components on the same element for easy nesting.

C-C-Combo Breaker!

Combine flexbox and clearfix grids

I'm Flex
insde Flex!
I'm Block
inside Flex!
I'm Flex
insde Block!
I'm Block
insde Block!
<div class="sdf-grid sdf-fixed">
   <div class="sdf-cell sdf-grid sdf-12 sdf-xs-6">
      <div class="sdf-cell sdf-sm-6 sdf-12">
         I'm Flex insde Flex!
      </div>
      <div class="sdf-cell sdf-12 sdf-sm-6">
         <div class="sdf-row">
            <div class="sdf-col sdf-12">
               I'm Block inside Flex!
            </div>
         </div>
      </div>
   </div>
   <div class="sdf-cell sdf-12 sdf-xs-6">
      <div class="sdf-row">
         <div class="sdf-col sdf-12 sdf-sm-6">
            <div class="sdf-grid">
               <div class="sdf-cell sdf-12">
                  I'm Flex insde Block!
               </div>
            </div>
         </div>
         <div class="sdf-col sdf-12 sdf-sm-6">
            I'm Block insde Block!
         </div>
      </div>
   </div>
</div>

By having separated the cell/column size class modifier it's possible to have both grid systems coexist in the same space.
The only thing you have to remember is to use:
sdf-grid and sdf-cell for flexbox
sdf-container, sdf-row and sdf-col for a clearfix block grid.
sdf-col has a grid margin of 15px between each column

1.1Grid Breakpoints

sdf-12
sdf-xs-6
sdf-sm-4
sdf-md-3
sdf-lg-2
12/12 default
6/12 phablets
4/12 tablets
3/12 netbooks
2/12 desktop
2/12 blocks
min: 1200px
3/12 blocks
min: 992px
max: 1199px
4/12 blocks
min: 768px
max: 991px
6/12 blocks
min: 550px
max: 767px
12/12 blocks
max: 549px
min: 1200px
min: 992px
max: 1199px
min: 768px
max: 991px
min: 550px
max: 767px
max: 549px
sdf-lg-2
sdf-md-3
sdf-sm-4
sdf-xs-6
sdf-12
<div class="sdf-grid sdf-fixed">
   <div class="sdf-cell sdf-12 sdf-xs-6 sdf-sm-4 sdf-md-3 sdf-lg-2"> column </div>
   <div class="sdf-cell sdf-12 sdf-xs-6 sdf-sm-4 sdf-md-3 sdf-lg-2"> column </div>
   <div class="sdf-cell sdf-12 sdf-xs-6 sdf-sm-4 sdf-md-3 sdf-lg-2"> column </div>
   <div class="sdf-cell sdf-12 sdf-xs-6 sdf-sm-4 sdf-md-3 sdf-lg-2"> column </div>
   <div class="sdf-cell sdf-12 sdf-xs-6 sdf-sm-4 sdf-md-3 sdf-lg-2"> column </div>
   <div class="sdf-cell sdf-12 sdf-xs-6 sdf-sm-4 sdf-md-3 sdf-lg-2"> column </div>
</div>

1.3Auto size columns

auto
size
larger length
even more larger length
even more larger length than before
column
column
column

1.4Horizontal Center

sdf-12 sdf-xs-6
sdf-12 xs-8 sdf-sm-6
sdf-7 sdf-sm-6

1.5Vertical Center





1.6Vertical Top





1.7Vertical Bottom





2 Colors

default
primary
secondary
info
success
warning
danger
dark
light
default inverse
primary inverse
secondary inverse
info inverse
success inverse
warning inverse
danger inverse
dark inverse
light inverse

2.1Font Colors

Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem.

Primary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem.

Secondary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem.

Info

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem.

Success

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem.

Warning

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem.

Danger

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem.

Dark

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem.

4.0 Button & Colors

The background color of the buttons is adjusted depending on the color scheme of the parent block. This way you don't have to worry on having a button invisible on a specific color.
Here all the combinations possible. Notice for example that the primary button on a primary color scheme is darker, also the hover transition has been inversed.

4.1 Outline Button Colors

4.2 Button Sizes

3 Typography

h1 Lorem ipsum dolor sit amet

h2 Lorem ipsum dolor sit amet

h3 Lorem ipsum dolor sit amet

h4 Lorem ipsum dolor sit amet

Paragraphs with class sdf-paragraph are maximum 40rem in width which is aprox. 80 character in length per line. The line height is 160%, and the margin at the bottom is 0.75rem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.

Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.

7.0Forms

7.1Form Colors and Sizes

Big form
Small form
@
Tiny form
@

7.2Form input sizes

7.3Form focus outline

Focus on inputs to view the focus sizes

7.4Form input addons

@ domain.com
/var/user/home/

Single

!

Combine!

Text $ 0.0
#
@

Combine with sizes:

Text ! ~
Text ! ~

7.5Form fieldset grouping

@
#
!

7.3Form auto sizes

The form groups with auto size will take at least 140px of size and fill up the remaining space equaly

x.xHorizontal

3.1 Visibility blocks

visible default
visible extra small
visible small
visible medium
visible large
hidden
default
hidden
extra small
hidden
small
hidden
medium
hidden
large
<div class="sdf-grid">
   <div class="sdf-cell sdf-12 sdf-visible-df">visible default</div>
   <div class="sdf-cell sdf-12 sdf-visible-xs">visible extra small</div>
   <div class="sdf-cell sdf-12 sdf-visible-sm">visible small</div>
   <div class="sdf-cell sdf-12 sdf-visible-md">visible medium</div>
   <div class="sdf-cell sdf-12 sdf-visible-lg">visible large</div>
   <div class="sdf-cell sdf-6 sdf-sm-3 sdf-hidden-df">hidden<br>default</div>
   <div class="sdf-cell sdf-6 sdf-sm-3 sdf-hidden-xs">hidden<br>extra small</div>
   <div class="sdf-cell sdf-6 sdf-sm-3 sdf-hidden-sm">hidden<br>small</div>
   <div class="sdf-cell sdf-6 sdf-sm-3 sdf-hidden-md">hidden<br>medium</div>
   <div class="sdf-cell sdf-6 sdf-sm-3 sdf-hidden-lg">hidden<br>large</div>
</div>

3.xProgresive Visibility Blocks

visible-min
extra small
visible-min
small
visible-min
medium
visible-max
extra small
visible-max
small
visible-max
medium

3.xProgresive Hidden Blocks

hidden-min
extra small
hidden-min
small
hidden-min
medium
hidden-max
extra small
hidden-max
small
hidden-max
medium

3 Cards

Card Title

Cu clita malorum eruditi vel, an eum detraxit platonem, sed eu ridens aliquid.

Cu clita malorum eruditi vel, an eum detraxit platonem, sed eu ridens aliquid.

Lorem ipsum sit amet

Illum qualisque corrumpit vel ei, an pro denique definiebas, appareat appetere an nam.

Lorem ipsum sit amet

Cu clita malorum eruditi vel, an eum detraxit platonem, sed eu ridens aliquid.

Lorem ipsum sit amet

Danger!
Success!

Lorem ipsum sit amet

Cu clita malorum eruditi vel, an eum detraxit platonem, sed eu ridens aliquid.

Lorem ipsum sit amet

Lorem ipsum sit amet

Cu clita malorum eruditi vel, an eum detraxit platonem, sed eu ridens aliquid.

9Lists

  • First Quit
  • Second
  • Third
  • Forth
  • 1
    First Item
  • 2
    Second Item
  • 3
    Third Item
  • 4
    Forth Item
  • First
  • Second
  • Third
  • Forth
  • #
    First Item
  • @
    Second Item
  • !
    Third Item
  • #
    First Item
  • Second Item
  • Third Item
  • 1
    First Item
  • 2
    Second Item
  • 3
    Third Item

9.1Horizontal Lists

  • First Quit
  • Second
  • Third
  • Forth
  • 3
    User
  • Settings
  • Table

5Toasts

<script>
   // bottom toast
   sdf.toast.show("Hello, World! I'm a toast from the bottom");
   // top toast
   sdf.toast.show("Hello, World! I'm a toast from the top", {position: "top", class: "sdf-secondary"});
</script>

Sem a ullamcorper a natoque ultricies duis id porttitor nisl scelerisque varius dis vestibulum venenatis donec nibh metus.In at condimentum quam eleifend eu varius arcu a ridiculus vestibulum a convallis pretium sodales a nisi porttitor consectetur vestibulum tristique ad scelerisque quis fermentum convallis volutpat a.Est nam rutrum conubia ac tempus nec ullamcorper commodo imperdiet euismod nisl nibh habitasse adipiscing.Himenaeos ante adipiscing condimentum a pulvinar mi vel netus sit consectetur parturient.

Sem a ullamcorper a natoque ultricies duis id porttitor nisl scelerisque varius dis vestibulum venenatis donec nibh metus.In at condimentum quam eleifend eu varius arcu a ridiculus vestibulum a convallis pretium sodales a nisi porttitor consectetur vestibulum tristique ad scelerisque quis fermentum convallis volutpat a.Est nam rutrum conubia ac tempus nec ullamcorper commodo imperdiet euismod nisl nibh habitasse adipiscing.Himenaeos ante adipiscing condimentum a pulvinar mi vel netus sit consectetur parturient.

Sem a ullamcorper a natoque ultricies duis id porttitor nisl scelerisque varius dis vestibulum venenatis donec nibh metus.In at condimentum quam eleifend eu varius arcu a ridiculus vestibulum a convallis pretium sodales a nisi porttitor consectetur vestibulum tristique ad scelerisque quis fermentum convallis volutpat a.Est nam rutrum conubia ac tempus nec ullamcorper commodo imperdiet euismod nisl nibh habitasse adipiscing.Himenaeos ante adipiscing condimentum a pulvinar mi vel netus sit consectetur parturient.

Sem a ullamcorper a natoque ultricies duis id porttitor nisl scelerisque varius dis vestibulum venenatis donec nibh metus.In at condimentum quam eleifend eu varius arcu a ridiculus vestibulum a convallis pretium sodales a nisi porttitor consectetur vestibulum tristique ad scelerisque quis fermentum convallis volutpat a.Est nam rutrum conubia ac tempus nec ullamcorper commodo imperdiet euismod nisl nibh habitasse adipiscing.Himenaeos ante adipiscing condimentum a pulvinar mi vel netus sit consectetur parturient.

12Collapse

Sem a ullamcorper a natoque ultricies duis id porttitor nisl scelerisque varius dis vestibulum venenatis donec nibh metus.

Sem a ullamcorper a natoque ultricies duis id porttitor nisl scelerisque varius dis vestibulum venenatis donec nibh metus.

Sem a ullamcorper a natoque ultricies duis id porttitor nisl scelerisque varius dis vestibulum venenatis donec nibh metus.

14Tables

#NameState
1Elizabeth KeyFalse
2Bryan HortonFalse
3Jermaine SilvaFalse
4Ayanna LesterFalse
5Sam BlackburnFalse
6Roselyn HopkinsFalse
7Dayanara HermanFalse
8Wilson HaydenFalse
9Landon RosarioFalse
10Garrett JonesFalse
11Rishi MontgomeryFalse
12Kamari DawsonFalse
#NameState
1Elizabeth KeyFalse
2Bryan HortonFalse
3Jermaine SilvaFalse
4Ayanna LesterFalse
5Sam BlackburnFalse
6Roselyn HopkinsFalse
7Dayanara HermanFalse
8Wilson HaydenFalse
9Landon RosarioFalse
10Garrett JonesFalse
11Rishi MontgomeryFalse
12Kamari DawsonFalse
#NameState
1Elizabeth KeyFalse
2Bryan HortonFalse
3Jermaine SilvaFalse
4Ayanna LesterFalse
5Sam BlackburnFalse
6Roselyn HopkinsFalse
7Dayanara HermanFalse
8Wilson HaydenFalse
9Landon RosarioFalse
10Garrett JonesFalse
11Rishi MontgomeryFalse
12Kamari DawsonFalse