Bootstrap 또는 HTML5 상용구와 같은 웹 프레임 워크는 디자이너가 아닌 개발자에게 무언가를 제공합니까?

이것은 개발보다 디자인 에 관한 것입니다.

완전히 손으로 쓴 CSS와 HTML로 사이트를 처음부터 작성합니다.

Bootstrap 또는 HTML5 Boilerplate 과 같은 사전 빌드 CSS 템플릿에 대해 오랫동안 알고 있었습니다. 나는 과거에 그것들을 잠깐 살펴 보았지만 실제로는 아무것도 사용하지 않았습니다. CSS를 재설정하거나 필요한 경우 자바 스크립트를 포함하거나 뷰포트를 구성하는 데 아무런 문제가 없습니다.

오늘 저녁에 기본 HTML5 / CSS 페이지를 코딩했습니다. 레이아웃 측면에서 지구를 산산조각내는 것은 없습니다. 간단히 점프 포인트. 그 후 Bootstrap에 동일한 레이아웃의 소용돌이를 주기로 결정했습니다. 영웅 이미지 페이지가있는 꽤 표준적인 960px, 3 열입니다.

부트 스트랩을 변경하면서 80 % 이상의 시간이 어떤 클래스 나 ID가 어떤 것에 적용되는지 배우고 CSS에서 조정하는 것을 찾는 데 소비되었습니다. 부트 스트랩이 나를 구할 수 없다는 것이 분명해졌습니다. 사실, 부트 스트랩은 지나치게 템플릿 화 된 CSS로 인해 제작 시간이 크게 늘어납니다.

* ( "과도하게 템플릿 화됨"은 특정 웹 사이트에 사용하지 않을 CSS가 많이 있다는 것을 의미합니다. 전체에 불필요한 CSS가있는 것은 아닙니다. )

나는 부트 스트랩에 익숙하다면 스타일 시트의 클래스 / ID 이름과 일반적인 위치에 익숙 할 것임을 이해합니다. 그래서, 나는 그것이 나를 데려 갈 때 약간 구부리고 기꺼이 그 중 일부는 내 자신의 생소함으로 인한 것임을 깨달았습니다.

그러나 Bootstrap 등이 도움이 될 수는 없습니다. 알. 디자이너가 자신의 코드 브랜드를 숟가락으로 먹이는 데 방해가되는 목발 일뿐입니다. 따라서 제 3 자 솔루션에 전적으로 의존하는 소비자 기반을 잠그고 모든 것 또는 적어도 대부분의 기능입니다. Dreamweaver를 사용할 수있는 경우에만 웹 사이트를 디자인 할 수있는 사용자를 상기시킵니다. 또한 Dreamweaver에 액세스 할 수없고 변경이 필요한 경우 천국은 금지합니다.

사이트를 만들 때 표준 클래스와 ID 이름을 사용합니다. CSS가 직관적 인 방식으로 구성합니다. 빠른 설정을위한 사전 빌드 템플릿 세트가 있습니다. 따라서 내가 구축 한 사이트는 상당히 빠르게 편집 할 수 있습니다. 사전 구성된 프런트 엔드 패키지 중 하나를 사용하면 간단하게 내가 배울 필요가 의미 자신의 이름 지정 규칙과 자신의 내 자신에 의존하기보다는 구조를.

• 누구든지 Bootstrap 또는 HTML5 Boilerplate 과 같은 템플릿 시스템의 위대한 미덕을 내게 내밀 수 있습니까 ?
• 무엇이 당신에게 가치가 있습니까?
• 사용하는 시스템에 대해 잘 알고 있으므로 쉽게 탐색하거나 항목을 찾아야합니까?
• 필요한 경우 사이트없이 사이트를 구축 할 수 있습니까?

지난 한 달 동안 프레임 워크를 많이 연구 해 왔습니다. 나는 실제로 어떤 솔루션에도 뛰어 들지 않았지만, 나의 후보에있는 몇 가지 프레임 워크 대안은 Foundation , Intuit 및 YAML and Base 입니다.

이것에 대한 좋은 점은 그들이 '부트 스트랩'모양을 가지고 있지 않으며 디자이너가 반응을 돌보는 동안 작업 (디자인)에 장려하는 것 같습니다.

