designmodo/flat-ui

Flat UI Free - Design Framework (html/css3/less/js). Flat UI is based on Bootstrap, a comfortable, responsive, and functional framework that simplifies the development of websites.

flat-ui's Issues

Using "box-sizing: border-box" breaks everything

Hi,

i almost can't image anymore styling a website without using box-sizing: border-box; and i think many other too. Unfortunately Flat UI breaks when you use it but Bootstrap does not. I also think that the next version of Bootstrap will ship with this by default.

This also means that any site already using Bootstrap and box-sizing: border-box; can't just drop it in and enjoy the great design because it will break. At least after this post by Paul Irish, over a year ago, every sane developer is using it.

Have you any plans on supporting box-sizing: border-box; ?

Upgrade 2.3.1

Any plan for upgrading to bootstrap 2.3.1

The login input form style does not look so fine on the iphone

muted class may be too muted?

Its barely visible, don't you think? I think the muted class looks a little too muted

Don't see Swatches.aco or a Pack Directory

... what am I missing?

btn-small, btn-mini support

Do you intend to provide any support for these classes? Currently, they are overridden by flat ui styles .btn and .btn, .btn-group > .btn, .btn-group > .dropdown-menu, .btn-group > .popover.

I can make a pr if needed.

First child in .navbar-inverse .nav > li.active jumps to right when hovered over

Demo is here:

https://flatuidemo.s3.amazonaws.com/menu-jumpy.html

This CSS fixes the issue but is untested for side effects etc. ;-)

.navbar-inverse .nav > li.active:first-child > a:hover,
.navbar-inverse .nav > li.active:first-child > a:focus {
padding-left: 20px;
}

Links in checkbox does not working.

<label class="checkbox checked" for="check-agree">
  <input type="hidden" name="_agreeTOS">
  <span class="icons">
    <span class="first-icon fui-checkbox-unchecked"></span>
    <span class="second-icon fui-checkbox-checked"></span>
  </span>
  <input type="checkbox" name="agreeTOS" id="check-agree" data-toggle="checkbox" checked="checked">
  I agree to the <a href="/terms">terms and conditions.</a>
</label>

In this case, clicking "terms and conditions" doesn't go to the new page.
In flatui-checkbox.js

$(document).on('click.checkbox.data-api', '[data-toggle^=checkbox], .checkbox', function (e) {
    var $checkbox = $(e.target);
    e && e.preventDefault() && e.stopPropagation();
    if (!$checkbox.hasClass('checkbox')) $checkbox = $checkbox.closest('.checkbox');
    $checkbox.find(':checkbox').checkbox('toggle');
  });

By removing "e.preventDefault()", the links works but the checkbox functionality will be broken.

Checkbox toggle compatibility with jQuery version 1.10.*

When using jQuery version 1.10.* , the checkbox input toggling does not work properly.

The first two times is okay, but after the third toggle, the checkbox input checked attribute is keep remaining.

Datepicker is not working with Flat UI Free Version....

Everything looked fine but the Datepicker in the project is not visible at all because Flat UI CSS overrides the dropdown-menu settings declared in Bootstrap CSS.

Please correct me if I am doing something wrong here...

Missing video-js.png

In the css, there is

.vjs-rewind-control {
  width: 5em;
  cursor: pointer !important; }
  .vjs-rewind-control div {
    width: 19px;
    height: 16px;
    background: url("video-js.png");
    margin: 0.5em auto 0; }

But video-js.png is nowhere to be found.

CSS mistake line 507

"only screen and (min--moz-device-pixel-ratio: 1.5)" on line 507
should be "only screen and (-moz-min-device-pixel-ratio: 1.5)"

input-append

why is it left out?

