실행 가능한 활동 디렉터리에서 Poncho의 Bootstrap 3 그리드, 의미에 맞는 액션 색상, 전체 영역을 클릭할 수 있는 서비스 패널을 살펴보세요.
기본 패널 그리드를 필터링하고, 세부 정보를 열어 원하는 활동으로 돌아가세요.
ar-poncho 2.0.320 CSS 및 Bootstrap 3.4.1; 계산된 값은 1440, 768 및 390px에서 확인했습니다. 글꼴 대체 설정을 명시했습니다.
| 이름 / 규칙 | 값 / 구성 | 용도 |
|---|---|---|
Package inspected | ar-poncho 2.0.320 | 버전이 오래된 v0.3.3 배너를 패키지 버전으로 사용하지 마세요. |
Font documentation | Lora headings / Montserrat body | 현재 타이포그래피 페이지와 CSS 글꼴 가져오기 설정을 기준으로 합니다. 이전 저장소 README에는 여전히 Encode Sans가 명시되어 있습니다. |
Body | 16px / 1.42857143; weight 500 | Bootstrap 3.4.1 및 Poncho로 측정했으며, 로컬 미리보기에서는 Arial을 사용합니다. |
H1 | 2.5rem = 40px / 44px | 모바일에서도 미리보기 제목은 40px로 유지됩니다. |
H2 / H3 | 2rem / 1.75rem | 기본 제목 스타일이며, 패널별 제목 규칙이 이를 재정의합니다. |
Panel H3 | 20px / 26px | 컴포넌트 맥락에서 측정한 기본 CSS입니다. |
Lead | 18px / 1.2; weight 500 | 제목이 아닌 짧은 소개 문구입니다. |
| 이름 / 규칙 | 값 / 구성 | 용도 |
|---|---|---|
--primary | #242C4F | 주요 링크/액션의 남색. |
--secondary | #45658D | 보조 파란색. |
--success | #2e7d33 | 주요/성공 액션 역할이며, 임의의 장식용 색상이 아닙니다. |
--danger | #c62828 | 위험 액션 또는 오류 역할. |
--warning | #E7BA61 | 주의를 나타내는 역할이며, 텍스트 대비를 확인해야 합니다. |
--gray-base | #333333 | 기본 텍스트. |
--gray-lighter | #f2f2f2 | 밝은 중성 배경. |
| 이름 / 규칙 | 값 / 구성 | 용도 |
|---|---|---|
Grid | 12 columns; 30px gutter | Bootstrap 3.4.1: 각 열의 양쪽에 15px 패딩을 적용합니다. |
Breakpoints | 768 / 992 / 1200px | sm, md, lg; col-sm-4는 768px부터 3개 열을 만듭니다. |
Containers | 750 / 970 / 1170px | 해당 중단점에 맞춰 적용되며, 768px 미만에서는 너비가 유동적으로 바뀝니다. |
Panel body | 15px 20px | Poncho 컴포넌트 재정의. |
Panel radius / spacing | 10px / 30px bottom margin | 이 예제에서 사용하는 기본 CSS입니다. |
Button | 16px; 8px 20px padding; 3px border; 30px radius | Poncho의 둥근 액션 스타일입니다. Bootstrap의 기본 형태가 아닙니다. |
Section spacing | 30px default; 20px small; 40px large | section, section-sm 및 section-lg 규칙. |
실제 인터페이스를 위해 이 시스템을 선택하고 적용하고 검토하는 실용 가이드.
완전한 안내와 구현 시작점, 소스 링크.
Poncho은 Bootstrap 3.4.1 위에 아르헨티나 공공 서비스 스타일을 적용합니다. 설치 페이지에는 실험적인 Bootstrap 4 방향이 여전히 언급되어 있지만, 그렇다고 Bootstrap 5 클래스가 공개된 예제와 호환되는 것은 아닙니다. 이 리소스는 ar-poncho 2.0.320과 Bootstrap 3.4.1을 고정해 패널 구조와 반응형 동작을 함께 살펴볼 수 있도록 합니다.
설치된 패키지는 2.0.320인데 CSS 배너에는 v0.3.3이라고 표시되어 있습니다. 배너만 보지 말고 패키지 매니페스트와 잠금 파일을 확인하세요. 별도의 미리보기에서는 패널, 버튼, 그리드에 기본 CSS를 사용합니다. 활동 필터링은 자체 구현한 JavaScript이며, Poncho 검색 컴포넌트가 아닙니다.
현재 타이포그래피 문서에서는 제목에 Lora, 본문에 Montserrat를 사용한다고 안내합니다. 다운로드한 스타일시트는 이 글꼴들을 불러오지만, 이전 버전의 Encode Sans 선언도 포함하고 있습니다. 저장소의 설정 README에서는 여전히 Encode Sans를 권장합니다. 이는 실제 버전 및 출처 간 불일치입니다. 프로덕션으로 전환할 때는 과거의 모든 참조가 하나의 일관된 테마를 가리킨다고 가정하지 말고, 선택한 릴리스의 최종 캐스케이드를 확인해야 합니다.
미리보기에서는 오프라인에서도 안정적으로 표시되도록 Arial과 Georgia 대체 글꼴을 명시하고 외부 글꼴 불러오기를 제거했습니다. 기본 크기는 본문 16px, H1 40px, 리드 문단 18px로 유지됩니다. 패널 제목은 별도로 20px을 사용하므로 기본 H3 크기 체계를 카드에 그대로 적용하면 컴포넌트의 모양이 달라집니다.
버튼 문서에서는 기본 링크 동작, 보조 링크, 주요 동작 또는 성공 동작, 파괴적 동작을 구분합니다. btn-primary는 일반적인 강한 링크형 동작이고, btn-link는 보조 동작에 사용합니다. btn-success는 주요 진행 동작을 나타내며, 안내에 따라 페이지당 하나만 사용해야 합니다. btn-danger는 파괴적이거나 되돌릴 수 없는 동작에만 사용합니다.
활동 브라우저에서는 보조 동작으로 초기화를 제공하고, 펼쳐진 상세 보기에서는 주요 동작으로 돌아가기를 제공합니다. 등록 기능이 없으므로 녹색 등록 버튼은 표시하지 않습니다. 방문자가 로컬 패널을 열었다는 이유만으로 성공했다고 알리지 마세요.
Bootstrap 3은 거터가 30px인 12열 그리드를 사용합니다. 행의 너비는 각 열의 15px 패딩을 고려해 조정됩니다. col-sm-4를 사용하면 768px부터 활동 패널 세 개가 동일한 너비로 배치되며, 그보다 좁은 화면에서는 전체 너비 블록으로 바뀝니다. 문서에 명시된 중단점에 따라 컨테이너 너비는 750px, 970px, 1170px로 늘어납니다.
Poncho은 여기에 컴포넌트 간격을 더합니다. 패널 본문은 세로 15px, 가로 20px의 패딩을 사용하고, 패널 하단 여백은 30px입니다. 버튼은 반경 30px, 테두리 3px, 패딩 8px 20px을 사용합니다. 이러한 값이 수정하지 않은 Bootstrap 페이지와 눈에 띄는 차이를 만듭니다. 일반적인 둥근 카드 테마로 대체하지 마세요.
공식 패널 예제에서는 패널 전체를 앵커로 감싸고, 그 안에 panel-body를 배치한 다음 본문 안에 제목과 보조 설명을 넣습니다. 이렇게 하면 간결한 디렉터리 항목 전체가 하나의 이동 대상이 됩니다. 해당 앵커 안에 링크나 버튼을 더 넣지 마세요. 서로 충돌하는 인터랙션 대상이 생깁니다.
프로덕션 코드 예제는 실제 활동 경로를 가리킵니다. 반면 로컬 미리보기에서는 같은 의미의 앵커에 동작을 연결해 자체 상세 텍스트를 표시합니다. 이를 통해 상세 보기의 최초 실행 요소를 기록하고, 새로 열린 상세 영역으로 포커스를 이동하며, 방문자가 닫으면 포커스를 되돌립니다. 이는 문서화된 패널 마크업 위에 추가되는 애플리케이션 동작입니다.
<div class="row">
<div class="col-sm-4">
<a class="panel panel-default" href="/activities/repair-cafe/">
<div class="panel-body">
<h3>Repair café</h3>
<p class="text-muted">Skills · Saturday, 10:00</p>
</div>
</a>
</div>
</div>활동 유형 선택 메뉴에는 명시적인 레이블과 세 가지 카테고리가 있습니다. 선택 항목이 바뀌면 일치하지 않는 패널 래퍼가 숨겨지고, 새 항목 수를 상태 메시지로 알립니다. 이 수는 표시 중인 활동 수이지 등록 수나 이용 가능 수가 아닙니다. 초기화하면 세 항목이 모두 다시 표시되고 필터에 포커스가 놓입니다.
카테고리를 바꾸면 열린 상세 보기를 닫아, 이제 숨겨진 활동의 콘텐츠가 결과와 분리된 채 남지 않도록 합니다. 패널을 열어도 필터는 바뀌지 않습니다. 이 규칙은 간단하지만 컨트롤, 결과, 상세 보기 간의 관계를 테스트하기에 충분합니다.
공식 버튼 표에는 비활성화된 CSS 클래스 예제가 있습니다. 실제 HTML 버튼을 비활성화하려면 disabled 속성도 지정해야 합니다. 클래스만으로는 키보드 입력에 따른 활성화를 막을 수 없습니다. 링크는 비활성화 스타일을 완전한 인터랙션 모델로 간주하지 말고, 유효한 목적지가 여전히 있는지 판단하세요.
H1은 하나만 사용하고 일관된 계층 구조를 만드세요. 이 디렉터리는 펼쳐지는 상세 보기가 H2 섹션이므로 패널 안에 H3을 사용합니다. 중간 제목 없이 목록이 단독으로 놓이는 경우에는 실제 문서 구조에 맞춰 제목 수준을 조정하세요. 장식용 아이콘 라이브러리는 선택 사항이며, 여기서는 모든 동작을 텍스트 레이블로 전달하므로 사용하지 않습니다.
테마가 기반 스타일을 재정의하도록 Poncho CSS보다 먼저 Bootstrap CSS을 불러오세요. 기본 그리드와 패널에는 Bootstrap JavaScript나 jQuery가 필요하지 않습니다. 애플리케이션에 Bootstrap 인터랙티브 위젯을 추가한다면 Bootstrap 3.4.1 JavaScript보다 먼저 호환되는 jQuery 버전을 불러오고 실제로 사용하는 위젯을 테스트하세요.
이는 호환성 범위가 정해진 레거시 종속성 스택입니다. 여기에 최신 Bootstrap를 설치하는 것은 마이그레이션 전략이 아닙니다. 저장소의 MIT 라이선스에 따른 코드 재사용과 정부 신원, 공식 로고, 정부 페이지에 표시된 콘텐츠 라이선스를 구분하세요. 미리보기에는 가상의 지역 활동을 사용하며, 아르헨티나 정부 서비스라고 주장하지 않습니다.
앵커 하나로 패널 본문 전체를 감싸세요. 대화형 컨트롤을 중첩하지 마세요.
<div class="row">
<div class="col-sm-4">
<a class="panel panel-default" href="/activities/repair-cafe/">
<div class="panel-body">
<h3>Repair café</h3>
<p class="text-muted">Skills · Saturday, 10:00</p>
</div>
</a>
</div>
</div>네이티브 Poncho 패널에 작동하는 카테고리 필터와 포커스를 복원하는 상세 보기를 더했습니다.
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Community activities</title><link rel="stylesheet" href="vendor/poncho-2.0.320/bootstrap.min.css"><link rel="stylesheet" href="vendor/poncho-2.0.320/poncho.min.css"><style>html,body{height:auto}body{padding:30px 0;font-family:Arial,sans-serif!important}h1,h2,h3{font-family:Georgia,serif!important}.container{max-width:100%}.panel{display:block}.filter{display:flex;gap:15px;flex-wrap:wrap;align-items:end;margin:30px 0}.filter>div{flex:1;min-width:180px}.panel:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #333;outline-offset:3px}#detail{border-left:5px solid var(--secondary);padding-left:20px;margin:25px 0}footer{font:14px/1.5 Arial;border-top:1px solid #ddd;padding-top:20px}[hidden]{display:none!important}</style><main class="container"><p class="text-muted">COMMUNITY PROGRAMME · INDEPENDENT EXAMPLE</p><h1>Find a local activity</h1><p class="lead">Browse practical sessions at the community centre.</p><div class="filter"><div><label for="category">Activity type</label><select id="category" class="form-control"><option value="all">All activities</option><option value="skills">Skills</option><option value="outdoors">Outdoors</option><option value="arts">Arts</option></select></div><button id="reset" class="btn btn-link" type="button">Reset filter</button></div><p id="count" role="status">3 activities</p><div class="row"><div class="col-sm-4" data-category="skills"><a class="panel panel-default" href="#detail" data-title="Repair café" data-copy="Bring one small household item to a supervised repair session. This demonstration does not reserve a place."><div class="panel-body"><h3>Repair café</h3><p class="text-muted">Skills · Saturday, 10:00</p></div></a></div><div class="col-sm-4" data-category="outdoors"><a class="panel panel-default" href="#detail" data-title="Community garden" data-copy="Meet at the garden gate for a planting session. Wear suitable footwear; tools are provided in this fictional programme."><div class="panel-body"><h3>Community garden</h3><p class="text-muted">Outdoors · Sunday, 09:30</p></div></a></div><div class="col-sm-4" data-category="arts"><a class="panel panel-default" href="#detail" data-title="Printmaking workshop" data-copy="Explore simple printing techniques in the studio. This local example has no registration service."><div class="panel-body"><h3>Printmaking workshop</h3><p class="text-muted">Arts · Tuesday, 16:00</p></div></a></div></div><section id="detail" hidden tabindex="-1"><h2 id="title"></h2><p id="copy"></p><button id="close" class="btn btn-primary">Back to activities</button></section><footer>Native Poncho 2.0.320 CSS with Bootstrap 3.4.1. Arial / Georgia fallbacks. Original activity data and filtering; no government identity or booking service.</footer></main><script>let opener;const select=document.querySelector('#category');function filter(){let n=0;document.querySelectorAll('[data-category]').forEach(x=>{x.hidden=select.value!=='all'&&x.dataset.category!==select.value;if(!x.hidden)n++});document.querySelector('#count').textContent=n+' activit'+(n===1?'y':'ies');document.querySelector('#detail').hidden=true}select.onchange=filter;document.querySelector('#reset').onclick=()=>{select.value='all';filter();select.focus()};document.querySelectorAll('[data-title]').forEach(a=>a.onclick=e=>{e.preventDefault();opener=a;document.querySelector('#title').textContent=a.dataset.title;document.querySelector('#copy').textContent=a.dataset.copy;document.querySelector('#detail').hidden=false;document.querySelector('#detail').focus()});document.querySelector('#close').onclick=()=>{document.querySelector('#detail').hidden=true;opener.focus()};</script></html>네이티브 CSS 설정입니다. 이 미리보기의 필터 및 상세 보기 로직은 자체 구현이므로 Bootstrap JavaScript가 필요하지 않습니다. Sources에 있는 완전한 실행 예제 ZIP에는 미리보기의 정확한 종속성과 전체 문서도 포함되어 있습니다. 해당 디렉터리에 압축을 풀고 python3 -m http.server 8080을 실행한 다음 http://localhost:8080/poncho.html을 여세요. 모듈 기반 예제를 file://로 열지 마세요.
npm install [email protected] [email protected] # Copy the following package assets into your site's public vendor directory: # node_modules/bootstrap/dist/css/bootstrap.min.css # node_modules/ar-poncho/dist/css/poncho.min.css # Load Bootstrap first, then Poncho. # Optional Bootstrap JS components also need jQuery before bootstrap.min.js.
Bootstrap 3.4.1에서 ar-poncho 2.0.320을 사용하세요. 12열 그리드와 앵커 하나로 연결된 패널 카드를 사용해 접근성 높은 디렉터리를 구성하세요. 네이티브 버튼의 역할별 색상, 여백, 모서리 반경을 유지하세요. 레이블이 있는 필터, 결과 수, 포커스 복원 기능을 제공하세요. 고정된 패키지를 기준으로 글꼴 상속을 확인하고, Bootstrap 5 API를 혼용하거나 등록 성공을 지어내지 마세요.
정부 신원 확인 기능을 사용하지 않는 네이티브 CSS 기반 독립 OpenDesign 예시입니다. 현재 문서와 이전 README에서 글꼴 계열이 서로 다르게 안내되어 있으므로, 고정된 CSS와 명시적인 대체 글꼴이 이 미리보기의 글꼴을 결정합니다.