다음은 이 기사 의 프레임 워크 목록 과 자세한 정보입니다 .

언급했듯이, 연구 과정을 수행했지만 테스트를 시작하지 않았으므로 프레임 워크를 옹호하는 의견이 도움이 될 것입니다.

장점은 주로 다음과 같은 경향이 있습니다.

• 빠른 프로토 타이핑 (즉, 속도)
• 내장 된 크로스 브라우저 일관성

그리드를 작성해야하고 작성해야하는 그리드가 사전 빌드 된 CSS 프레임 워크에 맞는 경우, 로직은 프레임 워크를 사용하여 중간에 있다는 것입니다.

모든 말은, 나는 당신에게 동의하는 경향이 있습니다. CSS 프레임 워크 인 IMHO는 시각적 디자인 템플릿과 비슷합니다. 즉, 목표의 90 %를 충족하면 훌륭하지만 그렇지 않은 경우 기본을 수정하는 것보다 기본을 수정하는 데 더 많은 시간과 노력을 소비합니다. 당신 자신의 처음부터.

추가:

잠재적 이점을 하나 더 추가해야합니다.

• 그것은 문서화 된 시스템이다

여러 프런트 엔드 개발자가있을 수있는 엔터프라이즈 환경에서 프로젝트는 문서화 된 기본 프레젠테이션 계층 프레임 워크가 도움이 될 수있는 여러 프런트 엔드 개발자 팀과 함께 몇 년에 걸쳐있을 수 있습니다.

즉, 자체 제작 한 프레임 워크를 문서화 할 수는 없으며 문서가 우선 순위가 아니라는 것입니다.

HTML5 Boilerplate에 익숙하지만 Bootstrap에 더 익숙하므로 이에 대해 이야기하겠습니다. 둘 다 서로 다른 두 가지 작업 (H5BP는 반응 형 정규화 된 템플릿, Bootstrap은 HTML / CSS / JS 위젯 및 반응 형 그리드의 집합)에 맞춰져 있습니다. 실제로 함께 사용할 수 있습니다 .

그러나 Bootstrap 등이 도움이 될 수는 없습니다. 알. 디자이너가 자신의 코드 브랜드를 숟가락으로 먹이는 데 방해가되는 목발 일뿐입니다. 따라서 제 3 자 솔루션에 전적으로 의존하는 소비자 기반을 잠그고 모든 것 또는 적어도 대부분의 기능입니다. Dreamweaver를 사용할 수있는 경우에만 웹 사이트를 디자인 할 수있는 사용자를 상기시킵니다. 또한 Dreamweaver에 액세스 할 수없고 변경이 필요한 경우 천국은 금지합니다.

부트 스트랩 소스에 대한 전체 액세스 권한이 있기 때문에 유추 할 수 없습니다. 작동 방식이 마음에 들지 않으면 변경할 수 있습니다. 저에게는 목발의 반대입니다. 소스 코드를 사용하여 CSS 기술 을 배울 수 있습니다 .

C 코더가 어셈블리 언어에 대한 친숙한 지식을 가지고 있어야한다고 생각하는 것보다 "웹 사이트 디자인"이 금속에 가까워 야한다는 데 동의하지 않습니다. HTML / CSS를 조정하는 것은 단순히 선택기를 확장하고 필요한 것을 추가하기 때문에 간단합니다.

누구든지 Bootstrap 또는 HTML5 Boilerplate과 같은 템플릿 시스템의 위대한 미덕을 내밀어 볼 수 있습니까?

나를 위해 Bootstrap의 킬러 기능은 일관되고 적용하기 쉬운 위젯 스타일 및 Javascript 구성 요소입니다. 버튼처럼 보이는 링크를 원하십니까? '.btn'클래스를 추가하십시오. 테이블을 원하십니까? '.table'클래스를 추가하십시오. 탐색 요소를 원하십니까? 순서가없는 목록을 설정하고 탐색 클래스를 추가하십시오.

드롭 다운, 팝 오버, 경고 등은 데이터 속성이있는 요소에 쉽게 추가됩니다. 부트 스트랩에는 위젯에 쉽게 통합 할 수있는 매우 멋진 아이콘 세트가 포함되어 있습니다.