.input-append,
.input-prepend {
display: inline-block;
margin-bottom: 1.231;
vertical-align: middle;
font-size: 0;
white-space: nowrap;
}
.input-append input,
.input-prepend input,
.input-append select,
.input-prepend select,
.input-append .uneditable-input,
.input-prepend .uneditable-input,
.input-append .dropdown-menu,
.input-prepend .dropdown-menu,
.input-append .popover,
.input-prepend .popover {
font-size: 14.994px;
/* 15px */

}
@media (max-width: 767px) {
.input-append input,
.input-prepend input,
.input-append select,
.input-prepend select,
.input-append .uneditable-input,
.input-prepend .uneditable-input,
.input-append .dropdown-menu,
.input-prepend .dropdown-menu,
.input-append .popover,
.input-prepend .popover {
margin-top: 0;
}
}
.input-append input,
.input-prepend input,
.input-append select,
.input-prepend select,
.input-append .uneditable-input,
.input-prepend .uneditable-input {
position: relative;
margin-bottom: 0;
margin-left: 0;
vertical-align: top;
-webkit-border-radius: 0 6px 6px 0;
-moz-border-radius: 0 6px 6px 0;
border-radius: 0 6px 6px 0;
}
.input-append input:focus,
.input-prepend input:focus,
.input-append select:focus,
.input-prepend select:focus,
.input-append .uneditable-input:focus,
.input-prepend .uneditable-input:focus {
z-index: 2;
}
.input-append .add-on,
.input-prepend .add-on {
height: 1.231;
min-width: 32px;
padding: 9px 5px;
font-size: 17.99px;
/ 18px */

line-height: 18px;
height: 19px;
background-color: #bdc3c7;
border: 2px solid #bdc3c7;
color: #ffffff;
text-shadow: none;
text-indent: 2px;
-webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
-moz-transition: border .25s linear, color .25s linear, background-color .25s linear;
-o-transition: border .25s linear, color .25s linear, background-color .25s linear;
transition: border .25s linear, color .25s linear, background-color .25s linear;
-webkit-backface-visibility: hidden;
}
.input-append .add-on,
.input-prepend .add-on,
.input-append .btn,
.input-prepend .btn,
.input-append .btn-group > .dropdown-toggle,
.input-prepend .btn-group > .dropdown-toggle {
vertical-align: top;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.input-append .active,
.input-prepend .active {
background-color: #81eed8;
border-color: #1abc9c;
}
.control-group.huge .add-on,
.add-on.huge {
height: 31px;
line-height: 29px;
}
.control-group.large .add-on,
.add-on.large {
height: 23px;
line-height: 21px;
}
.control-group.small .add-on,
.add-on.small {
height: 12px;
line-height: 10px;
}
.control-group.focus .add-on {
background-color: #1abc9c;
border-color: #1abc9c;
}
.control-group.focus .btn {
background-color: #1abc9c;
}
.control-group.focus .btn:hover,
.control-group.focus .btn:focus,
.btn-group:focus .control-group.focus .btn.dropdown-toggle {
background-color: #48c9b0;
}
.control-group.focus .btn:active,
.btn-group.open .control-group.focus .btn.dropdown-toggle,
.control-group.focus .btn.active {
background-color: #16a085;
}
.control-group.focus .input-append .btn + .btn {
border-left-color: #16a085;
}
.input-prepend .add-on,
.input-prepend .btn {
margin-right: -2px;
}
.input-prepend .add-on:first-child,
.input-prepend .btn:first-child {
-webkit-border-radius: 6px 0 0 6px;
-moz-border-radius: 6px 0 0 6px;
border-radius: 6px 0 0 6px;
}
.input-append input,
.input-append select,
.input-append .uneditable-input {
-webkit-border-radius: 6px 0 0 6px;
-moz-border-radius: 6px 0 0 6px;
border-radius: 6px 0 0 6px;
}
.input-append input + .btn-group .btn:last-child,
.input-append select + .btn-group .btn:last-child,
.input-append .uneditable-input + .btn-group .btn:last-child {
-webkit-border-radius: 0 6px 6px 0;
-moz-border-radius: 0 6px 6px 0;
border-radius: 0 6px 6px 0;
}
.input-append .add-on,
.input-append .btn,
.input-append .btn-group {
margin-left: -2px;
}
.input-append .btn:first-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.input-append .btn + .btn {
border-left: 2px solid #bdc3c7;
}
.input-prepend.input-append input,
.input-prepend.input-append select,
.input-prepend.input-append .uneditable-input {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.input-prepend.input-append input + .btn-group .btn,
.input-prepend.input-append select + .btn-group .btn,
.input-prepend.input-append .uneditable-input + .btn-group .btn {
-webkit-border-radius: 0 6px 6px 0;
-moz-border-radius: 0 6px 6px 0;
border-radius: 0 6px 6px 0;
}
.input-prepend.input-append .add-on:first-child,
.input-prepend.input-append .btn:first-child {
margin-right: -2px;
-webkit-border-radius: 6px 0 0 6px;
-moz-border-radius: 6px 0 0 6px;
border-radius: 6px 0 0 6px;
}
.input-prepend.input-append .add-on:last-child,
.input-prepend.input-append .btn:last-child {
margin-left: -2px;
-webkit-border-radius: 0 6px 6px 0;
-moz-border-radius: 0 6px 6px 0;
border-radius: 0 6px 6px 0;
}
.input-prepend.input-append .btn-group:first-child {
margin-left: 0;
}
input.search-query {
padding-right: 6px;
padding-left: 6px;
margin-bottom: 0;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
/* Allow for input prepend/append in search forms /
.form-search .input-append .search-query,
.form-search .input-prepend .search-query {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.form-search .input-append .search-query {
-webkit-border-radius: 6px 0 0 6px;
-moz-border-radius: 6px 0 0 6px;
border-radius: 6px 0 0 6px;
}
.form-search .input-append .btn {
-webkit-border-radius: 0 6px 6px 0;
-moz-border-radius: 0 6px 6px 0;
border-radius: 0 6px 6px 0;
}
.form-search .input-prepend .search-query {
-webkit-border-radius: 0 6px 6px 0;
-moz-border-radius: 0 6px 6px 0;
border-radius: 0 6px 6px 0;
}
.form-search .input-prepend .btn {
-webkit-border-radius: 6px 0 0 6px;
-moz-border-radius: 6px 0 0 6px;
border-radius: 6px 0 0 6px;
}
.form-search .btn {
border: 2px solid #bdc3c7;
background-color: white;
color: #bdc3c7;
line-height: 18px;
padding: 9px 12px 10px 6px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.form-search .input-append input {
border-right-width: 0;
}
.form-search .input-append .btn {
border-left-width: 0;
}
.form-search .input-prepend input {
border-left-width: 0;
}
.form-search .input-prepend .btn {
border-right-width: 0;
}
.form-search.focus input {
border-color: #1abc9c;
}
.form-search.focus .btn {
border-color: #1abc9c;
color: #1abc9c;
}
.form-search .input-append .search-query.search-query-rounded {
-webkit-border-radius: 20px 0 0 20px;
-moz-border-radius: 20px 0 0 20px;
border-radius: 20px 0 0 20px;
text-indent: 9px;
padding-right: 4px;
}
.form-search .input-append .search-query.search-query-rounded + .btn {
-webkit-border-radius: 0 20px 20px 0;
-moz-border-radius: 0 20px 20px 0;
border-radius: 0 20px 20px 0;
padding-left: 4px;
}
.form-search .input-append .search-query.search-query-rounded.huge {
-webkit-border-radius: 27px 0 0 27px;
-moz-border-radius: 27px 0 0 27px;
border-radius: 27px 0 0 27px;
padding-right: 5px;
}
.form-search .input-append .search-query.search-query-rounded.huge + .btn-huge {
line-height: 30px;
-webkit-border-radius: 0 27px 27px 0;
-moz-border-radius: 0 27px 27px 0;
border-radius: 0 27px 27px 0;
padding-left: 5px;
}
.form-search .input-append .search-query.search-query-rounded.large {
-webkit-border-radius: 25px 0 0 25px;
-moz-border-radius: 25px 0 0 25px;
border-radius: 25px 0 0 25px;
padding-right: 6px;
}
.form-search .input-append .search-query.search-query-rounded.large + .btn-large {
line-height: 22px;
-webkit-border-radius: 0 25px 25px 0;
-moz-border-radius: 0 25px 25px 0;
border-radius: 0 25px 25px 0;
padding-left: 6px;
}
.form-search .input-append .search-query.search-query-rounded.small {
text-indent: 7px;
padding-right: 4px;
}
.form-search .input-append .search-query.search-query-rounded.small + .btn-small {
line-height: 16px;
padding: 6px 8px 8px 4px;
}
.form-search .input-prepend .search-query.search-query-rounded {
-webkit-border-radius: 0 20px 20px 0;
-moz-border-radius: 0 20px 20px 0;
border-radius: 0 20px 20px 0;
text-indent: 0;
padding-left: 4px;
}
.form-search .input-prepend .search-query.search-query-rounded.huge {
-webkit-border-radius: 0 27px 27px 0;
-moz-border-radius: 0 27px 27px 0;
border-radius: 0 27px 27px 0;
padding-left: 5px;
}
.form-search .input-prepend .search-query.search-query-rounded.large {
-webkit-border-radius: 0 25px 25px 0;
-moz-border-radius: 0 25px 25px 0;
border-radius: 0 25px 25px 0;
}
.form-search .input-prepend .btn {
-webkit-border-radius: 20px 0 0 20px;
-moz-border-radius: 20px 0 0 20px;
border-radius: 20px 0 0 20px;
padding-right: 4px;
padding-left: 12px;
}
.form-search .input-prepend .btn.btn-huge {
line-height: 30px;
-webkit-border-radius: 27px 0 0 27px;
-moz-border-radius: 27px 0 0 27px;
border-radius: 27px 0 0 27px;
padding-right: 5px;
padding-left: 12px;
}
.form-search .input-prepend .btn.btn-large {
line-height: 22px;
-webkit-border-radius: 25px 0 0 25px;
-moz-border-radius: 25px 0 0 25px;
border-radius: 25px 0 0 25px;
padding-right: 6px;
padding-left: 12px;
}
.form-search .input-prepend .btn.btn-small {
line-height: 16px;
padding: 6px 4px 8px 8px;
}
.form-search .control-group.focus .btn {
border-color: #1abc9c;
background-color: white;
color: #1abc9c;
}
.input-datepicker .btn {
border: 2px solid #bdc3c7;
background-color: #ffffff;
color: #bdc3c7;
line-height: 18px;
padding: 9px 6px 10px 12px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.input-prepend.input-datepicker input {
text-indent: 0;
border-left-width: 0;
}
.input-prepend.input-datepicker .btn {
border-right-width: 0;
}
.input-append.input-datepicker input {
border-right-width: 0;
}
.input-append.input-datepicker .btn {
border-left-width: 0;
}
.input-datepicker [class="fui-"] {
font-size: 15.988px;
/* 16px */

margin-left: -1px;
margin-right: 2px;
}
.control-group.focus .input-datepicker input {
border-color: #1abc9c;
}
.control-group.focus .input-datepicker .btn {
background-color: white;
border-color: #1abc9c;
color: #1abc9c;
}
@media (max-width: 767px) {
.control-group {
margin-bottom: 18px;
}
}

Move gh-pages files out of the main repo

All the files of the website and the library are the same which makes the library quite heavy as every time you want to check it out you need to download the images, videos (!) and pages of the docs, those could be left out on the gh-pages.

Shorter height when assigning span-class to input

Having an input like so

<div class="row-fluid">
  <div class="span12">
    <input type="text" class="span12" />
  </div>
</div>

creates a form-item that is shorter in height than an input without the assigned class i.e.,

<div class="row-fluid">
  <div class="span12">
    <input type="text" />
  </div>
</div>

And it also truncates part of the value/placeholder inside.

See also my fiddle

Licensing

Hello,

I love the ui and I would like to create a WordPress plugin with it. The problem is you released flat-ui under CC BY 3.0 which is not compatible with GPL(WordPress License).

Maybe you can change the license and release it under MIT license or another license (compatible with GPL)?

Thanks :)

Needs instagram social icon please

Not sure why instagram was excluded but I'd say right after twitter and FB it's the next more used service.
thanks

placing label above text doesn't look very good, example inside

In the default bootstrap, it looks perfect, but after replacing it with Flat UI, it looks like this now.

Bootstrap

Flat UI

Relevant HTML

<span class="badge badge-info pull-right">14</span>
<br>
<span class="text-info pull-right"> know the feeling</span>

Is there a document about how to use it?

something like bootstrap's document

Shown HEX values for several colors are incorrect

For example, Sunflower shows #1ABC9C, but is actually #F1C40F

Flat UI, DropKick and my body background image = No Bueno.

Hey guys just like to start by saying I love the kit (waiting for premium release),

I have an issue with using Flat UI and the dropkick elements on my splash site. Every time the page loads the background image seems to glitch out and revert to just the colored background. The background is also fixed, but acts as if it is static (until you click a dropdown box). I'm not sure what is going on? But I have isolated the problem to pertain to DropKick. Any help would be appreciated.

Edit: Here's a prime example: http://jsfiddle.net/NR9L2/ (I'm using the latest Chrome on my PC btw)

