חבילת CSS עבור תוספי עריכה

כדי שתוסף העריכה שלכם ייראה כמו Google Sheets, Docs, Slides או Forms, תוכלו ליצור קישור בחבילת ה-CSS שבהמשך כדי להחיל את העיצוב של Google על גופנים, לחצנים ורכיבי טופס. לקבלת דוגמה לחבילת ה-CSS שנמצאת בשימוש, ראו מדריך למתחילים לשימוש בתוספי Docs. כדי להשתמש בחבילת ה-CSS, צריך לכלול את הקוד הבא בחלק העליון של כל קובץ HTML:

<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">

שימו לב שלא ניתן לשלוט לחלוטין בסגנון של רכיבי הטופס בכל הדפדפנים. באופן ספציפי, רכיבי <select> מציגים כמה ארטיפקטים חזותיים ב-Firefox וב-Internet Explorer, אם כי הם עדיין פועלים כראוי. כדי לראות איך נראים הסגנונות בדפדפן מסוים, צריך רק לטעון את הדף באותו דפדפן.

טיפוגרפיה

השתמשו בגופן Arial לכל הטקסט, בסגנונות הבאים, בהתאם לשימוש:

שימוש ומראה סימון עם חבילת CSS 
<h1>Titles and headers</h1>
<b>Bold text</b>
Normal text
<a href="">Links</a>
<span class="current">Current navigation selection</span>
<span class="error">Form input errors</span>
<span class="gray">Gray text</span>
<span class="secondary">Secondary text</span>

לחצנים

אפשר להשתמש בכל אחד מסוגי הלחצנים הרגילים – <button>, <input type="button"> או <input type="submit">, וגם <a class="button">. לחצנים שנמצאים בסמוך לשטח מאופק באופן אוטומטי. יש כמה צבעים לשימושים שונים:

שימוש מראה סימון עם חבילת CSS
פעולה ראשית 
<button class="action">Translate</button>
פעולות משניות 
<button>Close</button>
יצירת פעולה 
<button class="create">Create</button>
שיתוף הפעולה 
<button class="share">Share</button>

תיבות סימון

דוגמה סימון עם חבילת CSS 
<div>
  <input type="checkbox" id="checkbox1" checked>
  <label for="checkbox1">Checked</label>
</div>
<div>
  <input type="checkbox" id="checkbox2">
  <label for="checkbox2">Unchecked</label>
</div>
<div>
  <input type="checkbox" id="checkbox3" checked disabled>
  <label for="checkbox3">Checked, disabled</label>
</div>
<div>
  <input type="checkbox" id="checkbox4" disabled>
  <label for="checkbox4">Unchecked, disabled</label>
</div>

לחצני בחירה

דוגמה סימון עם חבילת CSS 
<div>
  <input type="radio" name="radio-a" id="radio1" checked>
  <label for="radio1">Checked</label>
</div>
<div>
  <input type="radio" name="radio-a" id="radio2">
  <label for="radio2">Unchecked</label>
</div>
<div>
  <input type="radio" name="radio-b" id="radio3"
      checked disabled>
  <label for="radio3">Checked, disabled</label>
</div>
<div>
  <input type="radio" name="radio-b" id="radio4" disabled>
  <label for="radio4">Unchecked, disabled</label>
</div>

בחירת תפריטים

דוגמה סימון עם חבילת CSS 
<div class="block form-group">
  <label for="select">Select</label>
  <select id="select">
    <option selected>Google Docs</option>
    <option>Google Forms</option>
    <option>Google Sheets</option>
  </select>
</div>
<div class="block form-group">
  <label for="disabled-select">Disabled select</label>
  <select id="disabled-select" disabled>
    <option selected>Google Docs</option>
    <option>Google Forms</option>
    <option>Google Sheets</option>
  </select>
</div>

אזורי טקסט

דוגמה סימון עם חבילת CSS 
<div class="form-group">
  <label for="sampleTextArea">Label</label>
  <textarea id="sampleTextArea" rows="3"></textarea>
</div>

שדות טקסט

דוגמה סימון עם חבילת CSS 
<div class="inline form-group">
  <label for="city">City</label>
  <input type="text" id="city" style="width: 150px;">
</div>
<div class="inline form-group">
  <label for="state">State</label>
  <input type="text" id="state" style="width: 40px;">
</div>
<div class="inline form-group">
  <label for="zip-code">Zip code</label>
  <input type="text" id="zip-code" style="width: 65px;">
</div>

הסגנון של סרגלי צד יכול להיות מסובך, כי הגובה תמיד משתנה, אבל תוספים רבים צריכים לכלול אזור מיתוג שלא גולל. בהמשך מופיע עותק פשוט של סרגל הצד מהמדריך למתחילים של תוסף Google Docs. אם גוררים את הפינה השמאלית התחתונה של אזור הטקסט כדי שהתוכן יהיה גבוה יותר מסרגל הצד, אזור התוכן נגלל באופן אוטומטי, אבל המיתוג שבתחתית לא יתקדם.

בדוגמה השתמשנו במחלקה sidebar כדי להחיל את המרווח הנכון, ובסיווג bottom כדי לאלץ את אזור המיתוג למטה. מחלקה מקומית, branding-below, מגדירה את האזור שהאזור הראשי בסרגל הצד צריך להשאיר ריק מלמטה.

דוגמה סימון עם חבילת CSS 
<style>
.branding-below {
  bottom: 56px;
  top: 0;
}
</style>

<div class="sidebar branding-below">
  <div class="block form-group">
    <label for="translated-text">
      <b>Translation</b></label>
    <textarea id="translated-text" rows="15">
    </textarea>
  </div>

  <div class="block">
    <input type="checkbox" id="save-prefs">
    <label for="save-prefs">
      Use these languages by default</label>
  </div>

 <div class="block">
    <button class="blue">Translate</button>
    <button>Insert</button>
  </div>
</div>

<div class="sidebar bottom">
  <span class="gray">
    Translate sample by Google</span>
</div>