무엇이 당신에게 가치가 있습니까?

• 사이트를 신속하게 프로토 타입 할 수 있습니다
• 크로스 브라우저 및 크로스 플랫폼 CSS의 모든 디버깅이 이루어졌습니다.
• 다양한 변수를 사용하여 CSS를 쉽게 사용자 정의하여 레이아웃을 신속하게 실험하고 프로토 타이핑 할 수 있습니다.
• 표준 탐색 위젯
• 소스 코드는 무료이며 무료이며, 새로운 믹스 인이 필요하거나 필요한 방식으로 동작을 변경하면 손이 더러워지고 LESS를 사용자 정의 할 수 있습니다.

사용하는 시스템에 대해 잘 알고 있으므로 쉽게 탐색하거나 항목을 찾아야합니까?

Bootstrap의 가장 큰 특징 중 하나는 훌륭한 문서 입니다. 쉽게 탐색 할 수 있으며 CSS 선택기는 직관적이며 기억하기 쉽습니다.

필요한 경우 사이트없이 사이트를 구축 할 수 있습니까?

네,하지만 분명히 더 많은 일입니다. 완성 된 모양의 위젯과 일관된 기능으로 UX에 집중하고 레이아웃을 신속하게 프로토 타입 할 수 있습니다.

하는 주형 시스템과 프레임 워크의 좋은 점은 그들이 당신에게 많은 시간을 절약 할 수 있다는 것입니다 IFF에 당신은 그들이 당신이 원하는 방식으로 작동합니다. 따라서 부트 스트랩을 사용하면 JS 회전 목마를 수행하기위한 의미를 익히면 구현하기가 거의 간단합니다. 또한 부트 스트랩은 시작하기 전에 직접 롤업 하거나 Rails의 부트 스트랩-사스 와 같은 것을 사용 하여 변수를 즉시 변경 하면 훨씬 간단 해 보입니다 . 나중에 모든 것을 변경하지 않아도됩니다.

DA01은 브라우저 일관성에 대해 이야기합니다. 그래서 많은 사람들이 SO를 사용하더라도 몇 가지 작업을 수행하기 위해 큰 라이브러리를 추가하면 리소스가 낭비된다고 생각하지만 jQuery를 사용하는 이유입니다. jQuery를 사용할 때 특정 브라우저 세트에서 작동하므로 자체적으로 더 가벼운 솔루션을 얻을 수는 있지만 jQuery가 어떻게 작성하고 싶은지 배우는 것이 더 유리하다는 것을 알고 있습니다. JavaScript를 사용한 다음 수행하십시오.

결국 HTML / CSS 프레임 워크를 제한적으로 찾는 경향이 있습니다. 나는 내가 할 수있을 때 여전히 손으로 코딩하고 싶은 제어 괴물이 충분합니다. 그러나 나는 사람들이 나보다 똑똑하고 더 진보하여 이러한 템플릿 / 프레임 워크를 설정하는 데 많은 시간을 보냈다는 사실을 존중합니다.

관심이 없다면 대기업의 대규모 팀에서 일하는 사람이 있습니까?

부트 스트랩과 같은 프레임 워크는 프로젝트 전체에서 일관된 코드 표준을 작성하는 데 환상적입니다. 새로운 개발자를 모집 할 때 인기있는 프레임 워크를 경험 한 사람들은 이미 구문에 익숙하고 훨씬 빠르게 생산성을 높일 수 있습니다 ... 대기업들에게 희소식.

또한 부트 스트랩과 같은 프레임 워크를 사용하면 더 많은 화면 크기, 더 많은 장치 및 더 나은 기능을 지원하여 부트 스트랩을 사용하는 회사와 같은 회사에 지속적으로 업데이트합니다.

지금까지 답변 중 일부를 읽으면 생각이 좁아 보입니다. 대부분의 답변은 혼자 또는 소규모 팀에서 일하는 데 익숙한 사람들과 소규모 프로젝트에서 일반적으로 문제가되지 않는 것으로 가정합니다. .