only-child should be added to fix borders for navs with single items.

Currently there is only last-child and first-child so if there is a single element the border at top doesn't doesn't display correctly. An only-child element should be added for cases of menus with single items.

.navbar .nav ul li:only-child {
border-radius: 4px 4px 4px 4px;
}

Too many dependencies

The UI looks amazing.
However, I'm worried about the large number of dependencies some of which are rather heavy-weight (e.g. Bootstrap).

Are there plans to make it more stand-alone?

An invalid form control is not focusable.

When the checkbox is required by the form on submit chrome throw the error

An invalid form control with name [XXXX] is not focusable.

checkboxes dont have a custom error state like input[type="text"]

Checkboxes don't appear until clicked on, radio buttons appear twice

I'm not exactly sure why this keeps happening, but every time I try to load FlatUI on my site, it seems to not render the checkboxes until I click on it.

Also, radio buttons seem to display twice for no good reason. I've tried with a vanilla middleman HTML5 Boilerplate project, and the same thing happens. Any suggestions?

correct usage of "switches"

Hi,

I can't seem to make "switches" work.

• How do I set their value programatically?
• How do I know the selected value?
  I haven't found any example, and my guesswork is not going very well.

Thx

Chrome version 28 on win

This is how it looks on Chrome (Version 28.0.1500.71 m)..... not acceptable

