Code Monkey home page Code Monkey logo

pears's Introduction

Pears are common patterns of markup & style.

Pears is an open source WordPress theme. I'll admit the code 
is a bit rough, initially based on the default 'twentyone' theme.

I wanted a handy way of collecting HTML & CSS pattern pairs. 
Often used modules with a minimal of style applied. It's become 
a valuable learning tool, whereby breaking interfaces down into 
small pieces make it easier to learn and improve running code.

HOW TO ADD CODE PATTERNS

- Each pattern is a post in WordPress. 
- Add markup in a custom field named 'html'.
- Add style in a custom field named 'css'.
- Use the main content field for optional notes.

Learn more and see it in action here:
http://pea.rs

Enjoy.

Dan Cederholm
Salem, Massachusetts
February, 2012
http://simplebits.com

pears's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

pears's Issues

Support for 'tab' key when editing

Hi, great project you got here!

I'm wondering if there's a way to properly using 'tab' for indents in the markup and style modules. Currently, the browser treats them like regular text fields and tab simply changes focus.

Thanks!

This might be a long shot, but

I'm struggling to download the CSS of a specific element, the pagination of a bootstrap website to be exact. Does anyone have a quick way to extract everything in one shot? I've tried different tools, but nothing works well enough to make collecting efficient. Thanks for any help.

Top Labels Text Area

On http://pea.rs/forms/top-labels

<textarea id="bio"></textarea>

Is rendering as HTML rather than why should presumably render as an actual text area box.

This also is occurring on the Left Label's page but someone has already filed an issue for that.

Pages don't display HTML or CSS fields

Pages (such as a custom front page, like the welcome page at http://pea.rs) do not display the content of the custom HTML or CSS fields because they don't use loop-single.php as their template.

Is there a way to force a page to use the loop-single.php template so we can have fancy front pages like the example pea.rs site? How do they do it?

WordPress Admin bar no longer appears

Once I activate Pears the admin bar no longer appears when signed in as an admin. I tried switching back to Twenty Eleven and the admin bar works fine.

Possible Pagination Example Improvement

There doesn't seem to be a way to submit changes or anything to the Pears example site. I was thinking something like this for pagination:

<nav role="page">
    <ul>
        <li class="page-prev"><a href="#">← Prev</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li class="current">4</li>
        <li class="page-next"><a href="#">Next →</a></li>
    </ul>
</nav>
nav[role=page] ul {
    text-align: center;
    }
nav[role=page] li {
    display: inline;
    margin: 0 4px 0 0;
    }
nav[role=page] a {
    padding: 3px 8px;
    font-size: 14px;
    font-weight: bold;
    border: 1px solid #ddd;
  background: #fff;
    border-radius: 4px;
    }
nav[role=page] a:hover,
nav[role=page] a:focus {
    background: #f0f0f0;
    border-color: #ccc;
    }
nav[role=page] a:active {
    background: #fff;
    border-color: #ddd;
    }
nav[role=page] .current {
    font-weight: bold;
    padding: 3px 3px;
    }

possible to use a custom stylesheet?

disclaimer: i am a github noob so i apologize if this is not the place to ask this.

I noticed style.css is probably just from the old TwentyTen theme, but I'd like to use it. It's in the theme's root folder and I have added a reference to it from header.php. I can see the style sheet if i go directly to the url, but the site doesn't recognize it.

Is it because it has to be a .less file? I tried to change it to that too but no luck.

Is anyone using a custom style sheet for this? I don't want to have to ftp screen.less every time i have a change.

Make "icon-copy.png", image path dynamically according to the theme.

The copy icon is broken (if you didn't with theme name "pear" or when it's not installed in first level).
Therefore, i made the image path dynamically according to the theme path.

in loop-single.php

/ /Line 36
<img src="<?php bloginfo('template_directory'); ?>/images/icon-copy.png" title="" alt="copy" />

// Line 43
<img src="<?php bloginfo('template_directory'); ?>/images/icon-copy.png" title="" alt="copy" />

Clean template files, especially functions.php

As Pears template files come from WordPress native Twenty Ten, it would be wise to clear functions.php and define all function specifically for Pears, also basic changes in all other templates: pears unique text domains and function prefixes.

Copy icons not functioning?

When I try to copy any of the HTML or CSS nothing is getting added to my clipboard. I tried in both Chrome and Safari on Mac. I also had no luck with copying on the official demo.

Twentyone theme? (Spelling

In your readme:

Pears is an open source WordPress theme. I'll admit the code
is a bit rough, initially based on the default 'twentyone' theme.

Did you mean Twenty Ten?

Static welcome page

Can't seem to figure out how to replicate the static welcome page from pea.rs in my local Wordpress installation.

Any ideas?

Pears HTML input replaces special characters in Edit Post

I haven't done extensive testing on which special characters, but my case caused fairly serious issues. I'm creating a style guide and wanted to mark up pre and code outputs. The example output is:

<?php 
echo 'Hello World!';
?>

When I used this initially, the page treated the angle brackets as closing tags, which then caused everything below to act oddly. In the Pears HTML field, I replaced the angle brackets as follows:

&#60;?php 
echo 'Hello World!';
?&#62;

When I update the page, this fixes the page but the Pears HTML field replaces the entities with the characters they would render to, causing subsequent updates to be broken again. I don't know how many other special characters do would do this or how many of those would cause page issues after submission.

LESS

Does Pears support LESS?

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.