이전의 훌륭한 답변에서 언급 한 내용에 추가하면 이러한 템플릿의 또 다른 장점은 장치 간 일관성 입니다. 빌트인 그리드는 모든 OS를 설계하기가 매우 쉽습니다.

나는 여전히 다음과 같은 이유로 내 자신의 코드를 작성하는 것을 선호합니다.

• 내가 이미 쓴 것에 익숙합니다. 무엇이든 바꿀 필요가 있다면, 그것이 어디에 있는지 정확히 알고 있습니다.

• 프로젝트 중심 구조. 각각의 새로운 사이트 / 앱은 이전과 다른 요구를 가지므로 파일과 리소스를 별도로 구성해야 할 수도 있습니다.

• 다른 장치에 대한 사용자 정의 된보기.

매우 제한된 페이지를 만들지 않으면 새 요소에 점점 더 많은 스타일을 추가하고 기존 요소를 덮어 씁니다.

반응 형 디자인으로 작업하는 것을 좋아하기 때문에이를 사용하지 않는 주된 이유는 각 반응 형 단계를 "별도로"전체적으로 디자인하는 것을 선호하기 때문입니다. 그리고 이러한 템플릿은 일반적으로 완전히 조정할 수없는 다소 단단한 그리드에서 작동합니다.

가장 큰 장점은 사물이 어떻게 보일지 추측하는 대신 크기 조정을 직접 실험 할 수 있다는 것입니다.

나는 네비게이션을 실제로 코딩하고 텍스트 컨텐츠를 추가하는 매우 "컨텐츠 우선"개발 방식을 가지고있다. 디자인 단계에있을 때 예상치 못한 것들에 노출되는 경향이 있습니다.

Twitter Bootstrap과 같은 프레임 워크를 사용하면 디자인 상태에서 실제로 페이지를 테스트 할 수 있으며 사용성 문제 및 기타 사용자 경험 문제를 발견 할 수도 있습니다. 이 프레임 워크에는 재사용이 가능한 클래스가 많으므로 시간을 절약 할 수 있습니다.

처음부터 코드를 많이 작성했다고 언급했습니다. 매우 관습 적이거나 매우 가벼워 야 할 것이 있으면 Skeleton을 사용합니다

수년 동안 나는 모든 것을 수작업으로 코딩했지만 요즘에는 부트 스트랩을 사용하는 경향이 있습니다. 왜 그렇게합니까?

1. 작업이 거의없는 반응 형 레이아웃을 얻습니다. 내가 작업했던 일부 웹 사이트에서 태블릿 및 모바일에 최적화 된 레이아웃을 얻으려면 약간의 조정이 필요합니다. 반응 형 탐색 모음은 내가 가장 좋아하는 부트 스트랩 구성 요소 중 하나입니다.
2. 기본 컨트롤은 브라우저와 OS간에 일관되지 않으며 사용중인 OS 또는 브라우저에 관계없이 모두 추악합니다. 부트 스트랩을 사용하면 괜찮고 일관된 모양과 느낌이 거의 없습니다. 그래도 모든 컨트롤의 스타일을 바꾸려면 부트 스트랩이 많은 시간을 절약하지는 못하지만 내 경험에 따르면 대부분의 컨트롤을 다시 스타일링 할 시간이 충분하지 않지만 여전히 추악한 기본값에 짜증을 느낍니다. 통제 수단.
3. 순수한 CSS로 작업 할 때 모든 작은 물건 (색상, 테두리 두께, 그라디언트, 그림자, 테두리 반경, 조정)을 조정하려는 경향이 있기 때문에 원하는 작업에 제한이 있습니다. 개별적으로 시간이 거의 걸리지 않지만 전체적으로 주요 시간 싱크입니다. 마감일이있는 프로젝트에서 작업 할 때 할 수있는 것과 할 수없는 것을 제한하려고합니다. 프레임 워크를 사용하면 CSS 속성을 조정하는 대신 거친 구성 요소로 생각할 수 있습니다.
4. 일부 서버 측 프레임 워크는 부트 스트랩과 통합되어 있습니다. 예를 들어 django-bootstrap을 사용할 때 {{ form|as_bootstrap }}오류 메시지에 빨간색 강조 표시 등을 포함하여 양식 스타일 부트 스트랩 스타일을 얻으려면 할 수 있습니다 .