Documentation

A Wiki / Documentation to use the Javascript plugins would be helpful for people new to this framework.

I just came to say , That was fuckin awesome!

LOL~

navbar text blurb switches between a bold and less bolded color

With 0 customizations done to the CSS file, when scrolling down, text blurb becomes more bolded and then less bolded

Check out the "you need for" part of the blurb near the brand. I don't know if this shows up on your screen.

Reduce compiled css library size —> refactor selectors

Long selector names, e.g. .control-group got repeated hundreds of times in compiled css, which result in unnecessary kilobytes of code.

Autocomplete plugin does not work

Have purchased the Flat UI Pro product and the autocomplete from Bootstrap doesn't work.

It looks like it just needs a small bit of work.

Typography/header sizes are 'off' between free and pro

Hi, I've got Pro, and have noticed that the fonts sizes are quite different between the pro and the free. On the demo page http://designmodo.github.io/Flat-UI/ for instance an h6 is:

h6 {
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
}

but on the pro version I use on my site these are coming from flat-ui.css

h6 {
font-weight: normal;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
line-height: 1.2em;
}
h6, .h6 {
font-size: 23.996px /* 24px */;
}

jQuery Plugins

Can we get all of the custom JS as jQuery plugins?

I emailed in a version of the toggle button JS as a jQ plugin already - most of the code can be turned into plugins in a minute or two.

