stringer

Stringer is a responsive framework with plenty of optional building blocks. It's not a feature-complete boilerplate, but a good starting point upon which you can develop custom themes. This project is a sandbox, and it changes often.

A stringer is a wooden strip that runs the length of a surfboard, designed to give the board strength & rigidity.

  • See the repo for more info
  • I use Codekit to manage this project. My config file is in the repo, if you're a Codekit user.
  • I'm using the (very customizable) jQuery mmenu system for mobile navigation.

 

Picturefill responsive images

alt
  
    
      
      
      
      
      alt
    
  
  

 

Responsive slider with picturefill, and vertical/middle-aligned captions & CTA

 

Center-aligned, middle-aligned box

Fluid vertical alignment with no height settings.

Jackdaws Love My Sphinx of Quartz

 

  
    

Jackdaws Love My Sphinx of Quartz

 

Typography

h1 Sphinx Quartz

h2 Sphinx Quartz

h3 Sphinx Quartz

h4 Sphinx Quartz

h5 Sphinx Quartz
h6 Sphinx Quartz
      
        

h1 Sphinx Quartz

h2 Sphinx Quartz

h3 Sphinx Quartz

h4 Sphinx Quartz

h5 Sphinx Quartz
h6 Sphinx Quartz

 

Unordered List

  • This is a list item blah blah
  • This is a list item blah blah
  • This is a list item blah blah
  • This is a list item blah blah
  • This is a list item blah blah
  • This is a list item blah blah
      
        
  • This is a list item blah blah
  • This is a list item blah blah
  • This is a list item blah blah
  • This is a list item blah blah
  • This is a list item blah blah
  • This is a list item blah blah

 

Ordered List

  1. This is a list item blah blah
  2. This is a list item blah blah
  3. This is a list item blah blah
  4. This is a list item blah blah
  5. This is a list item blah blah
  6. This is a list item blah blah
      
        
  1. This is a list item blah blah
  2. This is a list item blah blah
  3. This is a list item blah blah
  4. This is a list item blah blah
  5. This is a list item blah blah
  6. This is a list item blah blah

 

Grids

2-Column Grid

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

 

    
      

Column One content

Column Two content

 

3-Column Grid

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

 

    
      

Column One content

Column Two content

Column Three content

 

1/3 - 2/3 Split

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

 

    
      

1/3 Column

2/3 Column

 

Accordions

  • Accordion Item One
    • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  • Accordion Item Two
    • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  • Accordion Item Three
    • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      
          
      
      

 

Buttons

Standard Button
Submit
Big Button
Call to Action

 

Panel

This is a Panel

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit anim id est laborum.

Call to Action
    
      

Panel Title

Panel copy. Lorem ipsum dolor.

Call to Action

 

Static Table: Option 1

Thead Thead Thead Thead
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 

    
      
Thead Thead Thead Thead
Table cell content Table cell content Table cell content Table cell content
Table cell content Table cell content Table cell content Table cell content

Static Table: Option 2

Thing Type of Thing Color of Thing Size of Thing
Animal Cow Black & White Big
Car Corolla Red Small

 

    
      
Thing Type of Thing Color of Thing Size of Thing
Animal Cow Black & White Big
Car Corolla Red Small

Responsive Table

This is a basic responsive table. All requirements should be clarified in the project's definition phase, and the proper responsive table layout can be built up from this starting point.

Thead Thead Thead
Mobile Thead Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mobile Thead Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mobile Thead Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 

    
      
Thead Thead Thead
Mobile Thead Table cell content Mobile Thead Table cell content Mobile Thead Table cell content

 

Forms

Input

Value 1
Value 2
Value 3
Value 1
Value 2
Value 3

Datalist

Textarea

Select and Option

Buttons and Input Type Submit/Reset

Fieldset

Legend Title

Images

By default, (non-picturefill-enabled) images appear at their native size. If larger than their container, their max-width will conform to the container width. They re-size relative to their container on smaller screens.

 

 

Images with class="fit" will always fill the container, no matter their native size. The "correct" implementation of a responsive image would be the example(s) above, making sure the image you're using is large enough to fill the container at its maximum size. Adding the .fit class would be a fail-safe, if the properly sized image is not available.