부트 스트랩을 변경하면서 80 % 이상의 시간이 어떤 클래스 나 ID가 어떤 것에 적용되는지 배우고 CSS에서 조정하는 것을 찾는 데 소비되었습니다.

그것이 당신이 잘못하는 곳입니다. 부트 스트랩의 혜택을 받으려면 너무 많이 사용자 정의하지 않아야합니다. 사전 구축 된 구성 요소를 사용할 때 모든 것을 조정하고 조정할 수있는 유연성을 포기합니다. IKEA 구성 요소로 방을 장식 할 때 목 재판을 톱질하거나 조각하는 데 시간을 소비해서는 안됩니다.

부트 스트랩은 사전 구축 된 구성 요소에서 작동하는 웹 사이트를 빠르게 패치해야 할 때 유용합니다. 멋진 디자인의 사이트에 배치하면 구성 요소가 아픈 엄지처럼 튀어 나오므로 일반적으로 이러한 종류의 프로젝트를 위해 Bootstrap을 삭제합니다.

미리 구성된 프런트 엔드 패키지를 사용한다는 것은 단순히 내 자신에 의존하기보다는 명명 규칙과 구조를 익혀야한다는 의미입니다.

실제로 인기있는 패키지를 사용하면 이점이 있습니다. 둘 다 "btn-group", "btn btn-large"가하는 일을 알고 개인 프레임 워크를 사용하여 사용자의 특성 (또는 더 일반적으로 캐스케이드)을 학습해야 할 경우 다른 개발자에게 프로젝트를 전달하는 것이 더 쉽습니다. 변경 사항이있는 CSS로 코드를 해독하거나 수정하려고하지 않습니다.)

사용하는 시스템에 대해 잘 알고 있으므로 쉽게 탐색하거나 항목을 찾아야합니까?

btn, table, row *, span * 등과 같은 일반적인 것은 자연적입니다. 그러나 주요 구성 요소의 html의 경우 입력하지 않고 예제에서 복사하여 붙여 넣는 것이 훨씬 빠릅니다.

필요한 경우 사이트없이 사이트를 구축 할 수 있습니까?

거기에 여러 번 있었어요.

그들은 단지 다음을 위해 좋다 :

1. 코딩에 익숙하지 않지만 디자인을 사이트로 가져 오는 솔루션을 원하는 디자이너.
2. 자체 프레임 워크를 구축하지 않으려는 사람을 위해 생산 라인을 간소화하는 방법.

개인적으로 나는 나 자신의 방법을 가지고 있으며 CSS, HTML 및 jQuery를 코딩하는 방법을 이미 배웠기 때문에이 길을 가고 싶지 않습니다. 나는 실마리가없고 코딩하는 법을 배우려고 노력하는 사람들에게 이것들에서 이점을 볼 수 있습니다. 5 년 전쯤에 이런 것을 보는 것이 좋았을 것입니다. 또한 언급했듯이 현재 생산 방법으로 구현하는 데 시간이 더 오래 걸립니다.

편집 : 스레드를 하이재킹하려고하지는 않지만 WordPress와 관련하여 동일한 내용을 궁금합니다. WordPress를 가볍게 사용했지만 프레임 워크가 유익한 지 모르겠습니다. 나는 큰 혜택을 찾을 수있을 때까지 구식으로 갈 계획이었습니다.

부트 스트랩은 반응 형 레이아웃의 시작점으로 적합합니다. 그러나 디자인이 진행되는 한 꽤 부족하다고 생각합니다. 템플릿이 너무 많이 사용되기 때문에 일종의 'bootstrappy'모양을 수행합니다.

그러나 부트 스트랩이 무엇인지를 염두에 두어야합니다. 트위터로 빌드 한 하우스 앱에 일관성을 부여하고, 그것을 사용하거나 심지어 웹에서 빠르게 스프 루 스하려는 개발자에게도 일관성을 가져야했습니다. 많은 생각없이 응용 프로그램, 아마도 mvp 또는 프로토 타입으로 정말 훌륭한 도구입니다.