Multiple dropdowns on one page

When I add more than one dropdown to a page only the first one shows and the second is removed. Am I missing something?

checked toggle does not work properly

In my case, the first round of check and uncheck works, but after that, checked attr in that input will not be deleted and checked prop in jQuery element is always false.

I modified flatui-checkbox.js toggle function, line 38 to be checked = $el.attr(ch) and it works.

Incorrect hex colours

I noticed that in the Color Swatches section, some of the hex colour codes are incorrect.
Carrot and Emerland share the same hex code.. O.o

Very nice UI kit btw. Flat colour ftw!

Consolidated CSS and JS

Hi guys,

Firstly, I must congratulate you on Flat UI - I really like it. I have a few suggestions though that would be good to get your feedback on...

Don't you think you should have a consolidated/minified JS file and a separate CSS file for the demo specific styles to separate the concerns?

Adding Flat UI to an existing Bootstrap site would be much easier with these changes I think.

Radio button JavaScript conflicts with AngularJS

I'll follow up with a test case, but basically the JavaScript in flatui-radio.js breaks radio input data binding in AngularJS.

I'm reasonably sure it's due to canceling event propagation.

navbar-text: Missing in Flat-UI

Inside a navbar, a <p class="navbar-text"></p> is not aligned properly and appears to just be missing entirely from the flat-ui CSS.

This class is referenced at the bottom of this section of the Bootstrap docs.

Complete sample of this issue here: http://jsfiddle.net/2dNy4/

Navbar issues when using with Bootstrap's ScrollSpy plugin

The navbar intermittently shows the background and at other times it doesn't when clicking the links. If I remove the flatui stylesheet and just have it as the navbar-inverse it works just fine.

Broken:

How it should be:

Radio button does not work on firefox

I tested this on firefox 21.0 & 16.0.1 when I used radio buttons it doesn't send the the changed value on server side. But it works in chrome (strange!!).

Can anyone help me

Add swatch color variables to config.less

This makes tweaking the colors of the theme easier.

I have included them in less format below.

//
// Colors
// --------------------------------------------------

@turquoise: #1abc9c;
@green-sea: #16a085;

@emerald: #2ecc71;
@nephritis: #27ae60;

@petermann-river: #3498db;
@belize-hole: #2980b9;

@amethyst: #9b59b6;
@wisteria: #8e44ad;

@wet-asphalt: #34495e;
@midnight-blue: #2c3e50;

@sun-flower: #f1c40f;
@orange: #f39c12;

@carrot: #e67e22;
@pumpkin: #d35400;

@alizarin: #e74c3c;
@pomegranate: #c0392b;

@clouds: #ecf0f1;
@silver: #bdc3c7;

@concerte: #95a5a6;
@asbestos: #7f8c8d;

Here are the main colors from config.less (pro) updated too.

// Main Colors
// -------------------------
@base:      @wet-asphalt;
@firm:      @petermann-river;

@gray:      @concerte;
@lightgray: @silver;
@inverse:   white;

@success:   @emerald;
@danger:    @alizarin;
@warning:   @sun-flower;
@info:      @petermann-river;

@link-color: @green-sea;
@link-hover-color: @turquoise;

placing button and divider on default navbar doesn't look very good

Notice how the button is higher, and notice the divider doesn't fill the height of the navbar. Adding a margin-top of 20px to the button specifically on the navbar would make it look better, no?

Issue with .navbar-fixed-top and dropdown

It appears that when the nav uses the navbar-fixed-top class from bootstrap, the hover event for the dropdown is triggered when the mouse enters the (invisible) nested ul, not just when the main li tag is hovered.

Display incorrectly after add a new tag that is the same as a existing one

In Tags section, try to add a new tag 'Clean', get a css issue.

flat-ui ghosting bootstrap objects o.0

@page loads, i see bootstrap before flat ui css replaces the button/object(s) effects.

i try removing bootstrap (provided with flat ui), and i lose scaffolding/etc

what the secret of using flat ui's appearance w/o bootstrap's version loading first, but NOT losing scaffolding?

tia!

Checkbox is a special character in Firefox

As shown in the screenshot, checkboxes show up as special characters in FF 21.0 but look good on Chrome.

Any ideas on how to fix this?

Thanks

Buttons don't look interactive

The buttons are very pretty, but I think they can cause problems with not being obvious that they are buttons. I experimented with some ideas, but feel free to close this issue and ban me forever if you disagree. 🐟 Just some ideas.

http://apphacker.com/demo/buttons.html

navbar container wrong

Currently, it is not possible to place a container inside a navbar and having the contents aligned with the rest of the containers on the page. Something is overriding the width / auto-width and the container stretches to full width:

<div class="navbar navbar-inverse">
  <div class="navbar-inner">
    <div class="container">
      {contents}
    </div>
  </div>
</div>

results in a wrong positioning, compared to vanilla bootstrap.